Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Loki performance components #3

Merged
merged 4 commits into from
Feb 6, 2024
Merged

Loki performance components #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
45467b7
Add CPU and Memory info
josephnobes-stfc Feb 6, 2024
15e7139
Add performance components to the UI
josephnobes-stfc Feb 6, 2024
ee27e81
Added cache enable and hitrate stats display
josephnobes-stfc Feb 6, 2024
0e32abe
Small typo
josephnobes-stfc Feb 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 77 additions & 2 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ import 'bootstrap/dist/css/bootstrap.min.css';
import {OdinApp, StatusBox, useAdapterEndpoint, TitleCard, DropdownSelector, WithEndpoint, ToggleSwitch, OdinGraph, OdinDoubleSlider} from 'odin-react';
import 'odin-react/dist/index.css'

import {StatusBadge, LOKIConnectionAlert, LOKIClockGenerator, LOKICarrierInfo, LOKIEnvironment, LOKICarrierTaskStatus} from './Loki.js'
import {StatusBadge, LOKIConnectionAlert, LOKIClockGenerator, LOKICarrierInfo, LOKIEnvironment, LOKICarrierTaskStatus, LOKIPerformanceDisplay} from './Loki.js'

import {Row, Col, Container, Dropdown, Card, Alert, Button, Spinner, Image} from 'react-bootstrap'
import {Row, Col, Container, Dropdown, Card, Alert, Button, Spinner, Image, Accordion} from 'react-bootstrap'
import * as Icon from 'react-bootstrap-icons';

import Mermaid from "./Mermaid";
Expand Down Expand Up @@ -99,6 +99,9 @@ function BabyD() {
<Row>
<LOKIClockGenerator adapterEndpoint={periodicEndpoint} />
</Row>
<Row>
<LOKIPerformanceDisplay adapterEndpoint={periodicEndpoint} />
</Row>
<Row>
<BabyDTimingSettings adapterEndpoint={periodicSlowEndpoint} asic_enabled={asic_enabled} />
</Row>
Expand Down Expand Up @@ -235,10 +238,17 @@ function BabyDSystemStatus({adapterEndpoint, loki_connection_state, asic_enabled
<Col>
{latest_main_enable && <StatusBadge label={adapterEndpoint.data.application?.system_state?.SYNC ? "ASIC SYNC High" : "ASIC SYNC Low"} type={adapterEndpoint.data.application?.system_state?.SYNC ? "success" : "danger"}/>}
</Col>
</Row>
<Row>
<Col>
<SyncEndpointToggleSwitch endpoint={adapterEndpoint} event_type="click" label="Manual SYNC" fullpath="application/system_state/SYNC" checked={adapterEndpoint.data.application?.system_state?.SYNC} value={adapterEndpoint.data.application?.system_state?.SYNC} />
</Col>
</Row>
<Row>
<Col>
<BabyDCacheHits adapterEndpoint={adapterEndpoint} asic_enabled={asic_enabled} />
</Col>
</Row>
</Card.Text>
<Card.Footer>
<BabyDDeviceInitBadges adapterEndpoint={adapterEndpoint} hide_init_done={true}/>
Expand Down Expand Up @@ -716,4 +726,69 @@ function BabyDLaneConfig({adapterEndpoint, asic_enabled}) {
)
}

const CacheEnEndpointToggleSwitch = WithEndpoint(ToggleSwitch);
function BabyDCacheHits({adapterEndpoint, asic_enabled}) {

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

let cache_info = adapterEndpoint.data?.application?.info?.asic_cache_hitrate;

console.log('cache info', cache_info);

let cache_toggleswitch = (<>
<Col>
<CacheEnEndpointToggleSwitch endpoint={adapterEndpoint} event_type="click" label="Allow Register Cache" fullpath="application/info/asic_cache_allowed" checked={adapterEndpoint.data.application?.info?.asic_cache_allowed} value={adapterEndpoint.data.application?.info?.asic_cache_allowed} />
<Row>
<Col>
{(adapterEndpoint.data.application?.info?.asic_cache_allowed !== adapterEndpoint.data.application?.info?.asic_cache_enabled) && <StatusBox>Note: change will not take effect until ASIC is re-initialised</StatusBox>}
</Col>
</Row>
</Col>
</>);

let cache_info_accordion;
if (adapterEndpoint.data.application?.info?.asic_cache_enabled) {
cache_info_accordion = (<>
<Accordion defaultActiveKey="0">
<Accordion.Item eventKey="0">
<Accordion.Header>
Cache Stats
</Accordion.Header>
<Accordion.Body>
<Row>
<Col>
<StatusBox label='Rate'>{(cache_info.hitrate * 100).toFixed(2) + '%'}</StatusBox>
</Col>
<Col>
<StatusBox label='Hits'>{cache_info.hits}</StatusBox>
</Col>
<Col>
<StatusBox label='Misses'>{cache_info.misses}</StatusBox>
</Col>
</Row>
</Accordion.Body>
</Accordion.Item>
</Accordion>
</>);
} else {
cache_info_accordion = (<></>);
}


if (typeof cache_info !== 'undefined' ) {
return (<>
<Row>
{cache_toggleswitch}
</Row>
<Row>
{cache_info_accordion}
</Row>
</>)
} else {
return (<></>)
}
}

export default BabyD;
102 changes: 100 additions & 2 deletions src/Loki.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import React from 'react';

import {DropdownSelector, WithEndpoint, TitleCard, OdinGraph} from 'odin-react';
import {Dropdown, Row, Alert} from 'react-bootstrap';
import {DropdownSelector, WithEndpoint, TitleCard, OdinGraph, StatusBox} from 'odin-react';
import {Dropdown, Row, Col, Alert} from 'react-bootstrap';

import Mermaid from "./Mermaid";

const ClkgenEndpointDropdown = WithEndpoint(DropdownSelector);

Expand Down Expand Up @@ -302,3 +304,99 @@ export function LOKICarrierTaskStatus({adapterEndpoint, loki_connection_state, s
</TitleCard>
)
}

export function LOKIPerformanceDisplay({adapterEndpoint, show_cpu=true, show_cpu_times=true}) {

let perfinfo = adapterEndpoint.data.carrier_info?.performance;
console.log('performance info:', perfinfo);

return (
<TitleCard title="LOKI Performance">
<Row>
{show_cpu && <Col><LOKICPUInfo cpuInfo={perfinfo?.cpu} show_cpu_times={show_cpu_times}/></Col>}
</Row>
<Row>
{show_cpu && <Col><LOKIMemInfo memInfo={perfinfo?.mem} /></Col>}
</Row>
</TitleCard>
)
}

function LOKICPUInfo({cpuInfo, show_cpu_times=true, show_cpu_times_graph=false}) {

if (cpuInfo === null || typeof cpuInfo === 'undefined') {
return (<></>)
}
console.log('cpu info: ', cpuInfo);

let cputimechart = `
pie showData
title Times
` + Object.keys(cpuInfo.times).map((timename) => {
if (cpuInfo.times[timename] !== 0) {
return (`
"${timename}" : ${cpuInfo.times[timename]}
`)
} else {
return (``)
}
}).join('') + `
`

return(
<TitleCard title="LOKI CPU Info">
<Row>
<Col>
<StatusBox label="CPU Load">{cpuInfo?.load}</StatusBox>
</Col>
<Col>
<StatusBox label="CPU Perc">{cpuInfo?.percent + "%"}</StatusBox>
</Col>
</Row>
<Row>
<Col>
<TitleCard title="CPU Times">
<Row>
{Object.keys(cpuInfo.times).map((timename) => {
return (
<Col>
<StatusBox label={timename}>{cpuInfo.times[timename]}</StatusBox>
</Col>
)
})}
</Row>
</TitleCard>
</Col>
</Row>
<Row>
{show_cpu_times_graph && <Mermaid chart={cputimechart} uid={"lokicputimechart"} />}
</Row>
</TitleCard>
)
}

function LOKIMemInfo({memInfo}) {
if (memInfo === null || typeof memInfo === 'undefined') {
return (<></>)
}
console.log('mem info: ', memInfo);

return(
<TitleCard title="LOKI Memory Info">
<Row>
<Col>
<StatusBox label="Total">{Math.round(memInfo?.total/1000000) + "MB"}</StatusBox>
</Col>
<Col>
<StatusBox label="Available">{Math.round(memInfo?.avail/1000000) + "MB"}</StatusBox>
</Col>
<Col>
<StatusBox label="Cached">{Math.round(memInfo?.cached/1000000) + "MB"}</StatusBox>
</Col>
<Col>
<StatusBox label="Free">{Math.round(memInfo?.free/1000000) + "MB"}</StatusBox>
</Col>
</Row>
</TitleCard>
)
}
Loading