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.9375rem 1.40625rem rgba(4,9,20,0.03),
0 0.25rem 0.53125rem rgba(4,9,20,0.05), 0 0.25rem 0.53125rem rgba(4,9,20,0.05),
0 0.125rem 0.1875rem rgba(4,9,20,0.03); 0 0.125rem 0.1875rem rgba(4,9,20,0.03);
z-index: 31;
} }
&__container { &__container {

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

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

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

@ -28,26 +28,36 @@ const Details: React.FC<Props> = ({
{topicName} {topicName}
</Breadcrumb> </Breadcrumb>
</div> </div>
<div className="level-item level-right">
</div>
</div> </div>
<div className="box"> <div className="box">
<div className="tabs"> <nav className="navbar" role="navigation">
<ul> <NavLink
<li className="is-active"> exact
<NavLink exact to={clusterTopicPath(clusterId, topicName)}>Overview</NavLink> to={clusterTopicPath(clusterId, topicName)}
</li> className="navbar-item is-tab"
<li> activeClassName="is-active is-primary"
<NavLink exact to={clusterTopicMessagesPath(clusterId, topicName)}>Messages</NavLink> >
</li> Overview
<li> </NavLink>
<NavLink exact to={clusterTopicSettingsPath(clusterId, topicName)}>Settings</NavLink> <NavLink
</li> exact
</ul> to={clusterTopicMessagesPath(clusterId, topicName)}
</div> 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> <Switch>
<Route exact path="/clusters/:clusterId/topics/:topicName/messages" component={MessagesContainer} /> <Route exact path="/clusters/:clusterId/topics/:topicName/messages" component={MessagesContainer} />
<Route exact path="/clusters/:clusterId/topics/:topicName/settings" component={SettingsContainer} /> <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, inSyncReplicas,
replicas, replicas,
partitionCount, partitionCount,
internal,
replicationFactor, replicationFactor,
fetchTopicDetails, fetchTopicDetails,
}) => { }) => {
@ -34,19 +35,24 @@ const Overview: React.FC<Props> = ({
return ( return (
<> <>
<MetricsWrapper wrapperClassName="notification"> <MetricsWrapper wrapperClassName="notification">
<Indicator title="Partitions"> <Indicator label="Partitions">
{partitionCount} {partitionCount}
</Indicator> </Indicator>
<Indicator title="Replication Factor"> <Indicator label="Replication Factor">
{replicationFactor} {replicationFactor}
</Indicator> </Indicator>
<Indicator title="Under replicated partitions"> <Indicator label="URP" title="Under replicated partitions">
{underReplicatedPartitions} {underReplicatedPartitions}
</Indicator> </Indicator>
<Indicator title="In sync replicas"> <Indicator label="In sync replicas">
{inSyncReplicas} {inSyncReplicas}
<span className="subtitle has-text-weight-light"> of {replicas}</span> <span className="subtitle has-text-weight-light"> of {replicas}</span>
</Indicator> </Indicator>
<Indicator label="Type">
<div className="tag is-primary">
{internal ? 'Internal' : 'External'}
</div>
</Indicator>
</MetricsWrapper> </MetricsWrapper>
<table className="table is-striped is-fullwidth"> <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'; import React from 'react';
interface Props { interface Props {
title: string; label: string;
title?: string;
} }
const Indicator: React.FC<Props> = ({ const Indicator: React.FC<Props> = ({
label,
title, title,
children, children,
}) => { }) => {
return ( return (
<div className="level-item level-left"> <div className="level-item level-left">
<div> <div title={title ? title : label}>
<p className="heading">{title}</p> <p className="heading">{label}</p>
<p className="title">{children}</p> <p className="title">{children}</p>
</div> </div>
</div> </div>