forked from cerc-io/laconic-console
85 lines
1.9 KiB
JavaScript
85 lines
1.9 KiB
JavaScript
//
|
|
// Copyright 2020 DXOS.org
|
|
//
|
|
|
|
import React, { useState } from 'react';
|
|
import { makeStyles } from '@material-ui/core';
|
|
import Paper from '@material-ui/core/Paper';
|
|
import Tab from '@material-ui/core/Tab';
|
|
import Tabs from '@material-ui/core/Tabs';
|
|
import TabContext from '@material-ui/lab/TabContext';
|
|
|
|
import Panel from '../../../components/Panel';
|
|
import Toolbar from '../../../components/Toolbar';
|
|
import LogPoller from '../../../components/LogPoller';
|
|
|
|
import SignalChannels from './SignalChannels';
|
|
import SignalServers from './SignalServers';
|
|
|
|
const TAB_NETWORK = 'servers';
|
|
const TAB_CHANNELS = 'channels';
|
|
const TAB_LOG = 'log';
|
|
|
|
const useStyles = makeStyles(() => ({
|
|
expand: {
|
|
flex: 1
|
|
},
|
|
|
|
panel: {
|
|
display: 'flex',
|
|
overflow: 'hidden',
|
|
flex: 1
|
|
},
|
|
|
|
paper: {
|
|
display: 'flex',
|
|
overflow: 'hidden',
|
|
flex: 1
|
|
}
|
|
}));
|
|
|
|
const Signal = () => {
|
|
const classes = useStyles();
|
|
const [tab, setTab] = useState(TAB_NETWORK);
|
|
|
|
return (
|
|
<Panel
|
|
toolbar={
|
|
<Toolbar>
|
|
<Tabs value={tab} onChange={(_, value) => setTab(value)}>
|
|
<Tab value={TAB_NETWORK} label='Network' />
|
|
<Tab value={TAB_CHANNELS} label='Channels' />
|
|
<Tab value={TAB_LOG} label='Log' />
|
|
</Tabs>
|
|
</Toolbar>
|
|
}
|
|
>
|
|
<TabContext value={tab}>
|
|
{tab === TAB_NETWORK && (
|
|
<div className={classes.panel}>
|
|
<Paper className={classes.paper}>
|
|
<SignalServers />
|
|
</Paper>
|
|
</div>
|
|
)}
|
|
|
|
{tab === TAB_CHANNELS && (
|
|
<div className={classes.panel}>
|
|
<Paper className={classes.paper}>
|
|
<SignalChannels />
|
|
</Paper>
|
|
</div>
|
|
)}
|
|
|
|
{tab === TAB_LOG && (
|
|
<div className={classes.panel}>
|
|
<LogPoller service='signal' />
|
|
</div>
|
|
)}
|
|
</TabContext>
|
|
</Panel>
|
|
);
|
|
};
|
|
|
|
export default Signal;
|