diff --git a/public/components/Main/__snapshots__/main.test.tsx.snap b/public/components/Main/__snapshots__/main.test.tsx.snap index dd8d4cd..3002e16 100644 --- a/public/components/Main/__snapshots__/main.test.tsx.snap +++ b/public/components/Main/__snapshots__/main.test.tsx.snap @@ -246,51 +246,14 @@ exports[`<Main /> spec click clear button 1`] = ` <div class="euiFlexItem" > - <svg - aria-hidden="true" - class="euiIcon euiIcon--medium" - focusable="false" - height="16" - role="img" - viewBox="0 0 16 16" - width="16" - xmlns="http://www.w3.org/2000/svg" - > - <path - d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z" - fill-rule="evenodd" - /> - </svg> + <span + class="euiLoadingSpinner euiLoadingSpinner--large" + /> </div> <div class="euiFlexItem euiFlexItem--flexGrowZero" > - Failed to load the tree - </div> - <div - class="euiFlexItem euiFlexItem--flexGrowZero" - > - <div - style="padding: 10px;" - > - <div - class="euiFlexItem" - > - <div - class="euiText euiText--medium" - > - <div - class="euiTextAlign euiTextAlign--center" - > - <div - class="euiTextColor euiTextColor--subdued" - > - Fetching associated objects ... - </div> - </div> - </div> - </div> - </div> + Loading indices </div> </div> </div> @@ -821,51 +784,14 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = ` <div class="euiFlexItem" > - <svg - aria-hidden="true" - class="euiIcon euiIcon--medium" - focusable="false" - height="16" - role="img" - viewBox="0 0 16 16" - width="16" - xmlns="http://www.w3.org/2000/svg" - > - <path - d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z" - fill-rule="evenodd" - /> - </svg> - </div> - <div - class="euiFlexItem euiFlexItem--flexGrowZero" - > - Failed to load the tree + <span + class="euiLoadingSpinner euiLoadingSpinner--large" + /> </div> <div class="euiFlexItem euiFlexItem--flexGrowZero" > - <div - style="padding: 10px;" - > - <div - class="euiFlexItem" - > - <div - class="euiText euiText--medium" - > - <div - class="euiTextAlign euiTextAlign--center" - > - <div - class="euiTextColor euiTextColor--subdued" - > - Fetching associated objects ... - </div> - </div> - </div> - </div> - </div> + Loading indices </div> </div> </div> @@ -1392,51 +1318,14 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = ` <div class="euiFlexItem" > - <svg - aria-hidden="true" - class="euiIcon euiIcon--medium" - focusable="false" - height="16" - role="img" - viewBox="0 0 16 16" - width="16" - xmlns="http://www.w3.org/2000/svg" - > - <path - d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z" - fill-rule="evenodd" - /> - </svg> - </div> - <div - class="euiFlexItem euiFlexItem--flexGrowZero" - > - Failed to load the tree + <span + class="euiLoadingSpinner euiLoadingSpinner--large" + /> </div> <div class="euiFlexItem euiFlexItem--flexGrowZero" > - <div - style="padding: 10px;" - > - <div - class="euiFlexItem" - > - <div - class="euiText euiText--medium" - > - <div - class="euiTextAlign euiTextAlign--center" - > - <div - class="euiTextColor euiTextColor--subdued" - > - Fetching associated objects ... - </div> - </div> - </div> - </div> - </div> + Loading indices </div> </div> </div> @@ -1963,51 +1852,14 @@ exports[`<Main /> spec click run button, and response is ok 1`] = ` <div class="euiFlexItem" > - <svg - aria-hidden="true" - class="euiIcon euiIcon--medium" - focusable="false" - height="16" - role="img" - viewBox="0 0 16 16" - width="16" - xmlns="http://www.w3.org/2000/svg" - > - <path - d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z" - fill-rule="evenodd" - /> - </svg> + <span + class="euiLoadingSpinner euiLoadingSpinner--large" + /> </div> <div class="euiFlexItem euiFlexItem--flexGrowZero" > - Failed to load the tree - </div> - <div - class="euiFlexItem euiFlexItem--flexGrowZero" - > - <div - style="padding: 10px;" - > - <div - class="euiFlexItem" - > - <div - class="euiText euiText--medium" - > - <div - class="euiTextAlign euiTextAlign--center" - > - <div - class="euiTextColor euiTextColor--subdued" - > - Fetching associated objects ... - </div> - </div> - </div> - </div> - </div> + Loading indices </div> </div> </div> @@ -2534,51 +2386,14 @@ exports[`<Main /> spec click run button, response fills null and missing values <div class="euiFlexItem" > - <svg - aria-hidden="true" - class="euiIcon euiIcon--medium" - focusable="false" - height="16" - role="img" - viewBox="0 0 16 16" - width="16" - xmlns="http://www.w3.org/2000/svg" - > - <path - d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z" - fill-rule="evenodd" - /> - </svg> + <span + class="euiLoadingSpinner euiLoadingSpinner--large" + /> </div> <div class="euiFlexItem euiFlexItem--flexGrowZero" > - Failed to load the tree - </div> - <div - class="euiFlexItem euiFlexItem--flexGrowZero" - > - <div - style="padding: 10px;" - > - <div - class="euiFlexItem" - > - <div - class="euiText euiText--medium" - > - <div - class="euiTextAlign euiTextAlign--center" - > - <div - class="euiTextColor euiTextColor--subdued" - > - Fetching associated objects ... - </div> - </div> - </div> - </div> - </div> + Loading indices </div> </div> </div> @@ -3109,51 +2924,14 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = ` <div class="euiFlexItem" > - <svg - aria-hidden="true" - class="euiIcon euiIcon--medium" - focusable="false" - height="16" - role="img" - viewBox="0 0 16 16" - width="16" - xmlns="http://www.w3.org/2000/svg" - > - <path - d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z" - fill-rule="evenodd" - /> - </svg> + <span + class="euiLoadingSpinner euiLoadingSpinner--large" + /> </div> <div class="euiFlexItem euiFlexItem--flexGrowZero" > - Failed to load the tree - </div> - <div - class="euiFlexItem euiFlexItem--flexGrowZero" - > - <div - style="padding: 10px;" - > - <div - class="euiFlexItem" - > - <div - class="euiText euiText--medium" - > - <div - class="euiTextAlign euiTextAlign--center" - > - <div - class="euiTextColor euiTextColor--subdued" - > - Fetching associated objects ... - </div> - </div> - </div> - </div> - </div> + Loading indices </div> </div> </div> @@ -3683,50 +3461,14 @@ exports[`<Main /> spec renders the component 1`] = ` <div class="euiFlexItem" > - <svg - aria-hidden="true" - class="euiIcon euiIcon--medium euiIcon-isLoading" - focusable="false" - height="16" - role="img" - viewBox="0 0 16 16" - width="16" - xmlns="http://www.w3.org/2000/svg" - > - <path - d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z" - /> - </svg> - </div> - <div - class="euiFlexItem euiFlexItem--flexGrowZero" - > - Failed to load the tree + <span + class="euiLoadingSpinner euiLoadingSpinner--large" + /> </div> <div class="euiFlexItem euiFlexItem--flexGrowZero" > - <div - style="padding: 10px;" - > - <div - class="euiFlexItem" - > - <div - class="euiText euiText--medium" - > - <div - class="euiTextAlign euiTextAlign--center" - > - <div - class="euiTextColor euiTextColor--subdued" - > - Fetching associated objects ... - </div> - </div> - </div> - </div> - </div> + Loading indices </div> </div> </div> @@ -4253,51 +3995,14 @@ exports[`<Main /> spec renders the component and checks if Opensearch is selecte <div class="euiFlexItem" > - <svg - aria-hidden="true" - class="euiIcon euiIcon--medium" - focusable="false" - height="16" - role="img" - viewBox="0 0 16 16" - width="16" - xmlns="http://www.w3.org/2000/svg" - > - <path - d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z" - fill-rule="evenodd" - /> - </svg> + <span + class="euiLoadingSpinner euiLoadingSpinner--large" + /> </div> <div class="euiFlexItem euiFlexItem--flexGrowZero" > - Failed to load the tree - </div> - <div - class="euiFlexItem euiFlexItem--flexGrowZero" - > - <div - style="padding: 10px;" - > - <div - class="euiFlexItem" - > - <div - class="euiText euiText--medium" - > - <div - class="euiTextAlign euiTextAlign--center" - > - <div - class="euiTextColor euiTextColor--subdued" - > - Fetching associated objects ... - </div> - </div> - </div> - </div> - </div> + Loading indices </div> </div> </div> @@ -6988,51 +6693,14 @@ exports[`<Main /> spec renders the component and toggles ppl 1`] = ` <div class="euiFlexItem" > - <svg - aria-hidden="true" - class="euiIcon euiIcon--medium" - focusable="false" - height="16" - role="img" - viewBox="0 0 16 16" - width="16" - xmlns="http://www.w3.org/2000/svg" - > - <path - d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z" - fill-rule="evenodd" - /> - </svg> - </div> - <div - class="euiFlexItem euiFlexItem--flexGrowZero" - > - Failed to load the tree + <span + class="euiLoadingSpinner euiLoadingSpinner--large" + /> </div> <div class="euiFlexItem euiFlexItem--flexGrowZero" > - <div - style="padding: 10px;" - > - <div - class="euiFlexItem" - > - <div - class="euiText euiText--medium" - > - <div - class="euiTextAlign euiTextAlign--center" - > - <div - class="euiTextColor euiTextColor--subdued" - > - Fetching associated objects ... - </div> - </div> - </div> - </div> - </div> + Loading indices </div> </div> </div> @@ -7615,7 +7283,7 @@ exports[`<Main /> spec renders the component for s3 glue and check sample query <div class="euiFlexItem euiFlexItem--flexGrowZero" > - Loading tree data + Loading databases </div> <div class="euiFlexItem euiFlexItem--flexGrowZero" diff --git a/public/components/SQLPage/sql_catalog_tree/os_tree.tsx b/public/components/SQLPage/sql_catalog_tree/os_tree.tsx index 6163a0f..b5d3b96 100644 --- a/public/components/SQLPage/sql_catalog_tree/os_tree.tsx +++ b/public/components/SQLPage/sql_catalog_tree/os_tree.tsx @@ -31,7 +31,7 @@ export const OSTree = ({ selectedItems, updateSQLQueries, refreshTree }: OSTreeP setTreeData([]); setIsTreeLoading({ status: true, - message: 'Fetching associated objects ...', + message: '', }); const { treeContent, loadingStatus } = await getTreeContent(selectedItems); setTreeData(treeContent); @@ -44,38 +44,37 @@ export const OSTree = ({ selectedItems, updateSQLQueries, refreshTree }: OSTreeP <EuiFlexItem> <EuiLoadingSpinner size="l" /> </EuiFlexItem> - <EuiFlexItem grow={false}>Loading tree data</EuiFlexItem> - <EuiFlexItem grow={false}> - <div style={{ padding: '10px' }}> - <EuiFlexItem> - <EuiText textAlign="center" color="subdued"> - Loading may take over 30 seconds - </EuiText> - </EuiFlexItem> - <EuiFlexItem> - <EuiText textAlign="center" color="subdued"> - Status: {isTreeLoading.status} - </EuiText> - </EuiFlexItem> - </div> - </EuiFlexItem> + <EuiFlexItem grow={false}>Loading indices</EuiFlexItem> </EuiFlexGroup> ); - const treeStateRenderer = - isTreeLoading.message === '' ? ( + const treeViewRenderer = + treeData.length === 0 ? ( + <EuiFlexGroup alignItems="center" gutterSize="s" direction="column"> + <EuiSpacer /> + <EuiFlexItem> + <EuiIcon type="database" /> + </EuiFlexItem> + <EuiFlexItem grow={false}>No indices found</EuiFlexItem> + </EuiFlexGroup> + ) : ( <EuiTreeView aria-label="OpenSearch Folder Tree" data-test-subj="opensearch-tree" items={treeData} /> + ); + + const treeStateRenderer = + isTreeLoading.message === '' ? ( + treeViewRenderer ) : ( <EuiFlexGroup alignItems="center" gutterSize="s" direction="column"> <EuiSpacer /> <EuiFlexItem> <EuiIcon type="alert" /> </EuiFlexItem> - <EuiFlexItem grow={false}>Failed to load the tree</EuiFlexItem> + <EuiFlexItem grow={false}>Failed to load indices</EuiFlexItem> <EuiFlexItem grow={false}> <div style={{ padding: '10px' }}> <EuiFlexItem> diff --git a/public/components/SQLPage/sql_catalog_tree/s3_tree.tsx b/public/components/SQLPage/sql_catalog_tree/s3_tree.tsx index 1f449b2..aac963f 100644 --- a/public/components/SQLPage/sql_catalog_tree/s3_tree.tsx +++ b/public/components/SQLPage/sql_catalog_tree/s3_tree.tsx @@ -288,7 +288,7 @@ export const S3Tree = ({ dataSource, updateSQLQueries, refreshTree }: S3TreeProp <EuiFlexItem> <EuiLoadingSpinner size="l" /> </EuiFlexItem> - <EuiFlexItem grow={false}>Loading tree data</EuiFlexItem> + <EuiFlexItem grow={false}>Loading databases</EuiFlexItem> <EuiFlexItem grow={false}> <div style={{ padding: '10px' }}> <EuiFlexItem> @@ -306,20 +306,33 @@ export const S3Tree = ({ dataSource, updateSQLQueries, refreshTree }: S3TreeProp </EuiFlexGroup> ); - const treeStateRenderer = - isTreeLoading.message === '' ? ( + const treeViewRenderer = + treeData.length === 0 ? ( + <EuiFlexGroup alignItems="center" gutterSize="s" direction="column"> + <EuiSpacer /> + <EuiFlexItem> + <EuiIcon type="database" /> + </EuiFlexItem> + <EuiFlexItem grow={false}>No databases found</EuiFlexItem> + </EuiFlexGroup> + ) : ( <EuiTreeView aria-label="S3 Datasource Folder Tree" data-test-subj="s3-datasource-tree" items={treeDataDatabases} /> + ); + + const treeStateRenderer = + isTreeLoading.message === '' ? ( + treeViewRenderer ) : ( <EuiFlexGroup alignItems="center" gutterSize="s" direction="column"> <EuiSpacer /> <EuiFlexItem> <EuiIcon type="alert" /> </EuiFlexItem> - <EuiFlexItem grow={false}>Failed to load the tree</EuiFlexItem> + <EuiFlexItem grow={false}>Failed to load databases</EuiFlexItem> <EuiFlexItem grow={false}> <div style={{ padding: '10px' }}> <EuiFlexItem>