Add stream health overview component

web/components/stream-health-overview.tsx

@@ -0,0 +1,65 @@
+import { CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import { Alert, Button, Col, Row, Statistic } from 'antd';
+import Link from 'next/link';
+import React, { useContext } from 'react';
+import { ServerStatusContext } from '../utils/server-status-context';
+
+export default function StreamHealthOverview() {
+  const serverStatusData = useContext(ServerStatusContext);
+  const { health } = serverStatusData;
+
+  if (!health) {
+    return null;
+  }
+
+  const { healthy, healthPercentage, message } = health;
+  console.log(healthPercentage);
+  let color = '#3f8600';
+  let icon: 'success' | 'info' | 'warning' | 'error' = 'info';
+  if (healthPercentage < 80) {
+    color = '#cf000f';
+    icon = 'error';
+  } else if (healthPercentage < 30) {
+    color = '#f0ad4e';
+    icon = 'error';
+  }
+
+  return (
+    <div>
+      <Row gutter={16}>
+        <Col span={12}>
+          <Statistic
+            title="Healthy Stream"
+            value={healthy ? 'Yes' : 'No'}
+            valueStyle={{ color }}
+            prefix={healthy ? <CheckCircleOutlined /> : <ExclamationCircleOutlined />}
+          />
+        </Col>
+        <Col span={12}>
+          <Statistic
+            title="Playback Health"
+            value={healthPercentage}
+            valueStyle={{ color }}
+            suffix="%"
+          />
+        </Col>
+      </Row>
+      <Row gutter={16} style={{ display: message ? 'grid' : 'none', marginTop: '10px' }}>
+        <Col span={24}>
+          <Alert
+            message={message}
+            type={icon}
+            showIcon
+            action={
+              <Link passHref href="/stream-health">
+                <Button size="small" type="text" style={{ color: 'black' }}>
+                  TROUBLESHOOT
+                </Button>
+              </Link>
+            }
+          />
+        </Col>
+      </Row>
+    </div>
+  );
+}

web/pages/index.tsx

@@ -5,6 +5,7 @@ import { formatDistanceToNow, formatRelative } from 'date-fns';
 import { ServerStatusContext } from '../utils/server-status-context';
 import LogTable from '../components/log-table';
 import Offline from '../components/offline-notice';
+import StreamHealthOverview from '../components/stream-health-overview';
 
 import { LOGS_WARN, fetchData, FETCH_INTERVAL } from '../utils/apis';
 import { formatIPAddress, isEmptyObject } from '../utils/format';
@@ -132,6 +133,7 @@ export default function Home() {
                 />
               </Col>
             </Row>
+            <StreamHealthOverview />
           </Card>
         </div>
 
@@ -165,6 +167,7 @@ export default function Home() {
               />
             </Card>
           </Col>
+
           <Col span={12} xs={24} sm={24} md={24} lg={12}>
             <NewsFeed />
           </Col>

web/types/config-section.ts

@@ -125,6 +125,12 @@ export interface NotificationsConfig {
   twitter: TwitterNotification;
 }
 
+export interface Health {
+  healthy: boolean;
+  healthyPercentage: number;
+  message: string;
+}
+
 export interface ConfigDetails {
   externalActions: ExternalAction[];
   ffmpegPath: string;

web/utils/server-status-context.tsx

@@ -89,6 +89,11 @@ const initialServerStatusState = {
   versionNumber: '0.0.0',
   streamTitle: '',
   chatDisabled: false,
+  health: {
+    healthy: true,
+    healthPercentage: 100,
+    message: '',
+  },
 };
 
 export const ServerStatusContext = React.createContext({