Reorganize admin components to help bundling

web/components/admin/StreamHealthOverview.tsx

@@ -0,0 +1,85 @@
+import { CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import { Alert, Button, Col, Row, Statistic, Typography } from 'antd';
+import Link from 'next/link';
+import React, { FC, useContext } from 'react';
+import { ServerStatusContext } from '../../utils/server-status-context';
+
+export type StreamHealthOverviewProps = {
+  showTroubleshootButton?: Boolean;
+};
+
+export const StreamHealthOverview: FC<StreamHealthOverviewProps> = ({ showTroubleshootButton }) => {
+  const serverStatusData = useContext(ServerStatusContext);
+  const { health } = serverStatusData;
+  if (!health) {
+    return null;
+  }
+
+  const { healthy, healthPercentage, message, representation } = health;
+  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={8}>
+        <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 style={{ display: representation < 100 && representation !== 0 ? '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={{ width: '100%', display: message ? 'grid' : 'none', marginTop: '10px' }}
+      >
+        <Col span={24}>
+          <Alert
+            message={message}
+            type={icon}
+            showIcon
+            action={
+              showTroubleshootButton && (
+                <Link passHref href="/stream-health">
+                  <Button size="small" type="text" style={{ color: 'black' }}>
+                    TROUBLESHOOT
+                  </Button>
+                </Link>
+              )
+            }
+          />
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+StreamHealthOverview.defaultProps = {
+  showTroubleshootButton: true,
+};