Skip to content

Commit

Permalink
fix spacing issue
Browse files Browse the repository at this point in the history 
Signed-off-by: hemahg <[email protected]>
  • Loading branch information
@hemahg
hemahg committed Nov 19, 2024
1 parent 6efd7e2 commit c2051b1
Show file tree
Hide file tree
Showing 4 changed files with 110 additions and 88 deletions.
25 changes: 14 additions & 11 deletions ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/nodes/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
Label,
Nav,
NavList,
PageSection,
Spinner,
Split,
SplitItem,
Expand Down Expand Up @@ -66,18 +67,20 @@ function Header({
</Split>
}
navigation={
<Nav aria-label="Node navigation" variant="horizontal">
<NavList>
<NavItemLink url={`/kafka/${kafkaId}/nodes`} exact={true}>
Overview
</NavItemLink>
{cruiseControlEnable && (
<NavItemLink url={`/kafka/${kafkaId}/nodes/rebalances`}>
Rebalance
<PageSection className={"pf-v6-u-px-sm"} type="subnav">
<Nav aria-label="Node navigation" variant="horizontal">
<NavList>
<NavItemLink url={`/kafka/${kafkaId}/nodes`} exact={true}>
Overview
</NavItemLink>
)}
</NavList>
</Nav>
{cruiseControlEnable && (
<NavItemLink url={`/kafka/${kafkaId}/nodes/rebalances`}>
Rebalance
</NavItemLink>
)}
</NavList>
</Nav>
</PageSection>
}
/>
);
Expand Down
23 changes: 14 additions & 9 deletions ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/nodes/rebalances/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
Label,
Nav,
NavList,
PageSection,
Spinner,
Split,
SplitItem,
Expand Down Expand Up @@ -66,16 +67,20 @@ function Header({
</Split>
}
navigation={
<Nav aria-label="Node navigation" variant="horizontal">
<NavList>
<NavItemLink url={`/kafka/${kafkaId}/nodes`}>Overview</NavItemLink>
{cruiseControlEnable && (
<NavItemLink url={`/kafka/${kafkaId}/nodes/rebalances`}>
Rebalance
<PageSection className="pf-v6-u-px-sm" type="subnav">
<Nav aria-label="Node navigation" variant="horizontal">
<NavList>
<NavItemLink url={`/kafka/${kafkaId}/nodes`}>
Overview
</NavItemLink>
)}
</NavList>
</Nav>
{cruiseControlEnable && (
<NavItemLink url={`/kafka/${kafkaId}/nodes/rebalances`}>
Rebalance
</NavItemLink>
)}
</NavList>
</Nav>
</PageSection>
}
/>
);
Expand Down
148 changes: 81 additions & 67 deletions ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/topics/[topicId]/TopicHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,14 @@ import { AppHeader } from "@/components/AppHeader";
import { Number } from "@/components/Format/Number";
import { ManagedTopicLabel } from "@/components/ManagedTopicLabel";
import { NavItemLink } from "@/components/Navigation/NavItemLink";
import { Label, Nav, NavList, Spinner } from "@/libs/patternfly/react-core";
import { Skeleton } from "@patternfly/react-core";
import {
Label,
Nav,
NavList,
PageSection,
Skeleton,
Spinner,
} from "@/libs/patternfly/react-core";
import { notFound } from "next/navigation";
import { ReactNode, Suspense } from "react";

Expand All @@ -27,46 +33,48 @@ export function TopicHeader({
title={<Skeleton width="35%" />}
showRefresh={showRefresh}
navigation={
<Nav aria-label="Group section navigation" variant="horizontal">
<NavList>
<NavItemLink
url={`/kafka/${kafkaId}/topics/${topicId}/messages`}
>
Messages&nbsp;
<Label isCompact={true}>
<Spinner size="sm" />
</Label>
</NavItemLink>
<NavItemLink
url={`/kafka/${kafkaId}/topics/${topicId}/partitions`}
>
Partitions&nbsp;
<Label isCompact={true}>
<Spinner size="sm" />
</Label>
</NavItemLink>
<NavItemLink
url={`/kafka/${kafkaId}/topics/${topicId}/consumer-groups`}
>
Consumer groups&nbsp;
<Label isCompact={true}>
<Spinner size="sm" />
</Label>
</NavItemLink>
{/*
<PageSection className="pf-v6-u-px-sm" type="subnav">
<Nav aria-label="Group section navigation" variant="horizontal">
<NavList>
<NavItemLink
url={`/kafka/${kafkaId}/topics/${topicId}/messages`}
>
Messages&nbsp;
<Label isCompact={true}>
<Spinner size="sm" />
</Label>
</NavItemLink>
<NavItemLink
url={`/kafka/${kafkaId}/topics/${topicId}/partitions`}
>
Partitions&nbsp;
<Label isCompact={true}>
<Spinner size="sm" />
</Label>
</NavItemLink>
<NavItemLink
url={`/kafka/${kafkaId}/topics/${topicId}/consumer-groups`}
>
Consumer groups&nbsp;
<Label isCompact={true}>
<Spinner size="sm" />
</Label>
</NavItemLink>
{/*
<NavItemLink
url={`/kafka/${kafkaId}/topics/${topicId}/schema-registry`}
>
Schema
</NavItemLink>
*/}
<NavItemLink
url={`/kafka/${kafkaId}/topics/${topicId}/configuration`}
>
Configuration
</NavItemLink>
</NavList>
</Nav>
<NavItemLink
url={`/kafka/${kafkaId}/topics/${topicId}/configuration`}
>
Configuration
</NavItemLink>
</NavList>
</Nav>
</PageSection>
}
actions={[portal]}
/>
Expand Down Expand Up @@ -105,43 +113,49 @@ async function ConnectedTopicHeader({
}
showRefresh={showRefresh}
navigation={
<Nav aria-label="Group section navigation" variant="horizontal">
<NavList>
<NavItemLink url={`/kafka/${kafkaId}/topics/${topicId}/messages`}>
Messages&nbsp;
</NavItemLink>
<NavItemLink url={`/kafka/${kafkaId}/topics/${topicId}/partitions`}>
Partitions&nbsp;
<Label isCompact={true}>
<Suspense fallback={<Spinner size="sm" />}>
<Number value={topic?.attributes.numPartitions} />
</Suspense>
</Label>
</NavItemLink>
<NavItemLink
url={`/kafka/${kafkaId}/topics/${topicId}/consumer-groups`}
>
Consumer groups&nbsp;
<Label isCompact={true}>
<Number
value={topic?.relationships.consumerGroups?.data.length ?? 0}
/>
</Label>
</NavItemLink>
{/*
<PageSection className="pf-v6-u-px-sm" type="subnav">
<Nav aria-label="Group section navigation" variant="horizontal">
<NavList>
<NavItemLink url={`/kafka/${kafkaId}/topics/${topicId}/messages`}>
Messages&nbsp;
</NavItemLink>
<NavItemLink
url={`/kafka/${kafkaId}/topics/${topicId}/partitions`}
>
Partitions&nbsp;
<Label isCompact={true}>
<Suspense fallback={<Spinner size="sm" />}>
<Number value={topic?.attributes.numPartitions} />
</Suspense>
</Label>
</NavItemLink>
<NavItemLink
url={`/kafka/${kafkaId}/topics/${topicId}/consumer-groups`}
>
Consumer groups&nbsp;
<Label isCompact={true}>
<Number
value={
topic?.relationships.consumerGroups?.data.length ?? 0
}
/>
</Label>
</NavItemLink>
{/*
<NavItemLink
url={`/kafka/${kafkaId}/topics/${topicId}/schema-registry`}
>
Schema
</NavItemLink>
*/}
<NavItemLink
url={`/kafka/${kafkaId}/topics/${topicId}/configuration`}
>
Configuration
</NavItemLink>
</NavList>
</Nav>
<NavItemLink
url={`/kafka/${kafkaId}/topics/${topicId}/configuration`}
>
Configuration
</NavItemLink>
</NavList>
</Nav>
</PageSection>
}
actions={[portal]}
/>
Expand Down
2 changes: 1 addition & 1 deletion ui/components/AppHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export function AppHeader({
<>
<PageSection
padding={{ default: navigation ? "noPadding" : "padding" }}
className={navigation ? "pf-v6-u-px-lg pf-v6-u-pt-sm" : undefined}
className={navigation ? "pf-v6-u-px-md pf-v6-u-pt-sm" : undefined}
hasShadowBottom={!navigation}
>
<Flex direction={{ default: "column" }}>
Expand Down

0 comments on commit c2051b1

Please sign in to comment.