diff --git a/src/lib/components/statusicon/StatusIcon.component.tsx b/src/lib/components/statusicon/StatusIcon.component.tsx
new file mode 100644
index 0000000000..29e76a8f3a
--- /dev/null
+++ b/src/lib/components/statusicon/StatusIcon.component.tsx
@@ -0,0 +1,34 @@
+import { Icon, IconName } from '../icon/Icon.component';
+
+import {
+ STATUS_WARNING,
+ STATUS_CRITICAL,
+ STATUS_HEALTH,
+} from '../tablev2/TableUtils';
+
+export enum StatusCluster {
+ HEALTHY = 'healthy',
+ WARNING = 'warning',
+ CRITICAL = 'critical',
+ UNKNOWN = 'unknown',
+}
+
+export const StatusIcon = ({ status }: { status: StatusCluster }) => {
+ const icon: { status: string; name: IconName } = (() => {
+ switch (status) {
+ case STATUS_HEALTH:
+ return { status: 'statusHealthy', name: 'Check-circle' };
+
+ case STATUS_WARNING:
+ return { status: 'statusWarning', name: 'Times-circle' };
+
+ case STATUS_CRITICAL:
+ return { status: 'statusCritical', name: 'Times-circle' };
+
+ default:
+ return { status: 'textTertiary', name: 'Info' };
+ }
+ })();
+
+ return ;
+};
diff --git a/src/lib/components/tablev2/TableUtils.ts b/src/lib/components/tablev2/TableUtils.ts
index ee74caa8ea..ab9727b9a8 100644
--- a/src/lib/components/tablev2/TableUtils.ts
+++ b/src/lib/components/tablev2/TableUtils.ts
@@ -1,7 +1,8 @@
-const STATUS_CRITICAL = 'critical';
-const STATUS_WARNING = 'warning';
-const STATUS_NONE = 'none';
-const STATUS_HEALTH = 'healthy';
+export const STATUS_CRITICAL = 'critical';
+export const STATUS_WARNING = 'warning';
+export const STATUS_NONE = 'none';
+export const STATUS_HEALTH = 'healthy';
+export const STATUS_UNKNOWN = 'unknown';
type StatusType =
| typeof STATUS_CRITICAL
@@ -34,8 +35,8 @@ export function compareHealth(
return weights[status1] === weights[status2]
? 0
: weights[status1] > weights[status2]
- ? 1
- : -1;
+ ? 1
+ : -1;
}
export function convertRemToPixels(rem) {
diff --git a/stories/statusicon.stories.tsx b/stories/statusicon.stories.tsx
new file mode 100644
index 0000000000..7dae62f861
--- /dev/null
+++ b/stories/statusicon.stories.tsx
@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import {
+ StatusCluster,
+ StatusIcon,
+} from '../src/lib/components/statusicon/StatusIcon.component';
+import { Wrapper } from './common';
+import styled from 'styled-components';
+import { Stack, Text } from '../src/lib';
+
+const TextWrapper = styled(Wrapper)`
+ min-height: 0;
+`;
+
+type Story = StoryObj;
+
+export default {
+ title: 'Components/statusIcon',
+ component: StatusIcon,
+ argTypes: {
+ status: {
+ control: {
+ disable: true,
+ },
+ },
+ children: {
+ control: {
+ disable: true,
+ },
+ },
+ },
+};
+
+export const Playground = {
+ render: ({}: any) => {
+ return (
+
+
+ Healthy status
+ {' '}
+
+
+ Warning status
+
+
+
+ Critical status
+
+
+
+ Unknown status
+
+
+
+ );
+ },
+};