Skip to content

Commit

Permalink
incorporate review comment
Browse files Browse the repository at this point in the history 
Signed-off-by: hemahg <[email protected]>
  • Loading branch information
@hemahg
hemahg committed Oct 25, 2024
1 parent ad5801c commit 2b71e2f
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 80 deletions.
6 changes: 1 addition & 5 deletions ui/app/[locale]/(authorized)/kafka/[kafkaId]/overview/ConnectedClusterCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,9 @@ export async function ConnectedClusterCard({
/>
);
}

console.log("response data", res)
const groupCount = await consumerGroups.then(
(grpResp) => grpResp?.meta.page.total ?? 0,
);

console.log("group count", groupCount)
const brokersTotal = Object.keys(res?.kpis.broker_state ?? {}).length;
const brokersOnline =
Object.values(res?.kpis.broker_state ?? {}).filter((s) => s === 3).length ||
Expand All @@ -42,7 +38,7 @@ export async function ConnectedClusterCard({
variant:
c.type === "Error" ? "danger" : ("warning" as "danger" | "warning"),
subject: {
type: "cluster" as "cluster" | "broker" | "topic",
type: c.type!,
name: res?.cluster.attributes.name ?? "",
id: res?.cluster.id ?? "",
},
Expand Down
14 changes: 10 additions & 4 deletions ui/components/AppLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ export function AppLayout({
kafkaId?: string;
}>) {
const t = useTranslations();

const isValidKafkaId = !!kafkaId;
return (
<Page
header={<AppMasthead username={username} showSidebarToggle={!!sidebar} />}
Expand All @@ -35,10 +37,14 @@ export function AppLayout({
>
{/*<HelpContainer>*/}
<ClusterDrawerProvider>
<ReconciliationProvider kafkaId={kafkaId || ""}>
<ReconciliationPausedBanner kafkaId={kafkaId || ""} />
<ClusterDrawer>{children}</ClusterDrawer>
</ReconciliationProvider>
{isValidKafkaId ? (
<ReconciliationProvider kafkaId={kafkaId}>
<ReconciliationPausedBanner kafkaId={kafkaId} />
<ClusterDrawer>{children}</ClusterDrawer>
</ReconciliationProvider>
) : (
<></>
)}
</ClusterDrawerProvider>
{/*</HelpContainer>*/}
</Page>
Expand Down
99 changes: 28 additions & 71 deletions ui/components/ClusterOverview/ClusterCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ type ClusterCardProps = {
kafkaId: string | undefined;
messages: Array<{
variant: "danger" | "warning";
subject: { type: "cluster" | "broker" | "topic"; name: string; id: string };
subject: { type: string; name: string; id: string };
message: string;
date: string;
}>;
Expand Down Expand Up @@ -232,7 +232,7 @@ export function ClusterCard({
))
) : (
<>
{!isReconciliationPaused && messages.length === 0 && (
{messages.length === 0 && (
<DataListItem aria-labelledby={`no-messages`}>
<DataListItemRow>
<DataListItemCells
Expand All @@ -247,69 +247,6 @@ export function ClusterCard({
</DataListItemRow>
</DataListItem>
)}
{isReconciliationPaused && (
<DataListItem aria-labelledby={`reconciliation-warning`}>
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell
key="warning-message"
className={"pf-v5-u-text-nowrap"}
width={2}
>
<Icon status={"warning"}>
<ExclamationTriangleIcon />
</Icon>
&nbsp;
<Truncate
content={t(
"reconciliation.reconciliation_paused",
)}
/>
</DataListCell>,
<DataListCell key="message" width={3}>
<div
className={
"pf-v5-u-display-none pf-v5-u-display-block-on-md"
}
>
<Truncate
content={t(
"reconciliation.reconciliation_paused_warning",
)}
/>
</div>
</DataListCell>,
<DataListCell
key="button"
width={1}
className={"pf-v5-u-text-nowrap"}
>
<Button
variant="link"
isInline
onClick={resumeReconciliation}
>
{t("reconciliation.resume")}
</Button>
</DataListCell>,
<DataListCell
key="date"
width={1}
className={"pf-v5-u-text-nowrap"}
>
<DateTime
value={new Date(Date.now())}
tz={"UTC"}
dateStyle={"short"}
timeStyle={"short"}
/>
</DataListCell>,
]}
/>
</DataListItemRow>
</DataListItem>
)}
{messages
.sort((a, b) => a.date.localeCompare(b.date))
.reverse()
Expand All @@ -321,7 +258,7 @@ export function ClusterCard({
<DataListCell
key="name"
className={"pf-v5-u-text-nowrap"}
width={2}
width={1}
>
<Icon status={m.variant}>
{m.variant === "danger" && (
Expand All @@ -332,17 +269,37 @@ export function ClusterCard({
)}
</Icon>
&nbsp;
<Link href={""} id={`message-${i}`}>
<Truncate content={m.subject.name} />
</Link>
{m.subject.type}
</DataListCell>,
<DataListCell key="message" width={4}>
<DataListCell key="message" width={5}>
<div
className={
"pf-v5-u-display-none pf-v5-u-display-block-on-md"
}
>
<Truncate content={m.message} />
<Truncate
content={
m.subject.type ===
"ReconciliationPaused"
? t(
"reconciliation.reconciliation_paused_warning",
)
: m.message
}
/>
{m.subject.type ===
"ReconciliationPaused" && (
<>
&nbsp;
<Button
variant="link"
isInline
onClick={resumeReconciliation}
>
{t("reconciliation.resume")}
</Button>
</>
)}
</div>
<div
className={
Expand Down
4 changes: 4 additions & 0 deletions ui/components/ReconciliationProvider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,10 @@ export function ReconciliationProvider({
};

useEffect(() => {
if (!kafkaId) {
return;
}

const fetchReconciliationState = async () => {
try {
const cluster = await getKafkaCluster(kafkaId);
Expand Down

0 comments on commit 2b71e2f

Please sign in to comment.