random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Refactor code

This commit is contained in:
sunilyadav840 2021-07-08 17:37:18 +05:30
parent f4a24610fe
commit bbae8ae301
11 changed files with 84 additions and 423 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Common/QueriesClient.ts
View File

@ -2,7 +2,7 @@ import * as _ from "underscore";
import * as DataModels from "../Contracts/DataModels";
import * as ViewModels from "../Contracts/ViewModels";
import Explorer from "../Explorer/Explorer";
import DocumentsTab from "../Explorer/Tabs/DocumentsTab1";
import DocumentsTab from "../Explorer/Tabs/DocumentsTab";
import DocumentId from "../Explorer/Tree/DocumentId";
import { userContext } from "../UserContext";
import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";

4
src/Explorer/Panes/UploadItemsPane/__snapshots__/UploadItemsPane.test.tsx.snap
View File

@ -15,7 +15,9 @@ exports[`Upload Items Pane should render Default properly 1`] = `
multiple={true}
onUpload={[Function]}
tabIndex={0}
tooltip="Select one or more JSON files to upload. Each file can contain a single JSON document or an array of JSON documents. The combined size of all files in an individual upload operation must be less than 2 MB. You can perform multiple upload operations for larger data sets."
tooltip="Select one or more JSON files to upload. Each file can contain a single JSON document or an array of JSON
documents. The combined size of all files in an individual upload operation must be less than 2 MB. You
can perform multiple upload operations for larger data sets."
/>
</div>
</RightPaneForm>

42
src/Explorer/Tabs/DocumentTabUtils.tsx
View File

@ -1,8 +1,35 @@
import { extractPartitionKey, PartitionKeyDefinition } from "@azure/cosmos";
import { IColumn, IImageProps, ImageFit } from "@fluentui/react";
import { Resource } from "../../../src/Contracts/DataModels";
import * as DataModels from "../../Contracts/DataModels";
import DocumentId from "../Tree/DocumentId";
export interface IDocumentsTabContentState {
columns: IColumn[];
isModalSelection: boolean;
isCompactMode: boolean;
announcedMessage?: string;
isSuggestionVisible: boolean;
filter: string;
isFilterOptionVisible: boolean;
isEditorVisible: boolean;
documentContent: string;
documentIds: Array<DocumentId>;
documentSqlIds: Array<Resource>;
editorKey: string;
selectedDocumentId?: DocumentId;
selectedSqlDocumentId?: Resource;
isEditorContentEdited: boolean;
isAllDocumentsVisible: boolean;
}
export const imageProps: Partial<IImageProps> = {
imageFit: ImageFit.centerContain,
width: 40,
height: 40,
style: { marginTop: "15px" },
};
export function hasShardKeySpecified(
document: string,
partitionKey: DataModels.PartitionKey,
@ -75,10 +102,10 @@ export function getFilterSuggestions(isPreferredApiMongoDB: boolean): { value: s
const filterSuggestions = isPreferredApiMongoDB
? [{ value: `{"id": "foo"}` }, { value: "{ qty: { $gte: 20 } }" }]
: [
{ value: 'WHERE c.id = "foo"' },
{ value: "ORDER BY c._ts DESC" },
{ value: 'WHERE c.id = "foo" ORDER BY c._ts DESC' },
];
{ value: 'WHERE c.id = "foo"' },
{ value: "ORDER BY c._ts DESC" },
{ value: 'WHERE c.id = "foo" ORDER BY c._ts DESC' },
];
return filterSuggestions;
}
@ -93,3 +120,10 @@ export function getDocumentItems(
}
return isAllDocumentsVisible ? documentSqlIds : documentSqlIds.slice(0, 5);
}
export const tabButtonVisibility = (visible: boolean, enabled: boolean): { visible: boolean; enabled: boolean } => {
return {
visible,
enabled,
};
};

1
src/Explorer/Tabs/DocumentsTab1.tsx → src/Explorer/Tabs/DocumentsTab.tsx
View File

@ -31,7 +31,6 @@ export default class DocumentsTab extends TabsBase {
this.displayedError = ko.observable<string>("");
}
public onTabClick(): void {
super.onTabClick();
this.collection && this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Documents);

172
src/Explorer/Tabs/DocumentsTabContent.tsx
View File

@ -4,9 +4,7 @@ import {
DetailsListLayoutMode,
IColumn,
IIconProps,
IImageProps,
Image,
ImageFit,
List,
PrimaryButton,
SelectionMode,
@ -43,7 +41,7 @@ import { EditorReact } from "../Controls/Editor/EditorReact";
import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
import DocumentId from "../Tree/DocumentId";
import ObjectId from "../Tree/ObjectId";
import DocumentsTab from "./DocumentsTab1";
import DocumentsTab from "./DocumentsTab";
import {
formatDocumentContent,
formatSqlDocumentContent,
@ -52,33 +50,11 @@ import {
getFilterSuggestions,
getPartitionKeyDefinition,
hasShardKeySpecified,
IDocumentsTabContentState,
imageProps,
tabButtonVisibility,
} from "./DocumentTabUtils";
const filterIcon: IIconProps = { iconName: "Filter" };
export interface IDocumentsTabContentState {
columns: IColumn[];
isModalSelection: boolean;
isCompactMode: boolean;
announcedMessage?: string;
isSuggestionVisible: boolean;
filter: string;
isFilterOptionVisible: boolean;
isEditorVisible: boolean;
documentContent: string;
documentIds: Array<DocumentId>;
documentSqlIds: Array<Resource>;
editorKey: string;
selectedDocumentId?: DocumentId;
selectedSqlDocumentId?: Resource;
isEditorContentEdited: boolean;
isAllDocumentsVisible: boolean;
}
export interface IDocumentsTabContentProps extends DocumentsTab {
_resourceTokenPartitionKey: string;
}
export interface IDocument {
value: string;
id: string;
@ -90,13 +66,7 @@ interface IButton {
isSelected?: boolean;
}
const imageProps: Partial<IImageProps> = {
imageFit: ImageFit.centerContain,
width: 40,
height: 40,
style: { marginTop: "15px" },
};
const filterIcon: IIconProps = { iconName: "Filter" };
const intitalDocumentContent = `{ \n "id": "replace_with_new_document_id" \n }`;
export default class DocumentsTabContent extends React.Component<DocumentsTab, IDocumentsTabContentState> {
@ -110,30 +80,12 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
constructor(props: DocumentsTab) {
super(props);
this.newDocumentButton = {
visible: true,
enabled: true,
};
this.saveNewDocumentButton = {
visible: false,
enabled: true,
};
this.discardNewDocumentChangesButton = {
visible: false,
enabled: false,
};
this.saveExisitingDocumentButton = {
visible: false,
enabled: false,
};
this.discardExisitingDocumentChangesButton = {
visible: false,
enabled: false,
};
this.deleteExisitingDocumentButton = {
visible: false,
enabled: false,
};
this.newDocumentButton = tabButtonVisibility(true, true);
this.saveNewDocumentButton = tabButtonVisibility(false, true);
this.discardNewDocumentChangesButton = tabButtonVisibility(false, false);
this.saveExisitingDocumentButton = tabButtonVisibility(false, false);
this.discardExisitingDocumentChangesButton = tabButtonVisibility(false, false);
this.deleteExisitingDocumentButton = tabButtonVisibility(false, false);
const columns: IColumn[] = [
{
@ -294,30 +246,13 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
userContext.apiType === "Mongo"
? formatDocumentContent(row as DocumentId)
: formatSqlDocumentContent(row as Resource);
this.newDocumentButton = {
visible: true,
enabled: true,
};
this.saveNewDocumentButton = {
visible: false,
enabled: false,
};
this.discardNewDocumentChangesButton = {
visible: false,
enabled: false,
};
this.saveExisitingDocumentButton = {
visible: true,
enabled: false,
};
this.discardExisitingDocumentChangesButton = {
visible: true,
enabled: false,
};
this.deleteExisitingDocumentButton = {
visible: true,
enabled: true,
};
this.newDocumentButton = tabButtonVisibility(true, true);
this.saveNewDocumentButton = tabButtonVisibility(false, false);
this.discardNewDocumentChangesButton = tabButtonVisibility(false, false);
this.saveExisitingDocumentButton = tabButtonVisibility(true, false);
this.discardExisitingDocumentChangesButton = tabButtonVisibility(true, false);
this.deleteExisitingDocumentButton = tabButtonVisibility(true, true);
userContext.apiType === "Mongo"
? this.updateContent(row as DocumentId, formattedDocumentContent)
: this.updateSqlContent(row as Resource, formattedDocumentContent);
@ -383,7 +318,7 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
const updateSqlDocumentRes = await updateSqlDocuments(
collection as ViewModels.Collection,
selectedDocumentId,
documentContent
JSON.parse(documentContent)
);
if (updateSqlDocumentRes) {
TelemetryProcessor.traceSuccess(
@ -653,31 +588,12 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
}
private onNewDocumentClick = () => {
this.newDocumentButton = {
visible: true,
enabled: false,
};
this.saveNewDocumentButton = {
visible: true,
enabled: true,
};
this.discardNewDocumentChangesButton = {
visible: true,
enabled: true,
};
this.saveExisitingDocumentButton = {
visible: false,
enabled: false,
};
this.discardExisitingDocumentChangesButton = {
visible: false,
enabled: false,
};
this.deleteExisitingDocumentButton = {
visible: false,
enabled: false,
};
this.newDocumentButton = tabButtonVisibility(true, false);
this.saveNewDocumentButton = tabButtonVisibility(true, true);
this.discardNewDocumentChangesButton = tabButtonVisibility(true, true);
this.saveExisitingDocumentButton = tabButtonVisibility(false, false);
this.discardExisitingDocumentChangesButton = tabButtonVisibility(false, false);
this.deleteExisitingDocumentButton = tabButtonVisibility(false, false);
this.updateTabButton();
this.setState({
@ -819,19 +735,9 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
};
private onRevertNewDocumentClick = () => {
this.newDocumentButton = {
visible: true,
enabled: true,
};
this.saveNewDocumentButton = {
visible: true,
enabled: false,
};
this.discardNewDocumentChangesButton = {
visible: true,
enabled: false,
};
this.newDocumentButton = tabButtonVisibility(true, true);
this.saveNewDocumentButton = tabButtonVisibility(true, false);
this.discardNewDocumentChangesButton = tabButtonVisibility(true, false);
this.updateTabButton();
this.setState({
@ -840,7 +746,7 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
});
};
onRenderCell = (item: { value: string }): JSX.Element => {
private onRenderCell = (item: { value: string }): JSX.Element => {
return (
<div
className="documentTabSuggestions"
@ -856,7 +762,7 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
);
};
handleLoadMoreDocument = (): void => {
private handleLoadMoreDocument = (): void => {
userContext.apiType === "Mongo" ? this.queryDocumentsData() : this.querySqlDocumentsData();
this.setState({
isSuggestionVisible: false,
@ -868,16 +774,14 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
useCommandBar.getState().setContextButtons(this.getTabsButtons());
};
private getKey(item: DocumentId): string {
return item.rid;
}
private handleDocumentContentChange = (newContent: string): void => {
if (this.saveExisitingDocumentButton.visible) {
this.saveExisitingDocumentButton = {
visible: true,
enabled: true,
};
this.discardExisitingDocumentChangesButton = {
visible: true,
enabled: true,
};
this.saveExisitingDocumentButton = tabButtonVisibility(true, true);
this.discardExisitingDocumentChangesButton = tabButtonVisibility(true, true);
}
this.setState(
@ -986,8 +890,4 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
</div>
);
}
private getKey(item: DocumentId): string {
return item.rid;
}
}

276
src/Explorer/Tabs/MongoDocumentsTab.ts
View File

@ -1,10 +1,8 @@
import * as ViewModels from "../../Contracts/ViewModels";
import DocumentsTab from "./DocumentsTab1";
import DocumentsTab from "./DocumentsTab";
export default class MongoDocumentsTab extends DocumentsTab {
public collection: ViewModels.Collection;
// private continuationToken: string;
constructor(options: ViewModels.DocumentsTabOptions) {
super(options);
if (this.partitionKeyProperty && ~this.partitionKeyProperty.indexOf(`"`)) {
@ -17,279 +15,7 @@ export default class MongoDocumentsTab extends DocumentsTab {
this.partitionKeyPropertyHeader = "/" + this.partitionKeyProperty;
}
// this.isFilterExpanded = ko.observable<boolean>(true);
super.buildCommandBarOptions.bind(this);
super.buildCommandBarOptions();
}
// public onSaveNewDocumentClick = (): Promise<any> => {
// const documentContent = JSON.parse(this.selectedDocumentContent());
// this.displayedError("");
// const startKey: number = TelemetryProcessor.traceStart(Action.CreateDocument, {
// dataExplorerArea: Constants.Areas.Tab,
// tabTitle: this.tabTitle(),
// });
// if (
// this.partitionKeyProperty &&
// this.partitionKeyProperty !== "_id" &&
// !this._hasShardKeySpecified(documentContent)
// ) {
// const message = `The document is lacking the shard property: ${this.partitionKeyProperty}`;
// this.displayedError(message);
// let that = this;
// setTimeout(() => {
// that.displayedError("");
// }, Constants.ClientDefaults.errorNotificationTimeoutMs);
// this.isExecutionError(true);
// TelemetryProcessor.traceFailure(
// Action.CreateDocument,
// {
// dataExplorerArea: Constants.Areas.Tab,
// tabTitle: this.tabTitle(),
// error: message,
// },
// startKey
// );
// Logger.logError("Failed to save new document: Document shard key not defined", "MongoDocumentsTab");
// throw new Error("Document without shard key");
// }
// this.isExecutionError(false);
// this.isExecuting(true);
// return createDocument(this.collection.databaseId, this.collection, this.partitionKeyProperty, documentContent)
// .then(
// (savedDocument: any) => {
// let partitionKeyArray = extractPartitionKey(
// savedDocument,
// this._getPartitionKeyDefinition() as PartitionKeyDefinition
// );
// let partitionKeyValue = partitionKeyArray && partitionKeyArray[0];
// let id = new ObjectId(this, savedDocument, partitionKeyValue);
// let ids = this.documentIds();
// ids.push(id);
// delete savedDocument._self;
// let value: string = this.renderObjectForEditor(savedDocument || {}, null, 4);
// this.selectedDocumentContent.setBaseline(value);
// this.selectedDocumentId(id);
// this.documentIds(ids);
// this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
// TelemetryProcessor.traceSuccess(
// Action.CreateDocument,
// {
// dataExplorerArea: Constants.Areas.Tab,
// tabTitle: this.tabTitle(),
// },
// startKey
// );
// },
// (error) => {
// this.isExecutionError(true);
// const errorMessage = getErrorMessage(error);
// window.alert(errorMessage);
// TelemetryProcessor.traceFailure(
// Action.CreateDocument,
// {
// dataExplorerArea: Constants.Areas.Tab,
// tabTitle: this.tabTitle(),
// error: errorMessage,
// errorStack: getErrorStack(error),
// },
// startKey
// );
// }
// )
// .finally(() => this.isExecuting(false));
// };
// public onSaveExisitingDocumentClick = (): Promise<any> => {
// const selectedDocumentId = this.selectedDocumentId();
// const documentContent = this.selectedDocumentContent();
// this.isExecutionError(false);
// this.isExecuting(true);
// const startKey: number = TelemetryProcessor.traceStart(Action.UpdateDocument, {
// dataExplorerArea: Constants.Areas.Tab,
// tabTitle: this.tabTitle(),
// });
// return updateDocument(this.collection.databaseId, this.collection, selectedDocumentId, documentContent)
// .then(
// (updatedDocument: any) => {
// let value: string = this.renderObjectForEditor(updatedDocument || {}, null, 4);
// this.selectedDocumentContent.setBaseline(value);
// this.documentIds().forEach((documentId: DocumentId) => {
// if (documentId.rid === updatedDocument._rid) {
// const partitionKeyArray = extractPartitionKey(
// updatedDocument,
// this._getPartitionKeyDefinition() as PartitionKeyDefinition
// );
// let partitionKeyValue = partitionKeyArray && partitionKeyArray[0];
// const id = new ObjectId(this, updatedDocument, partitionKeyValue);
// documentId.id(id.id());
// }
// });
// this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
// TelemetryProcessor.traceSuccess(
// Action.UpdateDocument,
// {
// dataExplorerArea: Constants.Areas.Tab,
// tabTitle: this.tabTitle(),
// },
// startKey
// );
// },
// (error) => {
// this.isExecutionError(true);
// const errorMessage = getErrorMessage(error);
// window.alert(errorMessage);
// TelemetryProcessor.traceFailure(
// Action.UpdateDocument,
// {
// dataExplorerArea: Constants.Areas.Tab,
// tabTitle: this.tabTitle(),
// error: errorMessage,
// errorStack: getErrorStack(error),
// },
// startKey
// );
// }
// )
// .finally(() => this.isExecuting(false));
// };
public buildQuery(filter: string): string {
return filter || "{}";
}
// public async selectDocument(documentId: DocumentId): Promise<void> {
// this.selectedDocumentId(documentId);
// const content = await readDocument(this.collection.databaseId, this.collection, documentId);
// this.initDocumentEditor(documentId, content);
// }
// public loadNextPage(): Q.Promise<any> {
// this.isExecuting(true);
// this.isExecutionError(false);
// const filter: string = this.filterContent().trim();
// const query: string = this.buildQuery(filter);
// return Q(queryDocuments(this.collection.databaseId, this.collection, true, query, this.continuationToken))
// .then(
// ({ continuationToken, documents }) => {
// this.continuationToken = continuationToken;
// let currentDocuments = this.documentIds();
// const currentDocumentsRids = currentDocuments.map((currentDocument) => currentDocument.rid);
// const nextDocumentIds = documents
// .filter((d: any) => {
// return currentDocumentsRids.indexOf(d._rid) < 0;
// })
// .map((rawDocument: any) => {
// const partitionKeyValue = rawDocument._partitionKeyValue;
// return new DocumentId(this, rawDocument, partitionKeyValue);
// });
// const merged = currentDocuments.concat(nextDocumentIds);
// this.documentIds(merged);
// currentDocuments = this.documentIds();
// if (this.filterContent().length > 0 && currentDocuments.length > 0) {
// currentDocuments[0].click();
// } else {
// this.selectedDocumentContent("");
// this.selectedDocumentId(null);
// this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);
// }
// if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
// TelemetryProcessor.traceSuccess(
// Action.Tab,
// {
// databaseName: this.collection.databaseId,
// collectionName: this.collection.id(),
// dataExplorerArea: Constants.Areas.Tab,
// tabTitle: this.tabTitle(),
// },
// this.onLoadStartKey
// );
// this.onLoadStartKey = null;
// }
// },
// (error: any) => {
// if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
// TelemetryProcessor.traceFailure(
// Action.Tab,
// {
// databaseName: this.collection.databaseId,
// collectionName: this.collection.id(),
// dataExplorerArea: Constants.Areas.Tab,
// tabTitle: this.tabTitle(),
// error: getErrorMessage(error),
// errorStack: getErrorStack(error),
// },
// this.onLoadStartKey
// );
// this.onLoadStartKey = null;
// }
// }
// )
// .finally(() => this.isExecuting(false));
// }
// protected _onEditorContentChange(newContent: string) {
// try {
// if (
// this.editorState() === ViewModels.DocumentExplorerState.newDocumentValid ||
// this.editorState() === ViewModels.DocumentExplorerState.newDocumentInvalid
// ) {
// let parsed: any = JSON.parse(newContent);
// }
// // Mongo uses BSON format for _id, trying to parse it as JSON blocks normal flow in an edit
// this.onValidDocumentEdit();
// } catch (e) {
// this.onInvalidDocumentEdit();
// }
// }
/** Renders a Javascript object to be displayed inside Monaco Editor */
// protected renderObjectForEditor(value: any, replacer: any, space: string | number): string {
// return MongoUtility.tojson(value, null, false);
// }
// private _hasShardKeySpecified(document: any): boolean {
// return Boolean(extractPartitionKey(document, this._getPartitionKeyDefinition() as PartitionKeyDefinition));
// }
// private _getPartitionKeyDefinition(): DataModels.PartitionKey {
// let partitionKey: DataModels.PartitionKey = this.partitionKey;
// if (
// this.partitionKey &&
// this.partitionKey.paths &&
// this.partitionKey.paths.length &&
// this.partitionKey.paths.length > 0 &&
// this.partitionKey.paths[0].indexOf("$v") > -1
// ) {
// // Convert BsonSchema2 to /path format
// partitionKey = {
// kind: partitionKey.kind,
// paths: ["/" + this.partitionKeyProperty.replace(/\./g, "/")],
// version: partitionKey.version,
// };
// }
// return partitionKey;
// }
// protected __deleteDocument(documentId: DocumentId): Promise<void> {
// return deleteDocument(this.collection.databaseId, this.collection, documentId);
// }
}

2
src/Explorer/Tabs/TabsManager.test.ts
View File

@ -3,7 +3,7 @@ import * as ViewModels from "../../Contracts/ViewModels";
import { updateUserContext } from "../../UserContext";
import Explorer from "../Explorer";
import DocumentId from "../Tree/DocumentId";
import DocumentsTab from "./DocumentsTab1";
import DocumentsTab from "./DocumentsTab";
import QueryTab from "./QueryTab";
import { TabsManager } from "./TabsManager";

2
src/Explorer/Tree/Collection.ts
View File

@ -25,7 +25,7 @@ import Explorer from "../Explorer";
import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
import { CassandraAPIDataClient, CassandraTableKey, CassandraTableKeys } from "../Tables/TableDataClient";
import ConflictsTab from "../Tabs/ConflictsTab";
import DocumentsTab from "../Tabs/DocumentsTab1";
import DocumentsTab from "../Tabs/DocumentsTab";
import GraphTab from "../Tabs/GraphTab";
import MongoDocumentsTab from "../Tabs/MongoDocumentsTab";
import MongoQueryTab from "../Tabs/MongoQueryTab";

2
src/Explorer/Tree/DocumentId.ts
View File

@ -1,6 +1,6 @@
import * as ko from "knockout";
import * as DataModels from "../../Contracts/DataModels";
import DocumentsTab from "../Tabs/DocumentsTab1";
import DocumentsTab from "../Tabs/DocumentsTab";
export default class DocumentId {
public container: DocumentsTab;

2
src/Explorer/Tree/ObjectId.ts
View File

@ -1,5 +1,5 @@
import * as ko from "knockout";
import DocumentsTab from "../Tabs/DocumentsTab1";
import DocumentsTab from "../Tabs/DocumentsTab";
import DocumentId from "./DocumentId";
export default class ObjectId extends DocumentId {

2
src/Explorer/Tree/ResourceTokenCollection.ts
View File

@ -6,7 +6,7 @@ import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstan
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
import { userContext } from "../../UserContext";
import Explorer from "../Explorer";
import DocumentsTab from "../Tabs/DocumentsTab1";
import DocumentsTab from "../Tabs/DocumentsTab";
import QueryTab from "../Tabs/QueryTab";
import TabsBase from "../Tabs/TabsBase";
import DocumentId from "./DocumentId";