Enhanced UI for rendering multiple documents in finding details flyout (

#1014) (#1019) * enhanced UI for rendering multiple documents * updated cypress test --------- (cherry picked from commit b413066) Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> 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 · May 9, 2024 · 5a3eb30 · 5a3eb30
1 parent e7f946d
commit 5a3eb30
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 26 deletions.
diff --git a/cypress/integration/3_alerts.spec.js b/cypress/integration/3_alerts.spec.js
@@ -222,7 +222,7 @@ describe('Alerts', () => {
       // and matches each entry with the corresponding element line.
       const document = JSON.stringify(JSON.parse('{"winlog.event_id": 2003}'), null, 2);
       const documentLines = document.split('\n');
-      cy.get('[data-test-subj="finding-details-flyout-document-toggle-0"]').click({ force: true });
+
       cy.get('[data-test-subj="finding-details-flyout-rule-document-0"]')
         .get('[class="euiCodeBlock__line"]')
         .each((lineElement, lineIndex) => {

diff --git a/public/pages/Findings/components/FindingDetailsFlyout.tsx b/public/pages/Findings/components/FindingDetailsFlyout.tsx
@@ -89,6 +89,13 @@ export default class FindingDetailsFlyout extends Component<
 > {
   constructor(props: FindingDetailsFlyoutProps) {
     super(props);
+    const relatedDocuments: FindingDocumentItem[] = this.getRelatedDocuments();
+    const docIdToExpandedRowMap: FindingDetailsFlyoutState['docIdToExpandedRowMap'] = {};
+
+    if (relatedDocuments.length === 1) {
+      docIdToExpandedRowMap[relatedDocuments[0].id] = this.createDocumentBlock(relatedDocuments[0]);
+    }
+
     this.state = {
       loading: false,
       ruleViewerFlyoutData: null,
@@ -109,7 +116,7 @@ export default class FindingDetailsFlyout extends Component<
       loadingIndexPatternId: true,
       areCorrelationsLoading: true,
       allRules: {},
-      docIdToExpandedRowMap: {},
+      docIdToExpandedRowMap,
     };
   }
 
@@ -318,46 +325,60 @@ export default class FindingDetailsFlyout extends Component<
     return patternId;
   };
 
-  toggleDocumentDetails(item: FindingDocumentItem) {
-    const docIdToExpandedRowMapValues = { ...this.state.docIdToExpandedRowMap };
+  createDocumentBlock = (item: FindingDocumentItem) => {
     let formattedDocument = '';
     try {
       formattedDocument = document ? JSON.stringify(JSON.parse(item.document), null, 2) : '';
     } catch {
       // no-op
     }
 
+    return (
+      <EuiFormRow fullWidth={true} style={{ width: '100%' }}>
+        <EuiCodeBlock
+          language="json"
+          isCopyable
+          data-test-subj={`finding-details-flyout-rule-document-${item.itemIdx}`}
+        >
+          {formattedDocument}
+        </EuiCodeBlock>
+      </EuiFormRow>
+    );
+  };
+
+  getRelatedDocuments() {
+    const {
+      finding: { document_list, related_doc_ids },
+    } = this.props;
+    const relatedDocIdsSet = new Set(related_doc_ids);
+    const relatedDocuments: FindingDocumentItem[] = [];
+    document_list.forEach((documentInfo) => {
+      if (documentInfo.found && relatedDocIdsSet.has(documentInfo.id)) {
+        relatedDocuments.push({ ...documentInfo, itemIdx: relatedDocuments.length });
+      }
+    });
+
+    return relatedDocuments;
+  }
+
+  toggleDocumentDetails(item: FindingDocumentItem) {
+    const docIdToExpandedRowMapValues = { ...this.state.docIdToExpandedRowMap };
+
     if (docIdToExpandedRowMapValues[item.id]) {
       delete docIdToExpandedRowMapValues[item.id];
     } else {
-      docIdToExpandedRowMapValues[item.id] = (
-        <EuiFormRow fullWidth={true}>
-          <EuiCodeBlock
-            language="json"
-            isCopyable
-            data-test-subj={`finding-details-flyout-rule-document-${item.itemIdx}`}
-          >
-            {formattedDocument}
-          </EuiCodeBlock>
-        </EuiFormRow>
-      );
+      docIdToExpandedRowMapValues[item.id] = this.createDocumentBlock(item);
     }
 
     this.setState({ docIdToExpandedRowMap: docIdToExpandedRowMapValues });
   }
 
   renderFindingDocuments(loadingIndexPatternId: boolean) {
     const {
-      finding: { index, document_list, related_doc_ids },
+      finding: { index },
     } = this.props;
     const { indexPatternId, docIdToExpandedRowMap } = this.state;
-    const relatedDocIdsSet = new Set(related_doc_ids);
-    const relatedDocuments: FindingDocumentItem[] = [];
-    document_list.forEach((documentInfo) => {
-      if (documentInfo.found && relatedDocIdsSet.has(documentInfo.id)) {
-        relatedDocuments.push({ ...documentInfo, itemIdx: relatedDocuments.length });
-      }
-    });
+    const relatedDocuments: FindingDocumentItem[] = this.getRelatedDocuments();
 
     if (relatedDocuments.length === 0) {
       return (
@@ -379,10 +400,10 @@ export default class FindingDetailsFlyout extends Component<
     const actions = [
       {
         render: ({ id }: FindingDocumentItem) => (
-          <EuiToolTip title="View surrounding documents">
+          <EuiToolTip content="View surrounding documents">
             <EuiButtonIcon
               disabled={loadingIndexPatternId}
-              iconType={'popout'}
+              iconType={'inspect'}
               data-test-subj={'finding-details-flyout-view-surrounding-documents'}
               onClick={() => {
                 if (indexPatternId) {
@@ -424,7 +445,7 @@ export default class FindingDetailsFlyout extends Component<
     return (
       <>
         <EuiTitle size={'s'}>
-          <h3>Documents</h3>
+          <h3>Documents ({relatedDocuments.length})</h3>
         </EuiTitle>
         <EuiSpacer />
         <EuiFormRow label={'Index'} data-test-subj={`finding-details-flyout-rule-document-index`}>