Layout updates to stream health stats and messages

web/components/stream-health-overview.tsx

@@ -4,16 +4,19 @@ import Link from 'next/link';
 import React, { useContext } from 'react';
 import { ServerStatusContext } from '../utils/server-status-context';
 
-export default function StreamHealthOverview() {
+interface StreamHealthOverviewProps {
+  showTroubleshootButton?: Boolean;
+}
+export default function StreamHealthOverview({
+  showTroubleshootButton,
+}: StreamHealthOverviewProps) {
   const serverStatusData = useContext(ServerStatusContext);
   const { health } = serverStatusData;
-
   if (!health) {
     return null;
   }
 
   const { healthy, healthPercentage, message, representation } = health;
-  console.log(healthPercentage);
   let color = '#3f8600';
   let icon: 'success' | 'info' | 'warning' | 'error' = 'info';
   if (healthPercentage < 80) {
@@ -26,7 +29,7 @@ export default function StreamHealthOverview() {
 
   return (
     <div>
-      <Row gutter={16}>
+      <Row gutter={8}>
         <Col span={12}>
           <Statistic
             title="Healthy Stream"
@@ -44,7 +47,7 @@ export default function StreamHealthOverview() {
           />
         </Col>
       </Row>
-      <Row style={{ display: representation < 100 ? 'grid' : 'none' }}>
+      <Row style={{ display: representation < 100 && representation !== 0 ? 'grid' : 'none' }}>
         <Typography.Text
           type="secondary"
           style={{ textAlign: 'center', fontSize: '0.7em', opacity: '0.3' }}
@@ -53,18 +56,23 @@ export default function StreamHealthOverview() {
           unknown.
         </Typography.Text>
       </Row>
-      <Row gutter={16} style={{ display: message ? 'grid' : 'none', marginTop: '10px' }}>
+      <Row
+        gutter={16}
+        style={{ width: '100%', 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>
+              showTroubleshootButton && (
+                <Link passHref href="/stream-health">
+                  <Button size="small" type="text" style={{ color: 'black' }}>
+                    TROUBLESHOOT
+                  </Button>
+                </Link>
+              )
             }
           />
         </Col>
@@ -72,3 +80,7 @@ export default function StreamHealthOverview() {
     </div>
   );
 }
+
+StreamHealthOverview.defaultProps = {
+  showTroubleshootButton: true,
+};

web/pages/stream-health.tsx

@@ -1,10 +1,11 @@
 /* eslint-disable react/no-unescaped-entities */
 // import { BulbOutlined, LaptopOutlined, SaveOutlined } from '@ant-design/icons';
-import { Row, Col, Typography, Space, Statistic, Card, Alert } from 'antd';
+import { Row, Col, Typography, Space, Statistic, Card, Alert, Spin } from 'antd';
 import React, { ReactNode, useEffect, useState } from 'react';
 import { ClockCircleOutlined, WarningOutlined, WifiOutlined } from '@ant-design/icons';
 import { fetchData, FETCH_INTERVAL, API_STREAM_HEALTH_METRICS } from '../utils/apis';
 import Chart from '../components/chart';
+import StreamHealthOverview from '../components/stream-health-overview';
 
 interface TimedValue {
   time: Date;
@@ -90,10 +91,15 @@ export default function StreamHealth() {
   const noData = (
     <div>
       <Typography.Title>Stream Performance</Typography.Title>
-      <Typography.Paragraph>
+      <Alert
+        type="info"
+        message="
         Data has not yet been collected. Once a stream has begun and viewers are watching this page
-        will be available.
-      </Typography.Paragraph>
+        will be available."
+      />
+      <Spin size="large">
+        <div style={{ marginTop: '50px', height: '100px' }} />
+      </Spin>
     </div>
   );
   if (!errors?.length) {
@@ -259,6 +265,13 @@ export default function StreamHealth() {
         insight into external players people may be using such as VLC, MPV, QuickTime, etc.
       </Typography.Paragraph>
       <Space direction="vertical" size="middle">
+        <Row justify="space-around">
+          <Col style={{ width: '100%' }}>
+            <Card type="inner">
+              <StreamHealthOverview showTroubleshootButton={false} />
+            </Card>
+          </Col>
+        </Row>
         <Row
           gutter={[16, 16]}
           justify="space-around"
@@ -299,17 +312,19 @@ export default function StreamHealth() {
                   valueStyle={{ color: errorStatColor }}
                   prefix={<WarningOutlined style={{ marginRight: '5px' }} />}
                   suffix=""
-                />{' '}
+                />
               </div>
             </Card>
           </Col>
         </Row>
 
         <div style={{ textAlign: 'center', display: representation < 100 ? 'grid' : 'none' }}>
-          <Typography.Paragraph style={{ opacity: '0.7', fontSize: '0.7em' }}>
-            Provided playback metrics represent {representation}% of all known players. Specifics
-            around other players consuming this video stream are unknown.
-          </Typography.Paragraph>
+          {representation !== 0 && (
+            <Typography.Paragraph style={{ opacity: '0.7', fontSize: '0.7em' }}>
+              Provided playback metrics represent {representation}% of all known players. Specifics
+              around other players consuming this video stream are unknown.
+            </Typography.Paragraph>
+          )}
         </div>
 
         <Card>