WIP server config display page

web/pages/components/main-layout.tsx

@@ -88,7 +88,7 @@ export default function MainLayout(props) {
           
           <SubMenu key="utilities-menu" icon={<SettingOutlined />} title="Utilities">
             <Menu.Item key="update-server-config">
-              <Link href="/update-server-config">Update Server Configuration</Link>
+              <Link href="/update-server-config">Server Configuration</Link>
             </Menu.Item>
             <Menu.Item key="update-stream-key">
               <Link href="/update-stream-key">Change Stream Key</Link>

web/pages/update-server-config.tsx

@@ -1,23 +1,22 @@
 import React, { useState, useEffect, useContext } from 'react';
+import { Table, Typography, Input } from 'antd';
 import { SERVER_CONFIG, fetchData, FETCH_INTERVAL } from './utils/apis';
-import { BroadcastStatusContext } from './utils/broadcast-status-context';
 
-export default function ServerConfig() {
-  const context = useContext(BroadcastStatusContext);
-  const { broadcastActive } = context || {};
-  
+const { Title } = Typography;
+const { TextArea } = Input;
 
-  const [clients, setClients] = useState({});
+export default function ServerConfig() {  
+  const [config, setConfig] = useState();
 
   const getInfo = async () => {
     try {
       const result = await fetchData(SERVER_CONFIG);
       console.log("viewers result", result)
 
-      setClients({ ...result });
+      setConfig({ ...result });
 
     } catch (error) {
-      setClients({ ...clients, message: error.message });
+      setConfig({ ...config, message: error.message });
     }
   };
   
@@ -36,10 +35,266 @@ export default function ServerConfig() {
   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', height: '300px', width: '100%', overflow:'auto'}}>
-        {JSON.stringify(clients)}
+      <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",
+        }}
+      >
+        <InstanceDetails />
+        <SocialHandles />
+        <VideoVariants />
+        <Storage />
+        <PageContent />
+
+        {JSON.stringify(config)}
       </div>
     </div>
   );
+
+  function InstanceDetails() {
+    console.log(config)
+    if (!config) {
+      return null;
+    }
+    
+    const data = [
+      {
+        name: "Server name",
+        value: config.instanceDetails.name,
+      },
+      {
+        name: "Title",
+        value: config.instanceDetails.title,
+      },
+      {
+        name: "Summary",
+        value: config.instanceDetails.summary,
+      },
+      {
+        name: "Logo",
+        value: config.instanceDetails.logo.large,
+      },
+      {
+        name: "Tags",
+        value: config.instanceDetails.tags.join(", "),
+      },
+      {
+        name: "NSFW",
+        value: config.instanceDetails.nsfw.toString(),
+      },
+      {
+        name: "Shows in Owncast directory",
+        value: config.yp.enabled.toString(),
+      },
+    ];
+
+    const configData = [
+      {
+        name: "Stream key",
+        value: config.streamKey,
+      },
+      {
+        name: "ffmpeg path",
+        value: config.ffmpegPath,
+      },
+      {
+        name: "Web server port",
+        value: config.webServerPort,
+      },
+    ];
+
+    return (
+      <>
+        <KeyValueTable title="Server details" data={data} />
+        <KeyValueTable title="Server configuration" data={configData} />
+      </>
+    );
+  }
+
+   function SocialHandles() {
+    if (!config) {
+      return null;
+    }
+
+     const columns = [
+       {
+         title: "Platform",
+         dataIndex: "platform",
+         key: "platform",
+       },
+       {
+         title: "URL",
+         dataIndex: "url",
+         key: "url",
+         render: (url) => `<a href="${url}">${url}</a>`
+       },
+     ];
+
+     return (
+       <div>
+         <Title>Social Handles</Title>
+         <Table
+           pagination={false}
+           columns={columns}
+           dataSource={config.instanceDetails.socialHandles}
+         />
+       </div>
+     );
+   }
+  
+  function VideoVariants() {
+    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 PageContent() {
+        if (!config) {
+          return null;
+        }
+
+    return (
+      <div>
+        <Title>Page content</Title>
+        <TextArea
+          disabled rows={4}
+          value={config.instanceDetails.extraPageContent}
+        />
+      </div>
+    );
+  }
+
+  function Storage() {
+    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 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/viewer-info.tsx

@@ -44,7 +44,7 @@ export default function ViewersOverTime() {
     return "no info";
   }
 
-  const timeFormatter = (tick) => {return timeFormat('%H:%M:%S')(new Date(tick));};
+  const timeFormatter = (tick) => {return timeFormat('%H:%M')(new Date(tick));};
 
   const CustomizedTooltip = (props) => {
     const { active, payload, label } = props;