Gabe Kangas
6 years ago
5 changed files with 268 additions and 150 deletions
@ -0,0 +1,25 @@
@@ -0,0 +1,25 @@
|
||||
import { Table, Typography } from "antd"; |
||||
|
||||
const { Title } = Typography; |
||||
|
||||
export default function KeyValueTable({ title, data }) { |
||||
const columns = [ |
||||
{ |
||||
title: "Name", |
||||
dataIndex: "name", |
||||
key: "name", |
||||
}, |
||||
{ |
||||
title: "Value", |
||||
dataIndex: "value", |
||||
key: "value", |
||||
}, |
||||
]; |
||||
|
||||
return ( |
||||
<div> |
||||
<Title>{title}</Title> |
||||
<Table pagination={false} columns={columns} dataSource={data} /> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,85 @@
@@ -0,0 +1,85 @@
|
||||
import React, { useState, useEffect } from 'react'; |
||||
import { SERVER_CONFIG, fetchData, FETCH_INTERVAL } from './utils/apis'; |
||||
import KeyValueTable from './components/key-value-table'; |
||||
|
||||
function Storage({ config }) { |
||||
if (!config) { |
||||
return null; |
||||
} |
||||
|
||||
const data = [ |
||||
{ |
||||
name: "Enabled", |
||||
value: config.s3.enabled.toString(), |
||||
}, |
||||
{ |
||||
name: "Endpoint", |
||||
value: config.s3.endpoint, |
||||
}, |
||||
{ |
||||
name: "Access Key", |
||||
value: config.s3.accessKey, |
||||
}, |
||||
{ |
||||
name: "Secret", |
||||
value: config.s3.secret, |
||||
}, |
||||
{ |
||||
name: "Bucket", |
||||
value: config.s3.bucket, |
||||
}, |
||||
{ |
||||
name: "Region", |
||||
value: config.s3.region, |
||||
}, |
||||
]; |
||||
return <KeyValueTable title="External Storage" data={data} />; |
||||
} |
||||
|
||||
export default function ServerConfig() { |
||||
const [config, setConfig] = useState(); |
||||
|
||||
const getInfo = async () => { |
||||
try { |
||||
const result = await fetchData(SERVER_CONFIG); |
||||
console.log("viewers result", result) |
||||
|
||||
setConfig({ ...result }); |
||||
|
||||
} catch (error) { |
||||
setConfig({ ...config, message: error.message }); |
||||
} |
||||
}; |
||||
|
||||
useEffect(() => { |
||||
let getStatusIntervalId = null; |
||||
|
||||
getInfo(); |
||||
getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL); |
||||
|
||||
// returned function will be called on component unmount
|
||||
return () => { |
||||
clearInterval(getStatusIntervalId); |
||||
} |
||||
}, []); |
||||
|
||||
return ( |
||||
<div> |
||||
<h2>Server Config</h2> |
||||
<p> |
||||
Display this data all pretty, most things will be editable in the |
||||
future, not now. |
||||
</p> |
||||
<div |
||||
style={{ |
||||
border: "1px solid pink", |
||||
width: "100%", |
||||
overflow: "auto", |
||||
}} |
||||
> |
||||
<Storage config={config} /> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
@ -0,0 +1,128 @@
@@ -0,0 +1,128 @@
|
||||
import React, { useState, useEffect } from 'react'; |
||||
import { Table, Typography } from 'antd'; |
||||
import { SERVER_CONFIG, fetchData, FETCH_INTERVAL } from './utils/apis'; |
||||
|
||||
const { Title } = Typography; |
||||
|
||||
|
||||
function VideoVariants({ config }) { |
||||
if (!config) { |
||||
return null; |
||||
} |
||||
|
||||
const videoQualityColumns = [ |
||||
{ |
||||
title: "Video bitrate", |
||||
dataIndex: "videoBitrate", |
||||
key: "videoBitrate", |
||||
render: (bitrate) => |
||||
bitrate === 0 || !bitrate ? "Passthrough" : `${bitrate} kbps`, |
||||
}, |
||||
{ |
||||
title: "Framerate", |
||||
dataIndex: "framerate", |
||||
key: "framerate", |
||||
}, |
||||
{ |
||||
title: "Encoder preset", |
||||
dataIndex: "encoderPreset", |
||||
key: "framerate", |
||||
}, |
||||
{ |
||||
title: "Audio bitrate", |
||||
dataIndex: "audioBitrate", |
||||
key: "audioBitrate", |
||||
render: (bitrate) => |
||||
bitrate === 0 || !bitrate ? "Passthrough" : `${bitrate} kbps`, |
||||
}, |
||||
]; |
||||
|
||||
const miscVideoSettingsColumns = [ |
||||
{ |
||||
title: "Name", |
||||
dataIndex: "name", |
||||
key: "name", |
||||
}, |
||||
{ |
||||
title: "Value", |
||||
dataIndex: "value", |
||||
key: "value", |
||||
}, |
||||
]; |
||||
|
||||
const miscVideoSettings = [ |
||||
{ |
||||
name: "Segment length", |
||||
value: config.videoSettings.segmentLengthSeconds, |
||||
}, |
||||
{ |
||||
name: "Number of segments", |
||||
value: config.videoSettings.numberOfPlaylistItems, |
||||
}, |
||||
]; |
||||
|
||||
return ( |
||||
<div> |
||||
<Title>Video configuration</Title> |
||||
<Table |
||||
pagination={false} |
||||
columns={videoQualityColumns} |
||||
dataSource={config.videoSettings.videoQualityVariants} |
||||
/> |
||||
|
||||
<Table |
||||
pagination={false} |
||||
columns={miscVideoSettingsColumns} |
||||
dataSource={miscVideoSettings} |
||||
/> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default function VideoConfig() { |
||||
const [config, setConfig] = useState(); |
||||
|
||||
const getInfo = async () => { |
||||
try { |
||||
const result = await fetchData(SERVER_CONFIG); |
||||
console.log("viewers result", result) |
||||
|
||||
setConfig({ ...result }); |
||||
|
||||
} catch (error) { |
||||
setConfig({ ...config, message: error.message }); |
||||
} |
||||
}; |
||||
|
||||
useEffect(() => { |
||||
let getStatusIntervalId = null; |
||||
|
||||
getInfo(); |
||||
getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL); |
||||
|
||||
// returned function will be called on component unmount
|
||||
return () => { |
||||
clearInterval(getStatusIntervalId); |
||||
} |
||||
}, []); |
||||
|
||||
return ( |
||||
<div> |
||||
<h2>Server Config</h2> |
||||
<p> |
||||
Display this data all pretty, most things will be editable in the |
||||
future, not now. |
||||
</p> |
||||
<div |
||||
style={{ |
||||
border: "1px solid pink", |
||||
width: "100%", |
||||
overflow: "auto", |
||||
}} |
||||
> |
||||
<VideoVariants config={config} /> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
Loading…
Reference in new issue