[Backport 2.9][Custom log types] CRUD operations for log types (#675)

public/pages/LogTypes/components/DeleteLogTypeModal.tsx

@@ -0,0 +1,115 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButton,
+  EuiCallOut,
+  EuiConfirmModal,
+  EuiFieldText,
+  EuiForm,
+  EuiFormRow,
+  EuiLoadingSpinner,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiOverlayMask,
+  EuiSpacer,
+} from '@elastic/eui';
+import React from 'react';
+import { useState } from 'react';
+
+export interface DeleteLogTypeModalProps {
+  logTypeName: string;
+  detectionRulesCount: number;
+  loading?: boolean;
+  closeModal: () => void;
+  onConfirm: () => void;
+}
+
+export const DeleteLogTypeModal: React.FC<DeleteLogTypeModalProps> = ({
+  detectionRulesCount,
+  logTypeName,
+  loading,
+  closeModal,
+  onConfirm,
+}) => {
+  const [confirmDeleteText, setConfirmDeleteText] = useState('');
+
+  if (loading) {
+    return (
+      <EuiOverlayMask>
+        <EuiModal onClose={closeModal}>
+          <EuiLoadingSpinner size="l" />
+        </EuiModal>
+      </EuiOverlayMask>
+    );
+  }
+
+  const onConfirmClick = () => {
+    onConfirm();
+    closeModal();
+  };
+
+  return (
+    <EuiOverlayMask>
+      {detectionRulesCount > 0 ? (
+        <EuiModal onClose={closeModal}>
+          <EuiModalHeader>
+            <EuiModalHeaderTitle>
+              <h1>This log type can't be deleted</h1>
+            </EuiModalHeaderTitle>
+          </EuiModalHeader>
+          <EuiModalBody>
+            <EuiCallOut
+              size="s"
+              title={`This log type is associated with ${detectionRulesCount} detection ${
+                detectionRulesCount > 1 ? 'rules' : 'rule'
+              }.`}
+              iconType={'iInCircle'}
+              color="warning"
+            />
+            <EuiSpacer />
+            <p>
+              Only log types that don’t have any associated rules can be deleted. Consider editing
+              log type or deleting associated detection rules.
+            </p>
+          </EuiModalBody>
+          <EuiModalFooter>
+            <EuiButton onClick={closeModal} fill>
+              Close
+            </EuiButton>
+          </EuiModalFooter>
+        </EuiModal>
+      ) : (
+        <EuiConfirmModal
+          title={`Delete log type?`}
+          onCancel={closeModal}
+          onConfirm={onConfirmClick}
+          cancelButtonText={'Cancel'}
+          confirmButtonText={`Delete log type`}
+          buttonColor={'danger'}
+          defaultFocusedButton="confirm"
+          confirmButtonDisabled={confirmDeleteText != logTypeName}
+        >
+          <EuiForm>
+            <p>The log type will be permanently deleted. This action is irreversible.</p>
+            <EuiSpacer size="s" />
+            <p style={{ marginBottom: '0.3rem' }}>
+              Type <b>{logTypeName}</b> to confirm
+            </p>
+            <EuiFormRow>
+              <EuiFieldText
+                value={confirmDeleteText}
+                onChange={(e) => setConfirmDeleteText(e.target.value)}
+              />
+            </EuiFormRow>
+          </EuiForm>
+        </EuiConfirmModal>
+      )}
+    </EuiOverlayMask>
+  );
+};

public/pages/LogTypes/components/LogTypeDetails.tsx

@@ -0,0 +1,72 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiButton, EuiDescriptionList } from '@elastic/eui';
+import { ContentPanel } from '../../../components/ContentPanel';
+import React from 'react';
+import { LogTypeItem } from '../../../../types';
+import { DataStore } from '../../../store/DataStore';
+import { LogTypeForm } from './LogTypeForm';
+import { NotificationsStart } from 'opensearch-dashboards/public';
+
+export interface LogTypeDetailsProps {
+  initialLogTypeDetails: LogTypeItem;
+  logTypeDetails: LogTypeItem;
+  isEditMode: boolean;
+  notifications: NotificationsStart;
+  setIsEditMode: (isEdit: boolean) => void;
+  setLogTypeDetails: (logType: LogTypeItem) => void;
+}
+
+export const LogTypeDetails: React.FC<LogTypeDetailsProps> = ({
+  initialLogTypeDetails,
+  logTypeDetails,
+  isEditMode,
+  notifications,
+  setIsEditMode,
+  setLogTypeDetails,
+}) => {
+  const onUpdateLogType = async () => {
+    const success = await DataStore.logTypes.updateLogType(logTypeDetails);
+    if (success) {
+      setIsEditMode(false);
+    }
+  };
+
+  return (
+    <ContentPanel
+      title="Details"
+      actions={
+        !isEditMode &&
+        logTypeDetails.source.toLocaleLowerCase() !== 'sigma' && [
+          <EuiButton onClick={() => setIsEditMode(true)}>Edit</EuiButton>,
+        ]
+      }
+    >
+      <EuiDescriptionList
+        type="column"
+        listItems={[
+          {
+            title: 'Log type',
+            description: (
+              <LogTypeForm
+                logTypeDetails={logTypeDetails}
+                isEditMode={isEditMode}
+                confirmButtonText={'Update'}
+                notifications={notifications}
+                setLogTypeDetails={setLogTypeDetails}
+                onCancel={() => {
+                  setLogTypeDetails(initialLogTypeDetails);
+                  setIsEditMode(false);
+                }}
+                onConfirm={onUpdateLogType}
+              />
+            ),
+          },
+        ]}
+      />
+    </ContentPanel>
+  );
+};

public/pages/LogTypes/components/LogTypeDetectionRules.tsx

@@ -3,8 +3,30 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import React from 'react';
+import { RulesTable } from '../../Rules/components/RulesTable/RulesTable';
+import { RuleTableItem } from '../../Rules/utils/helpers';
+import { ContentPanel } from '../../../components/ContentPanel';
+import { EuiButton } from '@elastic/eui';
+
 export interface LogTypeDetectionRulesProps {
-  logTypeId: string;
+  rules: RuleTableItem[];
+  loadingRules: boolean;
+  refreshRules: () => void;
 }
 
-export const LogTypeDetectionRules = () => {};
+export const LogTypeDetectionRules: React.FC<LogTypeDetectionRulesProps> = ({
+  rules,
+  loadingRules,
+  refreshRules,
+}) => {
+  return (
+    <ContentPanel
+      title="Detection rules"
+      hideHeaderBorder={true}
+      actions={[<EuiButton onClick={refreshRules}>Refresh</EuiButton>]}
+    >
+      <RulesTable loading={loadingRules} ruleItems={rules} showRuleDetails={() => {}} />
+    </ContentPanel>
+  );
+};

public/pages/LogTypes/components/LogTypeForm.tsx

@@ -0,0 +1,124 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiBottomBar,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiSpacer,
+  EuiTextArea,
+} from '@elastic/eui';
+import { LogTypeItem } from '../../../../types';
+import React from 'react';
+import { validateName } from '../../../utils/validation';
+import { NotificationsStart } from 'opensearch-dashboards/public';
+import { useState } from 'react';
+
+export interface LogTypeFormProps {
+  logTypeDetails: LogTypeItem;
+  isEditMode: boolean;
+  confirmButtonText: string;
+  notifications: NotificationsStart;
+  setLogTypeDetails: (logType: LogTypeItem) => void;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+export const LogTypeForm: React.FC<LogTypeFormProps> = ({
+  logTypeDetails,
+  isEditMode,
+  confirmButtonText,
+  notifications,
+  setLogTypeDetails,
+  onCancel,
+  onConfirm,
+}) => {
+  const [nameError, setNameError] = useState('');
+
+  const updateErrors = (details = logTypeDetails) => {
+    const nameInvalid = !validateName(details.name);
+    setNameError(nameInvalid ? 'Invalid name' : '');
+
+    return { nameInvalid };
+  };
+  const onConfirmClicked = () => {
+    const { nameInvalid } = updateErrors();
+
+    if (nameInvalid) {
+      notifications?.toasts.addDanger({
+        title: `Failed to ${confirmButtonText.toLowerCase()}`,
+        text: `Fix the marked errors.`,
+        toastLifeTimeMs: 3000,
+      });
+
+      return;
+    }
+    onConfirm();
+  };
+
+  return (
+    <>
+      <EuiFormRow
+        label="Name"
+        helpText={
+          isEditMode &&
+          'Must contain 5-50 characters. Valid characters are a-z, A-Zm 0-9, hyphens, spaces, and underscores'
+        }
+        isInvalid={!!nameError}
+        error={nameError}
+      >
+        <EuiFieldText
+          value={logTypeDetails?.name}
+          onChange={(e) => {
+            const newLogType = {
+              ...logTypeDetails!,
+              name: e.target.value,
+            };
+            setLogTypeDetails(newLogType);
+            updateErrors(newLogType);
+          }}
+          placeholder="Enter name for the log type"
+          disabled={!isEditMode || !!logTypeDetails.detectionRules}
+        />
+      </EuiFormRow>
+      <EuiSpacer />
+      <EuiFormRow label="Description">
+        <EuiTextArea
+          value={logTypeDetails?.description}
+          onChange={(e) => {
+            const newLogType = {
+              ...logTypeDetails!,
+              description: e.target.value,
+            };
+            setLogTypeDetails(newLogType);
+            updateErrors(newLogType);
+          }}
+          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={onCancel}>
+                Cancel
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButton color="primary" fill iconType="check" size="s" onClick={onConfirmClicked}>
+                {confirmButtonText}
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiBottomBar>
+      ) : null}
+    </>
+  );
+};