Client remote control (#930)

--------- Co-authored-by: kellhogs <fabianpos99@gmail.com> Co-authored-by: Carlos Valente <carlosvalente@pm.me> Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
2026-08-19 14:14:17 +00:00 · 2024-06-15 12:26:41 +02:00
parent 70e8fbf327
commit a15eb0db4c
33 changed files with 868 additions and 169 deletions
@@ -73,12 +73,12 @@ $inner-padding: 1rem;
    top: 0;
    z-index: 3;
    box-shadow: 0 1px $white-10;
+    background-color: $gray-1350;
  }

  th {
    font-weight: 400;
    color: $gray-400;
-    background-color: $gray-1350;
    white-space: nowrap;
    text-transform: capitalize;
  }
@@ -0,0 +1,24 @@
+.fullWidth {
+  width: 100%;
+}
+
+.actionButtons {
+  display: flex;
+  gap: $element-spacing;
+}
+
+.halfWidth {
+  width: 50%;
+  white-space: nowrap;
+}
+
+.pathList {
+  width: 100%;
+}
+
+.badgeList {
+  width: 100%;
+  * {
+    margin-right: $element-spacing;
+  }
+}
@@ -0,0 +1,15 @@
+import * as Panel from '../PanelUtils';
+
+import ClientList from './ClientList';
+
+export default function ClientControlPanel() {
+  return (
+    <Panel.Section>
+      <Panel.Card>
+        <Panel.SubHeader>Manage clients</Panel.SubHeader>
+        <Panel.Divider />
+        <ClientList />
+      </Panel.Card>
+    </Panel.Section>
+  );
+}
@@ -0,0 +1,147 @@
+import { useState } from 'react';
+import { Badge, Button, useDisclosure } from '@chakra-ui/react';
+
+import { RedirectClientModal } from '../../../../common/components/client-modal/RedirectClientModal';
+import { RenameClientModal } from '../../../../common/components/client-modal/RenameClientModal';
+import { setClientRemote } from '../../../../common/hooks/useSocket';
+import { useClientStore } from '../../../../common/stores/clientStore';
+import * as Panel from '../PanelUtils';
+
+import style from './ClientControlPanel.module.scss';
+
+export default function ClientList() {
+  const id = useClientStore((store) => store.id);
+  const clients = useClientStore((store) => store.clients);
+  const { isOpen: isOpenRedirect, onOpen: onOpenRedirect, onClose: onCloseRedirect } = useDisclosure();
+  const { isOpen: isOpenRename, onOpen: onOpenRename, onClose: onCloseRename } = useDisclosure();
+  const { setIdentify } = setClientRemote;
+
+  const [targetId, setTargetId] = useState('');
+
+  const openRename = (targetId: string) => {
+    setTargetId(targetId);
+    onOpenRename();
+  };
+
+  const openRedirect = (targetId: string) => {
+    setTargetId(targetId);
+    onOpenRedirect();
+  };
+
+  const ontimeClients = Object.entries(clients).filter(([_, { type }]) => type === 'ontime');
+  const otherClients = Object.entries(clients).filter(([_, { type }]) => type !== 'ontime');
+
+  const targetClient = clients[targetId];
+
+  return (
+    <>
+      {isOpenRedirect && (
+        <RedirectClientModal
+          id={targetId}
+          name={targetClient?.name}
+          path={targetClient?.path}
+          isOpen={isOpenRedirect}
+          onClose={onCloseRedirect}
+        />
+      )}
+      {isOpenRename && (
+        <RenameClientModal id={targetId} name={targetClient?.name} isOpen={isOpenRename} onClose={onCloseRename} />
+      )}
+      <Panel.Section>
+        <Panel.Title>Ontime Clients ({ontimeClients.length})</Panel.Title>
+        <Panel.Table>
+          <thead>
+            <tr>
+              <td className={style.fullWidth}>Client Name (Connection ID)</td>
+              <td className={style.fullWidth}>Path</td>
+              <td />
+            </tr>
+          </thead>
+          <tbody>
+            {ontimeClients.map(([key, client]) => {
+              const { identify, name, path } = client;
+              const isCurrent = id === key;
+              return (
+                <tr key={key}>
+                  <td className={style.badgeList}>
+                    <Badge variant='outline' size='xs'>
+                      {key}
+                    </Badge>
+                    {isCurrent && (
+                      <Badge variant='outline' colorScheme='yellow' size='xs'>
+                        self
+                      </Badge>
+                    )}
+                    {name}
+                  </td>
+                  {isCurrent ? <td /> : <td className={style.pathList}>{path}</td>}
+                  <td className={style.actionButtons}>
+                    <Button
+                      size='xs'
+                      className={`${identify ? style.blink : ''}`}
+                      isDisabled={isCurrent}
+                      variant={identify ? 'ontime-filled' : 'ontime-subtle'}
+                      data-testid={isCurrent ? '' : 'not-self-identify'}
+                      onClick={() => {
+                        setIdentify({ target: key, identify: !identify });
+                      }}
+                    >
+                      Identify
+                    </Button>
+                    <Button
+                      size='xs'
+                      variant='ontime-subtle'
+                      data-testid={isCurrent ? '' : 'not-self-rename'}
+                      onClick={() => openRename(key)}
+                    >
+                      Rename
+                    </Button>
+
+                    <Button
+                      size='xs'
+                      variant='ontime-subtle'
+                      isDisabled={isCurrent}
+                      data-testid={isCurrent ? '' : 'not-self-redirect'}
+                      onClick={() => openRedirect(key)}
+                    >
+                      Redirect
+                    </Button>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </Panel.Table>
+      </Panel.Section>
+      <Panel.Divider />
+      <Panel.Section>
+        <Panel.Title>Other Clients ({otherClients.length})</Panel.Title>
+        <Panel.Table>
+          <thead>
+            <tr>
+              <td className={style.halfWidth}>Client Name (Connection ID)</td>
+              <td className={style.halfWidth}>Client type</td>
+            </tr>
+          </thead>
+          <tbody>
+            {otherClients.map(([key, client]) => {
+              const { name, type } = client;
+
+              return (
+                <tr key={key}>
+                  <td className={style.badgeList}>
+                    <Badge variant='outline' size='sx'>
+                      {key}
+                    </Badge>
+                    {name}
+                  </td>
+                  <td>{type}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </Panel.Table>
+      </Panel.Section>
+    </>
+  );
+}
@@ -1,17 +0,0 @@
-import * as Panel from '../PanelUtils';
-
-import LogExport from './LogExport';
-import InfoNif from './NetworkInterfaces';
-
-export default function LogPanel() {
-  return (
-    <>
-      <Panel.Header>Log</Panel.Header>
-      <Panel.Section>
-        <Panel.Paragraph>Ontime is streaming on the following network interfaces</Panel.Paragraph>
-      </Panel.Section>
-      <InfoNif />
-      <LogExport />
-    </>
-  );
-}
@@ -6,7 +6,7 @@ import { handleLinks } from '../../../../common/utils/linkUtils';
 import Log from '../../../log/Log';
 import * as Panel from '../PanelUtils';

-import style from './LogExport.module.scss';
+import style from './NetworkLogExport.module.scss';

 export default function LogExport() {
  const extract = (event: MouseEvent) => {
@@ -0,0 +1,28 @@
+import useScrollIntoView from '../../../../common/hooks/useScrollIntoView';
+import { PanelBaseProps } from '../../settingsStore';
+import ClientControlPanel from '../client-control-panel/ClientControlPanel';
+import * as Panel from '../PanelUtils';
+
+import InfoNif from './NetworkInterfaces';
+import LogExport from './NetworkLogExport';
+
+export default function NetworkLogPanel({ location }: PanelBaseProps) {
+  const clientsRef = useScrollIntoView<HTMLDivElement>('clients', location);
+  const logRef = useScrollIntoView<HTMLDivElement>('log', location);
+
+  return (
+    <>
+      <Panel.Header>Network</Panel.Header>
+      <Panel.Section>
+        <Panel.Paragraph>Ontime is streaming on the following network interfaces</Panel.Paragraph>
+      </Panel.Section>
+      <InfoNif />
+      <div ref={logRef}>
+        <LogExport />
+      </div>
+      <div ref={clientsRef}>
+        <ClientControlPanel />
+      </div>
+    </>
+  );
+}