[Security Solution] Asset criticality UI

x-pack/plugins/security_solution/public/entity_analytics/api/api.ts

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import type { AssetCriticalityRecord } from '../../../common/api/entity_analytics/asset_criticality';
 import {
   RISK_ENGINE_STATUS_URL,
   RISK_SCORE_PREVIEW_URL,
@@ -13,6 +14,7 @@ import {
   RISK_ENGINE_INIT_URL,
   RISK_ENGINE_PRIVILEGES_URL,
   ASSET_CRITICALITY_PRIVILEGES_URL,
+  ASSET_CRITICALITY_URL,
 } from '../../../common/constants';
 
 import type {
@@ -24,6 +26,8 @@ import type {
 } from '../../../server/lib/entity_analytics/types';
 import type { RiskScorePreviewRequestSchema } from '../../../common/entity_analytics/risk_engine/risk_score_preview/request_schema';
 import type { EntityAnalyticsPrivileges } from '../../../common/api/entity_analytics/common';
+import type { SnakeToCamelCase } from '../common/utils';
+
 import { useKibana } from '../../common/lib/kibana/kibana_react';
 
 export const useEntityAnalyticsRoutes = () => {
@@ -101,6 +105,35 @@ export const useEntityAnalyticsRoutes = () => {
       method: 'GET',
     });
 
+  /**
+   * Create asset criticality
+   */
+  const createAssetCriticality = async (
+    params: Pick<AssetCriticality, 'idField' | 'idValue' | 'criticalityLevel'>
+  ): Promise<AssetCriticalityRecord> =>
+    http.fetch<AssetCriticalityRecord>(ASSET_CRITICALITY_URL, {
+      version: '1',
+      method: 'POST',
+      body: JSON.stringify({
+        id_value: params.idValue,
+        id_field: params.idField,
+        criticality_level: params.criticalityLevel,
+      }),
+    });
+
+  /**
+   * Get asset criticality
+   */
+  const fetchAssetCriticality = async (
+    params: Pick<AssetCriticality, 'idField' | 'idValue'>
+  ): Promise<AssetCriticalityRecord> => {
+    return http.fetch<AssetCriticalityRecord>(ASSET_CRITICALITY_URL, {
+      version: '1',
+      method: 'GET',
+      query: { id_value: params.idValue, id_field: params.idField },
+    });
+  };
+
   return {
     fetchRiskScorePreview,
     fetchRiskEngineStatus,
@@ -109,5 +142,9 @@ export const useEntityAnalyticsRoutes = () => {
     disableRiskEngine,
     fetchRiskEnginePrivileges,
     fetchAssetCriticalityPrivileges,
+    createAssetCriticality,
+    fetchAssetCriticality,
   };
 };
+
+export type AssetCriticality = SnakeToCamelCase<AssetCriticalityRecord>;

x-pack/plugins/security_solution/public/entity_analytics/common/utils.ts

@@ -32,3 +32,20 @@ export const RISK_SCORE_RANGES = {
   [RiskSeverity.high]: { start: 70, stop: 90 },
   [RiskSeverity.critical]: { start: 90, stop: 100 },
 };
+
+type SnakeToCamelCaseString<S extends string> = S extends `${infer T}_${infer U}`
+  ? `${T}${Capitalize<SnakeToCamelCaseString<U>>}`
+  : S;
+
+type SnakeToCamelCaseArray<T> = T extends Array<infer ArrayItem>
+  ? Array<SnakeToCamelCase<ArrayItem>>
+  : T;
+
+// TODO #173073 @tiansivive Add to utilities in `packages/kbn-utility-types`
+export type SnakeToCamelCase<T> = T extends Record<string, unknown>
+  ? {
+      [K in keyof T as SnakeToCamelCaseString<K & string>]: SnakeToCamelCase<T[K]>;
+    }
+  : T extends unknown[]
+  ? SnakeToCamelCaseArray<T>
+  : T;

x-pack/plugins/security_solution/public/entity_analytics/components/asset_criticality/asset_criticality_selector.tsx

@@ -0,0 +1,207 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { EuiSuperSelectOption } from '@elastic/eui';
+
+import {
+  EuiAccordion,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHealth,
+  EuiLoadingSpinner,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiSuperSelect,
+  EuiText,
+  EuiHorizontalRule,
+} from '@elastic/eui';
+
+import React, { useState } from 'react';
+
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import {
+  CRITICALITY_LEVEL_DESCRIPTION,
+  CRITICALITY_LEVEL_TITLE,
+  PICK_ASSET_CRITICALITY,
+} from './translations';
+import type { Entity, ModalState, State } from './use_asset_criticality';
+import { useAssetCriticalityData, useCriticalityModal } from './use_asset_criticality';
+import type { CriticalityLevel } from './common';
+import { CRITICALITY_LEVEL_COLOR } from './common';
+
+interface Props {
+  entity: Entity;
+}
+export const AssetCriticalitySelector: React.FC<Props> = ({ entity }) => {
+  const modal = useCriticalityModal();
+  const criticality = useAssetCriticalityData(entity, modal);
+
+  if (criticality.privileges.isLoading || !criticality.privileges.data?.has_all_required) {
+    return null;
+  }
+
+  return (
+    <>
+      <EuiHorizontalRule />
+      <EuiAccordion
+        id="asset-criticality-selector"
+        buttonContent={
+          <FormattedMessage
+            id="xpack.securitySolution.entityAnalytics.assetCriticality.accordionTitle"
+            defaultMessage="Asset Criticality"
+          />
+        }
+        data-test-subj="asset-criticality-selector"
+      >
+        {criticality.query.isLoading || criticality.mutation.isLoading ? (
+          <EuiLoadingSpinner size="s" />
+        ) : (
+          <EuiFlexGroup
+            direction="row"
+            alignItems="center"
+            justifyContent="spaceBetween"
+            wrap={false}
+          >
+            <EuiFlexItem>
+              <EuiText size="s">
+                {criticality.status === 'update' && criticality.query.data?.criticality_level ? (
+                  <EuiHealth
+                    data-test-subj="asset-criticality-level"
+                    color={CRITICALITY_LEVEL_COLOR[criticality.query.data.criticality_level]}
+                  >
+                    {CRITICALITY_LEVEL_TITLE[criticality.query.data.criticality_level]}
+                  </EuiHealth>
+                ) : (
+                  <EuiHealth color="subdued">
+                    <FormattedMessage
+                      id="xpack.securitySolution.entityAnalytics.assetCriticality.noCriticality"
+                      defaultMessage="No criticality assigned yet"
+                    />
+                  </EuiHealth>
+                )}
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem css={{ flexGrow: 'unset' }}>
+              <EuiButtonEmpty
+                data-test-subj="asset-criticality-change-btn"
+                iconType="arrowStart"
+                iconSide="left"
+                flush="right"
+                onClick={() => modal.toggle(true)}
+              >
+                {criticality.status === 'update' ? (
+                  <FormattedMessage
+                    id="xpack.securitySolution.entityAnalytics.assetCriticality.changeButton"
+                    defaultMessage="Change"
+                  />
+                ) : (
+                  <FormattedMessage
+                    id="xpack.securitySolution.entityAnalytics.assetCriticality.createButton"
+                    defaultMessage="Create"
+                  />
+                )}
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        )}
+      </EuiAccordion>
+      <EuiHorizontalRule />
+      {modal.visible ? (
+        <AssetCriticalityModal entity={entity} criticality={criticality} modal={modal} />
+      ) : null}
+    </>
+  );
+};
+
+interface ModalProps {
+  criticality: State;
+  modal: ModalState;
+  entity: Entity;
+}
+const AssetCriticalityModal: React.FC<ModalProps> = ({ criticality, modal, entity }) => {
+  const [value, setNewValue] = useState<CriticalityLevel>(
+    criticality.query.data?.criticality_level ?? 'normal'
+  );
+
+  return (
+    <EuiModal onClose={() => modal.toggle(false)}>
+      <EuiModalHeader>
+        <EuiModalHeaderTitle data-test-subj="asset-criticality-modal-title">
+          {PICK_ASSET_CRITICALITY}
+        </EuiModalHeaderTitle>
+      </EuiModalHeader>
+      <EuiModalBody>
+        <EuiSuperSelect
+          id={modal.basicSelectId}
+          options={options}
+          valueOfSelected={value}
+          onChange={setNewValue}
+          aria-label={PICK_ASSET_CRITICALITY}
+          data-test-subj="asset-criticality-modal-select"
+        />
+      </EuiModalBody>
+      <EuiModalFooter>
+        <EuiButtonEmpty onClick={() => modal.toggle(false)}>
+          <FormattedMessage
+            id="xpack.securitySolution.entityAnalytics.assetCriticality.cancelButton"
+            defaultMessage="Cancel"
+          />
+        </EuiButtonEmpty>
+
+        <EuiButton
+          onClick={() =>
+            criticality.mutation.mutate({
+              criticalityLevel: value,
+              idField: `${entity.type}.name`,
+              idValue: entity.name,
+            })
+          }
+          fill
+          data-test-subj="asset-criticality-modal-save-btn"
+        >
+          <FormattedMessage
+            id="xpack.securitySolution.entityAnalytics.assetCriticality.saveButton"
+            defaultMessage="Save"
+          />
+        </EuiButton>
+      </EuiModalFooter>
+    </EuiModal>
+  );
+};
+
+const option = (level: CriticalityLevel): EuiSuperSelectOption<CriticalityLevel> => ({
+  value: level,
+  dropdownDisplay: (
+    <EuiHealth
+      color={CRITICALITY_LEVEL_COLOR[level]}
+      style={{ lineHeight: 'inherit' }}
+      data-test-subj="asset-criticality-modal-select-option"
+    >
+      <strong>{CRITICALITY_LEVEL_TITLE[level]}</strong>
+      <EuiText size="s" color="subdued">
+        <p>{CRITICALITY_LEVEL_DESCRIPTION[level]}</p>
+      </EuiText>
+    </EuiHealth>
+  ),
+  inputDisplay: (
+    <EuiHealth color={CRITICALITY_LEVEL_COLOR[level]} style={{ lineHeight: 'inherit' }}>
+      {CRITICALITY_LEVEL_TITLE[level]}
+    </EuiHealth>
+  ),
+});
+const options: Array<EuiSuperSelectOption<CriticalityLevel>> = [
+  option('normal'),
+  option('not_important'),
+  option('important'),
+  option('very_important'),
+];

x-pack/plugins/security_solution/public/entity_analytics/components/asset_criticality/common.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { euiLightVars } from '@kbn/ui-theme';
+import type { AssetCriticalityRecord } from '../../../../common/api/entity_analytics/asset_criticality';
+
+export type CriticalityLevel = AssetCriticalityRecord['criticality_level'];
+
+export const CRITICALITY_LEVEL_COLOR: Record<CriticalityLevel, string> = {
+  very_important: '#E7664C',
+  important: '#D6BF57',
+  normal: '#54B399',
+  not_important: euiLightVars.euiColorMediumShade,
+};
+
+// SUGGESTION: @tiansivive Move this to some more general place within Entity Analytics
+export const buildCriticalityQueryKeys = (id: string) => {
+  const ASSET_CRITICALITY = 'ASSET_CRITICALITY';
+  const PRIVILEGES = 'PRIVILEGES';
+  return {
+    doc: [ASSET_CRITICALITY, id],
+    privileges: [ASSET_CRITICALITY, PRIVILEGES, id],
+  };
+};

x-pack/plugins/security_solution/public/entity_analytics/components/asset_criticality/translations.ts

@@ -0,0 +1,69 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+import type { CriticalityLevel } from './common';
+
+export const PICK_ASSET_CRITICALITY = i18n.translate(
+  'xpack.securitySolution.entityAnalytics.assetCriticality.pickerText',
+  {
+    defaultMessage: 'Pick asset criticality level',
+  }
+);
+
+export const CRITICALITY_LEVEL_TITLE: Record<CriticalityLevel, string> = {
+  normal: i18n.translate(
+    'xpack.securitySolution.entityAnalytics.assetCriticality.levelTitle.normal',
+    {
+      defaultMessage: 'Normal',
+    }
+  ),
+  not_important: i18n.translate(
+    'xpack.securitySolution.entityAnalytics.assetCriticality.levelTitle.notImportant',
+    {
+      defaultMessage: 'Not important',
+    }
+  ),
+  important: i18n.translate(
+    'xpack.securitySolution.entityAnalytics.assetCriticality.levelTitle.important',
+    {
+      defaultMessage: 'Important',
+    }
+  ),
+  very_important: i18n.translate(
+    'xpack.securitySolution.entityAnalytics.assetCriticality.levelTitle.veryImportant',
+    {
+      defaultMessage: 'Very important',
+    }
+  ),
+};
+export const CRITICALITY_LEVEL_DESCRIPTION: Record<CriticalityLevel, string> = {
+  normal: i18n.translate(
+    'xpack.securitySolution.entityAnalytics.assetCriticality.levelDescription.normal',
+    {
+      defaultMessage: 'Entity risk score rises at normal speed',
+    }
+  ),
+  not_important: i18n.translate(
+    'xpack.securitySolution.entityAnalytics.assetCriticality.levelDescription.notImportant',
+    {
+      defaultMessage: 'Entity risk score rises slower',
+    }
+  ),
+  important: i18n.translate(
+    'xpack.securitySolution.entityAnalytics.assetCriticality.levelDescription.important',
+    {
+      defaultMessage: 'Entity risk score rises faster',
+    }
+  ),
+  very_important: i18n.translate(
+    'xpack.securitySolution.entityAnalytics.assetCriticality.levelDescription.veryImportant',
+    {
+      defaultMessage: 'Entity risk score rises much faster',
+    }
+  ),
+};