refactor: migrate logs (#673)

apps/client/src/common/components/app-link/AppLink.module.scss

@@ -0,0 +1,13 @@
+@use "../../../theme/v2Styles" as *;
+@use "../../../theme/mixins" as *;
+
+.link {
+  @include action-link;
+  font-size: $inner-section-text-size;
+}
+
+.linkIcon {
+  margin-left: $element-inner-spacing;
+  display: inline-block;
+  transform: rotate(45deg);
+}

apps/client/src/common/components/app-link/AppLink.tsx

@@ -0,0 +1,26 @@
+import { MouseEvent, ReactNode } from 'react';
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
+
+import { openLink } from '../../utils/linkUtils';
+
+import style from './AppLink.module.scss';
+
+interface AppLinkProps {
+  href: string;
+  children: ReactNode;
+}
+
+export default function AppLink(props: AppLinkProps) {
+  const { href, children } = props;
+
+  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+    openLink(href);
+  };
+
+  return (
+    <a href='#!' target='_blank' rel='noreferrer' className={style.link} onClick={handleClick}>
+      {children} <IoArrowUp className={style.linkIcon} />
+    </a>
+  );
+}

apps/client/src/common/components/external-link/ExternalLink.tsx

@@ -12,7 +12,7 @@ interface ExternalLinkProps {
   inline?: boolean;
 }
 
-export default function ModalLink(props: ExternalLinkProps) {
+export default function ExternalLink(props: ExternalLinkProps) {
   const { href, inline, children } = props;
   const classes = cx([style.link, inline ? style.inline : null]);
 

apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss

@@ -71,7 +71,6 @@ $button-size: 48px;
   @include action-link;
   justify-content: space-between;
   padding: 0.5rem 1rem;
-  cursor: pointer;
 
   &:hover {
     background-color: $menu-hover-bg;

apps/client/src/common/stores/editorSettings.ts

@@ -6,7 +6,6 @@ type EditorSettings = {
   showQuickEntry: boolean;
   startTimeIsLastEnd: boolean;
   defaultPublic: boolean;
-  showNif: boolean;
 };
 
 type EditorSettingsStore = {
@@ -15,14 +14,12 @@ type EditorSettingsStore = {
   setShowQuickEntry: (showQuickEntry: boolean) => void;
   setStartTimeIsLastEnd: (startTimeIsLastEnd: boolean) => void;
   setDefaultPublic: (defaultPublic: boolean) => void;
-  setShowNif: (showNif: boolean) => void;
 };
 
 enum EditorSettingsKeys {
   ShowQuickEntry = 'ontime-show-quick-entry',
   StartTimeIsLastEnd = 'ontime-start-is-last-end',
   DefaultPublic = 'ontime-default-public',
-  ShowNif = 'ontime-show-nif',
 }
 
 export const useEditorSettings = create<EditorSettingsStore>((set) => ({
@@ -30,7 +27,6 @@ export const useEditorSettings = create<EditorSettingsStore>((set) => ({
     showQuickEntry: booleanFromLocalStorage(EditorSettingsKeys.ShowQuickEntry, false),
     startTimeIsLastEnd: booleanFromLocalStorage(EditorSettingsKeys.ShowQuickEntry, true),
     defaultPublic: booleanFromLocalStorage(EditorSettingsKeys.ShowQuickEntry, true),
-    showNif: booleanFromLocalStorage(EditorSettingsKeys.ShowNif, true),
   },
 
   setLocalEventSettings: (value) =>
@@ -58,10 +54,4 @@ export const useEditorSettings = create<EditorSettingsStore>((set) => ({
       localStorage.setItem(EditorSettingsKeys.DefaultPublic, String(defaultPublic));
       return { eventSettings: { ...state.eventSettings, defaultPublic } };
     }),
-
-  setShowNif: (showNif) =>
-    set((state) => {
-      localStorage.setItem(EditorSettingsKeys.ShowNif, String(showNif));
-      return { eventSettings: { ...state.eventSettings, showNif } };
-    }),
 }));

apps/client/src/features/app-settings/AppSettings.tsx

@@ -3,6 +3,7 @@ import { ErrorBoundary } from '@sentry/react';
 import { useKeyDown } from '../../common/hooks/useKeyDown';
 
 import AboutPanel from './panel/about-panel/AboutPanel';
+import LogPanel from './panel/log-panel/LogPanel';
 import ProjectPanel from './panel/project-panel/ProjectPanel';
 import PanelContent from './panel-content/PanelContent';
 import PanelList from './panel-list/PanelList';
@@ -26,6 +27,7 @@ export default function AppSettings() {
         <PanelContent onClose={closeSettings}>
           {selectedPanel === 'project' && <ProjectPanel />}
           {selectedPanel === 'about' && <AboutPanel />}
+          {selectedPanel === 'log' && <LogPanel />}
         </PanelContent>
       </ErrorBoundary>
     </div>

apps/client/src/features/app-settings/panel/log-panel/Log.module.scss

@@ -1,20 +1,19 @@
-@use '../../theme/v2Styles' as *;
+@use '../../../../theme/ontimeColours' as *;
-@use '../../theme/mixins' as *;
+@use '../../../../theme/v2Styles' as *;
 
 $info-gray: $secondary-text-gray;
 $info-hover: $section-white;
 
 .log {
-  flex: 1;
+  font-size: $inner-section-text-size;
-  height: 100%;
+  overflow-y: auto;
-  overflow-y: scroll;
-  font-size: 0.8em;
   user-select: text;
+  min-height: 10vh;
+  max-height: 40vh;
 }
 
 .logEntry {
   display: flex;
-  margin-bottom: 2px;
 
   &.INFO {
     color: $info-gray;
@@ -33,7 +32,7 @@ $info-hover: $section-white;
   }
 
   .time {
-    width: 4.5em
+    width: 4.5em;
   }
 
   .origin {
@@ -48,7 +47,7 @@ $info-hover: $section-white;
 .buttonBar {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 0.5rem;
   justify-content: flex-start;
-  margin-bottom: 8px;
+  padding-bottom: 0.5rem;
 }

apps/client/src/features/app-settings/panel/log-panel/Log.tsx

@@ -2,11 +2,11 @@ import { useCallback, useState } from 'react';
 import { Button } from '@chakra-ui/react';
 import { LogOrigin } from 'ontime-types';
 
-import { clearLogs, useLogData } from '../../common/stores/logger';
+import { clearLogs, useLogData } from '../../../../common/stores/logger';
 
-import style from './InfoLogger.module.scss';
+import style from './Log.module.scss';
 
-export default function InfoLogger() {
+export default function Log() {
   const { logs: logData } = useLogData();
 
   const [showClient, setShowClient] = useState(true);
@@ -52,7 +52,7 @@ export default function InfoLogger() {
       <div className={style.buttonBar}>
         <Button
           variant={showUser ? 'ontime-filled' : 'ontime-subtle'}
-          size='xs'
+          size='sm'
           onClick={() => setShowUser((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.User)}
           onContextMenu={(e) => e.preventDefault()}
@@ -61,7 +61,7 @@ export default function InfoLogger() {
         </Button>
         <Button
           variant={showClient ? 'ontime-filled' : 'ontime-subtle'}
-          size='xs'
+          size='sm'
           onClick={() => setShowClient((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.Client)}
           onContextMenu={(e) => e.preventDefault()}
@@ -70,7 +70,7 @@ export default function InfoLogger() {
         </Button>
         <Button
           variant={showServer ? 'ontime-filled' : 'ontime-subtle'}
-          size='xs'
+          size='sm'
           onClick={() => setShowServer((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.Server)}
           onContextMenu={(e) => e.preventDefault()}
@@ -79,7 +79,7 @@ export default function InfoLogger() {
         </Button>
         <Button
           variant={showPlayback ? 'ontime-filled' : 'ontime-subtle'}
-          size='xs'
+          size='sm'
           onClick={() => setShowPlayback((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.Playback)}
           onContextMenu={(e) => e.preventDefault()}
@@ -88,7 +88,7 @@ export default function InfoLogger() {
         </Button>
         <Button
           variant={showRx ? 'ontime-filled' : 'ontime-subtle'}
-          size='xs'
+          size='sm'
           onClick={() => setShowRx((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.Rx)}
           onContextMenu={(e) => e.preventDefault()}
@@ -97,14 +97,14 @@ export default function InfoLogger() {
         </Button>
         <Button
           variant={showTx ? 'ontime-filled' : 'ontime-subtle'}
-          size='xs'
+          size='sm'
           onClick={() => setShowTx((s) => !s)}
           onAuxClick={() => disableOthers(LogOrigin.Tx)}
           onContextMenu={(e) => e.preventDefault()}
         >
           {LogOrigin.Tx}
         </Button>
-        <Button variant='ontime-outlined' size='xs' onClick={clearLogs}>
+        <Button variant='ontime-outlined' size='sm' onClick={clearLogs}>
           Clear
         </Button>
       </div>

apps/client/src/features/app-settings/panel/log-panel/LogPanel.tsx

@@ -0,0 +1,26 @@
+import * as Panel from '../PanelUtils';
+
+import Log from './Log';
+import InfoNif from './NetworkInterfaces';
+
+export default function LogPanel() {
+  return (
+    <>
+      <Panel.Header>Application log</Panel.Header>
+      <Panel.Section>
+        <Panel.SubHeader>Available networks</Panel.SubHeader>
+        <Panel.Card>
+          <Panel.Paragraph>Ontime is streaming on the following network interfaces</Panel.Paragraph>
+          <InfoNif />
+        </Panel.Card>
+      </Panel.Section>
+
+      <Panel.Section>
+        <Panel.SubHeader>Network log</Panel.SubHeader>
+        <Panel.Card>
+          <Log />
+        </Panel.Card>
+      </Panel.Section>
+    </>
+  );
+}

apps/client/src/features/app-settings/panel/log-panel/NetworkInterfaces.module.scss

@@ -0,0 +1,8 @@
+@use '../../../../theme/v2Styles' as *;
+
+.interfaces {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $section-spacing;
+  row-gap: $element-inner-spacing;
+}

apps/client/src/features/app-settings/panel/log-panel/NetworkInterfaces.tsx

@@ -0,0 +1,19 @@
+import { serverPort } from '../../../../common/api/apiConstants';
+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>
+  );
+}

apps/client/src/features/info/Info.module.scss

@@ -43,23 +43,3 @@
   margin-left: $element-inner-spacing;
   font-size: $text-body-size;
 }
-
-.interfaceList {
-  display: flex;
-  flex-wrap: wrap;
-  gap: $section-spacing;
-  row-gap: $element-inner-spacing;
-
-  .interface {
-    @include action-link;
-    font-size: $inner-section-text-size;
-    white-space: nowrap;
-  }
-
-  .linkIcon {
-    margin-left: $element-inner-spacing;
-    display: inline-block;
-    transform: rotate(45deg);
-  }
-}
-

apps/client/src/features/info/Info.tsx

@@ -1,14 +1,10 @@
 import { useInfoPanel } from '../../common/hooks/useSocket';
-import { useEditorSettings } from '../../common/stores/editorSettings';
 
 import CollapsableInfo from './CollapsableInfo';
-import InfoLogger from './InfoLogger';
-import InfoNif from './InfoNif';
 import InfoTitles from './InfoTitles';
 
 export default function Info() {
   const data = useInfoPanel();
-  const showNif = useEditorSettings((state) => state.eventSettings.showNif);
 
   const titlesNow = {
     title: data.eventNow?.title || '',
@@ -26,20 +22,12 @@ export default function Info() {
 
   return (
     <>
-      {showNif && (
-        <CollapsableInfo title='Network Info'>
-          <InfoNif />
-        </CollapsableInfo>
-      )}
       <CollapsableInfo title='Playing Now'>
         <InfoTitles data={titlesNow} />
       </CollapsableInfo>
       <CollapsableInfo title='Playing Next'>
         <InfoTitles data={titlesNext} />
       </CollapsableInfo>
-      <CollapsableInfo title='Log'>
-        <InfoLogger />
-      </CollapsableInfo>
     </>
   );
 }

apps/client/src/features/info/InfoNif.tsx

@@ -1,27 +0,0 @@
-import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
-
-import { serverPort } from '../../common/api/apiConstants';
-import useInfo from '../../common/hooks-query/useInfo';
-import { openLink } from '../../common/utils/linkUtils';
-
-import style from './Info.module.scss';
-
-export default function InfoNif() {
-  const { data } = useInfo();
-
-  const handleClick = (address: string) => {
-    const baseURL = `http://__IP__:${serverPort}`;
-    openLink(baseURL.replace('__IP__', address));
-  };
-
-  return (
-    <div className={style.interfaceList}>
-      {data?.networkInterfaces?.map((nif) => (
-        <span key={nif.address} onClick={() => handleClick(nif.address)} className={style.interface}>
-          {`${nif.name} - ${nif.address}`}
-          <IoArrowUp className={style.linkIcon} />
-        </span>
-      ))}
-    </div>
-  );
-}

apps/client/src/features/modals/settings-modal/EditorSettings.tsx

@@ -10,7 +10,6 @@ export default function EditorSettings() {
   const setShowQuickEntry = useEditorSettings((state) => state.setShowQuickEntry);
   const setStartTimeIsLastEnd = useEditorSettings((state) => state.setStartTimeIsLastEnd);
   const setDefaultPublic = useEditorSettings((state) => state.setDefaultPublic);
-  const setShowNif = useEditorSettings((state) => state.setShowNif);
 
   return (
     <div className={style.sectionContainer}>
@@ -40,18 +39,6 @@ export default function EditorSettings() {
           onChange={(event) => setDefaultPublic(event.target.checked)}
         />
       </ModalSplitInput>
-      <span className={style.title}>Info settings</span>
-      <ModalSplitInput
-        field=''
-        title='Show network'
-        description='Whether to available show network interfaces in the panel'
-      >
-        <Switch
-          variant='ontime-on-light'
-          defaultChecked={eventSettings.showQuickEntry}
-          onChange={(event) => setShowNif(event.target.checked)}
-        />
-      </ModalSplitInput>
     </div>
   );
 }

apps/client/src/theme/_mixins.scss

@@ -9,8 +9,9 @@
   cursor: pointer;
   transition-property: color;
   transition-duration: $transition-time-action;
+  white-space: nowrap;
 
   &:hover {
     color: $ontime-color;
   }
-}
+}