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

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

@@ -1,5 +1,5 @@
import { InfoCircleOutlined } from "@ant-design/icons";
import { Tooltip } from "antd";
import { InfoCircleOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd';
interface InfoTipProps {
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;
export default function KeyValueTable({ title, data }: KeyValueTableProps) {
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: "Value",
dataIndex: "value",
key: "value",
title: 'Value',
dataIndex: 'value',
key: 'value',
},
];
@@ -25,6 +25,6 @@ export default function KeyValueTable({ title, data }: KeyValueTableProps) {
}
interface KeyValueTableProps {
title: string,
data: any,
};
title: string;
data: any;
}

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

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

49
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
import React, { useState, useEffect } from "react";
import { Button, Tooltip } from "antd";
import { EyeOutlined, EyeInvisibleOutlined, CheckCircleFilled, ExclamationCircleFilled } from "@ant-design/icons";
import { fetchData, UPDATE_CHAT_MESSGAE_VIZ } from "../../utils/apis";
import React, { useState, useEffect } from 'react';
import { Button, Tooltip } from 'antd';
import {
EyeOutlined,
EyeInvisibleOutlined,
CheckCircleFilled,
ExclamationCircleFilled,
} from '@ant-design/icons';
import { fetchData, UPDATE_CHAT_MESSGAE_VIZ } from '../../utils/apis';
import { MessageType } from '../../types/chat';
import { OUTCOME_TIMEOUT } from "../chat";
import { isEmptyObject } from "../../utils/format";
import { OUTCOME_TIMEOUT } from '../chat';
import { isEmptyObject } from '../../utils/format';
interface MessageToggleProps {
isVisible: boolean;
message: MessageType;
setMessage: (message: MessageType) => void,
};
setMessage: (message: MessageType) => void;
}
export default function MessageVisiblityToggle({ isVisible, message, setMessage }: MessageToggleProps) {
export default function MessageVisiblityToggle({
isVisible,
message,
setMessage,
}: MessageToggleProps) {
if (!message || isEmptyObject(message)) {
return null;
}
@@ -25,7 +33,9 @@ export default function MessageVisiblityToggle({ isVisible, message, setMessage
const { id: messageId } = message || {};
const resetOutcome = () => {
outcomeTimeout = setTimeout(() => { setOutcome(0)}, OUTCOME_TIMEOUT);
outcomeTimeout = setTimeout(() => {
setOutcome(0);
}, OUTCOME_TIMEOUT);
};
useEffect(() => {
@@ -34,7 +44,6 @@ export default function MessageVisiblityToggle({ isVisible, message, setMessage
};
});
const updateChatMessage = async () => {
clearTimeout(outcomeTimeout);
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 });
setOutcome(1);
} else {
@@ -55,14 +64,16 @@ export default function MessageVisiblityToggle({ isVisible, message, setMessage
setOutcome(-1);
}
resetOutcome();
}
};
let outcomeIcon = <CheckCircleFilled style={{ color: 'transparent' }} />;
if (outcome) {
outcomeIcon = outcome > 0 ?
<CheckCircleFilled style={{ color: 'var(--ant-success)' }} /> :
<ExclamationCircleFilled style={{ color: 'var(--ant-warning)' }} />;
outcomeIcon =
outcome > 0 ? (
<CheckCircleFilled style={{ color: 'var(--ant-success)' }} />
) : (
<ExclamationCircleFilled style={{ color: 'var(--ant-warning)' }} />
);
}
const toolTipMessage = `Click to ${isVisible ? 'hide' : 'show'} this message`;
@@ -74,7 +85,7 @@ export default function MessageVisiblityToggle({ isVisible, message, setMessage
shape="circle"
size="small"
type="text"
icon={ isVisible ? <EyeOutlined /> : <EyeInvisibleOutlined /> }
icon={isVisible ? <EyeOutlined /> : <EyeInvisibleOutlined />}
onClick={updateChatMessage}
/>
</Tooltip>

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

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