mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-22 12:49:37 +03:00
Code Issues Projects Releases Packages Wiki Activity

Loose div in Utilities > Stream health screen (#2844)

Browse source
This commit is contained in:
Dhanu Saputra 2023-03-22 03:06:16 +07:00 committed by GitHub
parent 159bf7912c
commit 2b41113211
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 51 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
web/components/admin/StreamHealthOverview.tsx
View file

@ -1,4 +1,4 @@
import { Alert, Button, Col, Row, Statistic, Typography } from 'antd';
import { Alert, Button, Card, Col, Row, Statistic, Typography } from 'antd';
import dynamic from 'next/dynamic';
import Link from 'next/link';
import React, { FC, useContext } from 'react';
@ -41,54 +41,56 @@ export const StreamHealthOverview: FC<StreamHealthOverviewProps> = ({ showTroubl
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' }}
<Card type="inner">
<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' }}
>
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>
<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>
</Card>
</div>
);
};

4
web/pages/admin/stream-health.tsx
View file

@ -279,9 +279,7 @@ const StreamHealth = () => {
<Space direction="vertical" size="middle">
<Row justify="space-around">
<Col style={{ width: '100%' }}>
<Card type="inner">
<StreamHealthOverview showTroubleshootButton={false} />
</Card>
<StreamHealthOverview showTroubleshootButton={false} />
</Col>
</Row>
<Row