Split up config sections into pages

web/pages/components/key-value-table.tsx

@@ -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>
+  );
+}

web/pages/components/main-layout.tsx

@@ -46,14 +46,14 @@ export default function MainLayout(props) {
       <Sider
         width={240}
         style={{
-          overflow: 'auto',
+          overflow: "auto",
-          height: '100vh',
+          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}>
+            <span className={adminStyles.statusLabel}>{statusMessage}</span>
-              {statusMessage}
+            <span className={adminStyles.statusIcon}>{statusIcon}</span>
-            </span>
-            <span className={adminStyles.statusIcon}>
-            {statusIcon}
-          </span>
           </div>
         </Header>
-        <Content className={adminStyles.contentMain}>
+        <Content className={adminStyles.contentMain}>{children}</Content>
-          {children}
-        </Content>
 
-        <Footer style={{ textAlign: 'center' }}><a href="https://owncast.online/">About Owncast</a></Footer>
+        <Footer style={{ textAlign: "center" }}>
+          <a href="https://owncast.online/">About Owncast</a>
+        </Footer>
       </Layout>
     </Layout>
   );

web/pages/storage.tsx

@@ -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>
+  ); 
+}
+

web/pages/update-server-config.tsx

@@ -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)}

web/pages/video-config.tsx

@@ -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>
+  ); 
+}
+