[Custom log types] Show log types table, Log type creation workflow

.github/workflows/cypress-workflow.yml

@@ -7,14 +7,14 @@ on:
     branches:
       - "*"
 env:
-  OPENSEARCH_DASHBOARDS_VERSION: '2.8.0'
-  OPENSEARCH_VERSION: '2.8.0-SNAPSHOT'
+  OPENSEARCH_DASHBOARDS_VERSION: '2.9.0'
+  OPENSEARCH_VERSION: '2.9.0-SNAPSHOT'
   SECURITY_ANALYTICS_BRANCH: '2.x'
   GRADLE_VERSION: '7.6.1'
 
   # If this variable is not empty, the package.json, opensearch_dashboards.json, and yarn.lock files will be replaced
   # with those files from the 'opensearch-project/security-analytics-dashboards-plugin' branch or commit specified.
-  OVERRIDE_REFERENCE: '2.8'
+  OVERRIDE_REFERENCE: '2.9'
 jobs:
   tests:
     name: Run Cypress E2E tests

cypress/integration/1_detectors.spec.js

@@ -48,9 +48,10 @@ const validateFieldMappingsTable = (message = '') => {
     cy.wait(10000).then(() => {
       cy.get('.reviewFieldMappings').should('be.visible');
       const properties = interception.response.body.response.properties;
-      const unmapped_field_aliases = interception.response.body.response.unmapped_field_aliases.map(
-        (field) => [field]
-      );
+      const unmapped_field_aliases = interception.response.body.response.unmapped_field_aliases
+        .map((field) => [field])
+        .sort()
+        .slice(0, 10);
 
       Cypress.log({
         message: `Validate table data - ${message}`,
@@ -162,18 +163,6 @@ const createDetector = (detectorName, dataSource, expectFailure) => {
   cy.validateDetailsItem('Last updated time', '-');
   cy.validateDetailsItem('Detector dashboard', 'Not available for this log type');
 
-  if (!expectFailure) {
-    let fields = [];
-    for (let field in dns_mapping_fields) {
-      fields.push([field, dns_mapping_fields[field]]);
-    }
-    cy.getElementByText('.euiTitle', 'Field mapping')
-      .parentsUntil('.euiPanel')
-      .siblings()
-      .eq(2)
-      .validateTable(fields);
-  }
-
   validateAlertPanel('test_trigger');
 
   cy.intercept('POST', '/mappings').as('createMappingsRequest');
@@ -206,22 +195,6 @@ const createDetector = (detectorName, dataSource, expectFailure) => {
             cy.wait(5000); // waiting for the page to be reloaded after pushing detector id into route
             cy.getElementByText('button.euiTab', 'Alert triggers').should('be.visible').click();
             validateAlertPanel('test_trigger');
-
-            cy.intercept('GET', '/mappings?indexName').as('getMappingFields');
-            cy.getElementByText('button.euiTab', 'Field mappings').should('be.visible').click();
-            if (!expectFailure) {
-              let fields = [];
-              for (let field in dns_mapping_fields) {
-                fields.push([field, dns_mapping_fields[field]]);
-              }
-              cy.wait('@getMappingFields');
-              cy.wait(2000);
-              cy.getElementByText('.euiTitle', 'Field mapping')
-                .parentsUntil('.euiPanel')
-                .siblings()
-                .eq(2)
-                .validateTable(fields);
-            }
           });
         });
     });

public/components/ContentPanel/ContentPanel.tsx

@@ -11,6 +11,7 @@ import {
   EuiPanel,
   EuiTitle,
   EuiText,
+  EuiSpacer,
 } from '@elastic/eui';
 
 interface ContentPanelProps {
@@ -19,9 +20,9 @@ interface ContentPanelProps {
   subTitleText?: string | JSX.Element;
   bodyStyles?: object;
   panelStyles?: object;
-  horizontalRuleClassName?: string;
   actions?: React.ReactNode | React.ReactNode[];
   children: React.ReactNode | React.ReactNode[];
+  hideHeaderBorder?: boolean;
   className?: string;
 }
 
@@ -43,9 +44,9 @@ const ContentPanel: React.SFC<ContentPanelProps> = ({
   subTitleText = '',
   bodyStyles = {},
   panelStyles = {},
-  horizontalRuleClassName = '',
   actions,
   children,
+  hideHeaderBorder = false,
   className = '',
 }) => (
   <EuiPanel
@@ -80,7 +81,7 @@ const ContentPanel: React.SFC<ContentPanelProps> = ({
       ) : null}
     </EuiFlexGroup>
 
-    <EuiHorizontalRule margin="xs" className={horizontalRuleClassName} />
+    {hideHeaderBorder ? <EuiSpacer /> : <EuiHorizontalRule margin="xs" />}
 
     <div style={{ padding: '0px 10px', ...bodyStyles }}>{children}</div>
   </EuiPanel>

public/models/interfaces.ts

@@ -14,6 +14,7 @@ import {
   RuleService,
   NotificationsService,
   IndexPatternsService,
+  LogTypeService,
 } from '../services';
 import CorrelationService from '../services/CorrelationService';
 
@@ -29,6 +30,7 @@ export interface BrowserServices {
   notificationsService: NotificationsService;
   savedObjectsService: ISavedObjectsService;
   indexPatternsService: IndexPatternsService;
+  logTypeService: LogTypeService;
 }
 
 export interface RuleOptions {

public/pages/Alerts/containers/Alerts/__snapshots__/Alerts.test.tsx.snap

@@ -1109,7 +1109,6 @@ exports[`<Alerts /> spec renders the component 1`] = `
                     </div>
                   </EuiFlexGroup>
                   <EuiHorizontalRule
-                    className=""
                     margin="xs"
                   >
                     <hr

public/pages/Detectors/components/DetectorRulesView/__snapshots__/DetectorRulesView.test.tsx.snap

@@ -330,7 +330,6 @@ exports[`<DetectorRulesView /> spec renders the component 1`] = `
           </div>
         </EuiFlexGroup>
         <EuiHorizontalRule
-          className=""
           margin="xs"
         >
           <hr

public/pages/Detectors/components/UpdateBasicDetails/__snapshots__/UpdateDetectorBasicDetails.test.tsx.snap

@@ -665,7 +665,6 @@ exports[`<UpdateDetectorBasicDetails /> spec renders the component 1`] = `
               </div>
             </EuiFlexGroup>
             <EuiHorizontalRule
-              className=""
               margin="xs"
             >
               <hr
@@ -1165,7 +1164,6 @@ exports[`<UpdateDetectorBasicDetails /> spec renders the component 1`] = `
               </div>
             </EuiFlexGroup>
             <EuiHorizontalRule
-              className=""
               margin="xs"
             >
               <hr

public/pages/Detectors/containers/AlertTriggersView/__snapshots__/AlertTriggersView.test.tsx.snap

@@ -324,7 +324,6 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
           </div>
         </EuiFlexGroup>
         <EuiHorizontalRule
-          className=""
           margin="xs"
         >
           <hr

public/pages/Detectors/containers/Detector/__snapshots__/DetectorDetails.test.tsx.snap

@@ -1484,7 +1484,6 @@ exports[`<DetectorDetails /> spec renders the component 1`] = `
               </div>
             </EuiFlexGroup>
             <EuiHorizontalRule
-              className=""
               margin="xs"
             >
               <hr
@@ -2885,7 +2884,6 @@ exports[`<DetectorDetails /> spec renders the component 1`] = `
               </div>
             </EuiFlexGroup>
             <EuiHorizontalRule
-              className=""
               margin="xs"
             >
               <hr

public/pages/Detectors/containers/DetectorDetailsView/__snapshots__/DetectorDetailsView.test.tsx.snap

@@ -527,7 +527,6 @@ exports[`<DetectorDetailsView /> spec renders the component 1`] = `
             </div>
           </EuiFlexGroup>
           <EuiHorizontalRule
-            className=""
             margin="xs"
           >
             <hr
@@ -1709,7 +1708,6 @@ exports[`<DetectorDetailsView /> spec renders the component 1`] = `
             </div>
           </EuiFlexGroup>
           <EuiHorizontalRule
-            className=""
             margin="xs"
           >
             <hr

public/pages/LogTypes/components/LogTypeDetailsTab.tsx

@@ -0,0 +1,115 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButton,
+  EuiDescriptionList,
+  EuiFormRow,
+  EuiFieldText,
+  EuiSpacer,
+  EuiTextArea,
+  EuiBottomBar,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonEmpty,
+} from '@elastic/eui';
+import { ContentPanel } from '../../../components/ContentPanel';
+import React from 'react';
+import { LogTypeItem } from '../../../../types';
+import { DataStore } from '../../../store/DataStore';
+
+export interface LogTypeDetailsTabProps {
+  initialLogTypeDetails: LogTypeItem;
+  logTypeDetails: LogTypeItem;
+  isEditMode: boolean;
+  setIsEditMode: (isEdit: boolean) => void;
+  setLogTypeDetails: (logType: LogTypeItem) => void;
+}
+
+export const LogTypeDetailsTab: React.FC<LogTypeDetailsTabProps> = ({
+  initialLogTypeDetails,
+  logTypeDetails,
+  isEditMode,
+  setIsEditMode,
+  setLogTypeDetails,
+}) => {
+  const onUpdateLogType = async () => {
+    const success = await DataStore.logTypes.updateLogType(logTypeDetails);
+    if (success) {
+      setIsEditMode(false);
+    }
+  };
+
+  return (
+    <ContentPanel
+      title="Details"
+      actions={!isEditMode && [<EuiButton onClick={() => setIsEditMode(true)}>Edit</EuiButton>]}
+    >
+      <EuiDescriptionList
+        type="column"
+        listItems={[
+          {
+            title: 'Log type',
+            description: (
+              <>
+                <EuiFormRow label="Name">
+                  <EuiFieldText
+                    value={logTypeDetails?.name}
+                    onChange={(e) =>
+                      setLogTypeDetails({
+                        ...logTypeDetails!,
+                        name: e.target.value,
+                      })
+                    }
+                    placeholder="Enter name for log type"
+                    disabled={!isEditMode || !!logTypeDetails.detectionRules}
+                  />
+                </EuiFormRow>
+                <EuiSpacer />
+                <EuiFormRow label="Description">
+                  <EuiTextArea
+                    value={logTypeDetails?.description}
+                    onChange={(e) =>
+                      setLogTypeDetails({
+                        ...logTypeDetails!,
+                        description: e.target.value,
+                      })
+                    }
+                    placeholder="Description of the log type"
+                    disabled={!isEditMode}
+                  />
+                </EuiFormRow>
+                {isEditMode ? (
+                  <EuiBottomBar>
+                    <EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
+                      <EuiFlexItem grow={false}>
+                        <EuiButtonEmpty
+                          color="ghost"
+                          size="s"
+                          iconType="cross"
+                          onClick={() => {
+                            setLogTypeDetails(initialLogTypeDetails);
+                            setIsEditMode(false);
+                          }}
+                        >
+                          Cancel
+                        </EuiButtonEmpty>
+                      </EuiFlexItem>
+                      <EuiFlexItem grow={false}>
+                        <EuiButton color="primary" fill size="s" onClick={onUpdateLogType}>
+                          Update
+                        </EuiButton>
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
+                  </EuiBottomBar>
+                ) : null}
+              </>
+            ),
+          },
+        ]}
+      />
+    </ContentPanel>
+  );
+};

public/pages/LogTypes/components/LogTypeDetectionRules.tsx

@@ -0,0 +1,10 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export interface LogTypeDetectionRulesProps {
+  logTypeId: string;
+}
+
+export const LogTypeDetectionRules = () => {};