From 72d9ff4edbb39abd63c10d4f70f2ca67a05e2fd8 Mon Sep 17 00:00:00 2001
From: gingervitis <omqmail@gmail.com>
Date: Fri, 13 Nov 2020 03:57:57 -0800
Subject: [PATCH] assorted cleanup

---
 web/pages/components/log-table.tsx | 10 ++++++++--
 web/pages/index.tsx                | 11 +++--------
 web/pages/offline-notice.tsx       |  8 +-------
 web/pages/update-server-config.tsx | 12 ++++++------
 web/pages/viewer-info.tsx          |  3 ---
 web/styles/home.scss               |  1 +
 6 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/web/pages/components/log-table.tsx b/web/pages/components/log-table.tsx
index b4f385832..ce543f19b 100644
--- a/web/pages/components/log-table.tsx
+++ b/web/pages/components/log-table.tsx
@@ -1,9 +1,11 @@
 import React from "react";
 import { timeFormat } from "d3-time-format";
-import { Table, Tag} from "antd";
+import { Table, Tag, Typography } from "antd";
 import Linkify from "react-linkify";
 import { SortOrder } from "antd/lib/table/interface";
 
+const { Title } = Typography;
+
 function renderColumnLevel(text, entry) {
   let color = 'black';
 
@@ -28,6 +30,9 @@ interface Props {
 }
 
 export default function LogTable({ logs, pageSize }: Props) {
+  if (!logs.length) {
+    return null;
+  }
   const columns = [
     {
       title: "Level",
@@ -69,7 +74,8 @@ export default function LogTable({ logs, pageSize }: Props) {
   ];
 
   return (
-    <div>
+    <div className="logs-section">
+      <Title level={2}>Logs</Title>
       <Table
         size="middle"
         dataSource={logs}
diff --git a/web/pages/index.tsx b/web/pages/index.tsx
index b6bc58942..3c6671efa 100644
--- a/web/pages/index.tsx
+++ b/web/pages/index.tsx
@@ -9,7 +9,7 @@ TODO: Link each overview value to the sub-page that focuses on it.
 */
 
 import React, { useState, useEffect, useContext } from "react";
-import { Row, Col, Skeleton, Result, List, Typography, Card, Statistic } from "antd";
+import { Skeleton, Typography, Card, Statistic } from "antd";
 import { UserOutlined, ClockCircleOutlined } from "@ant-design/icons";
 import { formatDistanceToNow, formatRelative } from "date-fns";
 import { ServerStatusContext } from "../utils/server-status-context";
@@ -94,7 +94,7 @@ export default function Home() {
     settingTitle = (videoQualitySettings?.length > 1) ?
       `${settingTitle} ${index + 1}` : settingTitle;
     return (
-      <Card title={settingTitle} type="inner">
+      <Card title={settingTitle} type="inner" key={settingTitle}>
         <StatisticItem
           title="Outbound Video Stream"
           value={`${videoBitrate} kbps, ${framerate} fps`}
@@ -188,12 +188,7 @@ export default function Home() {
       </div>
       </div>
 
-      {logsData.length ? (
-        <>
-          <Title level={2}>Stream Logs</Title>
-          <LogTable logs={logsData} pageSize={5} />
-        </>
-      ): null}
+      <LogTable logs={logsData} pageSize={5} />
     </div>
   );
 }
diff --git a/web/pages/offline-notice.tsx b/web/pages/offline-notice.tsx
index 0da427e63..575744a9f 100644
--- a/web/pages/offline-notice.tsx
+++ b/web/pages/offline-notice.tsx
@@ -69,13 +69,7 @@ export default function Offline({ logs = [] }) {
         }
       </div>
 
-
-      {logs.length ? (
-        <>
-          <Title level={2}>Stream Logs</Title>
-          <LogTable logs={logs} pageSize={5} />
-        </>
-      ): null}
+      <LogTable logs={logs} pageSize={5} />
     </div>
   );
 }
diff --git a/web/pages/update-server-config.tsx b/web/pages/update-server-config.tsx
index 34e905366..20dca340a 100644
--- a/web/pages/update-server-config.tsx
+++ b/web/pages/update-server-config.tsx
@@ -82,15 +82,15 @@ function InstanceDetails({ config }) {
     },
     {
       name: "Logo",
-      value: instanceDetails.logo.large,
+      value: instanceDetails.logo?.large,
     },
     {
       name: "Tags",
-      value: instanceDetails.tags.join(", "),
+      value: instanceDetails.tags?.join(", "),
     },
     {
       name: "NSFW",
-      value: instanceDetails.nsfw.toString(),
+      value: instanceDetails.nsfw?.toString(),
     },
     {
       name: "Shows in Owncast directory",
@@ -150,9 +150,9 @@ export default function ServerConfig() {
       setConfig({ ...config, message: error.message });
     }
   };
-
-  getInfo();
-  
+  useEffect(() => {
+    getInfo();
+  }, []);  
 
   return (
     <div>
diff --git a/web/pages/viewer-info.tsx b/web/pages/viewer-info.tsx
index de1099178..03b5db25d 100644
--- a/web/pages/viewer-info.tsx
+++ b/web/pages/viewer-info.tsx
@@ -109,19 +109,16 @@ export default function ViewersOverTime() {
           title="Current viewers"
           value={viewerCount.toString()}
           prefix={<UserOutlined />}
-          color="#334"
         />
         <StatisticItem
           title="Peak viewers this session"
           value={sessionPeakViewerCount.toString()}
           prefix={<UserOutlined />}
-          color="#334"
         />
         <StatisticItem
           title="Peak viewers overall"
           value={overallPeakViewerCount.toString()}
           prefix={<UserOutlined />}
-          color="#334"
         />
       </Row>
       <div className="chart-container">
diff --git a/web/styles/home.scss b/web/styles/home.scss
index ea41587ec..770d90d07 100644
--- a/web/styles/home.scss
+++ b/web/styles/home.scss
@@ -63,6 +63,7 @@
 
         .ant-card {
           width: 49%;
+          text-align: center;
         }
       }
       .ant-card-head {