feat(striker-ui): add host list item in host management

striker-ui/components/ManageHost/HostListItem.tsx

@@ -0,0 +1,56 @@
+import { FC } from 'react';
+
+import Decorator, { Colours } from '../Decorator';
+import Divider from '../Divider';
+import FlexBox from '../FlexBox';
+import { BodyText, MonoText } from '../Text';
+
+const MAP_TO_DECORATOR_COLOUR: Record<string, Colours> = {
+  online: 'ok',
+  offline: 'off',
+};
+
+const MAP_TO_HOST_TYPE_DISPLAY: Record<string, string> = {
+  dr: 'DR',
+  node: 'Subnode',
+};
+
+const HostListItem: FC<HostListItemProps> = (props) => {
+  const { data } = props;
+
+  const { hostName, hostStatus, hostType, shortHostName } = data;
+
+  return (
+    <FlexBox row spacing=".5em">
+      <Decorator
+        colour={MAP_TO_DECORATOR_COLOUR[hostStatus] ?? 'warning'}
+        sx={{
+          alignSelf: 'stretch',
+          height: 'auto',
+        }}
+      />
+      <FlexBox flexGrow={1} spacing={0}>
+        <FlexBox sm="row" spacing=".5em">
+          <BodyText>{MAP_TO_HOST_TYPE_DISPLAY[hostType]}</BodyText>
+          <MonoText whiteSpace="nowrap">{shortHostName}</MonoText>
+          <Divider
+            orientation="vertical"
+            sx={{
+              alignSelf: 'stretch',
+              height: 'auto',
+            }}
+          />
+          <MonoText
+            sx={{ display: { xs: 'none', sm: 'flex' } }}
+            whiteSpace="nowrap"
+          >
+            {hostName}
+          </MonoText>
+        </FlexBox>
+        <BodyText>{hostStatus}</BodyText>
+      </FlexBox>
+    </FlexBox>
+  );
+};
+
+export default HostListItem;

striker-ui/components/ManageHost/index.tsx

@@ -1,4 +1,4 @@
+import HostListItem from './HostListItem';
 import ManageHost from './ManageHost';
-import PrepareHostForm from './PrepareHostForm';
 
-export { ManageHost, PrepareHostForm };
+export { ManageHost, HostListItem };

striker-ui/types/APIAnvil.d.ts

@@ -87,7 +87,7 @@ type AnvilStatusHost = {
   host_uuid: string;
   maintenance_mode: boolean;
   server_count: number;
-  state: 'offline' | 'booted' | 'crmd' | 'in_ccm' | 'online';
+  state: APIHostStatus;
   state_message: string;
   state_percent: number;
 };

striker-ui/types/APIHost.d.ts

@@ -28,8 +28,18 @@ type APIHostConnectionOverviewList = {
 
 type APIHostInstallTarget = 'enabled' | 'disabled';
 
+type APIHostStatus = 'offline' | 'booted' | 'crmd' | 'in_ccm' | 'online';
+
+type APIHostIPMI = {
+  command: string;
+  ip: string;
+  password: string;
+  username: string;
+};
+
 type APIHostOverview = {
   hostName: string;
+  hostStatus: APIHostStatus;
   hostType: string;
   hostUUID: string;
   shortHostName: string;
@@ -60,6 +70,7 @@ type APIHostDetail = APIHostOverview & {
   gateway?: string;
   gatewayInterface?: string;
   installTarget?: APIHostInstallTarget;
+  ipmi?: APIHostIPMI;
   networks?: APIHostNetworkList;
   organization?: string;
   prefix?: string;

striker-ui/types/ManageHost.d.ts

@@ -36,3 +36,9 @@ type PreapreHostFormProps = {
   host: InquireHostResponse;
   tools: CrudListFormTools;
 };
+
+/** HostListItem */
+
+type HostListItemProps = {
+  data: APIHostOverview;
+};