diff --git a/src/app/components/layout/Header.tsx b/src/app/components/layout/Header.tsx index 0d51f16..545b74d 100644 --- a/src/app/components/layout/Header.tsx +++ b/src/app/components/layout/Header.tsx @@ -118,7 +118,7 @@ class Header extends AsyncComponent { 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 }); @@ -129,7 +129,7 @@ class Header extends AsyncComponent d !== undefined && d !== null); this.setState({ memorySize: nonNull - .map(d => d.memoryUsage) + .map(d => Number.parseInt(d.memoryUsage, 10)) }); }); @@ -139,7 +139,7 @@ class Header extends AsyncComponent 0) { - dbSizeTotalFormatted = FormatHelper.size(data.databaseSizes[0].total); + dbSizeTotalFormatted = FormatHelper.size(Number.parseInt(data.databaseSizes[0].total, 10)); } if (dbSizeTotalFormatted !== this.state.dbSizeTotalFormatted) { @@ -155,7 +155,7 @@ class Header extends AsyncComponent Number.parseInt(s, 10)) }); }); this._gossipMetricsSubscription = this._metricsService.subscribe( diff --git a/src/app/components/layout/InfoPanel.scss b/src/app/components/layout/InfoPanel.scss index e832e10..8b13f79 100644 --- a/src/app/components/layout/InfoPanel.scss +++ b/src/app/components/layout/InfoPanel.scss @@ -43,7 +43,7 @@ @include tablet-down { @include font-size(17px); } - + @include phone-down { @include font-size(16px); } @@ -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; @@ -104,11 +151,10 @@ &.icon-background--purple { background-color: #666af6; } - } - svg { - z-index: 1; - flex: 1; + &.icon-background--grey { + background-color: #d8d8d8; + } } } -} +} \ No newline at end of file diff --git a/src/app/components/layout/InfoPanel.tsx b/src/app/components/layout/InfoPanel.tsx index b55bd2a..6eb8e64 100644 --- a/src/app/components/layout/InfoPanel.tsx +++ b/src/app/components/layout/InfoPanel.tsx @@ -25,8 +25,10 @@ class InfoPanel extends Component { return (
-
- {this.props.icon} +
+
+ {this.props.icon} +

{this.props.caption}

diff --git a/src/app/components/layout/InfoPanelProps.ts b/src/app/components/layout/InfoPanelProps.ts index 4330e16..ab344fc 100644 --- a/src/app/components/layout/InfoPanelProps.ts +++ b/src/app/components/layout/InfoPanelProps.ts @@ -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. diff --git a/src/app/routes/Home.tsx b/src/app/routes/Home.tsx index cac7bfb..ab93e25 100644 --- a/src/app/routes/Home.tsx +++ b/src/app/routes/Home.tsx @@ -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"; @@ -101,6 +101,9 @@ class Home extends AsyncComponent { nodeId: "", displayVersion: "", displayLatestVersion: "", + currentSlot: "-", + currentEpoch: "-", + latestAcceptedBlockSlot: "-", latestCommitmentSlot: "-", latestFinalizedSlot: "-", pruningEpoch: "-", @@ -155,8 +158,8 @@ class Home extends AsyncComponent { 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 }); @@ -182,8 +185,23 @@ class Home extends AsyncComponent { 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 }); @@ -205,15 +223,15 @@ class Home extends AsyncComponent { 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({ @@ -248,22 +266,22 @@ class Home extends AsyncComponent { 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 }); } @@ -351,17 +369,31 @@ class Home extends AsyncComponent {
+ } + iconStyle="grey" + /> + } + iconStyle="grey" + /> +
+
} - backgroundStyle="green" + icon={} + iconStyle="green" /> } - backgroundStyle="orange" + iconStyle="orange" />
@@ -369,13 +401,13 @@ class Home extends AsyncComponent { caption="Uptime" value={this.state.uptime} icon={} - backgroundStyle="blue" + iconStyle="blue" /> } - backgroundStyle="purple" + iconStyle="purple" />
@@ -383,13 +415,13 @@ class Home extends AsyncComponent { caption="Permanent DB Size" value={this.state.dbSizePermanentFormatted} icon={} - backgroundStyle="green" + iconStyle="purple" /> } - backgroundStyle="green" + iconStyle="purple" />
@@ -397,13 +429,13 @@ class Home extends AsyncComponent { caption="TxRetainer DB Size" value={this.state.dbSizeTxRetainerFormatted} icon={} - backgroundStyle="green" + iconStyle="purple" /> } - backgroundStyle="green" + iconStyle="purple" />
@@ -432,20 +464,20 @@ class Home extends AsyncComponent { } - backgroundStyle="green" + icon={} + iconStyle="blue" /> } - backgroundStyle="blue" + iconStyle="blue" /> } - backgroundStyle="purple" + iconStyle="blue" />
diff --git a/src/app/routes/HomeState.ts b/src/app/routes/HomeState.ts index 3d59078..f7306ec 100644 --- a/src/app/routes/HomeState.ts +++ b/src/app/routes/HomeState.ts @@ -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. */ diff --git a/src/assets/db-icon.svg b/src/assets/db-icon.svg index 996882b..32e316f 100644 --- a/src/assets/db-icon.svg +++ b/src/assets/db-icon.svg @@ -1,5 +1,9 @@ - - - - + + diff --git a/src/assets/iota-core/themes/dark/banner.svg b/src/assets/iota-core/themes/dark/banner.svg index 20feab8..a1272d1 100644 --- a/src/assets/iota-core/themes/dark/banner.svg +++ b/src/assets/iota-core/themes/dark/banner.svg @@ -6,32 +6,10 @@ fill="none" version="1.1" id="svg2530" - sodipodi:docname="banner.svg" xml:space="preserve" - inkscape:version="1.2.2 (b0a8486541, 2022-12-01)" - xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> + style="font-weight:800;font-size:21.0149px;font-family:Ubuntu;-inkscape-font-specification:'Ubuntu Ultra-Bold';fill:#485776;stroke-width:0.716418" + transform="translate(1.4328358,0.83640146)"> diff --git a/src/assets/iota-core/themes/light/banner.svg b/src/assets/iota-core/themes/light/banner.svg index 0d4f489..2d741e3 100644 --- a/src/assets/iota-core/themes/light/banner.svg +++ b/src/assets/iota-core/themes/light/banner.svg @@ -201,22 +201,35 @@ style="fill:#485776;fill-opacity:1" /> + style="font-weight:800;font-size:21.0149px;font-family:Ubuntu;-inkscape-font-specification:'Ubuntu Ultra-Bold';fill:#485776;stroke-width:0.716418" + transform="translate(1.4328358,0.83640146)"> diff --git a/src/assets/milestone.svg b/src/assets/slot.svg similarity index 100% rename from src/assets/milestone.svg rename to src/assets/slot.svg diff --git a/src/models/tangle/IBlockBodyBasic.ts b/src/models/tangle/IBlockBodyBasic.ts index 73727e7..590d429 100644 --- a/src/models/tangle/IBlockBodyBasic.ts +++ b/src/models/tangle/IBlockBodyBasic.ts @@ -9,9 +9,4 @@ export interface IBlockBodyBasic extends ITypeBase<0> { * The inner payload of the block. Can be nil. */ payload: PayloadTypes | null; - - /** - * The maximum amount of mana that can be burned in this block. - */ - maxBurnedMana: number; } diff --git a/src/models/websocket/IDatabaseSizesMetric.ts b/src/models/websocket/IDatabaseSizesMetric.ts index 853ed29..123a8f0 100644 --- a/src/models/websocket/IDatabaseSizesMetric.ts +++ b/src/models/websocket/IDatabaseSizesMetric.ts @@ -1,8 +1,8 @@ /* eslint-disable camelcase */ export interface IDatabaseSizesMetric { - permanent: number; - prunable: number; - txRetainer: number; - total: number; - ts: number; + permanent: string; + prunable: string; + txRetainer: string; + total: string; + ts: string; } diff --git a/src/models/websocket/INodeInfoExtended.ts b/src/models/websocket/INodeInfoExtended.ts index df39738..686b825 100644 --- a/src/models/websocket/INodeInfoExtended.ts +++ b/src/models/websocket/INodeInfoExtended.ts @@ -2,8 +2,8 @@ export interface INodeInfoExtended { version: string; latestVersion: string; - uptime: number; + uptime: string; nodeId: string; nodeAlias: string; - memoryUsage: number; + memoryUsage: string; } diff --git a/src/models/websocket/ISyncStatus.ts b/src/models/websocket/ISyncStatus.ts index c1248e4..d9529a7 100644 --- a/src/models/websocket/ISyncStatus.ts +++ b/src/models/websocket/ISyncStatus.ts @@ -1,5 +1,8 @@ /* eslint-disable camelcase */ export interface ISyncStatus { + currentSlot: number; + currentEpoch: number; + latestAcceptedBlockSlot: number; latestFinalizedSlot: number; latestCommitmentSlot: number; }