LogalDeveloper/owncast
0
Fork 0
Code Activity

prettify some files

Browse Source
This commit is contained in:
gingervitis
2021-02-04 09:19:16 -08:00
parent 7786c7e113
commit c65c97df85
7 changed files with 102 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/pages/components/chart.tsx
View File

@@ -1,7 +1,6 @@
import { LineChart } from 'react-chartkick'; import { LineChart } from 'react-chartkick';
import 'chart.js'; import 'chart.js';
import format from 'date-fns/format'; import format from 'date-fns/format';
import styles from '../../styles/styles.module.scss';
interface TimedValue { interface TimedValue {
time: Date; time: Date;
@@ -22,7 +21,7 @@ function createGraphDataset(dataArray) {
const dateObject = new Date(item.time); const dateObject = new Date(item.time);
const dateString = format(dateObject, 'p P'); const dateString = format(dateObject, 'p P');
dataValues[dateString] = item.value; dataValues[dateString] = item.value;
}) });
return dataValues; return dataValues;
} }

4
web/pages/components/info-tip.tsx
View File

@@ -1,5 +1,5 @@
import { InfoCircleOutlined } from "@ant-design/icons"; import { InfoCircleOutlined } from '@ant-design/icons';
import { Tooltip } from "antd"; import { Tooltip } from 'antd';
interface InfoTipProps { interface InfoTipProps {
tip: string | null; tip: string | null;

20
web/pages/components/key-value-table.tsx
View File

@@ -1,18 +1,18 @@
import { Table, Typography } from "antd"; import { Table, Typography } from 'antd';
const { Title } = Typography; const { Title } = Typography;
export default function KeyValueTable({ title, data }: KeyValueTableProps) { export default function KeyValueTable({ title, data }: KeyValueTableProps) {
const columns = [ const columns = [
{ {
title: "Name", title: 'Name',
dataIndex: "name", dataIndex: 'name',
key: "name", key: 'name',
}, },
{ {
title: "Value", title: 'Value',
dataIndex: "value", dataIndex: 'value',
key: "value", key: 'value',
}, },
]; ];
@@ -25,6 +25,6 @@ export default function KeyValueTable({ title, data }: KeyValueTableProps) {
} }
interface KeyValueTableProps { interface KeyValueTableProps {
title: string, title: string;
data: any, data: any;
}; }

63
web/pages/components/log-table.tsx
View File

@@ -1,32 +1,30 @@
import React from "react"; import React from 'react';
import { Table, Tag, Typography } from "antd"; import { Table, Tag, Typography } from 'antd';
import Linkify from "react-linkify"; import Linkify from 'react-linkify';
import { SortOrder } from "antd/lib/table/interface"; import { SortOrder } from 'antd/lib/table/interface';
import format from 'date-fns/format' import format from 'date-fns/format';
const { Title } = Typography; const { Title } = Typography;
function renderColumnLevel(text, entry) { function renderColumnLevel(text, entry) {
let color = 'black'; let color = 'black';
if (entry.level === "warning") { if (entry.level === 'warning') {
color = "orange"; color = 'orange';
} else if (entry.level === 'error') { } else if (entry.level === 'error') {
color = "red"; color = 'red';
} }
return <Tag color={color}>{text}</Tag>; return <Tag color={color}>{text}</Tag>;
} }
function renderMessage(text) { function renderMessage(text) {
return ( return <Linkify>{text}</Linkify>;
<Linkify>{text}</Linkify>
)
} }
interface Props { interface Props {
logs: object[], logs: object[];
pageSize: number pageSize: number;
} }
export default function LogTable({ logs, pageSize }: Props) { export default function LogTable({ logs, pageSize }: Props) {
@@ -35,42 +33,42 @@ export default function LogTable({ logs, pageSize }: Props) {
} }
const columns = [ const columns = [
{ {
title: "Level", title: 'Level',
dataIndex: "level", dataIndex: 'level',
key: "level", key: 'level',
filters: [ filters: [
{ {
text: "Info", text: 'Info',
value: "info", value: 'info',
}, },
{ {
text: "Warning", text: 'Warning',
value: "warning", value: 'warning',
}, },
{ {
text: "Error", text: 'Error',
value: "Error", value: 'Error',
}, },
], ],
onFilter: (level, row) => row.level.indexOf(level) === 0, onFilter: (level, row) => row.level.indexOf(level) === 0,
render: renderColumnLevel, render: renderColumnLevel,
}, },
{ {
title: "Timestamp", title: 'Timestamp',
dataIndex: "time", dataIndex: 'time',
key: "time", key: 'time',
render: (timestamp) => { render: timestamp => {
const dateObject = new Date(timestamp); const dateObject = new Date(timestamp);
return format(dateObject, 'p P'); return format(dateObject, 'p P');
}, },
sorter: (a, b) => new Date(a.time).getTime() - new Date(b.time).getTime(), sorter: (a, b) => new Date(a.time).getTime() - new Date(b.time).getTime(),
sortDirections: ["descend", "ascend"] as SortOrder[], sortDirections: ['descend', 'ascend'] as SortOrder[],
defaultSortOrder: "descend" as SortOrder, defaultSortOrder: 'descend' as SortOrder,
}, },
{ {
title: "Message", title: 'Message',
dataIndex: "message", dataIndex: 'message',
key: "message", key: 'message',
render: renderMessage, render: renderMessage,
}, },
]; ];
@@ -82,10 +80,9 @@ export default function LogTable({ logs, pageSize }: Props) {
size="middle" size="middle"
dataSource={logs} dataSource={logs}
columns={columns} columns={columns}
rowKey={(row) => row.time} rowKey={row => row.time}
pagination={{ pageSize: pageSize || 20 }} pagination={{ pageSize: pageSize || 20 }}
/> />
</div> </div>
); );
} }

55
web/pages/components/message-visiblity-toggle.tsx
View File

@@ -1,20 +1,28 @@
// Custom component for AntDesign Button that makes an api call, then displays a confirmation icon upon // Custom component for AntDesign Button that makes an api call, then displays a confirmation icon upon
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from 'react';
import { Button, Tooltip } from "antd"; import { Button, Tooltip } from 'antd';
import { EyeOutlined, EyeInvisibleOutlined, CheckCircleFilled, ExclamationCircleFilled } from "@ant-design/icons"; import {
import { fetchData, UPDATE_CHAT_MESSGAE_VIZ } from "../../utils/apis"; EyeOutlined,
EyeInvisibleOutlined,
CheckCircleFilled,
ExclamationCircleFilled,
} from '@ant-design/icons';
import { fetchData, UPDATE_CHAT_MESSGAE_VIZ } from '../../utils/apis';
import { MessageType } from '../../types/chat'; import { MessageType } from '../../types/chat';
import { OUTCOME_TIMEOUT } from "../chat"; import { OUTCOME_TIMEOUT } from '../chat';
import { isEmptyObject } from "../../utils/format"; import { isEmptyObject } from '../../utils/format';
interface MessageToggleProps { interface MessageToggleProps {
isVisible: boolean; isVisible: boolean;
message: MessageType; message: MessageType;
setMessage: (message: MessageType) => void, setMessage: (message: MessageType) => void;
}; }
export default function MessageVisiblityToggle({
export default function MessageVisiblityToggle({ isVisible, message, setMessage }: MessageToggleProps) { isVisible,
message,
setMessage,
}: MessageToggleProps) {
if (!message || isEmptyObject(message)) { if (!message || isEmptyObject(message)) {
return null; return null;
} }
@@ -25,16 +33,17 @@ export default function MessageVisiblityToggle({ isVisible, message, setMessage
const { id: messageId } = message || {}; const { id: messageId } = message || {};
const resetOutcome = () => { const resetOutcome = () => {
outcomeTimeout = setTimeout(() => { setOutcome(0)}, OUTCOME_TIMEOUT); outcomeTimeout = setTimeout(() => {
setOutcome(0);
}, OUTCOME_TIMEOUT);
}; };
useEffect(() => { useEffect(() => {
return () => { return () => {
clearTimeout(outcomeTimeout); clearTimeout(outcomeTimeout);
}; };
}); });
const updateChatMessage = async () => { const updateChatMessage = async () => {
clearTimeout(outcomeTimeout); clearTimeout(outcomeTimeout);
setOutcome(0); setOutcome(0);
@@ -47,7 +56,7 @@ export default function MessageVisiblityToggle({ isVisible, message, setMessage
}, },
}); });
if (result.success && result.message === "changed") { if (result.success && result.message === 'changed') {
setMessage({ ...message, visible: !isVisible }); setMessage({ ...message, visible: !isVisible });
setOutcome(1); setOutcome(1);
} else { } else {
@@ -55,14 +64,16 @@ export default function MessageVisiblityToggle({ isVisible, message, setMessage
setOutcome(-1); setOutcome(-1);
} }
resetOutcome(); resetOutcome();
} };
let outcomeIcon = <CheckCircleFilled style={{ color: 'transparent' }} />; let outcomeIcon = <CheckCircleFilled style={{ color: 'transparent' }} />;
if (outcome) { if (outcome) {
outcomeIcon = outcome > 0 ? outcomeIcon =
<CheckCircleFilled style={{ color: 'var(--ant-success)' }} /> : outcome > 0 ? (
<ExclamationCircleFilled style={{ color: 'var(--ant-warning)' }} />; <CheckCircleFilled style={{ color: 'var(--ant-success)' }} />
) : (
<ExclamationCircleFilled style={{ color: 'var(--ant-warning)' }} />
);
} }
const toolTipMessage = `Click to ${isVisible ? 'hide' : 'show'} this message`; const toolTipMessage = `Click to ${isVisible ? 'hide' : 'show'} this message`;
@@ -74,10 +85,10 @@ export default function MessageVisiblityToggle({ isVisible, message, setMessage
shape="circle" shape="circle"
size="small" size="small"
type="text" type="text"
icon={ isVisible ? <EyeOutlined /> : <EyeInvisibleOutlined /> } icon={isVisible ? <EyeOutlined /> : <EyeInvisibleOutlined />}
onClick={updateChatMessage} onClick={updateChatMessage}
/> />
</Tooltip> </Tooltip>
</div> </div>
); );
} }

56
web/pages/components/statistic.tsx
View File

@@ -1,18 +1,18 @@
import { Typography, Statistic, Card, Progress} from "antd"; import { Typography, Statistic, Card, Progress } from 'antd';
const { Text } = Typography; const { Text } = Typography;
interface StatisticItemProps { interface StatisticItemProps {
title?: string, title?: string;
value?: any, value?: any;
prefix?: JSX.Element, prefix?: JSX.Element;
color?: string, color?: string;
progress?: boolean, progress?: boolean;
centered?: boolean, centered?: boolean;
formatter?: any, formatter?: any;
}; }
const defaultProps = { const defaultProps = {
title: '', title: '',
value: 0, value: 0,
prefix: null, prefix: null,
color: '', color: '',
@@ -21,16 +21,19 @@ const defaultProps = {
formatter: null, formatter: null,
}; };
function ProgressView({ title, value, prefix, color }: StatisticItemProps) { function ProgressView({ title, value, prefix, color }: StatisticItemProps) {
const endColor = value > 90 ? 'red' : color; const endColor = value > 90 ? 'red' : color;
const content = ( const content = (
<div> <div>
{prefix} {prefix}
<div><Text type="secondary">{title}</Text></div> <div>
<div><Text type="secondary">{value}%</Text></div> <Text type="secondary">{title}</Text>
</div>
<div>
<Text type="secondary">{value}%</Text>
</div>
</div> </div>
) );
return ( return (
<Progress <Progress
type="dashboard" type="dashboard"
@@ -42,19 +45,12 @@ function ProgressView({ title, value, prefix, color }: StatisticItemProps) {
}} }}
format={percent => content} format={percent => content}
/> />
) );
} }
ProgressView.defaultProps = defaultProps; ProgressView.defaultProps = defaultProps;
function StatisticView({ title, value, prefix, formatter }: StatisticItemProps) { function StatisticView({ title, value, prefix, formatter }: StatisticItemProps) {
return ( return <Statistic title={title} value={value} prefix={prefix} formatter={formatter} />;
<Statistic
title={title}
value={value}
prefix={prefix}
formatter={formatter}
/>
);
} }
StatisticView.defaultProps = defaultProps; StatisticView.defaultProps = defaultProps;
@@ -62,14 +58,14 @@ export default function StatisticItem(props: StatisticItemProps) {
const { progress, centered } = props; const { progress, centered } = props;
const View = progress ? ProgressView : StatisticView; const View = progress ? ProgressView : StatisticView;
const style = centered ? {display: 'flex', alignItems: 'center', justifyContent: 'center'} : {}; const style = centered ? { display: 'flex', alignItems: 'center', justifyContent: 'center' } : {};
return ( return (
<Card type="inner"> <Card type="inner">
<div style={style}> <div style={style}>
<View {...props} /> <View {...props} />
</div> </div>
</Card> </Card>
); );
} }
StatisticItem.defaultProps = defaultProps; StatisticItem.defaultProps = defaultProps;

95
web/styles/styles.module.scss
View File

@@ -1,95 +0,0 @@
.owncastTitleContainer {
padding: 1rem;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.logoContainer {
background-color: #fff;
padding: .35rem;
border-radius: 9999px;
}
.owncastTitle {
display: inline-block;
margin-left: 1rem;
color: rgba(203,213,224, 1);
font-size: 1.15rem;
font-weight: 200;
text-transform: uppercase;
line-height: normal;
letter-spacing: .05em;
}
.contentMain {
padding: 3em;
}
.header {
display: flex;
flex-direction: row;
justify-content: flex-end;
padding-right: 1rem;
}
.sideNav {
position: fixed;
height: 100vh;
overflow: auto;
z-index: 10;
}
.layoutMain {
margin-left: 240px;
}
.statusIndicatorContainer {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.statusIcon {
font-size: 1.5rem;
}
.statusIcon svg {
fill: #999;
}
.statusLabel {
color: #fff;
text-transform: uppercase;
font-size: .75rem;
display: inline-block;
margin-right: .5rem;
color: #999;
}
.online .statusIcon svg {
fill: var(--online-color)
}
.online .statusLabel {
color: var(--online-color)
}
.lineChartContainer {
margin: 2em auto;
}
.configSection {
margin-bottom: 2em;
}
.onlineCurrentThumb {
width: 12.5rem;
}
.globalStreamTitleContainer {
display: flex;
justify-content: center;
align-items: baseline;
width: 100%;
height: 100%;
}