Merge pull request #474 from SquirrelCorporation/chore-improve-respon…

…siveness [CHORE] Try to improve responsiveness
SquirrelCorporation · Nov 14, 2024 · 8766095 · 8766095
2 parents 303c467 + 741f732
commit 8766095
Show file tree

Hide file tree

Showing 13 changed files with 371 additions and 244 deletions.
diff --git a/client/src/app.tsx b/client/src/app.tsx
@@ -21,7 +21,6 @@ import { version } from '../package.json';
 import Logo from '../public/logo.svg';
 import { errorConfig } from './requestErrorConfig';
 
-const isDev = process.env.NODE_ENV === 'development';
 const loginPath = '/user/login';
 const onboardingPath = '/user/onboarding';
 

diff --git a/client/src/components/DeviceConfiguration/AdvancedSwitch.tsx b/client/src/components/DeviceConfiguration/AdvancedSwitch.tsx
@@ -7,17 +7,23 @@ const SWITCH_ALIGNMENT_STYLE = { marginLeft: 'auto' };
 const AdvancedSwitch: React.FC<{
   showAdvanced: boolean;
   toggleShowAdvanced: () => void;
-}> = ({ showAdvanced, toggleShowAdvanced }) => (
-  <Flex style={MARGIN_BOTTOM_STYLE}>
-    <Space direction="horizontal" size="middle" style={SWITCH_ALIGNMENT_STYLE}>
-      Show advanced
-      <Switch
-        size="small"
-        checked={showAdvanced}
-        onChange={toggleShowAdvanced}
-      />
-    </Space>
-  </Flex>
-);
+}> = ({ showAdvanced, toggleShowAdvanced }) => {
+  return (
+    <Flex style={MARGIN_BOTTOM_STYLE}>
+      <Space
+        direction="horizontal"
+        size="middle"
+        style={SWITCH_ALIGNMENT_STYLE}
+      >
+        Show advanced
+        <Switch
+          size="small"
+          checked={showAdvanced}
+          onChange={toggleShowAdvanced}
+        />
+      </Space>
+    </Flex>
+  );
+};
 
 export default AdvancedSwitch;
diff --git a/client/src/components/HeaderComponents/AvatarDropdown.tsx b/client/src/components/HeaderComponents/AvatarDropdown.tsx
@@ -6,7 +6,7 @@ import {
 } from '@ant-design/icons';
 import { useEmotionCss } from '@ant-design/use-emotion-css';
 import { history, useModel } from '@umijs/max';
-import { Spin, Typography } from 'antd';
+import { Grid, Spin, Typography } from 'antd';
 import type { MenuInfo } from 'rc-menu/lib/interface';
 import React, { useCallback, useMemo } from 'react';
 import { flushSync } from 'react-dom';
@@ -17,11 +17,19 @@ export type GlobalHeaderRightProps = {
   children?: React.ReactNode;
 };
 
+const { useBreakpoint } = Grid;
+
 export const AvatarName: React.FC = () => {
   const { initialState } = useModel('@@initialState');
   const { currentUser } = initialState || {};
 
   const userName = useMemo(() => currentUser?.name, [currentUser?.name]);
+  const screens = useBreakpoint();
+
+  // Check if the screen is mobile
+  if (screens.xs) {
+    return null; // Don't render anything if the screen size is extra small (mobile)
+  }
 
   return (
     <Typography.Title

diff --git a/client/src/components/NewDeviceModal/NewDeviceModal.tsx b/client/src/components/NewDeviceModal/NewDeviceModal.tsx
@@ -2,7 +2,17 @@ import AgentInstallMethod from '@/components/DeviceConfiguration/AgentInstallMet
 import { DownloadOutlined } from '@ant-design/icons';
 import { useModel } from '@umijs/max';
 import React, { useRef, useState } from 'react';
-import { Button, Col, Modal, Row, message, Alert, Typography, Tag } from 'antd';
+import {
+  Button,
+  Col,
+  Modal,
+  Row,
+  message,
+  Alert,
+  Typography,
+  Tag,
+  Grid,
+} from 'antd';
 import {
   ProFormDependency,
   ProFormInstance,
@@ -34,6 +44,7 @@ export type NewDeviceModalProps = {
     installMethod: SsmAgent.InstallMethods,
   ) => void;
 };
+const { useBreakpoint } = Grid;
 
 const NewDeviceModal: React.FC<NewDeviceModalProps> = (props) => {
   const formRef = useRef<ProFormInstance>();
@@ -47,6 +58,7 @@ const NewDeviceModal: React.FC<NewDeviceModalProps> = (props) => {
     useState({});
   const { initialState } = useModel('@@initialState');
   const currentUser = initialState?.currentUser;
+  const screens = useBreakpoint();
 
   const checkHostAPI = async (url: string) => {
     try {
@@ -159,14 +171,16 @@ const NewDeviceModal: React.FC<NewDeviceModalProps> = (props) => {
       }
       open={props.isModalOpen}
       onCancel={handleCancel}
-      width={900}
+      width={1000}
       footer={(_, { CancelBtn }) => <CancelBtn />}
     >
       <Row style={{ alignItems: 'center' }} justify="center">
-        <Col span={8}>
-          <AnimationPlayer />
-        </Col>
-        <Col span={16}>
+        {!screens.xs && (
+          <Col span={8}>
+            <AnimationPlayer />
+          </Col>
+        )}
+        <Col span={!screens.xs ? 16 : 24}>
           <StepsForm
             formRef={formRef}
             onFinish={handleFinish}
@@ -221,14 +235,20 @@ const NewDeviceModal: React.FC<NewDeviceModalProps> = (props) => {
             <StepsForm.StepForm
               name="base"
               title="SSH"
-              style={{ alignItems: 'start' }}
+              style={{
+                alignItems: 'start',
+                maxWidth: screens.xs ? '80%' : '100%',
+              }}
             >
               <SSHConnectionFormElements formRef={formRef} />
             </StepsForm.StepForm>
             <StepsForm.StepForm
               name="checkbox"
               title="Node"
-              style={{ minHeight: '350px' }}
+              style={{
+                minHeight: '350px',
+                maxWidth: screens.xs ? '80%' : '100%',
+              }}
               onFinish={async (formData) => {
                 setLoading(true);
                 await checkHostAPI(formData.controlNodeURL);
@@ -262,7 +282,10 @@ const NewDeviceModal: React.FC<NewDeviceModalProps> = (props) => {
             <StepsForm.StepForm
               name="test"
               title="Test"
-              style={{ alignItems: 'start' }}
+              style={{
+                alignItems: 'start',
+                maxWidth: screens.xs ? '80%' : '100%',
+              }}
             >
               <StepFormCard
                 title="Test connections"
@@ -279,7 +302,10 @@ const NewDeviceModal: React.FC<NewDeviceModalProps> = (props) => {
             <StepsForm.StepForm
               name="installMethod"
               title="Install Method"
-              style={{ alignItems: 'start' }}
+              style={{
+                alignItems: 'start',
+                maxWidth: screens.xs ? '80%' : '100%',
+              }}
             >
               <StepFormCard
                 title="Install Method"
@@ -293,7 +319,9 @@ const NewDeviceModal: React.FC<NewDeviceModalProps> = (props) => {
                     case SsmAgent.InstallMethods.NODE_ENHANCED_PLAYBOOK:
                       return (
                         <Alert
-                          style={{ marginBottom: 10 }}
+                          style={{
+                            marginBottom: 10,
+                          }}
                           type={'info'}
                           showIcon
                           message={
@@ -311,7 +339,9 @@ const NewDeviceModal: React.FC<NewDeviceModalProps> = (props) => {
                     case SsmAgent.InstallMethods.DOCKER:
                       return (
                         <Alert
-                          style={{ marginBottom: 10 }}
+                          style={{
+                            marginBottom: 10,
+                          }}
                           type={'info'}
                           showIcon
                           message={
@@ -328,7 +358,11 @@ const NewDeviceModal: React.FC<NewDeviceModalProps> = (props) => {
                 }}
               </ProFormDependency>
             </StepsForm.StepForm>
-            <StepsForm.StepForm name="confirm" title="Confirm">
+            <StepsForm.StepForm
+              name="confirm"
+              title="Confirm"
+              style={{ maxWidth: screens.xs ? '80%' : '100%' }}
+            >
               <SummaryCard
                 sshConnection={sshConnection}
                 controlNodeConnectionString={controlNodeConnectionString}

diff --git a/client/src/pages/Admin/Inventory/index.tsx b/client/src/pages/Admin/Inventory/index.tsx
@@ -181,7 +181,7 @@ const Inventory: React.FC = () => {
       <ProTable<API.DeviceItem, API.PageParams>
         headerTitle="List of Devices"
         actionRef={actionRef}
-        rowKey="ip"
+        rowKey="uuid"
         search={{
           labelWidth: 120,
         }}

diff --git a/client/src/pages/Admin/Logs/ServerLogsColums.tsx b/client/src/pages/Admin/Logs/ServerLogsColums.tsx
@@ -41,6 +41,7 @@ const ServerLogsColumns: ProColumns<API.ServerLog>[] = [
     filters: true,
     onFilter: true,
     width: '5%',
+    responsive: ['sm'],
   },
   {
     title: 'Module',
@@ -57,6 +58,15 @@ const ServerLogsColumns: ProColumns<API.ServerLog>[] = [
     ellipsis: true,
     filters: true,
     onFilter: true,
+    responsive: ['sm'],
+  },
+  {
+    title: 'Message',
+    dataIndex: 'msg',
+    key: 'msg',
+    filters: true,
+    onFilter: true,
+    responsive: ['xs'],
   },
   {
     title: 'Module ID',

diff --git a/client/src/pages/Containers/components/Images.tsx b/client/src/pages/Containers/components/Images.tsx
@@ -17,30 +17,58 @@ const Images: React.FC = () => {
   const actionRef = useRef<ActionType>();
   const columns: ProColumns<API.ContainerImage>[] = [
     {
-      title: 'Id',
-      dataIndex: 'id',
-      ellipsis: true,
+      title: 'Tags',
+      width: '30%',
+      search: false,
+      render: (text, record) => (
+        <>
+          {record.repoTags?.map((e) => (
+            <Tag
+              key={e}
+              style={{
+                maxWidth: '100%',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {e}
+            </Tag>
+          ))}
+        </>
+      ),
     },
     {
       title: 'Device',
       dataIndex: ['device', 'ip'],
       search: false,
+      width: '10%',
       render: (text, record) => (
         <Tooltip title={record.device?.fqdn}>
-          <Tag>{record.device?.ip}</Tag>
+          <Tag
+            style={{
+              maxWidth: '100%',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {record.device?.ip}
+          </Tag>
         </Tooltip>
       ),
     },
     {
-      title: 'Tags',
-      width: '30%',
-      search: false,
-      render: (text, record) => <Tag>{record.repoTags?.map((e) => e)}</Tag>,
+      title: 'Id',
+      dataIndex: 'id',
+      width: '10%',
+      ellipsis: true,
+      responsive: ['sm'],
     },
     {
       title: 'Parent Id',
       dataIndex: 'parentId',
-      ellipsis: true,
+      responsive: ['sm'],
     },
     {
       dataIndex: 'deviceUuid',
@@ -69,6 +97,7 @@ const Images: React.FC = () => {
       title: 'Created',
       dataIndex: 'created',
       search: false,
+      responsive: ['sm'],
       render: (text, record) =>
         moment.unix(record.created).format('MM/DD/YYYY HH:mm'),
     },

diff --git a/client/src/pages/Containers/components/Networks.tsx b/client/src/pages/Containers/components/Networks.tsx
@@ -17,7 +17,7 @@ const Networks: React.FC = () => {
     {
       title: 'Name',
       dataIndex: 'name',
-      ellipsis: false,
+      width: '20%',
     },
     {
       dataIndex: 'deviceUuid',
@@ -42,9 +42,19 @@ const Networks: React.FC = () => {
       title: 'Device',
       dataIndex: ['device', 'ip'],
       search: false,
+      width: '10%',
       render: (text, record) => (
         <Tooltip title={record.device?.fqdn}>
-          <Tag>{record.device?.ip}</Tag>
+          <Tag
+            style={{
+              maxWidth: '100%',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {record.device?.ip}
+          </Tag>
         </Tooltip>
       ),
     },
@@ -58,10 +68,14 @@ const Networks: React.FC = () => {
       render: (text, record) => (
         <>
           {record.driver === 'host' && (
-            <Avatar shape={'square'} src={<GrommetIconsHost />} />
+            <Avatar
+              shape={'square'}
+              src={<GrommetIconsHost />}
+              size={{ xs: 1 }}
+            />
           )}
           {record.driver === 'bridge' && (
-            <Avatar shape={'square'} src={<Bridge />} />
+            <Avatar shape={'square'} src={<Bridge />} size={{ xs: 1 }} />
           )}{' '}
           {record.driver === 'null' ? '-' : record.driver}
         </>