-
-
- }
- color={series[0].color}
- progress
- centered
- />
- }
- color={series[1].color}
- progress
- centered
- />
- }
- color={series[2].color}
- progress
- centered
- />
-
+ const currentRamUsage = hardwareStatus.memory[hardwareStatus.memory.length - 1]?.value;
+ const currentDiskUsage = hardwareStatus.disk[hardwareStatus.disk.length - 1]?.value;
-
-
+ const series = [
+ {
+ name: 'CPU',
+ color: '#B63FFF',
+ data: hardwareStatus.cpu,
+ },
+ {
+ name: 'Memory',
+ color: '#2087E2',
+ data: hardwareStatus.memory,
+ },
+ {
+ name: 'Disk',
+ color: '#FF7700',
+ data: hardwareStatus.disk,
+ },
+ ];
+
+ return (
+
+
+
+ }
+ color={series[0].color}
+ progress
+ centered
+ />
+ }
+ color={series[1].color}
+ progress
+ centered
+ />
+ }
+ color={series[2].color}
+ progress
+ centered
+ />
+
+
+
- );
-}
\ No newline at end of file
+
+ );
+}
diff --git a/web/pages/index.tsx b/web/pages/index.tsx
index 2060acd31..0eeda64d3 100644
--- a/web/pages/index.tsx
+++ b/web/pages/index.tsx
@@ -7,29 +7,29 @@ Will display an overview with the following datasources:
TODO: Link each overview value to the sub-page that focuses on it.
*/
-import React, { useState, useEffect, useContext } from "react";
-import { Skeleton, Card, Statistic } from "antd";
-import { UserOutlined, ClockCircleOutlined } from "@ant-design/icons";
-import { formatDistanceToNow, formatRelative } from "date-fns";
-import { ServerStatusContext } from "../utils/server-status-context";
-import StatisticItem from "./components/statistic"
-import LogTable from "./components/log-table";
+import React, { useState, useEffect, useContext } from 'react';
+import { Skeleton, Card, Statistic } from 'antd';
+import { UserOutlined, ClockCircleOutlined } from '@ant-design/icons';
+import { formatDistanceToNow, formatRelative } from 'date-fns';
+import { ServerStatusContext } from '../utils/server-status-context';
+import StatisticItem from '../components/statistic';
+import LogTable from '../components/log-table';
import Offline from './offline-notice';
-import {
- LOGS_WARN,
- fetchData,
- FETCH_INTERVAL,
-} from "../utils/apis";
-import { formatIPAddress, isEmptyObject } from "../utils/format";
-import { UpdateArgs } from "../types/config-section";
+import { LOGS_WARN, fetchData, FETCH_INTERVAL } from '../utils/apis';
+import { formatIPAddress, isEmptyObject } from '../utils/format';
+import { UpdateArgs } from '../types/config-section';
function streamDetailsFormatter(streamDetails) {
return (
- - {streamDetails.videoCodec || 'Unknown'} @ {streamDetails.videoBitrate || 'Unknown'} kbps
+ -
+ {streamDetails.videoCodec || 'Unknown'} @ {streamDetails.videoBitrate || 'Unknown'} kbps
+
- {streamDetails.framerate || 'Unknown'} fps
- - {streamDetails.width} x {streamDetails.height}
+ -
+ {streamDetails.width} x {streamDetails.height}
+
);
}
@@ -39,7 +39,7 @@ export default function Home() {
const { broadcaster, serverConfig: configData } = serverStatusData || {};
const { remoteAddr, streamDetails } = broadcaster || {};
- const encoder = streamDetails?.encoder || "Unknown encoder";
+ const encoder = streamDetails?.encoder || 'Unknown encoder';
const [logsData, setLogs] = useState([]);
const getLogs = async () => {
@@ -47,22 +47,22 @@ export default function Home() {
const result = await fetchData(LOGS_WARN);
setLogs(result);
} catch (error) {
- console.log("==== error", error);
+ console.log('==== error', error);
}
};
const getMoreStats = () => {
getLogs();
- }
+ };
useEffect(() => {
getMoreStats();
let intervalId = null;
intervalId = setInterval(getMoreStats, FETCH_INTERVAL);
-
+
return () => {
clearInterval(intervalId);
- }
+ };
}, []);
if (isEmptyObject(configData) || isEmptyObject(serverStatusData)) {
@@ -80,40 +80,38 @@ export default function Home() {
}
// map out settings
- const videoQualitySettings = serverStatusData?.currentBroadcast?.outputSettings?.map((setting, index) => {
- const { audioPassthrough, videoPassthrough, audioBitrate, videoBitrate, framerate } = setting;
+ const videoQualitySettings = serverStatusData?.currentBroadcast?.outputSettings?.map(
+ (setting, index) => {
+ const { audioPassthrough, videoPassthrough, audioBitrate, videoBitrate, framerate } = setting;
- const audioSetting = audioPassthrough
- ? `${streamDetails.audioCodec || 'Unknown'}, ${streamDetails.audioBitrate} kbps`
- : `${audioBitrate || 'Unknown'} kbps`;
+ const audioSetting = audioPassthrough
+ ? `${streamDetails.audioCodec || 'Unknown'}, ${streamDetails.audioBitrate} kbps`
+ : `${audioBitrate || 'Unknown'} kbps`;
- const videoSetting = videoPassthrough
- ? `${streamDetails.videoBitrate || 'Unknown'} kbps, ${streamDetails.framerate} fps ${streamDetails.width} x ${streamDetails.height}`
- : `${videoBitrate || 'Unknown'} kbps, ${framerate} fps`;
+ const videoSetting = videoPassthrough
+ ? `${streamDetails.videoBitrate || 'Unknown'} kbps, ${streamDetails.framerate} fps ${
+ streamDetails.width
+ } x ${streamDetails.height}`
+ : `${videoBitrate || 'Unknown'} kbps, ${framerate} fps`;
- let settingTitle = 'Outbound Stream Details';
- settingTitle = (videoQualitySettings?.length > 1) ?
- `${settingTitle} ${index + 1}` : settingTitle;
- return (
-
-
-
-
- );
- });
+ let settingTitle = 'Outbound Stream Details';
+ settingTitle =
+ videoQualitySettings?.length > 1 ? `${settingTitle} ${index + 1}` : settingTitle;
+ return (
+
+
+
+
+ );
+ },
+ );
// inbound
const { viewerCount, sessionPeakViewerCount } = serverStatusData;
- const streamAudioDetailString = `${streamDetails.audioCodec}, ${streamDetails.audioBitrate || 'Unknown'} kbps`;
+ const streamAudioDetailString = `${streamDetails.audioCodec}, ${
+ streamDetails.audioBitrate || 'Unknown'
+ } kbps`;
const broadcastDate = new Date(broadcaster.time);
@@ -123,18 +121,11 @@ export default function Home() {
}
/>
- }
- />
+ } />
-
-
- {videoQualitySettings}
-
+
{videoQualitySettings}
diff --git a/web/pages/logs.tsx b/web/pages/logs.tsx
index 94957d45a..ce15c6bee 100644
--- a/web/pages/logs.tsx
+++ b/web/pages/logs.tsx
@@ -1,10 +1,7 @@
-import React, { useState, useEffect } from "react";
-import LogTable from "./components/log-table";
+import React, { useState, useEffect } from 'react';
+import LogTable from '../components/log-table';
-import {
- LOGS_ALL,
- fetchData,
-} from "../utils/apis";
+import { LOGS_ALL, fetchData } from '../utils/apis';
const FETCH_INTERVAL = 5 * 1000; // 5 sec
@@ -16,7 +13,7 @@ export default function Logs() {
const result = await fetchData(LOGS_ALL);
setLogs(result);
} catch (error) {
- console.log("==== error", error);
+ console.log('==== error', error);
}
};
@@ -33,6 +30,5 @@ export default function Logs() {
};
}, []);
- return ;
+ return ;
}
-
diff --git a/web/pages/offline-notice.tsx b/web/pages/offline-notice.tsx
index 1a87c6b66..a5bb16ab8 100644
--- a/web/pages/offline-notice.tsx
+++ b/web/pages/offline-notice.tsx
@@ -6,8 +6,8 @@ import {
BookTwoTone,
PlaySquareTwoTone,
} from '@ant-design/icons';
-import OwncastLogo from './components/logo';
-import LogTable from './components/log-table';
+import OwncastLogo from '../components/logo';
+import LogTable from '../components/log-table';
const { Meta } = Card;
diff --git a/web/pages/viewer-info.tsx b/web/pages/viewer-info.tsx
index 6790a956e..5a3ece0e5 100644
--- a/web/pages/viewer-info.tsx
+++ b/web/pages/viewer-info.tsx
@@ -3,8 +3,8 @@ import { Table, Row } from 'antd';
import { formatDistanceToNow } from 'date-fns';
import { UserOutlined } from '@ant-design/icons';
import { SortOrder } from 'antd/lib/table/interface';
-import Chart from './components/chart';
-import StatisticItem from './components/statistic';
+import Chart from '../components/chart';
+import StatisticItem from '../components/statistic';
import { ServerStatusContext } from '../utils/server-status-context';
diff --git a/web/utils/alert-message-context.tsx b/web/utils/alert-message-context.tsx
index 3cf81fc71..114699017 100644
--- a/web/utils/alert-message-context.tsx
+++ b/web/utils/alert-message-context.tsx
@@ -3,9 +3,8 @@ import PropTypes from 'prop-types';
export const AlertMessageContext = React.createContext({
message: null,
- setMessage: (text?: string) => {
- return text;
- },
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ setMessage: (text?: string) => null,
});
const AlertMessageProvider = ({ children }) => {
diff --git a/web/pages/components/config/constants.tsx b/web/utils/config-constants.tsx
similarity index 97%
rename from web/pages/components/config/constants.tsx
rename to web/utils/config-constants.tsx
index a065b5977..88223e727 100644
--- a/web/pages/components/config/constants.tsx
+++ b/web/utils/config-constants.tsx
@@ -1,8 +1,8 @@
// DEFAULT VALUES
import React from 'react';
import { CheckCircleFilled, ExclamationCircleFilled } from '@ant-design/icons';
-import { fetchData, SERVER_CONFIG_UPDATE_URL } from '../../../utils/apis';
-import { ApiPostArgs, VideoVariant, SocialHandle } from '../../../types/config-section';
+import { fetchData, SERVER_CONFIG_UPDATE_URL } from './apis';
+import { ApiPostArgs, VideoVariant, SocialHandle } from '../types/config-section';
export const TEXT_MAXLENGTH = 255;
diff --git a/web/utils/input-statuses.tsx b/web/utils/input-statuses.tsx
index 9dc62f626..11c077473 100644
--- a/web/utils/input-statuses.tsx
+++ b/web/utils/input-statuses.tsx
@@ -15,13 +15,16 @@ export const STATUS_WARNING = 'warning';
export type InputStatusTypes = 'error' | 'invalid' | 'proessing' | 'success' | 'warning';
-export type StatusState = {
+export interface StatusState {
type: InputStatusTypes;
icon: any; // Element type of sorts?
message: string;
-};
+}
+interface InputStates {
+ [key: string]: StatusState;
+}
-export const INPUT_STATES = {
+export const INPUT_STATES: InputStates = {
[STATUS_SUCCESS]: {
type: STATUS_SUCCESS,
icon: ,
diff --git a/web/utils/server-status-context.tsx b/web/utils/server-status-context.tsx
index e60c2a481..689934525 100644
--- a/web/utils/server-status-context.tsx
+++ b/web/utils/server-status-context.tsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
import { STATUS, fetchData, FETCH_INTERVAL, SERVER_CONFIG } from './apis';
import { ConfigDetails, UpdateArgs } from '../types/config-section';
-import { DEFAULT_VARIANT_STATE } from '../pages/components/config/constants';
+import { DEFAULT_VARIANT_STATE } from './config-constants';
export const initialServerConfigState: ConfigDetails = {
streamKey: '',
@@ -47,6 +47,7 @@ export const initialServerConfigState: ConfigDetails = {
const initialServerStatusState = {
broadcastActive: false,
broadcaster: null,
+ currentBroadcast: null,
online: false,
viewerCount: 0,
sessionMaxViewerCount: 0,
@@ -60,9 +61,8 @@ export const ServerStatusContext = React.createContext({
...initialServerStatusState,
serverConfig: initialServerConfigState,
- setFieldInConfigState: (args: UpdateArgs) => {
- return args;
- },
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ setFieldInConfigState: (args: UpdateArgs) => null,
});
const ServerStatusProvider = ({ children }) => {