0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[UI] Add common metrics components

Browse source
This commit is contained in:
Oleg Shuralev 2020-01-08 13:27:37 +03:00
parent 25a7bf0301
commit e30dcdd7f0
No known key found for this signature in database
GPG key ID: 0459DF80E1A2FD1B
3 changed files with 109 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

172
frontend/src/components/Brokers/Brokers.tsx
View file

@ -3,6 +3,8 @@ import { ClusterId, BrokerMetrics, ZooKeeperStatus } from 'types';
import useInterval from 'lib/hooks/useInterval'; import useInterval from 'lib/hooks/useInterval';
import formatBytes from 'lib/utils/formatBytes'; import formatBytes from 'lib/utils/formatBytes';
import cx from 'classnames'; import cx from 'classnames';
import MetricsWrapper from 'components/common/Dashboard/MetricsWrapper';
import Indicator from 'components/common/Dashboard/Indicator';
interface Props extends BrokerMetrics { interface Props extends BrokerMetrics {
clusterId: string; clusterId: string;
@ -43,126 +45,74 @@ const Topics: React.FC<Props> = ({
const [minDiskUsageValue, minDiskUsageSize] = formatBytes(minDiskUsage); const [minDiskUsageValue, minDiskUsageSize] = formatBytes(minDiskUsage);
const [maxDiskUsageValue, maxDiskUsageSize] = formatBytes(maxDiskUsage); const [maxDiskUsageValue, maxDiskUsageSize] = formatBytes(maxDiskUsage);
const zkOnline = zooKeeperStatus === ZooKeeperStatus.online;
return ( return (
<div className="section"> <div className="section">
<div className="box"> <h1 className="title is-5">Brokers overview</h1>
<h5 className="title is-5">Uptime</h5>
<div className="level">
<div className="level-item level-left">
<div>
<p className="heading">Total Brokers</p>
<p className="title">{brokerCount}</p>
</div>
</div>
<div className="level-item level-left">
<div>
<p className="heading">Active Controllers</p>
<p className="title">{activeControllers}</p>
</div>
</div>
<div className="level-item level-left">
<div>
<p className="heading">Zookeeper Status</p>
<p className="title">
{zooKeeperStatus === ZooKeeperStatus.online ? (
<span className="tag is-primary">Online</span>
) : (
<span className="tag is-danger">Offline</span>
)}
</p>
</div>
</div>
</div>
</div>
<div className="box"> <MetricsWrapper title="Uptime">
<h5 className="title is-5">Partitions</h5> <Indicator title="Total Brokers">
<div className="level"> {brokerCount}
<div className="level-item level-left"> </Indicator>
<div> <Indicator title="Active Controllers">
<p className="heading">Online</p> {activeControllers}
<p> </Indicator>
<span className={cx('title', {'has-text-danger': offlinePartitionCount !== 0})}> <Indicator title="Zookeeper Status">
<span className={cx('tag', zkOnline ? 'is-primary' : 'is-danger')}>
{zkOnline ? 'Online' : 'Offline'}
</span>
</Indicator>
</MetricsWrapper>
<MetricsWrapper title="Partitions">
<Indicator title="Online">
<span className={cx({'has-text-danger': offlinePartitionCount !== 0})}>
{onlinePartitionCount} {onlinePartitionCount}
</span> </span>
<span className="subtitle"> of {onlinePartitionCount + offlinePartitionCount}</span> <span className="subtitle has-text-weight-light"> of {onlinePartitionCount + offlinePartitionCount}</span>
</p> </Indicator>
</div> <Indicator title="Under Replicated">
</div> {underReplicatedPartitionCount}
<div className="level-item level-left"> </Indicator>
<div> <Indicator title="In Sync Replicas">
<p className="heading">Under Replicated</p> <span className="has-text-grey-lighter">
<p className="title">{underReplicatedPartitionCount}</p> Soon
</div> </span>
</div> </Indicator>
<div className="level-item level-left"> <Indicator title="Out of Sync Replicas">
<div> <span className="has-text-grey-lighter">
<p className="heading">In Sync Replicas</p> Soon
<p className="title has-text-grey-lighter">Soon</p> </span>
</div> </Indicator>
</div> </MetricsWrapper>
<div className="level-item level-left">
<div>
<p className="heading">Out of Sync Replicas</p>
<p className="title has-text-grey-lighter">Soon</p>
</div>
</div>
</div>
</div>
<div className="box"> <MetricsWrapper title="Disk">
<h5 className="title is-5">Disk</h5> <Indicator title="Max usage">
<div className="level"> {maxDiskUsageValue}
<div className="level-item level-left"> <span className="subtitle has-text-weight-light"> {maxDiskUsageSize}</span>
<div> </Indicator>
<p className="heading">Max usage</p> <Indicator title="Min usage">
<p> {minDiskUsageValue}
<span className="title">{maxDiskUsageValue}</span> <span className="subtitle has-text-weight-light"> {minDiskUsageValue}</span>
<span className="subtitle"> {maxDiskUsageSize}</span> </Indicator>
</p> <Indicator title="Distribution">
</div> <span className="is-capitalized">
</div> {diskUsageDistribution}
<div className="level-item level-left"> </span>
<div> </Indicator>
<p className="heading">Min Usage</p> </MetricsWrapper>
<p>
<span className="title">{minDiskUsageValue}</span>
<span className="subtitle"> {minDiskUsageSize}</span>
</p>
</div>
</div>
<div className="level-item level-left">
<div>
<p className="heading">Distribution</p>
<p className="title is-capitalized">{diskUsageDistribution}</p>
</div>
</div>
</div>
</div>
<div className="box"> <MetricsWrapper title="System">
<h5 className="title is-5">System</h5> <Indicator title="Network pool usage">
<div className="level">
<div className="level-item level-left">
<div>
<p className="heading">Network pool usage</p>
<p className="title">
{Math.round(networkPoolUsage * 10000) / 100} {Math.round(networkPoolUsage * 10000) / 100}
<span className="subtitle">%</span> <span className="subtitle has-text-weight-light">%</span>
</p> </Indicator>
</div> <Indicator title="Request pool usage">
</div>
<div className="level-item level-left">
<div>
<p className="heading">Request pool usage</p>
<p className="title">
{Math.round(requestPoolUsage * 10000) / 100} {Math.round(requestPoolUsage * 10000) / 100}
<span className="subtitle">%</span> <span className="subtitle has-text-weight-light">%</span>
</p> </Indicator>
</div> </MetricsWrapper>
</div>
</div>
</div>
</div> </div>
); );
} }

21
frontend/src/components/common/Dashboard/Indicator.tsx Normal file
View file

@ -0,0 +1,21 @@
import React from 'react';
interface Props {
title: string;
}
const Indicator: React.FC<Props> = ({
title,
children,
}) => {
return (
<div className="level-item level-left">
<div>
<p className="heading">{title}</p>
<p className="title">{children}</p>
</div>
</div>
);
}
export default Indicator;

23
frontend/src/components/common/Dashboard/MetricsWrapper.tsx Normal file
View file

@ -0,0 +1,23 @@
import React from 'react';
interface Props {
title: string;
}
const MetricsWrapper: React.FC<Props> = ({
title,
children,
}) => {
return (
<div className="box">
<h5 className="subtitle is-6">
{title}
</h5>
<div className="level">
{children}
</div>
</div>
);
}
export default MetricsWrapper;