Skip to content

Commit

Permalink
#175 Refine UI (55)
Browse files Browse the repository at this point in the history 
Move system state into components
  • Loading branch information
@dostuffthatmatters
dostuffthatmatters committed Nov 8, 2023
1 parent 5ad9bf7 commit 52bead9
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 111 deletions.
2 changes: 2 additions & 0 deletions packages/ui/src/components/overview/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import ActivityPlot from './activity-plot';
import MeasurementDecision from './measurement-decision';
import PyraCoreStatus from './pyra-core-status';
import { SystemState } from './system-state';

export default {
ActivityPlot,
PyraCoreStatus,
MeasurementDecision,
SystemState,
};
91 changes: 91 additions & 0 deletions packages/ui/src/components/overview/system-state.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import { useCoreStateStore } from '../../utils/zustand-utils/core-state-zustand';
import { mean } from 'lodash';
import { renderString } from '../../utils/functions';

function StatePanel(props: { title: string; children: React.ReactNode }) {
return (
<div className="flex flex-col p-2 bg-white border rounded-md shadow-sm border-slate-200 gap-y-1">
<div className="text-xs font-semibold">{props.title}</div>
<div className="flex flex-row items-center gap-x-2">{props.children}</div>
</div>
);
}

function StateBarPanel(props: { title: string; value: number | null }) {
return (
<div className="flex flex-col p-2 bg-white border rounded-md shadow-sm border-slate-200 gap-y-1">
<div className="text-xs font-semibold">{props.title}</div>
<div className="flex flex-row items-center gap-x-2">
{props.value ? (
<>
<div className="min-w-12 whitespace-nowrap">
{props.value.toFixed(1) + ' %'}
</div>
<div className="relative flex-grow h-2 overflow-hidden rounded-full bg-slate-200">
<div
className="absolute top-0 bottom-0 left-0 bg-slate-500"
style={{
width: `${props.value}%`,
}}
/>
</div>
</>
) : (
'-'
)}
</div>
</div>
);
}

export function SystemState() {
const { coreState } = useCoreStateStore();

if (!coreState) {
return <></>;
}

return (
<div className="grid w-full grid-cols-4 px-4 pb-4 text-sm gap-x-1 gap-y-1">
<StatePanel title="Last Boot Time">
{coreState.operating_system_state.last_boot_time}
</StatePanel>
<StateBarPanel
title="Disk Usage"
value={coreState.operating_system_state.filled_disk_space_fraction}
/>
<StateBarPanel
title="CPU Usage"
value={
coreState.operating_system_state.cpu_usage
? mean(coreState.operating_system_state.cpu_usage)
: null
}
/>
<StateBarPanel
title="Memory Usage"
value={coreState.operating_system_state.memory_usage}
/>
<StatePanel title="Latitude">
{renderString(coreState.position.latitude, {
appendix: ' °N',
})}
</StatePanel>
<StatePanel title="Longitude">
{renderString(coreState?.position.longitude, {
appendix: ' °E',
})}
</StatePanel>
<StatePanel title="Altitude">
{renderString(coreState?.position.altitude, {
appendix: ' m',
})}
</StatePanel>
<StatePanel title="Current Sun Elevation">
{renderString(coreState?.position.sun_elevation, {
appendix: ' °',
})}
</StatePanel>
</div>
);
}
112 changes: 1 addition & 111 deletions packages/ui/src/tabs/overview-tab.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { fetchUtils } from '../utils';
import { essentialComponents, overviewComponents } from '../components';
import { mean } from 'lodash';
import { useLogsStore } from '../utils/zustand-utils/logs-zustand';
import { useCoreStateStore } from '../utils/zustand-utils/core-state-zustand';
import { useConfigStore } from '../utils/zustand-utils/config-zustand';
Expand Down Expand Up @@ -32,116 +31,7 @@ export default function OverviewTab() {
<div className="w-full px-4 py-4 pb-2 text-base font-semibold border-t border-slate-200">
System State
</div>
<div className="grid w-full grid-cols-4 px-4 pb-4 text-sm gap-x-1 gap-y-1">
<div className="flex flex-col p-2 bg-white border rounded-md shadow-sm border-slate-200 gap-y-1">
<div className="text-xs font-semibold">Last Boot Time</div>
<div>{coreState?.operating_system_state.last_boot_time}</div>
</div>
<div className="flex flex-col p-2 bg-white border rounded-md shadow-sm border-slate-200 gap-y-1">
<div className="text-xs font-semibold">Disk Usage</div>
<div className="flex flex-row items-center justify-center gap-x-2">
{coreState?.operating_system_state.filled_disk_space_fraction ? (
<>
<div className="min-w-12 whitespace-nowrap">
{coreState.operating_system_state.filled_disk_space_fraction.toFixed(
1
) + ' %'}
</div>
<div className="relative flex-grow h-2 overflow-hidden rounded-full bg-slate-200">
<div
className="absolute top-0 bottom-0 left-0 bg-slate-500"
style={{
width: `${coreState.operating_system_state.filled_disk_space_fraction}%`,
}}
/>
</div>
</>
) : (
'-'
)}
</div>
</div>
<div className="flex flex-col p-2 bg-white border rounded-md shadow-sm border-slate-200 gap-y-1">
<div className="text-xs font-semibold">CPU Usage</div>
<div className="flex flex-row items-center justify-center gap-x-2">
{coreState?.operating_system_state.cpu_usage ? (
<>
<div className="min-w-12 whitespace-nowrap">
{mean(coreState.operating_system_state.cpu_usage).toFixed(1) +
' %'}
</div>
<div className="relative flex-grow h-2 overflow-hidden rounded-full bg-slate-200">
<div
className="absolute top-0 bottom-0 left-0 bg-slate-500"
style={{
width: `${mean(
coreState.operating_system_state.cpu_usage
)}%`,
}}
/>
</div>
</>
) : (
'-'
)}
</div>
</div>
<div className="flex flex-col p-2 bg-white border rounded-md shadow-sm border-slate-200 gap-y-1">
<div className="text-xs font-semibold">Memory Usage</div>
<div className="flex flex-row items-center justify-center gap-x-2">
{coreState?.operating_system_state.memory_usage ? (
<>
<div className="min-w-12 whitespace-nowrap">
{coreState.operating_system_state.memory_usage.toFixed(1) +
' %'}
</div>
<div className="relative flex-grow h-2 overflow-hidden rounded-full bg-slate-200">
<div
className="absolute top-0 bottom-0 left-0 bg-slate-500"
style={{
width: `${coreState.operating_system_state.memory_usage}%`,
}}
/>
</div>
</>
) : (
'-'
)}
</div>
</div>
<div className="flex flex-col p-2 bg-white border rounded-md shadow-sm border-slate-200 gap-y-1">
<div className="text-xs font-semibold">Latitude</div>
<div>
{renderString(coreState?.position.latitude, {
appendix: ' °N',
})}
</div>
</div>
<div className="flex flex-col p-2 bg-white border rounded-md shadow-sm border-slate-200 gap-y-1">
<div className="text-xs font-semibold">Longitude</div>
<div>
{renderString(coreState?.position.longitude, {
appendix: ' °E',
})}
</div>
</div>
<div className="flex flex-col p-2 bg-white border rounded-md shadow-sm border-slate-200 gap-y-1">
<div className="text-xs font-semibold">Altitude</div>
<div>
{renderString(coreState?.position.altitude, {
appendix: ' m',
})}
</div>
</div>
<div className="flex flex-col p-2 bg-white border rounded-md shadow-sm border-slate-200 gap-y-1">
<div className="text-xs font-semibold">Current Sun Elevation</div>
<div>
{renderString(coreState?.position.sun_elevation, {
appendix: ' °',
})}
</div>
</div>
</div>
<overviewComponents.SystemState />
{centralConfig?.tum_plc && coreState && (
<>
<div className="flex flex-row items-center w-full px-4 py-4 pb-2 text-base font-semibold border-t border-slate-200">
Expand Down

0 comments on commit 52bead9

Please sign in to comment.