feat(slo): Add enable/disable actions (#205518)

Author: kdelemme

x-pack/solutions/observability/plugins/slo/public/components/slo/disable_confirmation_modal/slo_disable_confirmation_modal.tsx

@@ -0,0 +1,45 @@
+/*
+ * 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 { EuiConfirmModal } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { SLODefinitionResponse, SLOWithSummaryResponse } from '@kbn/slo-schema';
+import React from 'react';
+
+export interface Props {
+  slo: SLOWithSummaryResponse | SLODefinitionResponse;
+  onCancel: () => void;
+  onConfirm: () => void;
+  isLoading?: boolean;
+}
+
+export function SloDisableConfirmationModal({ slo, onCancel, onConfirm, isLoading }: Props) {
+  const { name } = slo;
+  return (
+    <EuiConfirmModal
+      buttonColor="primary"
+      data-test-subj="sloDisableConfirmationModal"
+      title={i18n.translate('xpack.slo.disableConfirmationModal.title', {
+        defaultMessage: 'Disable {name}?',
+        values: { name },
+      })}
+      cancelButtonText={i18n.translate('xpack.slo.disableConfirmationModal.cancelButtonLabel', {
+        defaultMessage: 'Cancel',
+      })}
+      confirmButtonText={i18n.translate('xpack.slo.disableConfirmationModal.disableButtonLabel', {
+        defaultMessage: 'Disable',
+      })}
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+      isLoading={isLoading}
+    >
+      {i18n.translate('xpack.slo.disableConfirmationModal.descriptionText', {
+        defaultMessage: 'Disabling this SLO will stop generating data until it is enabled again.',
+      })}
+    </EuiConfirmModal>
+  );
+}

x-pack/solutions/observability/plugins/slo/public/components/slo/enable_confirmation_modal/slo_enable_confirmation_modal.tsx

@@ -0,0 +1,45 @@
+/*
+ * 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 { EuiConfirmModal } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { SLODefinitionResponse, SLOWithSummaryResponse } from '@kbn/slo-schema';
+import React from 'react';
+
+export interface Props {
+  slo: SLOWithSummaryResponse | SLODefinitionResponse;
+  onCancel: () => void;
+  onConfirm: () => void;
+  isLoading?: boolean;
+}
+
+export function SloEnableConfirmationModal({ slo, onCancel, onConfirm, isLoading }: Props) {
+  const { name } = slo;
+  return (
+    <EuiConfirmModal
+      buttonColor="primary"
+      data-test-subj="sloEnableConfirmationModal"
+      title={i18n.translate('xpack.slo.enableConfirmationModal.title', {
+        defaultMessage: 'Enable {name}?',
+        values: { name },
+      })}
+      cancelButtonText={i18n.translate('xpack.slo.enableConfirmationModal.cancelButtonLabel', {
+        defaultMessage: 'Cancel',
+      })}
+      confirmButtonText={i18n.translate('xpack.slo.enableConfirmationModal.enableButtonLabel', {
+        defaultMessage: 'Enable',
+      })}
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+      isLoading={isLoading}
+    >
+      {i18n.translate('xpack.slo.enableConfirmationModal.descriptionText', {
+        defaultMessage: 'Enabling this SLO will generate the missing data since it was disabled.',
+      })}
+    </EuiConfirmModal>
+  );
+}

x-pack/solutions/observability/plugins/slo/public/components/slo/slo_status_badge/index.tsx renamed to x-pack/solutions/observability/plugins/slo/public/components/slo/slo_badges/index.tsx

@@ -6,3 +6,5 @@
  */
 
 export { SloStatusBadge } from './slo_status_badge';
+export { SloActiveAlertsBadge } from './slo_active_alerts_badge';
+export { SloStateBadge } from './slo_state_badge';

x-pack/solutions/observability/plugins/slo/public/components/slo/slo_status_badge/slo_active_alerts_badge.stories.tsx renamed to x-pack/solutions/observability/plugins/slo/public/components/slo/slo_badges/slo_active_alerts_badge.stories.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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 React from 'react';
+import { EuiBadge, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { SLOWithSummaryResponse } from '@kbn/slo-schema';
+
+export interface Props {
+  slo: SLOWithSummaryResponse;
+}
+
+export function SloStateBadge({ slo }: Props) {
+  const isEnabled = slo.enabled;
+  if (isEnabled) {
+    return null;
+  }
+
+  return (
+    <EuiFlexItem grow={false}>
+      <EuiToolTip
+        position="top"
+        content={i18n.translate('xpack.slo.sloStateBadge.disabled.tooltip', {
+          defaultMessage: 'This SLO is disabled. Enable it to start processing data.',
+        })}
+      >
+        <EuiBadge color="default">
+          {i18n.translate('xpack.slo.sloStateBadge.disabled.label', {
+            defaultMessage: 'Disabled',
+          })}
+        </EuiBadge>
+      </EuiToolTip>
+    </EuiFlexItem>
+  );
+}

x-pack/solutions/observability/plugins/slo/public/components/slo/slo_status_badge/slo_active_alerts_badge.tsx renamed to x-pack/solutions/observability/plugins/slo/public/components/slo/slo_badges/slo_active_alerts_badge.tsx

@@ -95,8 +95,6 @@ export function SloOverview({ sloId, sloInstanceId, remoteName, reloadSubject }:
   const rules = rulesBySlo?.[slo?.id];
   const activeAlerts = activeAlertsBySlo.get(slo);
 
-  const hasGroupBy = Boolean(slo.groupBy && slo.groupBy !== ALL_VALUE);
-
   const historicalSummary = historicalSummaries.find(
     (histSummary) =>
       histSummary.sloId === slo.id && histSummary.instanceId === (slo.instanceId ?? ALL_VALUE)
@@ -112,14 +110,7 @@ export function SloOverview({ sloId, sloInstanceId, remoteName, reloadSubject }:
         onClick={() => {
           setSelectedSlo(slo);
         }}
-        badges={
-          <SloCardItemBadges
-            slo={slo}
-            rules={rules}
-            activeAlerts={activeAlerts}
-            hasGroupBy={hasGroupBy}
-          />
-        }
+        badges={<SloCardItemBadges slo={slo} rules={rules} activeAlerts={activeAlerts} />}
       />
       <SloOverviewDetails slo={selectedSlo} setSelectedSlo={setSelectedSlo} />
     </div>

x-pack/solutions/observability/plugins/slo/public/components/slo/slo_badges/slo_state_badge.tsx

@@ -125,7 +125,6 @@ export function SloCardChartList({ sloId }: { sloId: string }) {
 
     const rules = rulesBySlo?.[slo?.id];
     const activeAlerts = activeAlertsBySlo.get(slo);
-    const hasGroupBy = Boolean(slo.groupBy && slo.groupBy !== ALL_VALUE);
 
     const data = getSloChartData({
       slo,
@@ -141,7 +140,6 @@ export function SloCardChartList({ sloId }: { sloId: string }) {
         rules={rules}
         activeAlerts={activeAlerts}
         handleCreateRule={() => {}}
-        hasGroupBy={hasGroupBy}
       />
     );
     chartsData[chartsData.length - 1].push(data);