mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2024-12-02 10:27:02 +00:00
250 lines
12 KiB
HTML
250 lines
12 KiB
HTML
<div
|
|
class="tab-pane tableContainer"
|
|
data-bind="
|
|
attr:{
|
|
id: tabId
|
|
}"
|
|
role="tabpanel"
|
|
>
|
|
<!-- Tables Query Tab Query Builder - Start-->
|
|
<div
|
|
class="query-builder"
|
|
data-bind="with: queryViewModel, attr: {
|
|
id: queryViewModel.id
|
|
}"
|
|
>
|
|
<!-- Tables Query Tab Errors - Start-->
|
|
<div class="error-bar">
|
|
<div class="error-message" aria-label="Error Message" data-bind="visible: hasQueryError">
|
|
<span><img class="entity-error-Img" src="/error_red.svg"/></span>
|
|
<span class="error-text" data-bind="text: queryErrorMessage"></span>
|
|
</div>
|
|
</div>
|
|
<!-- Tables Query Tab Errors - End-->
|
|
<!-- Tables Query Tab Query Text - Start-->
|
|
<div class="query-editor-panel" data-bind="visible: isEditorActive">
|
|
<div>
|
|
<textarea
|
|
class="query-editor-text"
|
|
data-bind="textInput: queryText,
|
|
css: { 'query-editor-text-invalid': hasQueryError },
|
|
readOnly: true"
|
|
name="query-editor"
|
|
rows="5"
|
|
cols="100"
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
<!-- Tables Query Tab Query Text - End-->
|
|
<!-- Tables Query Tab Query Helper - Start-->
|
|
<div data-bind="visible: isHelperActive" style="padding-left:13px">
|
|
<div class="clause-table" data-bind="with: queryBuilderViewModel ">
|
|
<div class="scroll-box scrollable" id="scroll">
|
|
<table class="clause-table">
|
|
<thead>
|
|
<tr class="clause-table-row">
|
|
<th class="clause-table-cell header-background action-header">
|
|
<span data-bind="text: actionLabel"></span>
|
|
</th>
|
|
<th class="clause-table-cell header-background group-control-header">
|
|
<button
|
|
type="button"
|
|
data-bind="enable: canGroupClauses, attr:{title: groupSelectedClauses}, click: groupClauses"
|
|
>
|
|
<img class="and-or-svg" src="/And-Or.svg" alt="Group selected clauses" />
|
|
</button>
|
|
</th>
|
|
<th class="clause-table-cell header-background"><!-- Grouping indicator --></th>
|
|
<th class="clause-table-cell header-background and-or-header">
|
|
<span data-bind="text: andLabel"></span>
|
|
</th>
|
|
<th class="clause-table-cell header-background field-header">
|
|
<span data-bind="text: fieldLabel"></span>
|
|
</th>
|
|
<th class="clause-table-cell header-background type-header">
|
|
<span data-bind="text: dataTypeLabel"></span>
|
|
</th>
|
|
<th class="clause-table-cell header-background operator-header">
|
|
<span data-bind="text: operatorLabel"></span>
|
|
</th>
|
|
<th class="clause-table-cell header-background value-header">
|
|
<span data-bind="text: valueLabel"></span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody data-bind="template: { name: 'queryClause-template', foreach: clauseArray, as: 'clause' }"></tbody>
|
|
</table>
|
|
</div>
|
|
<div
|
|
class="addClause"
|
|
role="button"
|
|
data-bind="click: addNewClause, event: { keydown: onAddNewClauseKeyDown }, attr: { title: addNewClauseLine }"
|
|
tabindex="0"
|
|
>
|
|
<div class="addClause-heading">
|
|
<span class="clause-table addClause-title">
|
|
<img
|
|
class="addclauseProperty-Img"
|
|
style="margin-bottom:5px;"
|
|
src="/Add-property.svg"
|
|
alt="Add new clause"
|
|
/>
|
|
<span style="margin-left:5px;" data-bind="text: addNewClauseLine"></span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Tables Query Tab Query Helper - End-->
|
|
<!-- Tables Query Tab Advanced Options - Start-->
|
|
<div class="advanced-options-panel">
|
|
<div class="advanced-heading">
|
|
<span
|
|
class="advanced-title"
|
|
role="button"
|
|
data-bind="click:toggleAdvancedOptions, event: { keydown: ontoggleAdvancedOptionsKeyDown }, attr:{ 'aria-expanded': isExpanded() ? 'true' : 'false' }"
|
|
tabindex="0"
|
|
>
|
|
<!-- ko template: { ifnot: isExpanded} -->
|
|
<div class="themed-images" type="text/html" id="ExpandChevronRight" data-bind="hasFocus: focusExpandIcon">
|
|
<img class="imgiconwidth expand-triangle expand-triangle-right " src="/Triangle-right.svg" alt="toggle" />
|
|
</div>
|
|
<!-- /ko -->
|
|
<!-- ko template: { if: isExpanded} -->
|
|
<div class="themed-images" type="text/html" id="ExpandChevronDown">
|
|
<img class="imgiconwidth expand-triangle" src="/Triangle-down.svg" alt="toggle" />
|
|
</div>
|
|
<!-- /ko -->
|
|
<span>Advanced Options</span>
|
|
</span>
|
|
</div>
|
|
<div class="advanced-options" data-bind="visible: isExpanded">
|
|
<div class="top">
|
|
<span>Show top results:</span>
|
|
<input
|
|
class="top-input"
|
|
type="number"
|
|
data-bind="hasFocus: focusTopResult, textInput: topValue, attr: { title: topValueLimitMessage }"
|
|
role="textbox"
|
|
aria-label="Show top results"
|
|
/>
|
|
<div role="alert" aria-atomic="true" class="inline-div" data-bind="visible: isExceedingLimit">
|
|
<img class="advanced-options-icon" src="/QueryBuilder/StatusWarning_16x.png" />
|
|
<span data-bind="text: topValueLimitMessage"></span>
|
|
</div>
|
|
</div>
|
|
<div class="select">
|
|
<span> Select fields for query: </span>
|
|
<div data-bind="visible: isSelected">
|
|
<img class="advanced-options-icon" src="/QueryBuilder/QueryInformation_16x.png" />
|
|
<span class="select-options-text" data-bind="text: selectMessage" />
|
|
</div>
|
|
<a
|
|
class="select-options-link"
|
|
data-bind="click: selectQueryOptions, event: { keydown: onselectQueryOptionsKeyDown }"
|
|
tabindex="0"
|
|
role="link"
|
|
>
|
|
<span>Choose Columns... </span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Tables Query Tab Advanced Options - End-->
|
|
</div>
|
|
<!-- Tables Query Tab Query Builder - End-->
|
|
<div
|
|
class="tablesQueryTab tableContainer"
|
|
data-bind="with: tableEntityListViewModel, attr: {
|
|
id: tableEntityListViewModel.id
|
|
}"
|
|
>
|
|
<!-- Keyboard navigation - tabindex is required to make the table focusable. -->
|
|
<table
|
|
id="storageTable"
|
|
class="storage azure-table show-gridlines"
|
|
tabindex="0"
|
|
data-bind="tableSource: items, tableSelection: selected"
|
|
></table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Script for each clause in the tables query builder -->
|
|
<script type="text/html" id="queryClause-template">
|
|
<tr class="clause-table-row">
|
|
<td class="clause-table-cell action-column">
|
|
<span class="entity-Add-Cancel" role="button" tabindex="0" data-bind="click: $parent.addClauseIndex.bind($data, $index()), event: { keydown: $parent.onAddClauseKeyDown.bind($data, $index()) }, attr:{title: $parent.insertNewFilterLine}">
|
|
<img class="querybuilder-addpropertyImg" src="/Add-property.svg" alt="Add clause">
|
|
</span>
|
|
<span class="entity-Add-Cancel" role="button" tabindex="0" data-bind="hasFocus: isDeleteButtonFocused, click: $parent.deleteClause.bind($data, $index()), event: { keydown: $parent.onDeleteClauseKeyDown.bind($data, $index()) }, attr:{title: $parent.removeThisFilterLine}">
|
|
<img class="querybuilder-cancelImg" src="/Entity_cancel.svg" alt="Delete clause">
|
|
</span>
|
|
</td>
|
|
<td class="clause-table-cell group-control-column">
|
|
<input type="checkbox" aria-label="And/Or" data-bind="checked: checkedForGrouping"/>
|
|
</td>
|
|
<td>
|
|
<table class="group-indicator-table">
|
|
<tbody>
|
|
<tr data-bind="template: { name: 'groupIndicator-template', foreach: $parent.getClauseGroupViewModels($data), as: 'gi' }">
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</td>
|
|
<td class="clause-table-cell and-or-column">
|
|
<select class="clause-table-field and-or-column" data-bind="hasFocus: isAndOrFocused, options: $parent.clauseRules, value: and_or, visible: canAnd, attr:{ 'aria-label': and_or }">
|
|
</select>
|
|
</td>
|
|
<td class="clause-table-cell field-column" data-bind="click: $parent.updateColumnOptions">
|
|
<select class="clause-table-field field-column" data-bind="options: $parent.columnOptions, value: field, attr:{ 'aria-label': field }">
|
|
</select>
|
|
</td>
|
|
<td class="clause-table-cell type-column">
|
|
<select class="clause-table-field type-column" data-bind="
|
|
options: $parent.edmTypes,
|
|
enable: isTypeEditable,
|
|
value: type,
|
|
css: {'query-builder-isDisabled': !isTypeEditable()},
|
|
attr: { 'aria-label': type }">
|
|
</select>
|
|
</td>
|
|
<td class="clause-table-cell operator-column">
|
|
<select class="clause-table-field operator-column" data-bind="
|
|
options: $parent.operators,
|
|
enable: isOperaterEditable,
|
|
value: operator,
|
|
css: {'query-builder-isDisabled': !isOperaterEditable()},
|
|
attr: { 'aria-label': operator }">
|
|
</select>
|
|
</td>
|
|
<td class="clause-table-cell value-column">
|
|
<!-- ko template: {if: isValue} -->
|
|
<input type="text" class="clause-table-field value-column" type="search" data-bind="textInput: value, attr: {'aria-label': $parent.valueLabel}" />
|
|
<!-- /ko -->
|
|
|
|
<!-- ko template: {if: isTimestamp} -->
|
|
<select class="clause-table-field time-column" data-bind="options: $parent.timeOptions, value: timeValue">
|
|
</select>
|
|
<!-- /ko -->
|
|
|
|
<!-- ko template: {if: isCustomLastTimestamp} -->
|
|
<input class="clause-table-field time-column" data-bind="value: customTimeValue, click: customTimestampDialog" />
|
|
<!-- /ko -->
|
|
<!-- ko template: {if: isCustomRangeTimestamp} -->
|
|
<input class="clause-table-field time-column" type="datetime-local" step=1 data-bind="value: customTimeValue" />
|
|
<!-- /ko -->
|
|
</td>
|
|
</tr>
|
|
</script>
|
|
|
|
<!-- Script for each clause group in the tables query builder -->
|
|
<script type="text/html" id="groupIndicator-template">
|
|
<td class="group-indicator-column" data-bind="style: {backgroundColor: gi.backgroundColor, borderTop: gi.showTopBorder.peek() ? 'solid thin #CCCCCC' : 'none', borderLeft: gi.showLeftBorder.peek() ? 'solid thin #CCCCCC' : 'none', borderBottom: gi.showBottomBorder.peek() ? 'solid thin #CCCCCC' : gi.borderBackgroundColor}">
|
|
<!-- ko template: {if: gi.canUngroup} -->
|
|
<button type="button" data-bind="click: ungroupClauses, attr: {title: ungroupClausesLabel}">
|
|
<img src="/QueryBuilder/UngroupClause_16x.png" alt="Ungroup clauses"/>
|
|
</button>
|
|
<!-- /ko -->
|
|
</td>
|
|
</script>
|