pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

prettify some files

pull/1886/head
gingervitis 6 years ago
parent
7786c7e113
commit
c65c97df85
7 changed files with 102 additions and 194 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      web/pages/components/chart.tsx
  2. 4
      web/pages/components/info-tip.tsx
  3. 20
      web/pages/components/key-value-table.tsx
  4. 63
      web/pages/components/log-table.tsx
  5. 55
      web/pages/components/message-visiblity-toggle.tsx
  6. 56
      web/pages/components/statistic.tsx
  7. 95
      web/styles/styles.module.scss

3
web/pages/components/chart.tsx
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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%;
}
Write Preview
Loading…
Cancel
Save