[FEATURE] Finding flyout loading state (opensearch-project#562)

* [FEATURE] Set loading state for finding fly-out until the data is ready opensearch-project#559 Signed-off-by: Jovan Cvetkovic <[email protected]> * fix tests Signed-off-by: Jovan Cvetkovic <[email protected]> * fix tests Signed-off-by: Jovan Cvetkovic <[email protected]> --------- Signed-off-by: Jovan Cvetkovic <[email protected]>
riysaxen-amzn · May 4, 2023 · 0e38a1b · 0e38a1b
1 parent 9e683e2
commit 0e38a1b
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 13 deletions.
diff --git a/cypress/support/typings.js b/cypress/support/typings.js
@@ -37,3 +37,25 @@ Cypress.Commands.add(
     return cy.get(subject).wait(10).focus().realType(text);
   }
 );
+
+Cypress.Commands.add(
+  'pressEnterKey',
+  {
+    prevSubject: true,
+  },
+  (subject) => {
+    Cypress.log({
+      message: 'Enter key pressed',
+    });
+    Cypress.automation('remote:debugger:protocol', {
+      command: 'Input.dispatchKeyEvent',
+      params: {
+        type: 'char',
+        unmodifiedText: '\r',
+        text: '\r',
+      },
+    });
+
+    return subject;
+  }
+);
diff --git a/public/pages/Findings/components/FindingDetailsFlyout.tsx b/public/pages/Findings/components/FindingDetailsFlyout.tsx
@@ -67,6 +67,8 @@ interface FindingDetailsFlyoutState {
   isCreateIndexPatternModalVisible: boolean;
   selectedTab: { id: string; content: React.ReactNode | null };
   correlatedFindings: CorrelationFinding[];
+  isDocumentLoading: boolean;
+  areCorrelationsLoading: boolean;
 }
 
 export default class FindingDetailsFlyout extends Component<
@@ -81,6 +83,8 @@ export default class FindingDetailsFlyout extends Component<
       isCreateIndexPatternModalVisible: false,
       selectedTab: { id: FindingFlyoutTabId.DETAILS, content: null },
       correlatedFindings: [],
+      isDocumentLoading: true,
+      areCorrelationsLoading: true,
     };
   }
 
@@ -106,15 +110,22 @@ export default class FindingDetailsFlyout extends Component<
           });
           this.setState({ correlatedFindings });
         }
+      })
+      .finally(() => {
+        this.setState({ areCorrelationsLoading: false });
       });
   };
 
   componentDidMount(): void {
-    this.getIndexPatternId().then((patternId) => {
-      if (patternId) {
-        this.setState({ indexPatternId: patternId });
-      }
-    });
+    this.getIndexPatternId()
+      .then((patternId) => {
+        if (patternId) {
+          this.setState({ indexPatternId: patternId });
+        }
+      })
+      .finally(() => {
+        this.setState({ isDocumentLoading: false });
+      });
 
     this.getCorrelations();
 
@@ -256,7 +267,7 @@ export default class FindingDetailsFlyout extends Component<
     return patternId;
   };
 
-  renderFindingDocuments() {
+  renderFindingDocuments(isDocumentLoading: boolean) {
     const {
       finding: { index, document_list, related_doc_ids },
     } = this.props;
@@ -276,6 +287,7 @@ export default class FindingDetailsFlyout extends Component<
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiButton
+              isLoading={isDocumentLoading}
               data-test-subj={'finding-details-flyout-view-surrounding-documents'}
               onClick={() => {
                 if (indexPatternId) {
@@ -371,13 +383,17 @@ export default class FindingDetailsFlyout extends Component<
     }
   }
 
-  private getTabContent(tabId: FindingFlyoutTabId) {
+  private getTabContent(
+    tabId: FindingFlyoutTabId,
+    isDocumentLoading = false,
+    areCorrelationsLoading = false
+  ) {
     switch (tabId) {
       case FindingFlyoutTabId.CORRELATIONS:
-        return this.createCorrelationsTable();
+        return this.createCorrelationsTable(areCorrelationsLoading);
       case FindingFlyoutTabId.DETAILS:
       default:
-        return this.createFindingDetails();
+        return this.createFindingDetails(isDocumentLoading);
     }
   }
 
@@ -394,7 +410,7 @@ export default class FindingDetailsFlyout extends Component<
     });
   };
 
-  private createCorrelationsTable() {
+  private createCorrelationsTable(areCorrelationsLoading: boolean) {
     const columns: EuiBasicTableColumn<CorrelationFinding>[] = [
       {
         field: 'timestamp',
@@ -451,14 +467,15 @@ export default class FindingDetailsFlyout extends Component<
               pagination={true}
               search={true}
               sorting={true}
+              loading={areCorrelationsLoading}
             />
           </EuiFlexItem>
         </EuiFlexGroup>
       </>
     );
   }
 
-  private createFindingDetails() {
+  private createFindingDetails(isDocumentLoading: boolean) {
     const {
       finding: { queries },
     } = this.props;
@@ -471,7 +488,7 @@ export default class FindingDetailsFlyout extends Component<
         <EuiSpacer size={'m'} />
         {this.renderRuleDetails(queries)}
         <EuiSpacer size="l" />
-        {this.renderFindingDocuments()}
+        {this.renderFindingDocuments(isDocumentLoading)}
       </>
     );
   }
@@ -488,6 +505,7 @@ export default class FindingDetailsFlyout extends Component<
         timestamp,
       },
     } = this.props;
+    const { isDocumentLoading, areCorrelationsLoading } = this.state;
     return (
       <EuiFlyout
         onClose={closeFlyout}
@@ -568,7 +586,14 @@ export default class FindingDetailsFlyout extends Component<
                   isSelected={tab.id === this.state.selectedTab.id}
                   onClick={() => {
                     this.setState({
-                      selectedTab: { id: tab.id, content: this.getTabContent(tab.id) },
+                      selectedTab: {
+                        id: tab.id,
+                        content: this.getTabContent(
+                          tab.id,
+                          isDocumentLoading,
+                          areCorrelationsLoading
+                        ),
+                      },
                     });
                   }}
                 >