mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2024-11-25 06:56:38 +00:00
MongoDocumentsTab.html was not used here (#582)
This commit is contained in:
Jordi Bunster
GitHub
parent
ca7cd139ba
commit
8cc04bab87
@ -11,7 +11,6 @@ import { NewVertexComponent } from "./Graph/NewVertexComponent/NewVertexComponen
|
||||
import { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3";
|
||||
|
||||
import DocumentsTab from "./Tabs/DocumentsTab";
|
||||
import MongoDocumentsTab from "./Tabs/MongoDocumentsTab";
|
||||
import StoredProcedureTab from "./Tabs/StoredProcedureTab";
|
||||
import TriggerTab from "./Tabs/TriggerTab";
|
||||
import UserDefinedFunctionTab from "./Tabs/UserDefinedFunctionTab";
|
||||
@ -42,7 +41,6 @@ ko.components.register("tabs-manager", { template: TabsManagerTemplate });
|
||||
// Collection Tabs
|
||||
[
|
||||
DocumentsTab,
|
||||
MongoDocumentsTab,
|
||||
StoredProcedureTab,
|
||||
TriggerTab,
|
||||
UserDefinedFunctionTab,
|
||||
|
||||
@ -1,426 +0,0 @@
|
||||
<div
|
||||
class="tab-pane active tabdocuments flexContainer"
|
||||
data-bind="
|
||||
attr:{
|
||||
id: tabId
|
||||
},
|
||||
visible: isActive"
|
||||
role="tabpanel"
|
||||
>
|
||||
<!-- Documents Tab Command Bar - Start -->
|
||||
<div class="contentdiv">
|
||||
<div class="tabCommandButton documentMenu">
|
||||
<!-- New Document - Start -->
|
||||
<span
|
||||
class="commandButton"
|
||||
data-bind="
|
||||
click: onNewDocumentClick,
|
||||
visible: newDocumentButton.visible() && newDocumentButton.enabled()"
|
||||
>
|
||||
<img class="commandIcon" src="/createDoc.svg" />New Document
|
||||
</span>
|
||||
<span
|
||||
class="commandButton tabCommandDisabled"
|
||||
data-bind="
|
||||
visible: newDocumentButton.visible() && !newDocumentButton.enabled()"
|
||||
>
|
||||
<img class="commandIcon" src="/createDoc-disabled.svg" />New Document
|
||||
</span>
|
||||
<!-- New Document - End -->
|
||||
|
||||
<!-- New Query - Start -->
|
||||
<span
|
||||
class="commandButton"
|
||||
data-bind="
|
||||
visible: !$root.isPreferredApiMongoDB,
|
||||
click: collection.onNewQueryClick"
|
||||
>
|
||||
<img class="commandIcon" src="/AddSqlQuery_16x16.svg" /> New SQL Query
|
||||
</span>
|
||||
<span
|
||||
class="commandButton"
|
||||
data-bind="
|
||||
visible: $root.isPreferredApiMongoDB,
|
||||
click: collection.onNewMongoQueryClick"
|
||||
>
|
||||
<img class="commandIcon" src="/AddSqlQuery_16x16.svg" /> New Query
|
||||
</span>
|
||||
<!-- New Query - End -->
|
||||
|
||||
<!-- Save New - Start -->
|
||||
<span
|
||||
class="commandButton"
|
||||
data-bind="
|
||||
click: onSaveNewDocumentClick,
|
||||
visible: saveNewDocumentButton.visible() && saveNewDocumentButton.enabled()"
|
||||
>
|
||||
<img class="imgiconwidth" src="/save-cosmos.svg" />Save
|
||||
</span>
|
||||
<span
|
||||
class="commandButton tabCommandDisabled"
|
||||
data-bind="
|
||||
visible: saveNewDocumentButton.visible() && !saveNewDocumentButton.enabled()"
|
||||
>
|
||||
<img class="imgiconwidth" src="/save-disabled.svg" />Save
|
||||
</span>
|
||||
<!-- Save New - End -->
|
||||
|
||||
<!-- Discard New - Start -->
|
||||
<span
|
||||
class="commandButton"
|
||||
data-bind="
|
||||
click: onRevertNewDocumentClick,
|
||||
visible: discardNewDocumentChangesButton.visible() && discardNewDocumentChangesButton.enabled()"
|
||||
>
|
||||
<img class="imgiconwidth" src="/discard.svg" />Discard
|
||||
</span>
|
||||
<span
|
||||
class="commandButton tabCommandDisabled"
|
||||
data-bind="
|
||||
visible: discardNewDocumentChangesButton.visible() && !discardNewDocumentChangesButton.enabled()"
|
||||
>
|
||||
<img class="imgiconwidth" src="/discard-disabled.svg" />Discard
|
||||
</span>
|
||||
<!-- Discard New - End -->
|
||||
|
||||
<!-- Save Exisiting - Start -->
|
||||
<span
|
||||
class="commandButton"
|
||||
data-bind="
|
||||
click: onSaveExisitingDocumentClick,
|
||||
visible: saveExisitingDocumentButton.visible() && saveExisitingDocumentButton.enabled()"
|
||||
>
|
||||
<img class="imgiconwidth" src="/save-cosmos.svg" />Update
|
||||
</span>
|
||||
<span
|
||||
class="commandButton tabCommandDisabled"
|
||||
data-bind="
|
||||
visible: saveExisitingDocumentButton.visible() && !saveExisitingDocumentButton.enabled()"
|
||||
>
|
||||
<img class="imgiconwidth" src="/save-disabled.svg" />Update
|
||||
</span>
|
||||
<!-- Save Exisiting - End -->
|
||||
|
||||
<!-- Discard Exisiting - Start -->
|
||||
<span
|
||||
class="commandButton"
|
||||
data-bind="
|
||||
click: onRevertExisitingDocumentClick,
|
||||
visible: discardExisitingDocumentChangesButton.visible() && discardExisitingDocumentChangesButton.enabled()"
|
||||
>
|
||||
<img class="imgiconwidth" src="/discard.svg" />Discard
|
||||
</span>
|
||||
<span
|
||||
class="commandButton tabCommandDisabled"
|
||||
data-bind="
|
||||
visible: discardExisitingDocumentChangesButton.visible() && !discardExisitingDocumentChangesButton.enabled()"
|
||||
>
|
||||
<img class="imgiconwidth" src="/discard-disabled.svg" />Discard
|
||||
</span>
|
||||
<!-- Discard Exisiting - End -->
|
||||
|
||||
<!-- Delete Exisiting - Start -->
|
||||
<span
|
||||
class="commandButton"
|
||||
data-bind="
|
||||
click: onDeleteExisitingDocumentClick,
|
||||
visible: deleteExisitingDocumentButton.visible() && deleteExisitingDocumentButton.enabled()"
|
||||
>
|
||||
<img class="imgiconwidth" src="/delete.svg" />Delete
|
||||
</span>
|
||||
<span
|
||||
class="commandButton tabCommandDisabled"
|
||||
data-bind="
|
||||
visible: deleteExisitingDocumentButton.visible() && !deleteExisitingDocumentButton.enabled()"
|
||||
>
|
||||
<img class="imgiconwidth" src="/delete-disabled.svg" />Delete
|
||||
</span>
|
||||
<!-- Delete Exisiting - End -->
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/html" id="toolbarItemTemplate">
|
||||
<!-- ko if: type === "action" -->
|
||||
<div class="toolbar-group" data-bind="visible: visible">
|
||||
<button
|
||||
class="toolbar-group-button"
|
||||
data-bind="hasFocus: focused, attr: {id: id, title: title, 'aria-label': displayName}, event: { mousedown: mouseDown, keydown: keyDown, keyup: keyUp }, enable: enabled"
|
||||
>
|
||||
<div class="toolbar-group-button-icon">
|
||||
<div class="toolbar_icon" data-bind="icon: icon"></div>
|
||||
</div>
|
||||
<span data-bind="text: displayName"></span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: type === "toggle" -->
|
||||
<div class="toolbar-group" data-bind="visible: visible">
|
||||
<button
|
||||
class="toolbar-group-button toggle-button"
|
||||
data-bind="hasFocus: focused, attr: {id: id, title: title}, event: { mousedown: mouseDown, keydown: keyDown, keyup: keyUp }, enable: enabled"
|
||||
>
|
||||
<div class="toolbar-group-button-icon" data-bind="css: { 'toggle-checked': checked }">
|
||||
<div class="toolbar_icon" data-bind="icon: icon"></div>
|
||||
</div>
|
||||
<span data-bind="text: displayName"></span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
<!-- ko if: type === "dropdown" -->
|
||||
<div class="toolbar-group" data-bind="visible: visible">
|
||||
<div class="dropdown" data-bind="attr: {id: (id + '-dropdown')}">
|
||||
<button
|
||||
role="menu"
|
||||
class="toolbar-group-button"
|
||||
data-bind="hasFocus: focused, attr: {id: id, title: title, 'aria-label': displayName}, event: { mousedown: mouseDown, keydown: keyDown, keyup: keyUp }, enable: enabled"
|
||||
>
|
||||
<div class="toolbar-group-button-icon">
|
||||
<div class="toolbar_icon" data-bind="icon: icon"></div>
|
||||
</div>
|
||||
<span data-bind="text: displayName"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: type === "separator" -->
|
||||
<div class="toolbar-group vertical-separator" data-bind="visible: visible"></div>
|
||||
<!-- /ko -->
|
||||
</script>
|
||||
<!-- Documents Tab Command Bar - End -->
|
||||
<!-- ko if: false -->
|
||||
<!-- Messagebox Ok Cancel- Start -->
|
||||
<div class="messagebox-background">
|
||||
<div class="messagebox">
|
||||
<h2 class="messagebox-title">Title</h2>
|
||||
<div class="messagebox-text" tabindex="0">Text</div>
|
||||
<div class="messagebox-buttons">
|
||||
<div class="messagebox-buttons-container">
|
||||
<button value="ok" class="messagebox-button-primary">Ok</button>
|
||||
<button value="cancel" class="messagebox-button-default">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Messagebox OK Cancel - End -->
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- Filter - Start -->
|
||||
<div class="filterdivs">
|
||||
<!-- Read-only Filter - Start -->
|
||||
<div
|
||||
class="filterDocCollapsed"
|
||||
data-bind="
|
||||
visible: !isFilterExpanded() && !$root.isPreferredApiMongoDB()"
|
||||
>
|
||||
SELECT * FROM c
|
||||
<span
|
||||
data-bind="
|
||||
text: appliedFilter"
|
||||
></span>
|
||||
<button
|
||||
class="filterbtnstyle queryButton"
|
||||
data-bind="
|
||||
click: onShowFilterClick"
|
||||
>
|
||||
Edit Filter
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="filterDocCollapsed"
|
||||
data-bind="
|
||||
visible: !isFilterExpanded() && $root.isPreferredApiMongoDB()"
|
||||
>
|
||||
<span
|
||||
data-bind="
|
||||
visible: appliedFilter().length > 0"
|
||||
>Filter :
|
||||
</span>
|
||||
<span
|
||||
data-bind="
|
||||
visible: !appliedFilter().length > 0"
|
||||
>No filter applied</span
|
||||
>
|
||||
<span
|
||||
data-bind="
|
||||
text: appliedFilter"
|
||||
></span>
|
||||
<button
|
||||
class="filterbtnstyle queryButton"
|
||||
data-bind="
|
||||
click: onShowFilterClick"
|
||||
>
|
||||
Edit Filter
|
||||
</button>
|
||||
</div>
|
||||
<!-- Read-only Filter - End -->
|
||||
|
||||
<!-- Editable Filter - start -->
|
||||
<div
|
||||
class="filterDocExpanded"
|
||||
data-bind="
|
||||
visible: isFilterExpanded"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<span
|
||||
class="filterspan"
|
||||
data-bind="
|
||||
visible: !$root.isPreferredApiMongoDB()"
|
||||
>
|
||||
SELECT * FROM c
|
||||
</span>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
list="filtersList"
|
||||
class="querydropdown"
|
||||
title="Type a query predicate or choose one from the list."
|
||||
data-bind="
|
||||
attr:{
|
||||
placeholder:$root.isPreferredApiMongoDB()?'Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents.':'Type a query predicate (e.g., WHERE c.id=´1´), or choose one from the drop down list, or leave empty to query all documents.'
|
||||
},
|
||||
textInput: filterContent"
|
||||
/>
|
||||
|
||||
<datalist
|
||||
id="filtersList"
|
||||
data-bind="
|
||||
foreach: lastFilterContents"
|
||||
>
|
||||
<option
|
||||
data-bind="
|
||||
value: $data"
|
||||
></option>
|
||||
</datalist>
|
||||
|
||||
<span class="filterbuttonpad">
|
||||
<button
|
||||
class="filterbtnstyle queryButton"
|
||||
data-bind="
|
||||
click: refreshDocumentsGrid,
|
||||
enable: applyFilterButton.enabled"
|
||||
>
|
||||
Apply Filter
|
||||
</button>
|
||||
</span>
|
||||
<span
|
||||
class="filterclose"
|
||||
data-bind="
|
||||
click: onHideFilterClick"
|
||||
>
|
||||
<img src="/close-black.svg" style="height: 14px; width: 14px" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Editable Filter - End -->
|
||||
</div>
|
||||
<!-- Filter - End -->
|
||||
|
||||
<!-- Ids and Editor - Start -->
|
||||
<div>
|
||||
<div class="row rowoverride documentsTabGridAndEditor">
|
||||
<div class="documentsGridHeaderContainer documentsContainer">
|
||||
<!-- ko if: !partitionKeyProperty -->
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<!-- ko if: $root.isPreferredApiMongoDB -->
|
||||
<td class="documentsGridHeader">_id</td>
|
||||
<!-- /ko -->
|
||||
<!-- ko if: !$root.isPreferredApiMongoDB() -->
|
||||
<td class="documentsGridHeader">id</td>
|
||||
<!-- /ko -->
|
||||
<td class="refreshColHeader">
|
||||
<img class="refreshcol" src="/refresh-cosmos.svg" data-bind="click: refreshDocumentsGrid" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: partitionKeyProperty -->
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="documentsGridHeader fixedWidthHeader">_id</td>
|
||||
<td
|
||||
class="documentsGridHeader documentsGridPartition"
|
||||
data-bind="
|
||||
attr: {
|
||||
title: partitionKeyPropertyHeader
|
||||
},
|
||||
text: partitionKeyPropertyHeader"
|
||||
></td>
|
||||
<td class="refreshColHeader">
|
||||
<img class="refreshcol" src="/refresh-cosmos.svg" data-bind="click: refreshDocumentsGrid" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- /ko -->
|
||||
</div>
|
||||
<!-- Document Ids - Start -->
|
||||
<div
|
||||
class="tabdocuments scrollable"
|
||||
data-bind="
|
||||
attr: {
|
||||
id: documentContentsGridId,
|
||||
tabindex: collection.documentIds().length <= 0 ? -1 : 0
|
||||
},
|
||||
style: { height: dataContentsGridScrollHeight },
|
||||
event: { keydown: accessibleDocumentList.onKeyDown }"
|
||||
>
|
||||
<table class="table can-select table-hover dataTable">
|
||||
<tbody id="tbodycontent">
|
||||
<!-- ko foreach: documentIds -->
|
||||
<tr
|
||||
class="pointer accessibleListElement"
|
||||
data-bind="
|
||||
click: $data.click,
|
||||
css: {
|
||||
gridRowSelected: $parent.selectedDocumentId && $parent.selectedDocumentId() && $parent.selectedDocumentId().rid === $data.rid,
|
||||
gridRowHighlighted: $parent.accessibleDocumentList.currentItem() && $parent.accessibleDocumentList.currentItem().rid === $data.rid
|
||||
}"
|
||||
>
|
||||
<td style="width: 82px">
|
||||
<a
|
||||
data-bind="
|
||||
text: $data.id, attr: { title: $data.id }"
|
||||
></a>
|
||||
</td>
|
||||
<!-- ko if: $data.partitionKeyProperty -->
|
||||
<td><a data-bind="text: $data.partitionKeyValue, attr: { title: $data.partitionKeyValue }"></a></td>
|
||||
<!-- /ko -->
|
||||
</tr>
|
||||
<!-- /ko -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="loadMore">
|
||||
<a role="button" data-bind="click: loadNextPage, event: { keypress: onLoadMoreKeyInput }" tabindex="0"
|
||||
>Load more</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Document Ids - End -->
|
||||
|
||||
<!-- Editor - Start -->
|
||||
<div id="divcontent" style="float: left; width: calc(100% - 200px)">
|
||||
<div
|
||||
style="height: 100vh; border-left: 1px solid #d6d7d8; float: initial; display: flow-root !important"
|
||||
data-bind="
|
||||
attr: {
|
||||
id: documentEditorId
|
||||
},
|
||||
css: {
|
||||
mongoDocumentEditor:$root.isPreferredApiMongoDB()
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<!-- Editor - End -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- Ids and Editor - End -->
|
||||
</div>
|
||||
@ -20,10 +20,8 @@ import { extractPartitionKey } from "@azure/cosmos";
|
||||
import * as Logger from "../../Common/Logger";
|
||||
import { PartitionKeyDefinition } from "@azure/cosmos";
|
||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import template from "./MongoDocumentsTab.html";
|
||||
|
||||
export default class MongoDocumentsTab extends DocumentsTab {
|
||||
public static readonly component = { name: "mongo-documents-tab", template };
|
||||
public collection: ViewModels.Collection;
|
||||
private continuationToken: string;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user