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