mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-29 11:39:08 +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 dynamic from 'next/dynamic';
import Link from 'next/link'; import Link from 'next/link';
import React, { FC, useContext } from 'react'; import React, { FC, useContext } from 'react';
@ -41,54 +41,56 @@ export const StreamHealthOverview: FC<StreamHealthOverviewProps> = ({ showTroubl
return ( return (
<div> <div>
<Row gutter={8}> <Card type="inner">
<Col span={12}> <Row gutter={8}>
<Statistic <Col span={12}>
title="Healthy Stream" <Statistic
value={healthy ? 'Yes' : 'No'} title="Healthy Stream"
valueStyle={{ color }} value={healthy ? 'Yes' : 'No'}
prefix={healthy ? <CheckCircleOutlined /> : <ExclamationCircleOutlined />} valueStyle={{ color }}
/> prefix={healthy ? <CheckCircleOutlined /> : <ExclamationCircleOutlined />}
</Col> />
<Col span={12}> </Col>
<Statistic <Col span={12}>
title="Playback Health" <Statistic
value={healthPercentage} title="Playback Health"
valueStyle={{ color }} value={healthPercentage}
suffix="%" valueStyle={{ color }}
/> suffix="%"
</Col> />
</Row> </Col>
<Row style={{ display: representation < 100 && representation !== 0 ? 'grid' : 'none' }}> </Row>
<Typography.Text <Row style={{ display: representation < 100 && representation !== 0 ? 'grid' : 'none' }}>
type="secondary" <Typography.Text
style={{ textAlign: 'center', fontSize: '0.7em', opacity: '0.3' }} 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 <Col span={24}>
unknown. <Alert
</Typography.Text> message={message}
</Row> type={icon}
<Row showIcon
gutter={16} action={
style={{ width: '100%', display: message ? 'grid' : 'none', marginTop: '10px' }} showTroubleshootButton && (
> <Link passHref href="/stream-health">
<Col span={24}> <Button size="small" type="text" style={{ color: 'black' }}>
<Alert TROUBLESHOOT
message={message} </Button>
type={icon} </Link>
showIcon )
action={ }
showTroubleshootButton && ( />
<Link passHref href="/stream-health"> </Col>
<Button size="small" type="text" style={{ color: 'black' }}> </Row>
TROUBLESHOOT </Card>
</Button>
</Link>
)
}
/>
</Col>
</Row>
</div> </div>
); );
}; };

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

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