From 299b7ff6de145d4f106122a080928288a1b8068c Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Sun, 27 Mar 2022 16:28:14 -0700
Subject: [PATCH] Display the representation % of players in metrics

---
 web/components/stream-health-overview.tsx | 13 +++++++++++--
 web/pages/stream-health.tsx               |  9 +++++++++
 web/types/config-section.ts               |  1 +
 web/utils/server-status-context.tsx       |  1 +
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/web/components/stream-health-overview.tsx b/web/components/stream-health-overview.tsx
index 55ad5435d..6d08d421b 100644
--- a/web/components/stream-health-overview.tsx
+++ b/web/components/stream-health-overview.tsx
@@ -1,5 +1,5 @@
 import { CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
-import { Alert, Button, Col, Row, Statistic } from 'antd';
+import { Alert, Button, Col, Row, Statistic, Typography } from 'antd';
 import Link from 'next/link';
 import React, { useContext } from 'react';
 import { ServerStatusContext } from '../utils/server-status-context';
@@ -12,7 +12,7 @@ export default function StreamHealthOverview() {
     return null;
   }
 
-  const { healthy, healthPercentage, message } = health;
+  const { healthy, healthPercentage, message, representation } = health;
   console.log(healthPercentage);
   let color = '#3f8600';
   let icon: 'success' | 'info' | 'warning' | 'error' = 'info';
@@ -44,6 +44,15 @@ export default function StreamHealthOverview() {
           />
         </Col>
       </Row>
+      <Row style={{ display: representation < 100 ? 'grid' : 'none' }}>
+        <Typography.Text
+          type="secondary"
+          style={{ textAlign: 'center', fontSize: '0.7em', opacity: '0.3' }}
+        >
+          Stream health represents {representation}% of all known players. Other player status is
+          unknown.
+        </Typography.Text>
+      </Row>
       <Row gutter={16} style={{ display: message ? 'grid' : 'none', marginTop: '10px' }}>
         <Col span={24}>
           <Alert
diff --git a/web/pages/stream-health.tsx b/web/pages/stream-health.tsx
index 04744ad78..f598f2d70 100644
--- a/web/pages/stream-health.tsx
+++ b/web/pages/stream-health.tsx
@@ -47,6 +47,7 @@ export default function StreamHealth() {
   const [maximumPlayerBitrate, setMaximumPlayerBitrate] = useState<TimedValue[]>([]);
   const [availableBitrates, setAvailableBitrates] = useState<Number[]>([]);
   const [segmentLength, setSegmentLength] = useState(0);
+  const [representation, setRepresentation] = useState(0);
 
   const getMetrics = async () => {
     try {
@@ -68,6 +69,7 @@ export default function StreamHealth() {
 
       setAvailableBitrates(result.availableBitrates);
       setSegmentLength(result.segmentLength - 0.3);
+      setRepresentation(result.representation);
     } catch (error) {
       console.error(error);
     }
@@ -303,6 +305,13 @@ export default function StreamHealth() {
           </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>
+        </div>
+
         <Card>
           <DescriptionBox
             title="Video Segment Download"
diff --git a/web/types/config-section.ts b/web/types/config-section.ts
index 7d6efe349..41cc84437 100644
--- a/web/types/config-section.ts
+++ b/web/types/config-section.ts
@@ -129,6 +129,7 @@ export interface Health {
   healthy: boolean;
   healthyPercentage: number;
   message: string;
+  representation: number;
 }
 
 export interface ConfigDetails {
diff --git a/web/utils/server-status-context.tsx b/web/utils/server-status-context.tsx
index 77d554c07..92fb4edcf 100644
--- a/web/utils/server-status-context.tsx
+++ b/web/utils/server-status-context.tsx
@@ -93,6 +93,7 @@ const initialServerStatusState = {
     healthy: true,
     healthPercentage: 100,
     message: '',
+    representation: 0,
   },
 };