design changes for loading, changed the banner, updated tests (#170) (#…

…172) (cherry picked from commit dcff236) Signed-off-by: sumukhswamy <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Oct 24, 2023 · 786c7c7 · 786c7c7
1 parent 0f5673a
commit 786c7c7
Show file tree

Hide file tree

Showing 8 changed files with 346 additions and 228 deletions.
diff --git a/common/types/index.ts b/common/types/index.ts
@@ -87,4 +87,10 @@ export interface TreeItem {
   type: TreeItemType;
   isExpanded: boolean;
   values?: TreeItem[];
+  isLoading?: boolean
+}
+
+export interface isLoading {
+  flag: boolean;
+  status: string;
 }
diff --git a/common/utils/async_query_helpers.ts b/common/utils/async_query_helpers.ts
@@ -47,12 +47,13 @@ export const pollQueryStatus = (id: string, http: CoreStart['http'], callback) =
         status === 'scheduled' ||
         status === 'waiting'
       ) {
+        callback({status: status})
         setTimeout(() => pollQueryStatus(id, http, callback), POLL_INTERVAL_MS);
       } else if (status === 'failed') {
-        callback([]);
+        callback({ status: 'FAILED', results: [] });
       } else if (status === 'success') {
         const results = _.get(res.data.resp, 'datarows');
-        callback(results);
+        callback({ status: 'SUCCESS', results: results });
       }
     })
     .catch((err) => {

diff --git a/public/components/Main/__snapshots__/main.test.tsx.snap b/public/components/Main/__snapshots__/main.test.tsx.snap
@@ -193,7 +193,7 @@ exports[`<Main /> spec click clear button 1`] = `
     >
       <div
         class="euiPageSideBar"
-        style="max-width: 400px; width: 400px; overflow: auto;"
+        style="max-width: 400px; width: 400px; max-height: 1200px; overflow-y: auto;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -243,34 +243,38 @@ exports[`<Main /> spec click clear button 1`] = `
               class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
               <div
-                class="euiFlexItem euiFlexItem--flexGrowZero"
+                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
               >
                 <div
-                  class="euiEmptyPrompt"
+                  class="euiFlexItem euiFlexItem--flexGrowZero"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="euiIcon euiIcon--xxLarge euiIcon--danger"
-                    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
-                    class="euiSpacer euiSpacer--m"
-                  />
-                  <h3
-                    class="euiTitle euiTitle--medium"
+                    class="euiEmptyPrompt"
                   >
-                    Error loading data
-                  </h3>
+                    <svg
+                      aria-hidden="true"
+                      class="euiIcon euiIcon--xxLarge euiIcon--danger"
+                      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
+                      class="euiSpacer euiSpacer--m"
+                    />
+                    <h4
+                      class="euiTitle euiTitle--xsmall"
+                    >
+                      Error loading data
+                    </h4>
+                  </div>
                 </div>
               </div>
             </div>
@@ -746,7 +750,7 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
     >
       <div
         class="euiPageSideBar"
-        style="max-width: 400px; width: 400px; overflow: auto;"
+        style="max-width: 400px; width: 400px; max-height: 1200px; overflow-y: auto;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -796,34 +800,38 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
               class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
               <div
-                class="euiFlexItem euiFlexItem--flexGrowZero"
+                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
               >
                 <div
-                  class="euiEmptyPrompt"
+                  class="euiFlexItem euiFlexItem--flexGrowZero"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="euiIcon euiIcon--xxLarge euiIcon--danger"
-                    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
-                    class="euiSpacer euiSpacer--m"
-                  />
-                  <h3
-                    class="euiTitle euiTitle--medium"
+                    class="euiEmptyPrompt"
                   >
-                    Error loading data
-                  </h3>
+                    <svg
+                      aria-hidden="true"
+                      class="euiIcon euiIcon--xxLarge euiIcon--danger"
+                      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
+                      class="euiSpacer euiSpacer--m"
+                    />
+                    <h4
+                      class="euiTitle euiTitle--xsmall"
+                    >
+                      Error loading data
+                    </h4>
+                  </div>
                 </div>
               </div>
             </div>
@@ -1299,7 +1307,7 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
     >
       <div
         class="euiPageSideBar"
-        style="max-width: 400px; width: 400px; overflow: auto;"
+        style="max-width: 400px; width: 400px; max-height: 1200px; overflow-y: auto;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -1349,34 +1357,38 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
               class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
               <div
-                class="euiFlexItem euiFlexItem--flexGrowZero"
+                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
               >
                 <div
-                  class="euiEmptyPrompt"
+                  class="euiFlexItem euiFlexItem--flexGrowZero"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="euiIcon euiIcon--xxLarge euiIcon--danger"
-                    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
-                    class="euiSpacer euiSpacer--m"
-                  />
-                  <h3
-                    class="euiTitle euiTitle--medium"
+                    class="euiEmptyPrompt"
                   >
-                    Error loading data
-                  </h3>
+                    <svg
+                      aria-hidden="true"
+                      class="euiIcon euiIcon--xxLarge euiIcon--danger"
+                      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
+                      class="euiSpacer euiSpacer--m"
+                    />
+                    <h4
+                      class="euiTitle euiTitle--xsmall"
+                    >
+                      Error loading data
+                    </h4>
+                  </div>
                 </div>
               </div>
             </div>
@@ -1852,7 +1864,7 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
     >
       <div
         class="euiPageSideBar"
-        style="max-width: 400px; width: 400px; overflow: auto;"
+        style="max-width: 400px; width: 400px; max-height: 1200px; overflow-y: auto;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -2493,7 +2505,7 @@ exports[`<Main /> spec click run button, response fills null and missing values
     >
       <div
         class="euiPageSideBar"
-        style="max-width: 400px; width: 400px; overflow: auto;"
+        style="max-width: 400px; width: 400px; max-height: 1200px; overflow-y: auto;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -3133,7 +3145,7 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
     >
       <div
         class="euiPageSideBar"
-        style="max-width: 400px; width: 400px; overflow: auto;"
+        style="max-width: 400px; width: 400px; max-height: 1200px; overflow-y: auto;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -3183,34 +3195,38 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
               class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
               <div
-                class="euiFlexItem euiFlexItem--flexGrowZero"
+                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
               >
                 <div
-                  class="euiEmptyPrompt"
+                  class="euiFlexItem euiFlexItem--flexGrowZero"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="euiIcon euiIcon--xxLarge euiIcon--danger"
-                    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
-                    class="euiSpacer euiSpacer--m"
-                  />
-                  <h3
-                    class="euiTitle euiTitle--medium"
+                    class="euiEmptyPrompt"
                   >
-                    Error loading data
-                  </h3>
+                    <svg
+                      aria-hidden="true"
+                      class="euiIcon euiIcon--xxLarge euiIcon--danger"
+                      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
+                      class="euiSpacer euiSpacer--m"
+                    />
+                    <h4
+                      class="euiTitle euiTitle--xsmall"
+                    >
+                      Error loading data
+                    </h4>
+                  </div>
                 </div>
               </div>
             </div>
@@ -3677,7 +3693,7 @@ exports[`<Main /> spec renders the component 1`] = `
     >
       <div
         class="euiPageSideBar"
-        style="max-width: 400px; width: 400px; overflow: auto;"
+        style="max-width: 400px; width: 400px; max-height: 1200px; overflow-y: auto;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"

diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx
@@ -6,6 +6,7 @@
 import {
   EuiButton,
   EuiButtonIcon,
+  EuiCallOut,
   EuiComboBoxOptionOption,
   EuiFlexGroup,
   EuiFlexItem,
@@ -16,7 +17,6 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiText,
-  EuiCallOut,
 } from '@elastic/eui';
 import { IHttpResponse } from 'angular';
 import _ from 'lodash';
@@ -957,8 +957,8 @@ export class Main extends React.Component<MainProps, MainState> {
         </EuiFlexGroup>
         <EuiPage paddingSize="none">
           {this.state.language === 'SQL' && (
-            <EuiPanel>
-              <EuiPageSideBar style={{ maxWidth: '400px', width: '400px' , overflow: 'auto' }}>
+            <EuiPanel grow ={true}>
+              <EuiPageSideBar style={{ maxWidth: '400px', width: '400px', maxHeight: '1200px' ,overflowY:'auto'}}>
                 <EuiFlexGroup direction="column">
                   <EuiFlexItem>
                     <EuiFlexItem grow={false}>