-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Align the topics page to the designs (#207)
* Align the topics page to the designs Update the Topics page header to be in sync with the designs. The warning icon will always show zero as for the moment we don't have the count of topics that are in-sync and under replicated. Connect the search input to search in the topic names. Add a switch to show/hide internal topics (hide is the default). not in sync. Part of #165. Add a status column to show the in-sync or under replicated state of a topic. This is done by looking for a replica amongs all partitions that hold the topic that is flagged as not in sync. Reorder the columns. Change the "Edit properties" action to "Edit configuration". Part of #142. Change the column name "Messages" to "Record count". Add the right empty states for when there are no topics and for when a search doesn't produce results. * Add an option to search by topic id * Update icons * Minor tweaks
- Loading branch information
1 parent
82fcc5f
commit 2930196
Showing
12 changed files
with
466 additions
and
102 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,94 @@ | ||
| import { KafkaHeader } from "@/app/[locale]/kafka/[kafkaId]/@header/KafkaHeader"; | ||
| import { getTopics } from "@/api/topics/actions"; | ||
| import { KafkaParams } from "@/app/[locale]/kafka/[kafkaId]/kafka.params"; | ||
| import { AppHeader } from "@/components/AppHeader"; | ||
| import { Number } from "@/components/Number"; | ||
| import { | ||
| Label, | ||
| Spinner, | ||
| Split, | ||
| SplitItem, | ||
| Tooltip, | ||
| } from "@/libs/patternfly/react-core"; | ||
| import { | ||
| CheckCircleIcon, | ||
| ExclamationTriangleIcon, | ||
| } from "@/libs/patternfly/react-icons"; | ||
| import { Suspense } from "react"; | ||
|
|
||
| export { fetchCache } from "@/app/[locale]/kafka/[kafkaId]/@header/KafkaHeader"; | ||
| export default KafkaHeader; | ||
| export default function TopicsHeader({ params }: { params: KafkaParams }) { | ||
| return ( | ||
| <Suspense fallback={<Header />}> | ||
| <ConnectedHeader params={params} /> | ||
| </Suspense> | ||
| ); | ||
| } | ||
|
|
||
| async function ConnectedHeader({ params }: { params: KafkaParams }) { | ||
| const topics = await getTopics(params.kafkaId, {}); | ||
| return ( | ||
| <Header | ||
| total={topics.meta.page.total} | ||
| ok={topics.meta.page.total} | ||
| warning={0} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| function Header({ | ||
| total, | ||
| ok, | ||
| warning, | ||
| }: { | ||
| total?: number; | ||
| ok?: number; | ||
| warning?: number; | ||
| }) { | ||
| return ( | ||
| <AppHeader | ||
| title={ | ||
| <Split hasGutter={true}> | ||
| <SplitItem>Topics</SplitItem> | ||
| <SplitItem> | ||
| <Label | ||
| icon={total === undefined ? <Spinner size={"sm"} /> : undefined} | ||
| > | ||
| {total !== undefined && <Number value={total} />} total | ||
| </Label> | ||
| </SplitItem> | ||
| <SplitItem> | ||
| <Tooltip content={"Number of topics in sync"}> | ||
| <Label | ||
| icon={ | ||
| ok === undefined ? ( | ||
| <Spinner size={"sm"} /> | ||
| ) : ( | ||
| <CheckCircleIcon /> | ||
| ) | ||
| } | ||
| color={"cyan"} | ||
| > | ||
| {ok !== undefined && <Number value={ok} />} | ||
| </Label> | ||
| </Tooltip> | ||
| </SplitItem> | ||
| <SplitItem> | ||
| <Tooltip content={"Number of topics under replicated"}> | ||
| <Label | ||
| icon={ | ||
| warning === undefined ? ( | ||
| <Spinner size={"sm"} /> | ||
| ) : ( | ||
| <ExclamationTriangleIcon /> | ||
| ) | ||
| } | ||
| color={"orange"} | ||
| > | ||
| {warning !== undefined && <Number value={warning} />} | ||
| </Label> | ||
| </Tooltip> | ||
| </SplitItem> | ||
| </Split> | ||
| } | ||
| /> | ||
| ); | ||
| } |
30 changes: 30 additions & 0 deletions
30
ui/app/[locale]/kafka/[kafkaId]/topics/(page)/EmptyStateNoTopics.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import { ButtonLink } from "@/components/ButtonLink"; | ||
| import { | ||
| EmptyState, | ||
| EmptyStateActions, | ||
| EmptyStateBody, | ||
| EmptyStateFooter, | ||
| EmptyStateHeader, | ||
| EmptyStateIcon, | ||
| } from "@/libs/patternfly/react-core"; | ||
| import { PlusCircleIcon } from "@patternfly/react-icons"; | ||
|
|
||
| export function EmptyStateNoTopics({ createHref }: { createHref: string }) { | ||
| return ( | ||
| <EmptyState> | ||
| <EmptyStateHeader | ||
| titleText="No topics" | ||
| headingLevel="h4" | ||
| icon={<EmptyStateIcon icon={PlusCircleIcon} />} | ||
| /> | ||
| <EmptyStateBody>To get started, create your first topic </EmptyStateBody> | ||
| <EmptyStateFooter> | ||
| <EmptyStateActions> | ||
| <ButtonLink variant="primary" href={createHref}> | ||
| Create a topic | ||
| </ButtonLink> | ||
| </EmptyStateActions> | ||
| </EmptyStateFooter> | ||
| </EmptyState> | ||
| ); | ||
| } |
Oops, something went wrong.