diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/nodes/page.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/nodes/page.tsx index 3c50b82ad..ce690bc9b 100644 --- a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/nodes/page.tsx +++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/nodes/page.tsx @@ -7,7 +7,6 @@ import { Label, Nav, NavList, - PageNavigation, Spinner, Split, SplitItem, @@ -67,20 +66,18 @@ function Header({ } navigation={ - - } /> ); diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/nodes/rebalances/page.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/nodes/rebalances/page.tsx index eb1a58cea..10c947ee7 100644 --- a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/nodes/rebalances/page.tsx +++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/nodes/rebalances/page.tsx @@ -7,7 +7,6 @@ import { Label, Nav, NavList, - PageNavigation, Spinner, Split, SplitItem, @@ -67,20 +66,16 @@ function Header({ } navigation={ - - } /> ); diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/topics/[topicId]/TopicHeader.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/topics/[topicId]/TopicHeader.tsx index 9f789a4c1..a05946be8 100644 --- a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/topics/[topicId]/TopicHeader.tsx +++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/topics/[topicId]/TopicHeader.tsx @@ -5,13 +5,7 @@ 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, - PageNavigation, - Spinner, -} from "@/libs/patternfly/react-core"; +import { Label, Nav, NavList, Spinner } from "@/libs/patternfly/react-core"; import { Skeleton } from "@patternfly/react-core"; import { notFound } from "next/navigation"; import { ReactNode, Suspense } from "react"; @@ -33,48 +27,46 @@ export function TopicHeader({ title={} showRefresh={showRefresh} navigation={ - - } actions={[portal]} /> @@ -113,47 +105,43 @@ async function ConnectedTopicHeader({ } showRefresh={showRefresh} navigation={ - - } actions={[portal]} /> diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/topics/page.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/topics/page.tsx index e8fbe0319..b7c64d7a6 100644 --- a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/topics/page.tsx +++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/topics/page.tsx @@ -72,7 +72,7 @@ function Header({ ) } - color={"cyan"} + color={"teal"} > {ok !== undefined && } diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/KafkaSwitcher.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/KafkaSwitcher.tsx index 469d18b12..e40427813 100644 --- a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/KafkaSwitcher.tsx +++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/KafkaSwitcher.tsx @@ -69,7 +69,7 @@ export function KafkaSwitcher({ { "--pf-v5-c-menu-toggle__toggle-icon--MarginRight": 0, "--pf-v5-c-menu-toggle__controls--PaddingLeft": - "var(--pf-v5-global--spacer--sm)", + "var(--pf-t--global--spacer--sm)", } as CSSProperties } > diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/LagTable.stories.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/LagTable.stories.tsx index 2d4d6b95e..82542bf71 100644 --- a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/LagTable.stories.tsx +++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/LagTable.stories.tsx @@ -49,7 +49,7 @@ const sampleData = [ lag: 342, offset: 3068518, logEndOffset: 3068869, - } + }, ]; export default { @@ -60,7 +60,6 @@ type Story = StoryObj; export const Default: Story = { args: { kafkaId: "kafka1", - offsets: sampleData - - } + offsets: sampleData, + }, }; diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/MembersTable.stories.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/MembersTable.stories.tsx index 8950ab8b0..8fdab73e0 100644 --- a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/MembersTable.stories.tsx +++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/MembersTable.stories.tsx @@ -5,7 +5,8 @@ const sampleConsumerGroup = { attributes: { members: [ { - memberId: "console-datagen-consumer-0-2-f57582e3-523b-4a1e-97a8-02cb2e3b6592", + memberId: + "console-datagen-consumer-0-2-f57582e3-523b-4a1e-97a8-02cb2e3b6592", clientId: "console-datagen-consumer-0-2", assignments: [ { @@ -89,7 +90,7 @@ const sampleConsumerGroup = { lag: 342, offset: 3068518, logEndOffset: 3068869, - } + }, ], }, }; diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/ResetOffsetModal.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/ResetOffsetModal.tsx index 5897e5b97..990565e17 100644 --- a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/ResetOffsetModal.tsx +++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/ResetOffsetModal.tsx @@ -1,13 +1,16 @@ import { ExternalLink } from "@/components/Navigation/ExternalLink"; import { Button, + Content, List, ListItem, Modal, + ModalBody, + ModalFooter, + ModalHeader, ModalVariant, Stack, StackItem, - Text, } from "@/libs/patternfly/react-core"; import { useTranslations } from "next-intl"; import { useRouter } from "next/navigation"; @@ -38,43 +41,47 @@ export function ResetOffsetModal({ return ( + + + + + {t("member_shutdown_helper_text")} + + + + {members.map((member, index) => ( + {member} + ))} + + + + {t("shutdown_active_members")} + + + + {t("learn_to_shutdown_members")} + + + + + , + , + , - ]} - > - - - {t("member_shutdown_helper_text")} - - - - {members.map((member, index) => ( - {member} - ))} - - - - {t("shutdown_active_members")} - - - - {t("learn_to_shutdown_members")} - - - + + ); } diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/Dryrun.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/Dryrun.tsx index edf78cd00..2984ba19a 100644 --- a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/Dryrun.tsx +++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/Dryrun.tsx @@ -4,7 +4,9 @@ import { Alert, Button, Card, + CardBody, ClipboardCopy, + Content, DescriptionList, DescriptionListDescription, DescriptionListGroup, @@ -26,7 +28,6 @@ import { Stack, StackItem, } from "@/libs/patternfly/react-core"; -import { TextContent, Text } from "@/libs/patternfly/react-core"; import { useTranslations } from "next-intl"; import { DownloadIcon } from "@/libs/patternfly/react-icons"; @@ -85,9 +86,9 @@ export function Dryrun({ - - {t.rich("dry_run_result")} - + + {t.rich("dry_run_result")} + - - {t.rich("consumer_name", { consumerGroupName })} - + + {t.rich("consumer_name", { consumerGroupName })} + @@ -132,6 +133,7 @@ export function Dryrun({ ([topicName, offsets]) => ( + @@ -182,6 +184,7 @@ export function Dryrun({ + ), diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/DryrunSelect.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/DryrunSelect.tsx index 09803198d..9f12a1965 100644 --- a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/DryrunSelect.tsx +++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/DryrunSelect.tsx @@ -37,18 +37,15 @@ export function DryrunSelect({ - {t("dry_run")} - , - ], - }} + splitButtonItems={[ + + {t("dry_run")} + , + ]} aria-label="dryrun toggle button" onClick={onToggleClick} /> diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetOffset.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetOffset.tsx index 353579499..0662a9f65 100644 --- a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetOffset.tsx +++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetOffset.tsx @@ -4,9 +4,6 @@ import { PanelHeader, PanelMain, PanelMainBody, - TextContent, - Text, - TextVariants, Radio, Form, FormGroup, @@ -15,6 +12,7 @@ import { ActionGroup, Button, Alert, + Content, } from "@/libs/patternfly/react-core"; import { useTranslations } from "next-intl"; import { @@ -86,12 +84,12 @@ export function ResetOffset({ return ( - - {t("reset_consumer_offset")} - - - {t.rich("consumer_name", { consumerGroupName })} - + + {t("reset_consumer_offset")} + + + {t.rich("consumer_name", { consumerGroupName })} + diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/SelectComponent.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/SelectComponent.tsx index 27984d97f..bfec93256 100644 --- a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/SelectComponent.tsx +++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/SelectComponent.tsx @@ -253,12 +253,11 @@ export function SelectComponent({ style={{ display: inputValue ? "block" : "none" }} > + /> diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/TypeaheadSelect.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/TypeaheadSelect.tsx index 07c86fe33..431b84d7a 100644 --- a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/TypeaheadSelect.tsx +++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/TypeaheadSelect.tsx @@ -121,12 +121,11 @@ export function TypeaheadSelect({ {(filterValue || value) && ( + /> )} diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/DistributionChart.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/DistributionChart.tsx index 0cf17428b..c44b04a6c 100644 --- a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/DistributionChart.tsx +++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/DistributionChart.tsx @@ -144,7 +144,13 @@ export function DistributionChart({ data={Object.keys(data).map((node) => { const count = getCount(data[node]); const percentage = getPercentage(count); - return { name: t("DistributionChart.broker_node_count", { node, count, percentage }) }; + return { + name: t("DistributionChart.broker_node_count", { + node, + count, + percentage, + }), + }; })} itemsPerRow={width > 600 ? 3 : 1} /> diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/NodesTable.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/NodesTable.tsx index 75d2523ac..ca72bc413 100644 --- a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/NodesTable.tsx +++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/NodesTable.tsx @@ -10,13 +10,11 @@ import { ClipboardCopy, Flex, FlexItem, - Text, - TextContent, Tooltip, } from "@/libs/patternfly/react-core"; import { HelpIcon } from "@/libs/patternfly/react-icons"; import { useFormatBytes } from "@/utils/useFormatBytes"; -import { Icon } from "@patternfly/react-core"; +import { Content, Icon } from "@patternfly/react-core"; import { CheckCircleIcon, ExclamationCircleIcon, @@ -40,7 +38,6 @@ export type Node = { }; export function NodesTable({ nodes }: { nodes: Node[] }) { - const t = useTranslations(); const format = useFormatter(); const formatBytes = useFormatBytes(); @@ -59,11 +56,7 @@ export function NodesTable({ nodes }: { nodes: Node[] }) { return ( {t("nodes.replicas")}{" "} - + @@ -72,11 +65,7 @@ export function NodesTable({ nodes }: { nodes: Node[] }) { return ( {t("nodes.rack")}{" "} - + @@ -135,11 +124,9 @@ export function NodesTable({ nodes }: { nodes: Node[] }) { return ( - - - {t.rich("nodes.broker_host_name")} - - + + {t.rich("nodes.broker_host_name")} + {row.hostname || "n/a"} - - + + - - - {t.rich("nodes.broker_disk_usage")} - - + + {t.rich("nodes.broker_disk_usage")} +
{row.diskUsage !== undefined && row.diskCapacity !== undefined && ( @@ -185,8 +170,8 @@ export function NodesTable({ nodes }: { nodes: Node[] }) { labels={({ datum }) => datum.x ? `${datum.x}: ${format.number(datum.y / 100, { - style: "percent", - })}` + style: "percent", + })}` : null } legendData={[ diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/[nodeId]/configuration/ConfigTable.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/[nodeId]/configuration/ConfigTable.tsx index 4cc0a093e..2ec3eb9f3 100644 --- a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/[nodeId]/configuration/ConfigTable.tsx +++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/[nodeId]/configuration/ConfigTable.tsx @@ -212,7 +212,7 @@ export function ConfigTable({ config }: { config: NodeConfig }) {
{key}
-
- ) : status === "stop" ? ( -
{t("stop")}
- ) : ( -
{t("refresh")}
- ) - } - bodyContent={undefined} - > - - - } - actions={[ - , - , - ]} - > + } help={ {t("approve")} + ) : status === "stop" ? ( +
{t("stop")}
+ ) : ( +
{t("refresh")}
+ ) + } + bodyContent={undefined} + > + + }/> + {status === "approve" ? t("approve_rebalance_description") : status === "stop" ? t("stop_rebalance_description") : t("refresh_rebalance_description")} + + + + + ); } diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/rebalances/[rebalanceId]/OptimizationProposal.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/rebalances/[rebalanceId]/OptimizationProposal.tsx index 448336daa..a3cfced99 100644 --- a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/rebalances/[rebalanceId]/OptimizationProposal.tsx +++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/rebalances/[rebalanceId]/OptimizationProposal.tsx @@ -7,6 +7,9 @@ import { DescriptionListGroup, DescriptionListTerm, Modal, + ModalBody, + ModalFooter, + ModalHeader, ModalVariant, } from "@/libs/patternfly/react-core"; import { useTranslations } from "next-intl"; @@ -56,130 +59,135 @@ export function OptimizationProposal({ variant={ModalVariant.medium} isOpen={true} onClose={onClickClose} - actions={[ + > + + + + + {t("data_to_move")} + + {dataToMoveMB || 0} + {" MB"} + + + + + {t("excluded_brokers_for_leadership")} + + + {excludedBrokersForLeadership && + excludedBrokersForLeadership.length > 0 + ? excludedBrokersForLeadership.join(", ") + : "-"} + + + + + {t("excluded_brokers_for_replica_move")} + + + {excludedBrokersForReplicaMove && + excludedBrokersForReplicaMove.length > 0 + ? excludedBrokersForReplicaMove.join(", ") + : "-"} + + + + {t("excluded_topics")} + + {excludedTopics && excludedTopics.length > 0 + ? excludedTopics.join(", ") + : "-"} + + + + + {t("intra_broker_data_to_move")} + + + {intraBrokerDataToMoveMB || 0} + + + + + {t("monitored_partitions_percentage")} + + + {monitoredPartitionsPercentage || 0} + + + + + {t("num_intra_broker_replica_movements")} + + + {numIntraBrokerReplicaMovements || 0} + + + + + {t("num_leader_movements")} + + + {numLeaderMovements || 0} + + + + + {t("num_replica_movements")} + + + {numReplicaMovements || 0} + + + + + {t("on_demand_balancedness_score_after")} + + + {onDemandBalancednessScoreAfter || 0} + + + + + {t("on_demand_balancedness_Score_before")} + + + {onDemandBalancednessScoreBefore || 0} + + + + {t("recent_windows")} + + {recentWindows || 0} + + + + {t("session_id")} + + {sessionId ?? "-"} + + + + + , + , - ]} - > - - - {t("data_to_move")} - - {dataToMoveMB || 0} - {" MB"} - - - - - {t("excluded_brokers_for_leadership")} - - - {excludedBrokersForLeadership && - excludedBrokersForLeadership.length > 0 - ? excludedBrokersForLeadership.join(", ") - : "-"} - - - - - {t("excluded_brokers_for_replica_move")} - - - {excludedBrokersForReplicaMove && - excludedBrokersForReplicaMove.length > 0 - ? excludedBrokersForReplicaMove.join(", ") - : "-"} - - - - {t("excluded_topics")} - - {excludedTopics && excludedTopics.length > 0 - ? excludedTopics.join(", ") - : "-"} - - - - - {t("intra_broker_data_to_move")} - - - {intraBrokerDataToMoveMB || 0} - - - - - {t("monitored_partitions_percentage")} - - - {monitoredPartitionsPercentage || 0} - - - - - {t("num_intra_broker_replica_movements")} - - - {numIntraBrokerReplicaMovements || 0} - - - - {t("num_leader_movements")} - - {numLeaderMovements || 0} - - - - - {t("num_replica_movements")} - - - {numReplicaMovements || 0} - - - - - {t("on_demand_balancedness_score_after")} - - - {onDemandBalancednessScoreAfter || 0} - - - - - {t("on_demand_balancedness_Score_before")} - - - {onDemandBalancednessScoreBefore || 0} - - - - {t("recent_windows")} - - {recentWindows || 0} - - - - {t("session_id")} - - {sessionId ?? "-"} - - - + + ); } diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/rebalances/page.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/rebalances/page.tsx index 15d0acf10..c267ddbdb 100644 --- a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/rebalances/page.tsx +++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/rebalances/page.tsx @@ -31,9 +31,9 @@ export default function RebalancesPage({ }; }) { const name = searchParams["name"]; - const mode = (searchParams["mode"] || "") - .split(",") - .filter((v) => !!v) as RebalanceMode[] | undefined;; + const mode = (searchParams["mode"] || "").split(",").filter((v) => !!v) as + | RebalanceMode[] + | undefined; const pageSize = stringToInt(searchParams.perPage) || 20; const sort = (searchParams["sort"] || "name") as RebalanceTableColumn; const sortDir = (searchParams["sortDir"] || "asc") as "asc" | "desc"; @@ -58,7 +58,9 @@ export default function RebalancesPage({ nextPageCursor={undefined} prevPageCursor={undefined} mode={mode} - baseurl={`/kafka/${params.kafkaId}/nodes`} kafkaId={params.kafkaId} /> + baseurl={`/kafka/${params.kafkaId}/nodes`} + kafkaId={params.kafkaId} + /> } >
{name}
- @@ -163,11 +162,11 @@ export function ClusterCard({ )} - - + + {t("ClusterCard.online_brokers")} - - + + )} - - + + {t("ClusterCard.consumer_groups")} - - + +
{isLoading ? : kafkaVersion}
- - + + {t("ClusterCard.kafka_version")} - - + + diff --git a/ui/components/ClusterOverview/RecentTopicsCard.tsx b/ui/components/ClusterOverview/RecentTopicsCard.tsx index 5199725c6..b48c4c468 100644 --- a/ui/components/ClusterOverview/RecentTopicsCard.tsx +++ b/ui/components/ClusterOverview/RecentTopicsCard.tsx @@ -3,13 +3,11 @@ import { ExpandableCard } from "@/components/ExpandableCard"; import { ExternalLink } from "@/components/Navigation/ExternalLink"; import { CardBody, + Content, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter, - EmptyStateHeader, - Text, - TextContent, Tooltip, } from "@/libs/patternfly/react-core"; import { HelpIcon } from "@/libs/patternfly/react-icons"; @@ -29,7 +27,7 @@ export function RecentTopicsCard({ return ( + {t("homepage.recently_viewed_topics_header")}{" "} - + {t("homepage.last_accessed_topics", { product: productName, })} - - + + } isCompact={true} > @@ -55,8 +53,10 @@ export function RecentTopicsCard({ ) : viewedTopics.length > 0 ? ( ) : ( - - + {t("homepage.empty_topics_description", { product: productName })} diff --git a/ui/components/ClusterOverview/ReconciliationModal.tsx b/ui/components/ClusterOverview/ReconciliationModal.tsx index 8a6bab386..e1da0a25e 100644 --- a/ui/components/ClusterOverview/ReconciliationModal.tsx +++ b/ui/components/ClusterOverview/ReconciliationModal.tsx @@ -1,6 +1,13 @@ "use client"; -import { Button, Modal, ModalVariant } from "@/libs/patternfly/react-core"; +import { + Button, + Modal, + ModalBody, + ModalFooter, + ModalHeader, + ModalVariant, +} from "@/libs/patternfly/react-core"; import { useTranslations } from "next-intl"; export function ReconciliationModal({ @@ -19,20 +26,26 @@ export function ReconciliationModal({ isOpen={isModalOpen} variant={ModalVariant.medium} onClose={onClickClose} - actions={[ + > + + + {t("reconciliation.pause_reconciliation_description")} + {t("reconciliation.pause_reconciliation_description")} + + , + , - ]} - > - {t("reconciliation.pause_reconciliation_description")} + + ); } diff --git a/ui/components/ClusterOverview/TopicChartsCard.tsx b/ui/components/ClusterOverview/TopicChartsCard.tsx index a6d1c2ca7..9f38b33f1 100644 --- a/ui/components/ClusterOverview/TopicChartsCard.tsx +++ b/ui/components/ClusterOverview/TopicChartsCard.tsx @@ -25,8 +25,8 @@ export function TopicChartsCard({ }: | ({ isLoading: false } & TopicChartsCardProps) | ({ - isLoading: true; - } & Partial<{ [key in keyof TopicChartsCardProps]?: undefined }>)) { + isLoading: true; + } & Partial<{ [key in keyof TopicChartsCardProps]?: undefined }>)) { const t = useTranslations(); return ( @@ -42,7 +42,11 @@ export function TopicChartsCard({ {t("topicMetricsCard.topics_bytes_incoming_and_outgoing")}{" "} - + diff --git a/ui/components/ClusterOverview/TopicsPartitionsCard.stories.tsx b/ui/components/ClusterOverview/TopicsPartitionsCard.stories.tsx index bbf2150c6..f9a9c8e28 100644 --- a/ui/components/ClusterOverview/TopicsPartitionsCard.stories.tsx +++ b/ui/components/ClusterOverview/TopicsPartitionsCard.stories.tsx @@ -12,7 +12,6 @@ type Story = StoryObj; export const WithData: Story = { args: { isLoading: false, - topicsTotal: 999999, topicsReplicated: 400000, topicsUnderReplicated: 400000, partitions: 999999, diff --git a/ui/components/ClusterOverview/TopicsPartitionsCard.tsx b/ui/components/ClusterOverview/TopicsPartitionsCard.tsx index 18eedf7a1..c75615fa4 100644 --- a/ui/components/ClusterOverview/TopicsPartitionsCard.tsx +++ b/ui/components/ClusterOverview/TopicsPartitionsCard.tsx @@ -9,8 +9,7 @@ import { FlexItem, Icon, Skeleton, - Text, - TextContent, + Content, Tooltip, } from "@/libs/patternfly/react-core"; import { @@ -67,23 +66,29 @@ export function TopicsPartitionsCard({ ) : ( - - + + - {" "} + {" "} {t("ClusterOverview.total_topics")} - - + + - - + +   {t("ClusterOverview.total_partitions")} - - + + )} @@ -109,8 +114,8 @@ export function TopicsPartitionsCard({ )} - - + + @@ -122,8 +127,8 @@ export function TopicsPartitionsCard({ > - - + + @@ -137,8 +142,8 @@ export function TopicsPartitionsCard({ )} - - + + @@ -150,8 +155,8 @@ export function TopicsPartitionsCard({ > - - + + @@ -162,13 +167,11 @@ export function TopicsPartitionsCard({ style={{ display: "inline-block" }} /> ) : ( - + )} - - + + @@ -178,8 +181,8 @@ export function TopicsPartitionsCard({ > - - + + diff --git a/ui/components/ClusterOverview/components/ErrorsAndWarnings.tsx b/ui/components/ClusterOverview/components/ErrorsAndWarnings.tsx index 78e9cf92c..f6171b48a 100644 --- a/ui/components/ClusterOverview/components/ErrorsAndWarnings.tsx +++ b/ui/components/ClusterOverview/components/ErrorsAndWarnings.tsx @@ -38,7 +38,7 @@ export function ErrorsAndWarnings({ -