Split up config sections into pages
This commit is contained in:
Gabe Kangas
parent
34458c1676
commit
83de63b1e8
25
web/pages/components/key-value-table.tsx
Normal file
25
web/pages/components/key-value-table.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import { Table, Typography } from "antd";
|
||||
|
||||
const { Title } = Typography;
|
||||
|
||||
export default function KeyValueTable({ title, data }) {
|
||||
const columns = [
|
||||
{
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
},
|
||||
{
|
||||
title: "Value",
|
||||
dataIndex: "value",
|
||||
key: "value",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Title>{title}</Title>
|
||||
<Table pagination={false} columns={columns} dataSource={data} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -46,14 +46,14 @@ export default function MainLayout(props) {
|
||||
<Sider
|
||||
width={240}
|
||||
style={{
|
||||
overflow: 'auto',
|
||||
height: '100vh',
|
||||
overflow: "auto",
|
||||
height: "100vh",
|
||||
}}
|
||||
>
|
||||
<Menu
|
||||
theme="dark"
|
||||
defaultSelectedKeys={[route.substring(1)]}
|
||||
defaultOpenKeys={['current-stream-menu', 'utilities-menu']}
|
||||
defaultOpenKeys={["current-stream-menu", "utilities-menu"]}
|
||||
mode="inline"
|
||||
>
|
||||
<h1 className={adminStyles.owncastTitleContainer}>
|
||||
@ -66,24 +66,38 @@ export default function MainLayout(props) {
|
||||
<Link href="/">Home</Link>
|
||||
</Menu.Item>
|
||||
|
||||
<SubMenu key="current-stream-menu" icon={<LineChartOutlined />} title="Stream Details">
|
||||
<SubMenu
|
||||
key="current-stream-menu"
|
||||
icon={<LineChartOutlined />}
|
||||
title="Stream Details"
|
||||
>
|
||||
<Menu.Item key="viewer-info">
|
||||
<Link href="/viewer-info">Viewers</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="hardware-info">
|
||||
<Link href="/hardware-info">Hardware</Link>
|
||||
</Menu.Item>
|
||||
{ broadcastActive ? (
|
||||
{broadcastActive ? (
|
||||
<Menu.Item key="disconnect-stream" icon={<CloseCircleOutlined />}>
|
||||
<Link href="/disconnect-stream">Disconnect Stream...</Link>
|
||||
</Menu.Item>
|
||||
) : null}
|
||||
) : null}
|
||||
</SubMenu>
|
||||
|
||||
<SubMenu key="utilities-menu" icon={<SettingOutlined />} title="Utilities">
|
||||
|
||||
<SubMenu
|
||||
key="utilities-menu"
|
||||
icon={<SettingOutlined />}
|
||||
title="Utilities"
|
||||
>
|
||||
<Menu.Item key="update-server-config">
|
||||
<Link href="/update-server-config">Server Configuration</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="video-config">
|
||||
<Link href="/video-config">Video Configuration</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="storage">
|
||||
<Link href="/storage">Storage</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="update-stream-key">
|
||||
<Link href="/update-stream-key">Change Stream Key</Link>
|
||||
</Menu.Item>
|
||||
@ -94,19 +108,15 @@ export default function MainLayout(props) {
|
||||
<Layout>
|
||||
<Header className={adminStyles.header}>
|
||||
<div className={adminStyles.statusIndicatorContainer}>
|
||||
<span className={adminStyles.statusLabel}>
|
||||
{statusMessage}
|
||||
</span>
|
||||
<span className={adminStyles.statusIcon}>
|
||||
{statusIcon}
|
||||
</span>
|
||||
<span className={adminStyles.statusLabel}>{statusMessage}</span>
|
||||
<span className={adminStyles.statusIcon}>{statusIcon}</span>
|
||||
</div>
|
||||
</Header>
|
||||
<Content className={adminStyles.contentMain}>
|
||||
{children}
|
||||
</Content>
|
||||
|
||||
<Footer style={{ textAlign: 'center' }}><a href="https://owncast.online/">About Owncast</a></Footer>
|
||||
<Content className={adminStyles.contentMain}>{children}</Content>
|
||||
|
||||
<Footer style={{ textAlign: "center" }}>
|
||||
<a href="https://owncast.online/">About Owncast</a>
|
||||
</Footer>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
85
web/pages/storage.tsx
Normal file
85
web/pages/storage.tsx
Normal file
@ -0,0 +1,85 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { SERVER_CONFIG, fetchData, FETCH_INTERVAL } from './utils/apis';
|
||||
import KeyValueTable from './components/key-value-table';
|
||||
|
||||
function Storage({ config }) {
|
||||
if (!config) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const data = [
|
||||
{
|
||||
name: "Enabled",
|
||||
value: config.s3.enabled.toString(),
|
||||
},
|
||||
{
|
||||
name: "Endpoint",
|
||||
value: config.s3.endpoint,
|
||||
},
|
||||
{
|
||||
name: "Access Key",
|
||||
value: config.s3.accessKey,
|
||||
},
|
||||
{
|
||||
name: "Secret",
|
||||
value: config.s3.secret,
|
||||
},
|
||||
{
|
||||
name: "Bucket",
|
||||
value: config.s3.bucket,
|
||||
},
|
||||
{
|
||||
name: "Region",
|
||||
value: config.s3.region,
|
||||
},
|
||||
];
|
||||
return <KeyValueTable title="External Storage" data={data} />;
|
||||
}
|
||||
|
||||
export default function ServerConfig() {
|
||||
const [config, setConfig] = useState();
|
||||
|
||||
const getInfo = async () => {
|
||||
try {
|
||||
const result = await fetchData(SERVER_CONFIG);
|
||||
console.log("viewers result", result)
|
||||
|
||||
setConfig({ ...result });
|
||||
|
||||
} catch (error) {
|
||||
setConfig({ ...config, message: error.message });
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
let getStatusIntervalId = null;
|
||||
|
||||
getInfo();
|
||||
getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL);
|
||||
|
||||
// returned function will be called on component unmount
|
||||
return () => {
|
||||
clearInterval(getStatusIntervalId);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>Server Config</h2>
|
||||
<p>
|
||||
Display this data all pretty, most things will be editable in the
|
||||
future, not now.
|
||||
</p>
|
||||
<div
|
||||
style={{
|
||||
border: "1px solid pink",
|
||||
width: "100%",
|
||||
overflow: "auto",
|
||||
}}
|
||||
>
|
||||
<Storage config={config} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -2,31 +2,11 @@ import React, { useState, useEffect } from 'react';
|
||||
import { Table, Typography, Input } from 'antd';
|
||||
import { SERVER_CONFIG, fetchData, FETCH_INTERVAL } from './utils/apis';
|
||||
import { isEmptyObject } from './utils/format';
|
||||
import KeyValueTable from "./components/key-value-table";
|
||||
|
||||
const { Title } = Typography;
|
||||
const { TextArea } = Input;
|
||||
|
||||
function KeyValueTable({ title, data }) {
|
||||
const columns = [
|
||||
{
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
},
|
||||
{
|
||||
title: "Value",
|
||||
dataIndex: "value",
|
||||
key: "value",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Title>{title}</Title>
|
||||
<Table pagination={false} columns={columns} dataSource={data} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SocialHandles({ config }) {
|
||||
if (!config) {
|
||||
@ -121,114 +101,6 @@ function InstanceDetails({ config }) {
|
||||
);
|
||||
}
|
||||
|
||||
function VideoVariants({ config }) {
|
||||
if (!config) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const videoQualityColumns = [
|
||||
{
|
||||
title: "Video bitrate",
|
||||
dataIndex: "videoBitrate",
|
||||
key: "videoBitrate",
|
||||
render: (bitrate) =>
|
||||
bitrate === 0 || !bitrate ? "Passthrough" : `${bitrate} kbps`,
|
||||
},
|
||||
{
|
||||
title: "Framerate",
|
||||
dataIndex: "framerate",
|
||||
key: "framerate",
|
||||
},
|
||||
{
|
||||
title: "Encoder preset",
|
||||
dataIndex: "encoderPreset",
|
||||
key: "framerate",
|
||||
},
|
||||
{
|
||||
title: "Audio bitrate",
|
||||
dataIndex: "audioBitrate",
|
||||
key: "audioBitrate",
|
||||
render: (bitrate) =>
|
||||
bitrate === 0 || !bitrate ? "Passthrough" : `${bitrate} kbps`,
|
||||
},
|
||||
];
|
||||
|
||||
const miscVideoSettingsColumns = [
|
||||
{
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
},
|
||||
{
|
||||
title: "Value",
|
||||
dataIndex: "value",
|
||||
key: "value",
|
||||
},
|
||||
];
|
||||
|
||||
const miscVideoSettings = [
|
||||
{
|
||||
name: "Segment length",
|
||||
value: config.videoSettings.segmentLengthSeconds,
|
||||
},
|
||||
{
|
||||
name: "Number of segments",
|
||||
value: config.videoSettings.numberOfPlaylistItems,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Title>Video configuration</Title>
|
||||
<Table
|
||||
pagination={false}
|
||||
columns={videoQualityColumns}
|
||||
dataSource={config.videoSettings.videoQualityVariants}
|
||||
/>
|
||||
|
||||
<Table
|
||||
pagination={false}
|
||||
columns={miscVideoSettingsColumns}
|
||||
dataSource={miscVideoSettings}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Storage({ config }) {
|
||||
if (!config) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const data = [
|
||||
{
|
||||
name: "Enabled",
|
||||
value: config.s3.enabled.toString(),
|
||||
},
|
||||
{
|
||||
name: "Endpoint",
|
||||
value: config.s3.endpoint,
|
||||
},
|
||||
{
|
||||
name: "Access Key",
|
||||
value: config.s3.accessKey,
|
||||
},
|
||||
{
|
||||
name: "Secret",
|
||||
value: config.s3.secret,
|
||||
},
|
||||
{
|
||||
name: "Bucket",
|
||||
value: config.s3.bucket,
|
||||
},
|
||||
{
|
||||
name: "Region",
|
||||
value: config.s3.region,
|
||||
},
|
||||
];
|
||||
return <KeyValueTable title="External Storage" data={data} />
|
||||
}
|
||||
|
||||
function PageContent({ config }) {
|
||||
if (!config) {
|
||||
return null;
|
||||
@ -287,8 +159,6 @@ export default function ServerConfig() {
|
||||
>
|
||||
<InstanceDetails config={config} />
|
||||
<SocialHandles config={config} />
|
||||
<VideoVariants config={config} />
|
||||
<Storage config={config} />
|
||||
<PageContent config={config} />
|
||||
|
||||
{JSON.stringify(config)}
|
||||
|
||||
128
web/pages/video-config.tsx
Normal file
128
web/pages/video-config.tsx
Normal file
@ -0,0 +1,128 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Table, Typography } from 'antd';
|
||||
import { SERVER_CONFIG, fetchData, FETCH_INTERVAL } from './utils/apis';
|
||||
|
||||
const { Title } = Typography;
|
||||
|
||||
|
||||
function VideoVariants({ config }) {
|
||||
if (!config) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const videoQualityColumns = [
|
||||
{
|
||||
title: "Video bitrate",
|
||||
dataIndex: "videoBitrate",
|
||||
key: "videoBitrate",
|
||||
render: (bitrate) =>
|
||||
bitrate === 0 || !bitrate ? "Passthrough" : `${bitrate} kbps`,
|
||||
},
|
||||
{
|
||||
title: "Framerate",
|
||||
dataIndex: "framerate",
|
||||
key: "framerate",
|
||||
},
|
||||
{
|
||||
title: "Encoder preset",
|
||||
dataIndex: "encoderPreset",
|
||||
key: "framerate",
|
||||
},
|
||||
{
|
||||
title: "Audio bitrate",
|
||||
dataIndex: "audioBitrate",
|
||||
key: "audioBitrate",
|
||||
render: (bitrate) =>
|
||||
bitrate === 0 || !bitrate ? "Passthrough" : `${bitrate} kbps`,
|
||||
},
|
||||
];
|
||||
|
||||
const miscVideoSettingsColumns = [
|
||||
{
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
},
|
||||
{
|
||||
title: "Value",
|
||||
dataIndex: "value",
|
||||
key: "value",
|
||||
},
|
||||
];
|
||||
|
||||
const miscVideoSettings = [
|
||||
{
|
||||
name: "Segment length",
|
||||
value: config.videoSettings.segmentLengthSeconds,
|
||||
},
|
||||
{
|
||||
name: "Number of segments",
|
||||
value: config.videoSettings.numberOfPlaylistItems,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Title>Video configuration</Title>
|
||||
<Table
|
||||
pagination={false}
|
||||
columns={videoQualityColumns}
|
||||
dataSource={config.videoSettings.videoQualityVariants}
|
||||
/>
|
||||
|
||||
<Table
|
||||
pagination={false}
|
||||
columns={miscVideoSettingsColumns}
|
||||
dataSource={miscVideoSettings}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function VideoConfig() {
|
||||
const [config, setConfig] = useState();
|
||||
|
||||
const getInfo = async () => {
|
||||
try {
|
||||
const result = await fetchData(SERVER_CONFIG);
|
||||
console.log("viewers result", result)
|
||||
|
||||
setConfig({ ...result });
|
||||
|
||||
} catch (error) {
|
||||
setConfig({ ...config, message: error.message });
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
let getStatusIntervalId = null;
|
||||
|
||||
getInfo();
|
||||
getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL);
|
||||
|
||||
// returned function will be called on component unmount
|
||||
return () => {
|
||||
clearInterval(getStatusIntervalId);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>Server Config</h2>
|
||||
<p>
|
||||
Display this data all pretty, most things will be editable in the
|
||||
future, not now.
|
||||
</p>
|
||||
<div
|
||||
style={{
|
||||
border: "1px solid pink",
|
||||
width: "100%",
|
||||
overflow: "auto",
|
||||
}}
|
||||
>
|
||||
<VideoVariants config={config} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user