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-20 14:39:06 +00:00 · 2024-06-15 12:26:41 +02:00
parent 70e8fbf327
commit a15eb0db4c
33 changed files with 868 additions and 169 deletions
@@ -0,0 +1,6 @@
+.interfaces {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $section-spacing;
+  row-gap: $element-inner-spacing;
+}
@@ -0,0 +1,19 @@
+import { serverPort } from '../../../../common/api/constants';
+import AppLink from '../../../../common/components/app-link/AppLink';
+import useInfo from '../../../../common/hooks-query/useInfo';
+
+import style from './NetworkInterfaces.module.scss';
+
+export default function InfoNif() {
+  const { data } = useInfo();
+
+  return (
+    <div className={style.interfaces}>
+      {data?.networkInterfaces?.map((nif) => (
+        <AppLink key={nif.address} href={`http://${nif.address}:${serverPort}`}>
+          {`${nif.name} - ${nif.address}`}
+        </AppLink>
+      ))}
+    </div>
+  );
+}
@@ -0,0 +1,3 @@
+.iconRotate {
+  transform: rotate(45deg);
+}
@@ -0,0 +1,35 @@
+import { MouseEvent } from 'react';
+import { Button } from '@chakra-ui/react';
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
+
+import { handleLinks } from '../../../../common/utils/linkUtils';
+import Log from '../../../log/Log';
+import * as Panel from '../PanelUtils';
+
+import style from './NetworkLogExport.module.scss';
+
+export default function LogExport() {
+  const extract = (event: MouseEvent) => {
+    handleLinks(event, 'log');
+  };
+
+  return (
+    <Panel.Section>
+      <Panel.Card>
+        <Panel.SubHeader>
+          Network log
+          <Button
+            variant='ontime-subtle'
+            size='sm'
+            rightIcon={<IoArrowUp className={style.iconRotate} />}
+            onClick={extract}
+          >
+            Extract
+          </Button>
+        </Panel.SubHeader>
+        <Panel.Divider />
+        <Log />
+      </Panel.Card>
+    </Panel.Section>
+  );
+}
@@ -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>
+    </>
+  );
+}