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

[UI] Cleanup

Browse source
This commit is contained in:
Oleg Shuralev 2020-01-12 02:12:16 +03:00
parent ff852b390e
commit 3eb74bdaea
No known key found for this signature in database
GPG key ID: 0459DF80E1A2FD1B
5 changed files with 55 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/components/App.scss
View file

@ -7,6 +7,7 @@ $navbar-width: 250px;
0 0.9375rem 1.40625rem rgba(4,9,20,0.03),
0 0.25rem 0.53125rem rgba(4,9,20,0.05),
0 0.125rem 0.1875rem rgba(4,9,20,0.03);
z-index: 31;
}
&__container {

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

@ -53,13 +53,13 @@ const Topics: React.FC<Props> = ({
<Breadcrumb>Brokers overview</Breadcrumb>
<MetricsWrapper title="Uptime">
<Indicator title="Total Brokers">
<Indicator label="Total Brokers">
{brokerCount}
</Indicator>
<Indicator title="Active Controllers">
<Indicator label="Active Controllers">
{activeControllers}
</Indicator>
<Indicator title="Zookeeper Status">
<Indicator label="Zookeeper Status">
<span className={cx('tag', zkOnline ? 'is-primary' : 'is-danger')}>
{zkOnline ? 'Online' : 'Offline'}
</span>
@ -67,21 +67,21 @@ const Topics: React.FC<Props> = ({
</MetricsWrapper>
<MetricsWrapper title="Partitions">
<Indicator title="Online">
<Indicator label="Online">
<span className={cx({'has-text-danger': offlinePartitionCount !== 0})}>
{onlinePartitionCount}
</span>
<span className="subtitle has-text-weight-light"> of {onlinePartitionCount + offlinePartitionCount}</span>
</Indicator>
<Indicator title="Under Replicated">
<Indicator label="URP" title="Under replicated partitions">
{underReplicatedPartitionCount}
</Indicator>
<Indicator title="In Sync Replicas">
<Indicator label="In Sync Replicas">
<span className="has-text-grey-lighter">
Soon
</span>
</Indicator>
<Indicator title="Out of Sync Replicas">
<Indicator label="Out of Sync Replicas">
<span className="has-text-grey-lighter">
Soon
</span>
@ -89,15 +89,15 @@ const Topics: React.FC<Props> = ({
</MetricsWrapper>
<MetricsWrapper title="Disk">
<Indicator title="Max usage">
<Indicator label="Max usage">
{maxDiskUsageValue}
<span className="subtitle has-text-weight-light"> {maxDiskUsageSize}</span>
</Indicator>
<Indicator title="Min usage">
<Indicator label="Min usage">
{minDiskUsageValue}
<span className="subtitle has-text-weight-light"> {minDiskUsageSize}</span>
</Indicator>
<Indicator title="Distribution">
<Indicator label="Distribution">
<span className="is-capitalized">
{diskUsageDistribution}
</span>
@ -105,11 +105,11 @@ const Topics: React.FC<Props> = ({
</MetricsWrapper>
<MetricsWrapper title="System">
<Indicator title="Network pool usage">
<Indicator label="Network pool usage">
{Math.round(networkPoolUsage * 10000) / 100}
<span className="subtitle has-text-weight-light">%</span>
</Indicator>
<Indicator title="Request pool usage">
<Indicator label="Request pool usage">
{Math.round(requestPoolUsage * 10000) / 100}
<span className="subtitle has-text-weight-light">%</span>
</Indicator>

44
frontend/src/components/Topics/Details/Details.tsx
View file

@ -28,26 +28,36 @@ const Details: React.FC<Props> = ({
{topicName}
</Breadcrumb>
</div>
<div className="level-item level-right">
</div>
</div>
<div className="box">
<div className="tabs">
<ul>
<li className="is-active">
<NavLink exact to={clusterTopicPath(clusterId, topicName)}>Overview</NavLink>
</li>
<li>
<NavLink exact to={clusterTopicMessagesPath(clusterId, topicName)}>Messages</NavLink>
</li>
<li>
<NavLink exact to={clusterTopicSettingsPath(clusterId, topicName)}>Settings</NavLink>
</li>
</ul>
</div>
<nav className="navbar" role="navigation">
<NavLink
exact
to={clusterTopicPath(clusterId, topicName)}
className="navbar-item is-tab"
activeClassName="is-active is-primary"
>
Overview
</NavLink>
<NavLink
exact
to={clusterTopicMessagesPath(clusterId, topicName)}
className="navbar-item is-tab"
activeClassName="is-active"
>
Messages
</NavLink>
<NavLink
exact
to={clusterTopicSettingsPath(clusterId, topicName)}
className="navbar-item is-tab"
activeClassName="is-active"
>
Settings
</NavLink>
</nav>
<br />
<Switch>
<Route exact path="/clusters/:clusterId/topics/:topicName/messages" component={MessagesContainer} />
<Route exact path="/clusters/:clusterId/topics/:topicName/settings" component={SettingsContainer} />

14
frontend/src/components/Topics/Details/Overview/Overview.tsx
View file

@ -19,6 +19,7 @@ const Overview: React.FC<Props> = ({
inSyncReplicas,
replicas,
partitionCount,
internal,
replicationFactor,
fetchTopicDetails,
}) => {
@ -34,19 +35,24 @@ const Overview: React.FC<Props> = ({
return (
<>
<MetricsWrapper wrapperClassName="notification">
<Indicator title="Partitions">
<Indicator label="Partitions">
{partitionCount}
</Indicator>
<Indicator title="Replication Factor">
<Indicator label="Replication Factor">
{replicationFactor}
</Indicator>
<Indicator title="Under replicated partitions">
<Indicator label="URP" title="Under replicated partitions">
{underReplicatedPartitions}
</Indicator>
<Indicator title="In sync replicas">
<Indicator label="In sync replicas">
{inSyncReplicas}
<span className="subtitle has-text-weight-light"> of {replicas}</span>
</Indicator>
<Indicator label="Type">
<div className="tag is-primary">
{internal ? 'Internal' : 'External'}
</div>
</Indicator>
</MetricsWrapper>
<table className="table is-striped is-fullwidth">

8
frontend/src/components/common/Dashboard/Indicator.tsx
View file

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