Skip to content

Commit

Permalink
Small improvements (#311)
Browse files Browse the repository at this point in the history 
* Fix memory usage micrograph

* Make icon fill themable

* Add current slot and epoch to home

* Fix banner font for alex' eyes
  • Loading branch information
@muXxer
muXxer authored May 8, 2024
1 parent 964969e commit 3e89088
Show file tree
Hide file tree
Showing 14 changed files with 218 additions and 117 deletions.
8 changes: 4 additions & 4 deletions src/app/components/layout/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ class Header extends AsyncComponent<RouteComponentProps & HeaderProps, HeaderSta
WebSocketTopic.NodeInfoExtended,
data => {
if (data) {
const memorySizeFormatted = FormatHelper.iSize(data.memoryUsage, 1);
const memorySizeFormatted = FormatHelper.iSize(Number.parseInt(data.memoryUsage, 10), 1);

if (memorySizeFormatted !== this.state.memorySizeFormatted) {
this.setState({ memorySizeFormatted });
Expand All @@ -129,7 +129,7 @@ class Header extends AsyncComponent<RouteComponentProps & HeaderProps, HeaderSta
const nonNull = allData.filter(d => d !== undefined && d !== null);
this.setState({
memorySize: nonNull
.map(d => d.memoryUsage)
.map(d => Number.parseInt(d.memoryUsage, 10))
});
});

Expand All @@ -139,7 +139,7 @@ class Header extends AsyncComponent<RouteComponentProps & HeaderProps, HeaderSta
if (data) {
let dbSizeTotalFormatted = "-";
if (data.databaseSizes.length > 0) {
dbSizeTotalFormatted = FormatHelper.size(data.databaseSizes[0].total);
dbSizeTotalFormatted = FormatHelper.size(Number.parseInt(data.databaseSizes[0].total, 10));
}

if (dbSizeTotalFormatted !== this.state.dbSizeTotalFormatted) {
Expand All @@ -155,7 +155,7 @@ class Header extends AsyncComponent<RouteComponentProps & HeaderProps, HeaderSta

const dbSizeTotalFlattened = dbSizeTotalValues.flat();

this.setState({ dbSizeTotal: dbSizeTotalFlattened });
this.setState({ dbSizeTotal: dbSizeTotalFlattened.map(s => Number.parseInt(s, 10)) });
});

this._gossipMetricsSubscription = this._metricsService.subscribe<IGossipMetrics>(
Expand Down
58 changes: 52 additions & 6 deletions src/app/components/layout/InfoPanel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
@include tablet-down {
@include font-size(17px);
}

@include phone-down {
@include font-size(16px);
}
Expand Down Expand Up @@ -77,6 +77,53 @@
height: 60px;
}

.icon-fill {
svg {
z-index: 1;
flex: 1;
}

&.icon-fill--green {
svg {
path {
fill: #16e1d5;
}
}
}

&.icon-fill--orange {
svg {
path {
fill: #ff8b5c;
}
}
}

&.icon-fill--blue {
svg {
path {
fill: #4baaff;
}
}
}

&.icon-fill--purple {
svg {
path {
fill: #666af6;
}
}
}

&.icon-fill--grey {
svg {
path {
fill: #d8d8d8;
}
}
}
}

.icon-background {
position: absolute;
width: 80px;
Expand Down Expand Up @@ -104,11 +151,10 @@
&.icon-background--purple {
background-color: #666af6;
}
}

svg {
z-index: 1;
flex: 1;
&.icon-background--grey {
background-color: #d8d8d8;
}
}
}
}
}
6 changes: 4 additions & 2 deletions src/app/components/layout/InfoPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,10 @@ class InfoPanel extends Component<InfoPanelProps> {
return (
<div className={classNames("card", "info-panel", this.props.className)}>
<div className="icon-container">
<div className={`icon-background icon-background--${this.props.backgroundStyle}`} />
{this.props.icon}
<div className={`icon-background icon-background--${this.props.iconStyle}`} />
<div className={`icon-fill icon-fill--${this.props.iconStyle}`}>
{this.props.icon}
</div>
</div>
<div className="col info--labels">
<h4>{this.props.caption}</h4>
Expand Down
4 changes: 2 additions & 2 deletions src/app/components/layout/InfoPanelProps.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ export interface InfoPanelProps {
icon: ReactNode;

/**
* The background style for the icon.
* The style for the icon.
*/
backgroundStyle: "green" | "orange" | "blue" | "purple";
iconStyle: "green" | "orange" | "blue" | "purple" | "grey";

/**
* Class names.
Expand Down
84 changes: 58 additions & 26 deletions src/app/routes/Home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { ReactComponent as BannerCurve } from "../../assets/banner-curve.svg";
import { ReactComponent as ConfirmationIcon } from "../../assets/confirmation.svg";
import { ReactComponent as DbIcon } from "../../assets/db-icon.svg";
import { ReactComponent as MemoryIcon } from "../../assets/memory.svg";
import { ReactComponent as MilestoneIcon } from "../../assets/milestone.svg";
import { ReactComponent as PruningIcon } from "../../assets/pruning.svg";
import { ReactComponent as SlotIcon } from "../../assets/slot.svg";
import { ReactComponent as UptimeIcon } from "../../assets/uptime.svg";
import { ServiceFactory } from "../../factories/serviceFactory";
import { INetworkMetrics } from "../../models/info/INetworkMetrics";
Expand Down Expand Up @@ -101,6 +101,9 @@ class Home extends AsyncComponent<unknown, HomeState> {
nodeId: "",
displayVersion: "",
displayLatestVersion: "",
currentSlot: "-",
currentEpoch: "-",
latestAcceptedBlockSlot: "-",
latestCommitmentSlot: "-",
latestFinalizedSlot: "-",
pruningEpoch: "-",
Expand Down Expand Up @@ -155,8 +158,8 @@ class Home extends AsyncComponent<unknown, HomeState> {
if (data) {
const nodeName = data.nodeAlias ?? BrandHelper.getConfiguration().name;
const nodeId = data.nodeId || "No node Id.";
const uptime = FormatHelper.duration(data.uptime);
const memory = FormatHelper.iSize(data.memoryUsage);
const uptime = FormatHelper.duration(Number.parseInt(data.uptime, 10));
const memory = FormatHelper.iSize(Number.parseInt(data.memoryUsage, 10));

if (nodeName !== this.state.nodeName) {
this.setState({ nodeName });
Expand All @@ -182,8 +185,23 @@ class Home extends AsyncComponent<unknown, HomeState> {
WebSocketTopic.SyncStatus,
data => {
if (data) {
const latestFinalizedSlot = data.latestFinalizedSlot ? data.latestFinalizedSlot.toString() : "";
const latestCommitmentSlot = data.latestCommitmentSlot ? data.latestCommitmentSlot.toString() : "";
const currentSlot = data.currentSlot.toString();
const currentEpoch = data.currentEpoch.toString();
const latestAcceptedBlockSlot = data.latestAcceptedBlockSlot.toString();
const latestFinalizedSlot = data.latestFinalizedSlot.toString();
const latestCommitmentSlot = data.latestCommitmentSlot.toString();

if (currentSlot !== this.state.currentSlot) {
this.setState({ currentSlot });
}

if (currentEpoch !== this.state.currentEpoch) {
this.setState({ currentEpoch });
}

if (latestAcceptedBlockSlot !== this.state.latestAcceptedBlockSlot) {
this.setState({ latestAcceptedBlockSlot });
}

if (latestFinalizedSlot !== this.state.latestFinalizedSlot) {
this.setState({ latestFinalizedSlot });
Expand All @@ -205,15 +223,15 @@ class Home extends AsyncComponent<unknown, HomeState> {

if (data.blocksPerSecond) {
bps = Number.parseFloat(data.blocksPerSecond).toFixed(1)
.toString();
.toString();
}
if (data.confirmedBlocksPerSecond) {
rbps = Number.parseFloat(data.confirmedBlocksPerSecond).toFixed(1)
.toString();
.toString();
}
if (data.confirmationRate) {
referencedRate = `${Number.parseFloat(data.confirmationRate).toFixed(1)
.toString()}%`;
.toString()}%`;
}

this.setState({
Expand Down Expand Up @@ -248,22 +266,22 @@ class Home extends AsyncComponent<unknown, HomeState> {

const dbSizeMetric = data.databaseSizes[0];

const dbSizePermanentFormatted = FormatHelper.size(dbSizeMetric.permanent);
const dbSizePermanentFormatted = FormatHelper.size(Number.parseInt(dbSizeMetric.permanent, 10));
if (dbSizePermanentFormatted !== this.state.dbSizePermanentFormatted) {
this.setState({ dbSizePermanentFormatted });
}

const dbSizePrunableFormatted = FormatHelper.size(dbSizeMetric.prunable);
const dbSizePrunableFormatted = FormatHelper.size(Number.parseInt(dbSizeMetric.prunable, 10));
if (dbSizePrunableFormatted !== this.state.dbSizePrunableFormatted) {
this.setState({ dbSizePrunableFormatted });
}

const dbSizeTxRetainerFormatted = FormatHelper.size(dbSizeMetric.txRetainer);
const dbSizeTxRetainerFormatted = FormatHelper.size(Number.parseInt(dbSizeMetric.txRetainer, 10));
if (dbSizeTxRetainerFormatted !== this.state.dbSizeTxRetainerFormatted) {
this.setState({ dbSizeTxRetainerFormatted });
}

const dbSizeTotalFormatted = FormatHelper.size(dbSizeMetric.total);
const dbSizeTotalFormatted = FormatHelper.size(Number.parseInt(dbSizeMetric.total, 10));
if (dbSizeTotalFormatted !== this.state.dbSizeTotalFormatted) {
this.setState({ dbSizeTotalFormatted });
}
Expand Down Expand Up @@ -351,59 +369,73 @@ class Home extends AsyncComponent<unknown, HomeState> {
<div className="row fill margin-t-s desktop-down-column">
<div className="col info-col fill">
<div className="row tablet-down-column">
<InfoPanel
caption="Accepted Slot / Current Slot"
value={`${this.state.latestAcceptedBlockSlot} / ${this.state.currentSlot}`}
icon={<SlotIcon />}
iconStyle="grey"
/>
<InfoPanel
caption="Current Epoch"
value={this.state.currentEpoch}
icon={<SlotIcon />}
iconStyle="grey"
/>
</div>
<div className="row margin-t-s tablet-down-column">
<InfoPanel
caption="Finalized Slot / Committed Slot"
value={`${this.state.latestFinalizedSlot} / ${this.state.latestCommitmentSlot}`}
icon={<MilestoneIcon />}
backgroundStyle="green"
icon={<SlotIcon />}
iconStyle="green"
/>
<InfoPanel
caption="Pruning Epoch"
value={this.state.pruningEpoch?.toString()}
value={this.state.pruningEpoch}
icon={<PruningIcon />}
backgroundStyle="orange"
iconStyle="orange"
/>
</div>
<div className="row margin-t-s tablet-down-column">
<InfoPanel
caption="Uptime"
value={this.state.uptime}
icon={<UptimeIcon />}
backgroundStyle="blue"
iconStyle="blue"
/>
<InfoPanel
caption="Memory Usage"
value={this.state.memory}
icon={<MemoryIcon />}
backgroundStyle="purple"
iconStyle="purple"
/>
</div>
<div className="row margin-t-s tablet-down-column">
<InfoPanel
caption="Permanent DB Size"
value={this.state.dbSizePermanentFormatted}
icon={<DbIcon />}
backgroundStyle="green"
iconStyle="purple"
/>
<InfoPanel
caption="Prunable DB Size"
value={this.state.dbSizePrunableFormatted}
icon={<DbIcon />}
backgroundStyle="green"
iconStyle="purple"
/>
</div>
<div className="row margin-t-s tablet-down-column">
<InfoPanel
caption="TxRetainer DB Size"
value={this.state.dbSizeTxRetainerFormatted}
icon={<DbIcon />}
backgroundStyle="green"
iconStyle="purple"
/>
<InfoPanel
caption="Total DB Size"
value={this.state.dbSizeTotalFormatted}
icon={<DbIcon />}
backgroundStyle="green"
iconStyle="purple"
/>
</div>
<div className="row margin-t-s tablet-down-column">
Expand Down Expand Up @@ -432,20 +464,20 @@ class Home extends AsyncComponent<unknown, HomeState> {
<InfoPanel
caption="Blocks per Second"
value={this.state.bps}
icon={<MilestoneIcon />}
backgroundStyle="green"
icon={<SlotIcon />}
iconStyle="blue"
/>
<InfoPanel
caption="Referenced Blocks per Second"
value={this.state.rbps}
icon={<UptimeIcon />}
backgroundStyle="blue"
iconStyle="blue"
/>
<InfoPanel
caption="Referenced Rate"
value={this.state.referencedRate}
icon={<ConfirmationIcon />}
backgroundStyle="purple"
iconStyle="blue"
/>
</div>
</div>
Expand Down
15 changes: 15 additions & 0 deletions src/app/routes/HomeState.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,21 @@ export interface HomeState {
*/
displayLatestVersion?: string;

/**
* Current slot.
*/
currentSlot?: string;

/**
* Current epoch.
*/
currentEpoch?: string;

/**
* Latest accepted block slot.
*/
latestAcceptedBlockSlot?: string;

/**
* Latest finalized slot.
*/
Expand Down
12 changes: 8 additions & 4 deletions src/assets/db-icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 3e89088

Please sign in to comment.