86 lines
1.7 KiB
TypeScript
86 lines
1.7 KiB
TypeScript
|
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>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
