[inspector] clusters tab MVP

src/plugins/inspector/public/views/requests/components/details/clusters_view/clusters_health/cluster_health.tsx

@@ -0,0 +1,56 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiHealth, EuiText } from '@elastic/eui';
+import { HEALTH_HEX_CODES } from './gradient';
+
+interface Props {
+  count?: number;
+  status: string;
+}
+
+export function ClusterHealth({ count, status }: Props) {
+  if (typeof count === 'number' && count === 0) {
+    return null;
+  }
+
+  let color = 'subdued';
+  let statusLabel = status;
+  if (status === 'successful') {
+    color = HEALTH_HEX_CODES.successful;
+    statusLabel = i18n.translate('inspector.requests.clusters.successfulLabel', {
+      defaultMessage: 'successful',
+    });
+  } else if (status === 'partial') {
+    color = HEALTH_HEX_CODES.partial;
+    statusLabel = i18n.translate('inspector.requests.clusters.partialLabel', {
+      defaultMessage: 'partial',
+    });
+  } else if (status === 'skipped') {
+    color = HEALTH_HEX_CODES.skipped;
+    statusLabel = i18n.translate('inspector.requests.clusters.skippedLabel', {
+      defaultMessage: 'skipped',
+    });
+  } else if (status === 'failed') {
+    color = HEALTH_HEX_CODES.failed;
+    statusLabel = i18n.translate('inspector.requests.clusters.failedLabel', {
+      defaultMessage: 'failed',
+    });
+  }
+
+  const label = typeof count === 'number' ? `${count} ${statusLabel}` : statusLabel;
+  return (
+    <EuiHealth color={color}>
+      <EuiText size="xs" color="subdued">
+        {label}
+      </EuiText>
+    </EuiHealth>
+  );
+}

src/plugins/inspector/public/views/requests/components/details/clusters_view/clusters_health/clusters_health.tsx

@@ -0,0 +1,87 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { css } from '@emotion/react';
+import { euiThemeVars } from '@kbn/ui-theme';
+import { i18n } from '@kbn/i18n';
+import type { ClusterDetails } from '@kbn/es-types';
+import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { ClusterHealth } from './cluster_health';
+import { getHeathBarLinearGradient } from './gradient';
+
+interface Props {
+  clusters: Record<string, ClusterDetails>;
+}
+
+export function ClustersHealth({ clusters }: Props) {
+  let successful = 0;
+  let partial = 0;
+  let skipped = 0;
+  let failed = 0;
+  Object.values(clusters).forEach((clusterDetails) => {
+    if (clusterDetails.status === 'successful') {
+      successful++;
+    } else if (clusterDetails.status === 'partial') {
+      partial++;
+    } else if (clusterDetails.status === 'skipped') {
+      skipped++;
+    } else if (clusterDetails.status === 'failed') {
+      failed++;
+    }
+  });
+
+  return (
+    <>
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false}>
+          <EuiText size="xs" color="subdued">
+            {i18n.translate('inspector.requests.clusters.totalClustersLabel', {
+              defaultMessage: '{total} {total, plural, one {cluster} other {clusters}}',
+              values: { total: Object.keys(clusters).length },
+            })}
+          </EuiText>
+        </EuiFlexItem>
+
+        {successful > 0 ? (
+          <EuiFlexItem grow={false}>
+            <ClusterHealth count={successful} status="successful" />
+          </EuiFlexItem>
+        ) : null}
+
+        {partial > 0 ? (
+          <EuiFlexItem grow={false}>
+            <ClusterHealth count={partial} status="partial" />
+          </EuiFlexItem>
+        ) : null}
+
+        {skipped > 0 ? (
+          <EuiFlexItem grow={false}>
+            <ClusterHealth count={skipped} status="skipped" />
+          </EuiFlexItem>
+        ) : null}
+
+        {failed > 0 ? (
+          <EuiFlexItem grow={false}>
+            <ClusterHealth count={failed} status="failed" />
+          </EuiFlexItem>
+        ) : null}
+      </EuiFlexGroup>
+
+      <div
+        css={css`
+          background: ${getHeathBarLinearGradient(successful, partial, skipped, failed)};
+          border-radius: ${euiThemeVars.euiBorderRadiusSmall};
+          height: ${euiThemeVars.euiSizeS};
+          margin-top: ${euiThemeVars.euiSizeXS};
+          margin-bottom: ${euiThemeVars.euiSizeS};
+        `}
+      />
+    </>
+  );
+}

src/plugins/inspector/public/views/requests/components/details/clusters_view/clusters_health/gradient.test.ts

@@ -0,0 +1,23 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { getHeathBarLinearGradient, HEALTH_HEX_CODES } from './gradient';
+
+describe('getHeathBarLinearGradient', () => {
+  test('should return linear-gradient with percentages for each status', () => {
+    expect(getHeathBarLinearGradient(5, 1, 1, 2)).toBe(
+      `linear-gradient(to right, ${HEALTH_HEX_CODES.successful} 0% 56%, ${HEALTH_HEX_CODES.partial} 56% 67%, ${HEALTH_HEX_CODES.skipped} 67% 78%, ${HEALTH_HEX_CODES.failed} 78% 100%)`
+    );
+  });
+
+  test('should return linear-gradient with percentages for each status with count above zero', () => {
+    expect(getHeathBarLinearGradient(5, 0, 0, 2)).toBe(
+      `linear-gradient(to right, ${HEALTH_HEX_CODES.successful} 0% 71%, ${HEALTH_HEX_CODES.failed} 71% 100%)`
+    );
+  });
+});

src/plugins/inspector/public/views/requests/components/details/clusters_view/clusters_health/gradient.ts

@@ -0,0 +1,51 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { euiThemeVars } from '@kbn/ui-theme';
+
+export const HEALTH_HEX_CODES = {
+  successful: euiThemeVars.euiColorSuccess,
+  partial: euiThemeVars.euiColorWarning,
+  skipped: '#DA8B45',
+  failed: euiThemeVars.euiColorDanger,
+};
+
+export function getHeathBarLinearGradient(
+  successful: number,
+  partial: number,
+  skipped: number,
+  failed: number
+) {
+  const total = successful + partial + skipped + failed;
+  const stops: string[] = [];
+  let startPercent: number = 0;
+
+  function addStop(value: number, color: string) {
+    if (value <= 0) {
+      return;
+    }
+
+    const percent = Math.round((value / total) * 100);
+    const endPercent = startPercent + percent;
+    stops.push(`${color} ${startPercent}% ${endPercent}%`);
+    startPercent = endPercent;
+  }
+
+  addStop(successful, HEALTH_HEX_CODES.successful);
+  addStop(partial, HEALTH_HEX_CODES.partial);
+  addStop(skipped, HEALTH_HEX_CODES.skipped);
+  addStop(failed, HEALTH_HEX_CODES.failed);
+
+  const printedStops = stops
+    .map((stop, index) => {
+      return index === stops.length - 1 ? stop : stop + ', ';
+    })
+    .join('');
+
+  return `linear-gradient(to right, ${printedStops})`;
+}

src/plugins/inspector/public/views/requests/components/details/clusters_view/clusters_health/index.ts

@@ -0,0 +1,10 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { ClustersHealth } from './clusters_health';
+export { ClusterHealth } from './cluster_health';