Skip to content

Commit

Permalink
add support for dark theme
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 c2051b1 commit 302818d
Show file tree
Hide file tree
Showing 8 changed files with 318 additions and 175 deletions.
35 changes: 19 additions & 16 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 @@ -2,17 +2,16 @@ import { getKafkaCluster } from "@/api/kafka/actions";
import { KafkaParams } from "@/app/[locale]/(authorized)/kafka/[kafkaId]/kafka.params";
import { AppHeader } from "@/components/AppHeader";
import { Number } from "@/components/Format/Number";
import { NavItemLink } from "@/components/Navigation/NavItemLink";
import { NavTabLink } from "@/components/Navigation/NavTabLink";
import {
Label,
Nav,
NavList,
PageSection,
Spinner,
Split,
SplitItem,
} from "@/libs/patternfly/react-core";
import { CheckCircleIcon } from "@/libs/patternfly/react-icons";
import { useTranslations } from "next-intl";
import { Suspense } from "react";

export default function NodesHeader({ params }: { params: KafkaParams }) {
Expand Down Expand Up @@ -45,11 +44,26 @@ function Header({
kafkaId: string | undefined;
cruiseControlEnable: boolean;
}) {
const t = useTranslations("node-header");

const tabs = [
{ key: 0, title: t("overveiw"), url: `/kafka/${kafkaId}/nodes` },
...(cruiseControlEnable
? [
{
key: 1,
title: t("rebalance"),
url: `/kafka/${kafkaId}/nodes/rebalances`,
},
]
: []),
];

return (
<AppHeader
title={
<Split hasGutter={true}>
<SplitItem>Brokers</SplitItem>
<SplitItem>{t("brokers")}</SplitItem>
<SplitItem>
<Label
color={"green"}
Expand All @@ -68,18 +82,7 @@ function Header({
}
navigation={
<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>
{cruiseControlEnable && (
<NavItemLink url={`/kafka/${kafkaId}/nodes/rebalances`}>
Rebalance
</NavItemLink>
)}
</NavList>
</Nav>
<NavTabLink tabs={tabs} />
</PageSection>
}
/>
Expand Down
30 changes: 15 additions & 15 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 @@ -2,11 +2,9 @@ import { getKafkaCluster } from "@/api/kafka/actions";
import { KafkaParams } from "@/app/[locale]/(authorized)/kafka/[kafkaId]/kafka.params";
import { AppHeader } from "@/components/AppHeader";
import { Number } from "@/components/Format/Number";
import { NavItemLink } from "@/components/Navigation/NavItemLink";
import { NavTabLink } from "@/components/Navigation/NavTabLink";
import {
Label,
Nav,
NavList,
PageSection,
Spinner,
Split,
Expand Down Expand Up @@ -45,6 +43,19 @@ function Header({
kafkaId: string | undefined;
cruiseControlEnable: boolean;
}) {
const tabs = [
{ key: 0, title: "Overview", url: `/kafka/${kafkaId}/nodes` },
...(cruiseControlEnable
? [
{
key: 1,
title: "Rebalance",
url: `/kafka/${kafkaId}/nodes/rebalances`,
},
]
: []),
];

return (
<AppHeader
title={
Expand All @@ -68,18 +79,7 @@ function Header({
}
navigation={
<PageSection className="pf-v6-u-px-sm" type="subnav">
<Nav aria-label="Node navigation" variant="horizontal">
<NavList>
<NavItemLink url={`/kafka/${kafkaId}/nodes`}>
Overview
</NavItemLink>
{cruiseControlEnable && (
<NavItemLink url={`/kafka/${kafkaId}/nodes/rebalances`}>
Rebalance
</NavItemLink>
)}
</NavList>
</Nav>
<NavTabLink tabs={tabs} />
</PageSection>
}
/>
Expand Down
177 changes: 93 additions & 84 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 @@ -4,15 +4,14 @@ import { KafkaTopicParams } from "@/app/[locale]/(authorized)/kafka/[kafkaId]/to
import { AppHeader } from "@/components/AppHeader";
import { Number } from "@/components/Format/Number";
import { ManagedTopicLabel } from "@/components/ManagedTopicLabel";
import { NavItemLink } from "@/components/Navigation/NavItemLink";
import { NavTabLink } from "@/components/Navigation/NavTabLink";
import {
Label,
Nav,
NavList,
PageSection,
Skeleton,
Spinner,
} from "@/libs/patternfly/react-core";
import { useTranslations } from "next-intl";
import { notFound } from "next/navigation";
import { ReactNode, Suspense } from "react";

Expand All @@ -26,6 +25,52 @@ export function TopicHeader({
showRefresh,
}: TopicHeaderProps) {
const portal = <div key={"topic-header-portal"} id={"topic-header-portal"} />;
const t = useTranslations("topic-header");

const tabs = [
{
key: 0,
title: (
<>
{t("messages")}&nbsp;
<Label isCompact={true}>
<Spinner size="sm" />
</Label>
</>
),
url: `/kafka/${kafkaId}/topics/${topicId}/messages`,
},
{
key: 1,
title: (
<>
{t("partitions")}&nbsp;
<Label isCompact={true}>
<Spinner size="sm" />
</Label>
</>
),
url: `/kafka/${kafkaId}/topics/${topicId}/partitions`,
},
{
key: 2,
title: (
<>
{t("consumer_groups")}&nbsp;
<Label isCompact={true}>
<Spinner size="sm" />
</Label>
</>
),
url: `/kafka/${kafkaId}/topics/${topicId}/consumer-groups`,
},
{
key: 3,
title: t("configuration"),
url: `/kafka/${kafkaId}/topics/${topicId}/configuration`,
},
];

return (
<Suspense
fallback={
Expand All @@ -34,46 +79,7 @@ export function TopicHeader({
showRefresh={showRefresh}
navigation={
<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>
<NavTabLink tabs={tabs} />
</PageSection>
}
actions={[portal]}
Expand All @@ -98,11 +104,54 @@ async function ConnectedTopicHeader({
showRefresh?: boolean;
portal: ReactNode;
}) {
const t = useTranslations("topic-header");
const cluster = await getKafkaCluster(kafkaId);
if (!cluster) {
notFound();
}
const topic = await getTopic(cluster.id, topicId);

const tabs = [
{
key: 0,
title: t("messages"),
url: `/kafka/${kafkaId}/topics/${topicId}/messages`,
},
{
key: 1,
title: (
<>
{t("partitions")}&nbsp;
<Label isCompact={true}>
<Suspense fallback={<Spinner size="sm" />}>
<Number value={topic?.attributes.numPartitions} />
</Suspense>
</Label>
</>
),
url: `/kafka/${kafkaId}/topics/${topicId}/partitions`,
},
{
key: 2,
title: (
<>
{t("consumer_groups")}&nbsp;
<Label isCompact={true}>
<Number
value={topic?.relationships.consumerGroups?.data.length ?? 0}
/>
</Label>
</>
),
url: `/kafka/${kafkaId}/topics/${topicId}/consumer-groups`,
},
{
key: 3,
title: t("configuration"),
url: `/kafka/${kafkaId}/topics/${topicId}/configuration`,
},
];

return (
<AppHeader
title={
Expand All @@ -114,47 +163,7 @@ async function ConnectedTopicHeader({
showRefresh={showRefresh}
navigation={
<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>
<NavTabLink tabs={tabs} />
</PageSection>
}
actions={[portal]}
Expand Down
Loading

0 comments on commit 302818d

Please sign in to comment.