cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-08 08:53:51 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor: migrate logs (#673)

Browse Source
This commit is contained in:
Carlos Valente
2024-01-06 21:48:20 +01:00
committed by GitHub
parent bac2dc6b87
commit 655e9e8fb5
16 changed files with 116 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/common/components/app-link/AppLink.module.scss
+13
View File
@@ -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
+26
View File
@@ -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
+1 -1
View File
@@ -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
-1
View File
@@ -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
-10
View File
@@ -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
+2
View File
@@ -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/info/InfoLogger.module.scss → apps/client/src/features/app-settings/panel/log-panel/Log.module.scss
+9 -10
View File
@@ -1,20 +1,19 @@
@use '../../theme/v2Styles' as *;
@use '../../theme/mixins' as *;
@use '../../../../theme/ontimeColours' as *;
@use '../../../../theme/v2Styles' as *;
$info-gray: $secondary-text-gray;
$info-hover: $section-white;
.log {
flex: 1;
height: 100%;
overflow-y: scroll;
font-size: 0.8em;
font-size: $inner-section-text-size;
overflow-y: auto;
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/info/InfoLogger.tsx → apps/client/src/features/app-settings/panel/log-panel/Log.tsx
+10 -10
View File
@@ -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
+26
View File
@@ -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
+8
View File
@@ -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
+19
View File
@@ -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
-20
View File
@@ -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
-12
View File
@@ -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
-27
View File
@@ -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
-13
View File
@@ -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
+2 -1
View File
@@ -9,8 +9,9 @@
cursor: pointer;
transition-property: color;
transition-duration: $transition-time-action;
white-space: nowrap;
&:hover {
color: $ontime-color;
}
}
}