diff --git a/src/lib/components/statusicon/StatusIcon.component.tsx b/src/lib/components/statusicon/StatusIcon.component.tsx new file mode 100644 index 0000000000..faa2962963 --- /dev/null +++ b/src/lib/components/statusicon/StatusIcon.component.tsx @@ -0,0 +1,55 @@ +import { Icon, IconName } from '../icon/Icon.component'; +import { + STATUS_WARNING, + STATUS_CRITICAL, + STATUS_HEALTHY, +} from '../../components/constants'; +import { CoreUITheme } from '../../style/theme'; +import { Loader } from '../loader/Loader.component'; + +export enum Status { + HEALTHY = 'healthy', + WARNING = 'warning', + CRITICAL = 'critical', + UNKNOWN = 'unknown', + LOADING = 'loading', +} + +export const StatusIcon = ({ status }: { status: Status }) => { + if (status === 'loading') { + return ; + } + const icon: { color: keyof CoreUITheme; name: IconName; label: string } = + (() => { + switch (status) { + case STATUS_HEALTHY: + return { + color: 'statusHealthy', + name: 'Check-circle', + label: 'Healthy status icon', + }; + + case STATUS_WARNING: + return { + color: 'statusWarning', + name: 'Times-circle', + label: 'Warning status icon', + }; + + case STATUS_CRITICAL: + return { + color: 'statusCritical', + name: 'Times-circle', + label: 'Critical status icon', + }; + default: + return { + color: 'textTertiary', + name: 'Info', + label: 'Information status icon', + }; + } + })(); + + 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..3529a5c1df --- /dev/null +++ b/stories/statusicon.stories.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { + Status, + StatusIcon, +} from '../src/lib/components/statusicon/StatusIcon.component'; +import { Wrapper } from './common'; +import { Stack, Text } from '../src/lib'; + +export default { + title: 'Components/statusIcon', + component: StatusIcon, +}; + +export const Playground = { + args: { + status: 'healthy', + }, +}; +export const Default = { + render: ({}) => { + return ( + + + Healthy status + {' '} + + + Warning status + + + + Critical status + + + + Loading status + + + + Unknown status + + + + ); + }, +};