Add ability to show containers for specific device

Moved ContainerMetas component to the 'Device' page directory. ContainerMetas has been given functionality to list containers specific to a device based on a provided device UUID. Likewise, routes are updated to link to this new device-specific container view. Other code cleanups and component restructures are also performed to improve maintainability.
SquirrelCorporation · Jul 15, 2024 · 860bff3 · 860bff3
1 parent 53a5185
commit 860bff3
Show file tree

Hide file tree

Showing 6 changed files with 401 additions and 338 deletions.
diff --git a/client/src/pages/Devices/ContainerMetas.tsx b/client/src/pages/Devices/ContainerMetas.tsx
@@ -0,0 +1,161 @@
+import ServiceQuickActionDropDown from '@/components/ServiceComponents/ServiceQuickAction/ServiceQuickActionDropDown';
+import ServiceQuickActionReference, {
+  ServiceQuickActionReferenceActions,
+  ServiceQuickActionReferenceTypes,
+} from '@/components/ServiceComponents/ServiceQuickAction/ServiceQuickActionReference';
+import ContainerAvatar from '@/pages/Services/components/ContainerAvatar';
+import ContainerStatProgress from '@/pages/Services/components/ContainerStatProgress';
+import InfoToolTipCard from '@/pages/Services/components/InfoToolTipCard';
+import StatusTag from '@/pages/Services/components/StatusTag';
+import UpdateAvailableTag from '@/pages/Services/components/UpdateAvailableTag';
+import { postContainerAction } from '@/services/rest/containers';
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { ProFieldValueType, ProListMetas } from '@ant-design/pro-components';
+import { Flex, message, Popover, Tag, Tooltip } from 'antd';
+import React from 'react';
+import { API, SsmContainer } from 'ssm-shared-lib';
+
+type ContainerMetasProps = {
+  selectedRecord?: API.Container;
+  setSelectedRecord: React.Dispatch<
+    React.SetStateAction<API.Container | undefined>
+  >;
+  setIsEditContainerCustomNameModalOpened: React.Dispatch<
+    React.SetStateAction<boolean>
+  >;
+};
+const ContainerMetas = (props: ContainerMetasProps) => {
+  const handleQuickAction = async (idx: number) => {
+    if (
+      ServiceQuickActionReference[idx].type ===
+      ServiceQuickActionReferenceTypes.ACTION
+    ) {
+      if (
+        ServiceQuickActionReference[idx].action ===
+        ServiceQuickActionReferenceActions.RENAME
+      ) {
+        props.setIsEditContainerCustomNameModalOpened(true);
+      }
+      if (
+        Object.values(SsmContainer.Actions).includes(
+          ServiceQuickActionReference[idx].action as SsmContainer.Actions,
+        )
+      ) {
+        await postContainerAction(
+          props.selectedRecord?.id as string,
+          ServiceQuickActionReference[idx].action as SsmContainer.Actions,
+        ).then(() => {
+          message.info({
+            content: `Container : ${ServiceQuickActionReference[idx].action}`,
+          });
+        });
+      }
+    }
+  };
+
+  return {
+    title: {
+      search: true,
+      title: 'Name',
+      dataIndex: 'name',
+      render: (_, row) => {
+        return row.customName || row.name;
+      },
+    },
+    subTitle: {
+      search: false,
+      render: (_, row) => {
+        return (
+          <>
+            <StatusTag status={row.status} />
+            <UpdateAvailableTag updateAvailable={row.updateAvailable} />
+          </>
+        );
+      },
+    },
+    updateAvailable: {
+      dataIndex: 'updateAvailable',
+      title: 'Update Available',
+      valueType: 'switch' as ProFieldValueType,
+    },
+    status: {
+      dataIndex: 'status',
+      title: 'Status',
+      valueType: 'select' as ProFieldValueType,
+      valueEnum: {
+        running: {
+          text: 'running',
+        },
+        paused: {
+          text: 'paused',
+        },
+      },
+    },
+    avatar: {
+      search: false,
+      render: (_, row) => {
+        return <ContainerAvatar row={row} key={row.id} />;
+      },
+    },
+    device: {
+      title: 'Device',
+      search: true,
+      dataIndex: ['device', 'uuid'],
+    },
+    content: {
+      search: false,
+      render: (_, row) => {
+        return (
+          <div
+            style={{
+              flex: 1,
+            }}
+          >
+            <div
+              style={{
+                width: 300,
+              }}
+            >
+              <>
+                On{' '}
+                <Popover content={row.device?.fqdn}>
+                  <Tag color="black">{row.device?.ip}</Tag>
+                </Popover>
+                <Flex gap="middle">
+                  <ContainerStatProgress containerId={row.id} />
+                </Flex>
+              </>
+            </div>
+          </div>
+        );
+      },
+    },
+    actions: {
+      cardActionProps: 'extra',
+      search: false,
+      render: (text, row) => [
+        <Tooltip
+          key={`info-${row.id}`}
+          color={'transparent'}
+          title={<InfoToolTipCard item={row} />}
+        >
+          <InfoCircleOutlined style={{ color: 'rgb(22, 104, 220)' }} />
+        </Tooltip>,
+        <a
+          key={`quickAction-${row.id}`}
+          onClick={() => {
+            props.setSelectedRecord(row);
+          }}
+        >
+          <ServiceQuickActionDropDown onDropDownClicked={handleQuickAction} />
+        </a>,
+      ],
+    },
+    id: {
+      dataIndex: 'id',
+      search: false,
+    },
+  } as ProListMetas<API.Container>;
+};
+
+export default ContainerMetas;
diff --git a/client/src/pages/Devices/components/ListComponent.tsx b/client/src/pages/Devices/components/ListComponent.tsx
@@ -0,0 +1,125 @@
+import { DeviceStatType } from '@/components/Charts/DeviceStatType';
+import TinyLineDeviceGraph from '@/components/Charts/TinyLineDeviceGraph';
+import TinyRingProgressDeviceGraph from '@/components/Charts/TinyRingProgressDeviceGraph';
+import TinyRingProgressDeviceIndicator from '@/components/Charts/TinyRingProgressDeviceIndicator';
+import DeviceStatusTag from '@/components/DeviceComponents/DeviceStatusTag';
+import { WhhCpu, WhhRam } from '@/components/Icons/CustomIcons';
+import styles from '@/pages/Devices/Devices.less';
+import DeviceStatus from '@/utils/devicestatus';
+import { Carousel, Col, Row, Typography } from 'antd';
+import React from 'react';
+import { API } from 'ssm-shared-lib';
+
+const { Text } = Typography;
+
+const ListContent: React.FC<API.DeviceItem> = (props: API.DeviceItem) => (
+  <div className={styles.listContent} key={props.uuid}>
+    <div className={styles.listContentItem}>
+      <span>
+        <DeviceStatusTag status={props.status} />
+      </span>
+      <p>{props.hostname}</p>
+    </div>
+    <div className={styles.listContentItem} style={{ width: '80px' }}>
+      {props.status !== DeviceStatus.UNMANAGED && (
+        <>
+          <p style={{ minWidth: '80px' }}>
+            <WhhCpu /> {props.cpuSpeed?.toFixed(1)} Ghz
+          </p>
+          <p style={{ minWidth: '80px' }}>
+            <WhhRam /> {props.mem ? (props.mem / 1024).toFixed(0) : 'NaN'} Gb
+          </p>
+        </>
+      )}
+    </div>
+    <div className={styles.listContentItem}>
+      {(props.status !== DeviceStatus.UNMANAGED && (
+        <Carousel
+          style={{ width: 300, height: 70, zIndex: 1000 }}
+          dotPosition={'right'}
+          lazyLoad={'progressive'}
+        >
+          <div style={{ width: 300, height: 70, zIndex: 1000 }}>
+            <div
+              style={{
+                width: 300,
+                height: 70,
+                zIndex: 1000,
+                paddingTop: '15px',
+              }}
+            >
+              <Row style={{ alignItems: 'center' }} justify="center">
+                <Col span={6}>
+                  <TinyRingProgressDeviceGraph
+                    type={DeviceStatType.CPU}
+                    deviceUuid={props.uuid}
+                  />
+                </Col>
+                <Col span={6}>
+                  <TinyRingProgressDeviceGraph
+                    type={DeviceStatType.MEM_USED}
+                    deviceUuid={props.uuid}
+                  />
+                </Col>
+                <Col span={6}>
+                  <TinyRingProgressDeviceIndicator
+                    deviceUuid={props.uuid}
+                    type={DeviceStatType.SERVICES}
+                  />
+                </Col>
+              </Row>
+            </div>
+          </div>
+          <div style={{ width: 300, height: 70, zIndex: 1000 }}>
+            <div style={{ width: 300, height: 70, zIndex: 1000 }}>
+              <Row style={{ alignItems: 'center' }} justify="center">
+                <Col span={24}>
+                  <TinyLineDeviceGraph
+                    type={DeviceStatType.CPU}
+                    deviceUuid={props.uuid}
+                    from={24}
+                  />
+                </Col>
+              </Row>
+              <Row>
+                <Col
+                  span={24}
+                  style={{ marginTop: '-5px', textAlign: 'center' }}
+                >
+                  <Text type="secondary" style={{ fontSize: '8px' }}>
+                    CPU
+                  </Text>
+                </Col>
+              </Row>
+            </div>
+          </div>
+          <div style={{ width: 300, height: 70, zIndex: 1000 }}>
+            <div style={{ width: 300, height: 70, zIndex: 1000 }}>
+              <Row style={{ alignItems: 'center' }} justify="center">
+                <Col span={24}>
+                  <TinyLineDeviceGraph
+                    type={DeviceStatType.MEM_USED}
+                    deviceUuid={props.uuid}
+                    from={24}
+                  />
+                </Col>
+              </Row>
+              <Row>
+                <Col
+                  span={24}
+                  style={{ marginTop: '-5px', textAlign: 'center' }}
+                >
+                  <Text type="secondary" style={{ fontSize: '8px' }}>
+                    MEM USED
+                  </Text>
+                </Col>
+              </Row>{' '}
+            </div>
+          </div>
+        </Carousel>
+      )) || <div style={{ width: 300, height: 70, zIndex: 1000 }} />}
+    </div>
+  </div>
+);
+
+export default ListContent;