mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-07-13 15:34:36 +01:00
Spinner for initial tab loading
This commit is contained in:
vaidankarswapnil
parent
8a1920714d
commit
9a74a8c2ab
@ -6,7 +6,7 @@
|
||||
display: table;
|
||||
display: none;
|
||||
width: 100%;
|
||||
border-top: 1px solid #DDDDDD;
|
||||
border-top: 1px solid #dddddd;
|
||||
/*[{environment-commandbar-toolbar-separator}]*/
|
||||
background-color: #ffffff;
|
||||
/*[{plugin-background-color}]*/
|
||||
@ -34,7 +34,7 @@
|
||||
}
|
||||
|
||||
.query-builder {
|
||||
width:100%;
|
||||
width: 100%;
|
||||
padding-right: @DefaultSpace;
|
||||
border-bottom: 1px solid @BaseMedium;
|
||||
margin-bottom: @DefaultSpace;
|
||||
@ -45,7 +45,7 @@
|
||||
/*[{plugin-background-color}]*/
|
||||
min-width: 600px;
|
||||
height: 30px;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
/*[1px solid {environment-commandbar-toolbar-separator}]*/
|
||||
}
|
||||
|
||||
@ -70,14 +70,14 @@
|
||||
}
|
||||
|
||||
.query-builder-toolbar .query-toolbar-group .query-toolbar-button:hover {
|
||||
background-color: #CCCEDB;
|
||||
background-color: #cccedb;
|
||||
/*[{common-controls-button-hover-background}]*/
|
||||
}
|
||||
|
||||
.query-builder-toolbar .query-toolbar-group .query-toolbar-button.active {
|
||||
background-color: #E6E7ED;
|
||||
background-color: #e6e7ed;
|
||||
/*[{common-controls-inner-tab-active-background}]*/
|
||||
outline: none
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.query-builder-toolbar .query-toolbar-group .query-toolbar-button:disabled,
|
||||
@ -96,10 +96,12 @@
|
||||
.flex-direction();
|
||||
}
|
||||
|
||||
.tablesQueryTab{
|
||||
.tablesQueryTab {
|
||||
padding-left: @MediumSpace;
|
||||
width: 100%;
|
||||
margin-bottom:@LargeSpace;
|
||||
margin-bottom: @LargeSpace;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.entity-error-Img {
|
||||
@ -120,7 +122,7 @@
|
||||
.query-editor-text {
|
||||
width: 100%;
|
||||
margin: 2px;
|
||||
border: solid 1px #A9ACB3;
|
||||
border: solid 1px #a9acb3;
|
||||
/*[{plugin-textbox-disabled-color}]*/
|
||||
resize: none;
|
||||
margin-top: -39px;
|
||||
@ -169,7 +171,7 @@
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.advanced-options-panel{
|
||||
.advanced-options-panel {
|
||||
margin-bottom: @DefaultSpace;
|
||||
}
|
||||
|
||||
@ -201,9 +203,9 @@ input::-webkit-inner-spin-button {
|
||||
.advanced-options-panel .advanced-options .top .top-input {
|
||||
width: 100px;
|
||||
word-spacing: normal;
|
||||
color: #1E1E1E;
|
||||
color: #1e1e1e;
|
||||
/*[{common-controls-button-foreground}]*/
|
||||
border: 1px solid #CCCEDB;
|
||||
border: 1px solid #cccedb;
|
||||
/*[1px solid {plugin-textbox-border-color}]*/
|
||||
height: 20px;
|
||||
margin-left: 8px;
|
||||
@ -257,9 +259,9 @@ input::-webkit-inner-spin-button {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.action-column>button,
|
||||
.group-control-header>button,
|
||||
.group-indicator-column>button {
|
||||
.action-column > button,
|
||||
.group-control-header > button,
|
||||
.group-indicator-column > button {
|
||||
min-width: 20px;
|
||||
width: 20px;
|
||||
padding: 0px;
|
||||
@ -268,7 +270,7 @@ input::-webkit-inner-spin-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.group-control-header>button:disabled {
|
||||
.group-control-header > button:disabled {
|
||||
min-width: 20px;
|
||||
width: 20px;
|
||||
padding: 0px;
|
||||
@ -312,14 +314,14 @@ input::-webkit-inner-spin-button {
|
||||
.operator-label {
|
||||
margin-left: 80px;
|
||||
}
|
||||
.value-label{
|
||||
.value-label {
|
||||
margin-left: 62px;
|
||||
}
|
||||
|
||||
.scroll-box {
|
||||
border-bottom: 1px transparent #DDD;
|
||||
border-bottom: 1px transparent #ddd;
|
||||
/*[1px solid {plugin-table-border-color}]*/
|
||||
border-top: 1px transparent #DDD;
|
||||
border-top: 1px transparent #ddd;
|
||||
/*[1px solid {plugin-table-border-color}]*/
|
||||
max-height: 20vh;
|
||||
width: 100%;
|
||||
@ -384,7 +386,7 @@ input::-webkit-inner-spin-button {
|
||||
|
||||
.group-indicator-table {
|
||||
border-spacing: 0px;
|
||||
min-height: 24px
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.group-indicator-column {
|
||||
@ -414,7 +416,6 @@ input::-webkit-inner-spin-button {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
/*.type-header {
|
||||
padding-right: 4px;
|
||||
}
|
||||
@ -428,9 +429,9 @@ input::-webkit-inner-spin-button {
|
||||
}*/
|
||||
|
||||
.clause-table-field[readonly] {
|
||||
background-color: #EEEEF2;
|
||||
background-color: #eeeef2;
|
||||
/*[{plugin-table-header-background-color}]*/
|
||||
border: 1px solid #CCCEDB;
|
||||
border: 1px solid #cccedb;
|
||||
/*[{plugin-table-border-color}]*/
|
||||
}
|
||||
|
||||
@ -480,11 +481,11 @@ input::-webkit-inner-spin-button {
|
||||
|
||||
.query-panel .divider.horizontal {
|
||||
height: 10px;
|
||||
width: 100%
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.inline-div {
|
||||
display: inline
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.querybuilder-addpropertyImg,
|
||||
@ -516,7 +517,7 @@ input::-webkit-inner-spin-button {
|
||||
}
|
||||
|
||||
.query-builder-isDisabled {
|
||||
border: 1px solid #CCCEDB;
|
||||
border: 1px solid #cccedb;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
@ -533,7 +534,6 @@ input::-webkit-inner-spin-button {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.clause-table {
|
||||
|
||||
@ -63,6 +63,7 @@ export interface IQueryTablesTabComponentStates {
|
||||
selection: Selection;
|
||||
entities: Entities.ITableEntity[];
|
||||
headers: string[];
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
export interface IQueryTableRowsType {
|
||||
|
||||
@ -7,6 +7,9 @@ import {
|
||||
IDropdownStyles,
|
||||
Selection,
|
||||
SelectionMode,
|
||||
Spinner,
|
||||
SpinnerSize,
|
||||
Text,
|
||||
} from "@fluentui/react";
|
||||
import * as ko from "knockout";
|
||||
import React, { Component } from "react";
|
||||
@ -52,6 +55,7 @@ import {
|
||||
IQueryTablesTabComponentProps,
|
||||
IQueryTablesTabComponentStates,
|
||||
} from "./QueryTableTabUtils";
|
||||
|
||||
export interface Button {
|
||||
visible: boolean;
|
||||
enabled: boolean;
|
||||
@ -137,33 +141,6 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
|
||||
super(props);
|
||||
this.columns = [];
|
||||
this.allQueryTableRows = [];
|
||||
const columns: IColumn[] = [
|
||||
{
|
||||
key: "column1",
|
||||
name: "PartitionKey",
|
||||
minWidth: 100,
|
||||
maxWidth: 200,
|
||||
data: String,
|
||||
fieldName: "partitionKey",
|
||||
// onRender: this.onRenderColumnItem,
|
||||
},
|
||||
{
|
||||
key: "column2",
|
||||
name: "RowKey",
|
||||
minWidth: 100,
|
||||
maxWidth: 200,
|
||||
data: String,
|
||||
fieldName: "rowKey",
|
||||
},
|
||||
{
|
||||
key: "column3",
|
||||
name: "Timestamp",
|
||||
minWidth: 200,
|
||||
maxWidth: 200,
|
||||
data: String,
|
||||
fieldName: "timeStamp",
|
||||
},
|
||||
];
|
||||
this.container = props.collection && props.collection.container;
|
||||
this.tableCommands = new TableCommands(this.container);
|
||||
this.tableDataClient = this.container.tableDataClient;
|
||||
@ -212,7 +189,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
|
||||
visible: true,
|
||||
isSelected: false,
|
||||
},
|
||||
columns: columns,
|
||||
columns: this.columns,
|
||||
items: [],
|
||||
originalItems: [],
|
||||
isExpanded: false,
|
||||
@ -253,6 +230,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
|
||||
timeValue: "",
|
||||
},
|
||||
],
|
||||
isLoading: true,
|
||||
};
|
||||
|
||||
this.state.tableEntityListViewModel.queryTablesTab = this.props.queryTablesTab;
|
||||
@ -462,16 +440,25 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
|
||||
", ",
|
||||
this.state.selection.getSelection()
|
||||
);
|
||||
let timeStamp: string;
|
||||
let selectedItems: Entities.ITableEntity[];
|
||||
if (this.state.selection.getSelection().length > 0) {
|
||||
selectedItems = this.state.entities.filter(
|
||||
(item) => item["Timestamp"]._ === Object.values(this.state.selection.getSelection()[0])[2]
|
||||
Object.keys(this.state.selection.getSelection()[0]).map((key, index) => {
|
||||
if (key === "Timestamp") {
|
||||
timeStamp = Object.values(this.state.selection.getSelection()[0])[index];
|
||||
console.log(
|
||||
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 445 ~ QueryTablesTabComponent ~ timeStamp",
|
||||
timeStamp
|
||||
);
|
||||
}
|
||||
});
|
||||
selectedItems = this.state.entities.filter((item) => item["Timestamp"]._ === timeStamp);
|
||||
console.log(
|
||||
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 293 ~ QueryTablesTabComponent ~ selectedItems",
|
||||
selectedItems
|
||||
);
|
||||
// console.log("🚀 ~ file: QueryTablesTabComponent.tsx ~ line 293 ~ QueryTablesTabComponent ~ selectedItems", selectedItems);
|
||||
|
||||
this.setState({
|
||||
// selectionCount: this._selection.getSelectedCount(),
|
||||
selectedItems,
|
||||
selectedItems: selectedItems,
|
||||
rowSelected: true,
|
||||
});
|
||||
}
|
||||
@ -577,7 +564,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
|
||||
columns: this.columns,
|
||||
headers,
|
||||
operators: this.state.queryViewModel.queryBuilderViewModel().operators(),
|
||||
// queryTableRows: queryTableRowsClone,
|
||||
isLoading: false,
|
||||
items: documentItems,
|
||||
entities: documents.Results,
|
||||
originalItems: documentItems,
|
||||
@ -586,7 +573,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
|
||||
() => {
|
||||
if (isInitialLoad) {
|
||||
this.loadFilterExample();
|
||||
this.setDefaultItemSelection();
|
||||
// this.setDefaultItemSelection();
|
||||
}
|
||||
}
|
||||
);
|
||||
@ -1071,12 +1058,12 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
|
||||
render(): JSX.Element {
|
||||
useCommandBar.getState().setContextButtons(this.getTabsButtons());
|
||||
const { queryTableRows } = this.state;
|
||||
console.log(
|
||||
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 328 ~ QueryTablesTabComponent ~ setDefaultItemSelection ~ selectedItems",
|
||||
this.state.selectedItems,
|
||||
", ",
|
||||
[this.state.items[0]]
|
||||
);
|
||||
// console.log(
|
||||
// "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 328 ~ QueryTablesTabComponent ~ setDefaultItemSelection ~ selectedItems",
|
||||
// this.state.selectedItems,
|
||||
// ", ",
|
||||
// [this.state.items[0]]
|
||||
// );
|
||||
return (
|
||||
<div className="tab-pane tableContainer" id={this.props.tabsBaseInstance.tabId} role="tabpanel">
|
||||
<div className="query-builder">
|
||||
@ -1270,6 +1257,10 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
|
||||
</div>
|
||||
|
||||
<div className="tablesQueryTab tableContainer">
|
||||
{this.state.items.length === 0 && this.state.isLoading && (
|
||||
<Spinner size={SpinnerSize.large} className="spinner" />
|
||||
)}
|
||||
{this.state.items.length > 0 && !this.state.isLoading && (
|
||||
<DetailsList
|
||||
items={this.state.items}
|
||||
columns={this.state.columns}
|
||||
@ -1279,6 +1270,10 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
|
||||
selection={this.state.selection}
|
||||
selectionPreservedOnEmptyClick={true}
|
||||
/>
|
||||
)}
|
||||
{this.state.items.length === 0 && !this.state.isLoading && (
|
||||
<Text variant="mediumPlus">No data available in table</Text>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user