More fixes
This commit is contained in:
Artur
@@ -1,8 +1,9 @@
|
||||
import { Fragment } from 'inferno';
|
||||
import { Window } from '../layouts';
|
||||
import { useBackend } from '../backend';
|
||||
import { toFixed } from 'common/math';
|
||||
import { RADIO_CHANNELS } from '../constants';
|
||||
import { Button, LabeledList, NumberInput, NoticeBox, Section, Input, Window } from '../components';
|
||||
import { Button, LabeledList, NumberInput, NoticeBox, Section, Input } from '../components';
|
||||
|
||||
export const TelecommsInteraction = (props, context) => {
|
||||
const { act, data } = useBackend(context);
|
||||
@@ -24,7 +25,7 @@ export const TelecommsInteraction = (props, context) => {
|
||||
isbus = false,
|
||||
} = machine;
|
||||
return (
|
||||
<Window>
|
||||
<Window resizable>
|
||||
<Window.Content scrollable>
|
||||
<Fragment>
|
||||
{!!notice && (
|
||||
@@ -96,9 +97,11 @@ export const TelecommsInteraction = (props, context) => {
|
||||
{isbus ? (
|
||||
<LabeledList.Item label="Change Signal Frequency">
|
||||
<Button
|
||||
content={machine.chang_frequency
|
||||
? 'Enabled'
|
||||
: 'Disabled'}
|
||||
content={machine.chang_frequency ? (
|
||||
'Enabled'
|
||||
) : (
|
||||
'Disabled'
|
||||
)}
|
||||
icon={machine.chang_frequency ? 'power-off' : 'times'}
|
||||
color={machine.chang_frequency ? 'good' : 'bad'}
|
||||
onClick={() => act('frequency', {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Fragment } from 'inferno';
|
||||
import { useBackend } from '../backend';
|
||||
import { Button, LabeledList, NoticeBox, Section, Tabs, Input, Window } from '../components';
|
||||
import { Window } from '../layouts';
|
||||
import { useBackend, useSharedState } from '../backend';
|
||||
import { Button, LabeledList, NoticeBox, Section, Tabs, Input } from '../components';
|
||||
|
||||
export const TelecommsLogBrowser = (props, context) => {
|
||||
const { act, data } = useBackend(context);
|
||||
@@ -11,9 +12,16 @@ export const TelecommsLogBrowser = (props, context) => {
|
||||
selected = null,
|
||||
selected_logs,
|
||||
} = data;
|
||||
const [
|
||||
tab,
|
||||
setTab,
|
||||
] = useSharedState(context, 'tab', 'servers');
|
||||
const operational = (selected && selected.status);
|
||||
if (!operational) { // some sanity checks.
|
||||
setTab("servers");
|
||||
}
|
||||
return (
|
||||
<Window>
|
||||
<Window theme="ntos">
|
||||
<Window.Content scrollable>
|
||||
<Fragment>
|
||||
{!!notice && (
|
||||
@@ -93,85 +101,90 @@ export const TelecommsLogBrowser = (props, context) => {
|
||||
</Section>
|
||||
<Tabs>
|
||||
<Tabs.Tab
|
||||
key="servers"
|
||||
label="Servers">
|
||||
<Section>
|
||||
{(servers && servers.length) ? (
|
||||
<LabeledList>
|
||||
{servers.map(server => {
|
||||
return (
|
||||
<LabeledList.Item
|
||||
key={server.name}
|
||||
label={`${server.ref}`}
|
||||
buttons={(
|
||||
<Button
|
||||
content="Connect"
|
||||
selected={data.selected
|
||||
&& (server.ref === data.selected.ref)}
|
||||
onClick={() => act('viewmachine', {
|
||||
'value': server.id,
|
||||
})} />
|
||||
)}>
|
||||
{`${server.name} (${server.id})`}
|
||||
</LabeledList.Item>
|
||||
);
|
||||
})}
|
||||
</LabeledList>
|
||||
) : (
|
||||
'404 Servers not found. Have you tried scanning the network?'
|
||||
)}
|
||||
</Section>
|
||||
selected={tab === "servers"}
|
||||
onClick={() => setTab("servers")}>
|
||||
Servers
|
||||
</Tabs.Tab>
|
||||
<Tabs.Tab
|
||||
key="messages"
|
||||
label="Messages"
|
||||
disabled={!operational}>
|
||||
<Section title="Logs">
|
||||
{(operational && selected_logs) ? (
|
||||
selected_logs.map(logs => {
|
||||
return (
|
||||
<Section
|
||||
level={4}
|
||||
key={logs.ref}>
|
||||
<LabeledList>
|
||||
<LabeledList.Item
|
||||
label="Filename"
|
||||
buttons={(
|
||||
<Button
|
||||
content="Delete"
|
||||
onClick={() => act('delete', {
|
||||
'value': logs.ref,
|
||||
})} />
|
||||
)}>
|
||||
{logs.name}
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item label="Data type">
|
||||
{logs.input_type}
|
||||
</LabeledList.Item>
|
||||
{logs.source && (
|
||||
<LabeledList.Item label="Source">
|
||||
{`[${logs.source.name}]
|
||||
(Job: [${logs.source.job}])`}
|
||||
</LabeledList.Item>
|
||||
)}
|
||||
{logs.race && (
|
||||
<LabeledList.Item label="Class">
|
||||
{logs.race}
|
||||
</LabeledList.Item>
|
||||
)}
|
||||
<LabeledList.Item label="Contents">
|
||||
{logs.message}
|
||||
</LabeledList.Item>
|
||||
</LabeledList>
|
||||
</Section>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
"No server selected!"
|
||||
)}
|
||||
</Section>
|
||||
disabled={!operational}
|
||||
selected={tab === "messages"}
|
||||
onClick={() => setTab("messages")}>
|
||||
Messages
|
||||
</Tabs.Tab>
|
||||
</Tabs>
|
||||
{(tab === "messages" && operational) ? (
|
||||
<Section title="Logs">
|
||||
{(operational && selected_logs) ? (
|
||||
selected_logs.map(logs => {
|
||||
return (
|
||||
<Section
|
||||
level={4}
|
||||
key={logs.ref}>
|
||||
<LabeledList>
|
||||
<LabeledList.Item
|
||||
label="Filename"
|
||||
buttons={(
|
||||
<Button
|
||||
content="Delete"
|
||||
onClick={() => act('delete', {
|
||||
'value': logs.ref,
|
||||
})} />
|
||||
)}>
|
||||
{logs.name}
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item label="Data type">
|
||||
{logs.input_type}
|
||||
</LabeledList.Item>
|
||||
{logs.source && (
|
||||
<LabeledList.Item label="Source">
|
||||
{`[${logs.source.name}]
|
||||
(Job: [${logs.source.job}])`}
|
||||
</LabeledList.Item>
|
||||
)}
|
||||
{logs.race && (
|
||||
<LabeledList.Item label="Class">
|
||||
{logs.race}
|
||||
</LabeledList.Item>
|
||||
)}
|
||||
<LabeledList.Item label="Contents">
|
||||
{logs.message}
|
||||
</LabeledList.Item>
|
||||
</LabeledList>
|
||||
</Section>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
"No server selected!"
|
||||
)}
|
||||
</Section>
|
||||
) : (
|
||||
<Section>
|
||||
{(servers && servers.length) ? (
|
||||
<LabeledList>
|
||||
{servers.map(server => {
|
||||
return (
|
||||
<LabeledList.Item
|
||||
key={server.name}
|
||||
label={`${server.ref}`}
|
||||
buttons={(
|
||||
<Button
|
||||
content="Connect"
|
||||
selected={data.selected
|
||||
&& (server.ref === data.selected.ref)}
|
||||
onClick={() => act('viewmachine', {
|
||||
'value': server.id,
|
||||
})} />
|
||||
)}>
|
||||
{`${server.name} (${server.id})`}
|
||||
</LabeledList.Item>
|
||||
);
|
||||
})}
|
||||
</LabeledList>
|
||||
) : (
|
||||
'404 Servers not found. Have you tried scanning the network?'
|
||||
)}
|
||||
</Section>
|
||||
)}
|
||||
</Fragment>
|
||||
</Window.Content>
|
||||
</Window>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { Fragment } from 'inferno';
|
||||
import { useBackend } from '../backend';
|
||||
import { Window } from '../layouts';
|
||||
import { useBackend, useSharedState } from '../backend';
|
||||
import { RADIO_CHANNELS } from '../constants';
|
||||
import { Box, Button, LabeledList, NoticeBox, Section, Tabs, Input, Window } from '../components';
|
||||
import { Box, Button, LabeledList, NoticeBox, Section, Tabs, Input, ProgressBar } from '../components';
|
||||
|
||||
|
||||
export const TelecommsMonitor = (props, context) => {
|
||||
@@ -13,10 +14,16 @@ export const TelecommsMonitor = (props, context) => {
|
||||
selected = null,
|
||||
selected_servers,
|
||||
} = data;
|
||||
const [
|
||||
tab,
|
||||
setTab,
|
||||
] = useSharedState(context, 'tab', 'network-entity');
|
||||
const operational = (selected && selected.status);
|
||||
|
||||
if (!selected) { // some sanity checks.
|
||||
setTab("network-entity");
|
||||
}
|
||||
return (
|
||||
<Window>
|
||||
<Window theme="ntos" resizable>
|
||||
<Window.Content scrollable>
|
||||
<Fragment>
|
||||
{!!notice && (
|
||||
@@ -84,11 +91,106 @@ export const TelecommsMonitor = (props, context) => {
|
||||
</LabeledList>
|
||||
</Section>
|
||||
<Tabs>
|
||||
<Tabs.Tab label="Network Entities">
|
||||
<Section title="Detected Network Entities">
|
||||
{(servers && servers.length) ? (
|
||||
<Tabs.Tab
|
||||
selected={tab === "network-entity"}
|
||||
onClick={() => setTab("network-entity")}>
|
||||
Network Entities
|
||||
</Tabs.Tab>
|
||||
<Tabs.Tab
|
||||
disabled={!selected}
|
||||
selected={tab === "network-stat"}
|
||||
onClick={() => setTab("network-stat")}>
|
||||
Entity Status
|
||||
</Tabs.Tab>
|
||||
</Tabs>
|
||||
{(tab === "network-stat" && selected) ? (
|
||||
<Section title="Network Entity Status">
|
||||
<LabeledList>
|
||||
<LabeledList.Item
|
||||
label="Status"
|
||||
color={operational ? 'good' : 'bad'}>
|
||||
{operational ? (
|
||||
'Running'
|
||||
) : (
|
||||
'Server down!'
|
||||
)}
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item label="Network Traffic">
|
||||
<ProgressBar
|
||||
value={selected.traffic}
|
||||
ranges={{
|
||||
good: [ // 0-30%
|
||||
-Infinity,
|
||||
selected.netspeed*0.30,
|
||||
],
|
||||
average: [ // 30-70%
|
||||
selected.netspeed*0.30,
|
||||
selected.traffic*0.70,
|
||||
],
|
||||
bad: [ // 30-100%
|
||||
selected.netspeed*0.70,
|
||||
Infinity,
|
||||
],
|
||||
}}>
|
||||
{operational ? ( // Not to be confused to totaltraffic
|
||||
selected.traffic <= 1024 ? (
|
||||
`${Math.max(selected.traffic, 0)} Gigabytes`
|
||||
) : (
|
||||
`${Math.round(selected.traffic/1024)} Terrabytes`
|
||||
)
|
||||
) : (
|
||||
'0 Gigabytes'
|
||||
)}
|
||||
</ProgressBar>
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item label="Network Speed">
|
||||
{operational ? (
|
||||
selected.netspeed <= 1024 ? (
|
||||
`${selected.netspeed} Gigabytes/second`
|
||||
) : (
|
||||
`${Math.round(selected.netspeed/1024)} Terrabytes/second`
|
||||
)
|
||||
) : (
|
||||
'0 Gigabytes/second'
|
||||
)}
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item
|
||||
label="Multi-Z Link"
|
||||
color={(operational && selected.long_range_link) ? (
|
||||
'good'
|
||||
) : (
|
||||
'bad'
|
||||
)}>
|
||||
{(operational && selected.long_range_link) ? (
|
||||
'true' // was capitalized before
|
||||
) : (
|
||||
'false'
|
||||
)}
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item label="Frequency Listening">
|
||||
<Box>
|
||||
{operational && selected.freq_listening.map(thing => {
|
||||
const valid = RADIO_CHANNELS
|
||||
.find(channel => channel.freq === thing);
|
||||
return (
|
||||
(valid) ? (
|
||||
<Box as="span" style={`color: ${valid.color}`}>
|
||||
{`[${thing}] (${valid.name}) `}
|
||||
</Box>
|
||||
) : (
|
||||
`[${thing}] `
|
||||
)
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</LabeledList.Item>
|
||||
</LabeledList>
|
||||
<Section
|
||||
title="Servers Linked"
|
||||
level={3}>
|
||||
{(operational && selected_servers) ? (
|
||||
<LabeledList>
|
||||
{servers.map(server => {
|
||||
{selected_servers.map(server => {
|
||||
return (
|
||||
<LabeledList.Item
|
||||
key={server.name}
|
||||
@@ -96,8 +198,6 @@ export const TelecommsMonitor = (props, context) => {
|
||||
buttons={(
|
||||
<Button
|
||||
content="Connect"
|
||||
selected={selected
|
||||
&& (server.ref === selected.ref)}
|
||||
onClick={() => act('viewmachine', {
|
||||
'value': server.id,
|
||||
})} />
|
||||
@@ -108,118 +208,43 @@ export const TelecommsMonitor = (props, context) => {
|
||||
})}
|
||||
</LabeledList>
|
||||
) : (
|
||||
'404 Servers not found. Have you tried scanning the network?'
|
||||
!operational ? (
|
||||
"Server currently down! Cannot fetch the buffer list!"
|
||||
) : (
|
||||
"Buffer is empty!"
|
||||
)
|
||||
)}
|
||||
</Section>
|
||||
</Tabs.Tab>
|
||||
<Tabs.Tab
|
||||
label="Entity Status"
|
||||
disabled={!selected}>
|
||||
<Section title="Network Entity Status">
|
||||
</Section>
|
||||
) : (
|
||||
<Section title="Detected Network Entities">
|
||||
{(servers && servers.length) ? (
|
||||
<LabeledList>
|
||||
<LabeledList.Item
|
||||
label="Status"
|
||||
color={operational ? 'good' : 'bad'}>
|
||||
{operational ? (
|
||||
'Running'
|
||||
) : (
|
||||
'Server down!'
|
||||
)}
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item
|
||||
label="Network Traffic"
|
||||
color={operational
|
||||
&& (selected.netspeed < selected.traffic) ? (
|
||||
'bad'
|
||||
) : (
|
||||
'good'
|
||||
)}>
|
||||
{operational ? ( // Not to be confused to totaltraffic
|
||||
selected.traffic <= 1024 ? (
|
||||
`${Math.max(selected.traffic, 0)} Gigabytes`
|
||||
) : (
|
||||
`${Math.round(selected.traffic/1024)} Terrabytes`
|
||||
)
|
||||
) : (
|
||||
'0 Gigabytes'
|
||||
)}
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item label="Network Speed">
|
||||
{operational ? (
|
||||
selected.netspeed <= 1024 ? (
|
||||
`${selected.netspeed} Gigabytes/second`
|
||||
) : (
|
||||
`${Math.round(selected.netspeed/1024)}
|
||||
Terrabytes/second`
|
||||
)
|
||||
) : (
|
||||
'0 Gigabytes/second'
|
||||
)}
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item
|
||||
label="Multi-Z Link"
|
||||
color={(operational && selected.long_range_link) ? (
|
||||
'good'
|
||||
) : (
|
||||
'bad'
|
||||
)}>
|
||||
{(operational && selected.long_range_link) ? (
|
||||
'true'
|
||||
) : (
|
||||
'false'
|
||||
)}
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item label="Frequency Listening">
|
||||
<Box>
|
||||
{operational && selected.freq_listening.map(thing => {
|
||||
const valid = RADIO_CHANNELS
|
||||
.find(channel => channel.freq === thing);
|
||||
return (
|
||||
(valid) ? (
|
||||
<span style={`color: ${valid.color}`}>
|
||||
{`[${thing}] (${valid.name}) `}
|
||||
</span>
|
||||
) : (
|
||||
`[${thing}] `
|
||||
)
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</LabeledList.Item>
|
||||
{servers.map(server => {
|
||||
return (
|
||||
<LabeledList.Item
|
||||
key={server.name}
|
||||
label={server.ref}
|
||||
buttons={(
|
||||
<Button
|
||||
content="Connect"
|
||||
selected={selected
|
||||
&& (server.ref === selected.ref)}
|
||||
onClick={() => act('viewmachine', {
|
||||
'value': server.id,
|
||||
})} />
|
||||
)}>
|
||||
{`${server.name} (${server.id})`}
|
||||
</LabeledList.Item>
|
||||
);
|
||||
})}
|
||||
</LabeledList>
|
||||
<Section
|
||||
title="Servers Linked"
|
||||
level={3}>
|
||||
{(operational && selected_servers) ? (
|
||||
<LabeledList>
|
||||
{selected_servers.map(server => {
|
||||
return (
|
||||
<LabeledList.Item
|
||||
key={server.name}
|
||||
label={server.ref}
|
||||
buttons={(
|
||||
<Button
|
||||
content="Connect"
|
||||
onClick={() => act('viewmachine', {
|
||||
'value': server.id,
|
||||
})} />
|
||||
)}>
|
||||
{`${server.name} (${server.id})`}
|
||||
</LabeledList.Item>
|
||||
);
|
||||
})}
|
||||
</LabeledList>
|
||||
) : (
|
||||
!operational ? (
|
||||
"Server currently down! Cannot fetch the buffer list!"
|
||||
) : (
|
||||
"Buffer is empty!"
|
||||
)
|
||||
)}
|
||||
</Section>
|
||||
</Section>
|
||||
</Tabs.Tab>
|
||||
</Tabs>
|
||||
) : (
|
||||
'404 Servers not found. Have you tried scanning the network?'
|
||||
)}
|
||||
</Section>
|
||||
|
||||
)}
|
||||
</Fragment>
|
||||
</Window.Content>
|
||||
</Window>
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user