Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove cluster name from recently viewed topic card #1487

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Remove cluster name from recently viewed topic card #1487

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 17 additions & 7 deletions ui/api/topics/actions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
"use server";
import { fetchData, patchData, postData, getHeaders, ApiResponse, filterEq, filterIn, filterLike, sortParam } from "@/api/api";
import {
fetchData,
patchData,
postData,
getHeaders,
ApiResponse,
filterEq,
filterIn,
filterLike,
sortParam,
} from "@/api/api";
import { getKafkaCluster } from "@/api/kafka/actions";
import {
describeTopicsQuery,
Expand Down Expand Up @@ -56,10 +66,8 @@ export async function getTopics(
}),
);

return fetchData(
`/api/kafkas/${kafkaId}/topics`,
sp,
(rawData: any) => TopicsResponseSchema.parse(rawData),
return fetchData(`/api/kafkas/${kafkaId}/topics`, sp, (rawData: any) =>
TopicsResponseSchema.parse(rawData),
);
}

Expand Down Expand Up @@ -98,7 +106,7 @@ export async function createTopic(
},
},
},
(rawData) => TopicCreateResponseSchema.parse(rawData)
(rawData) => TopicCreateResponseSchema.parse(rawData),
);
}

Expand All @@ -122,7 +130,7 @@ export async function updateTopic(
},
},
},
_ => undefined
(_) => undefined,
);
}

Expand Down Expand Up @@ -154,6 +162,7 @@ export type ViewedTopic = {
kafkaName: string;
topicId: string;
topicName: string;
topicStatus: TopicStatus;
};

export async function getViewedTopics(): Promise<ViewedTopic[]> {
Expand All @@ -177,6 +186,7 @@ export async function setTopicAsViewed(kafkaId: string, topicId: string) {
topicId,
// name is included in the `fields[topics]` param list so we are sure it is present
topicName: topic.attributes.name!,
topicStatus: topic.attributes.status!,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just something to be aware of is that the topic status in the overview card will always have the status that it had at the point it was last viewed. Are we OK with that? Having the status be up-to-date would require getViewedTopics to be more complex to actually load the topics fresh.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thinking about this again, maybe it would be better to just list the topic name and not the status to avoid it being stale? What do you think @hemahg @shirimordechay ?

};
if (viewedTopics.find((t) => t.topicId === viewedTopic.topicId)) {
log.trace(
Expand Down
19 changes: 11 additions & 8 deletions ui/components/ClusterOverview/components/TopicsTable.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
import type { Meta, StoryObj } from "@storybook/react";
import { TopicsTable } from "./TopicsTable";


const meta: Meta<typeof TopicsTable> = {
component: TopicsTable,
args: {
topics: [],
},
} as Meta<typeof TopicsTable>;


export default meta;
type Story = StoryObj<typeof TopicsTable>;

Expand All @@ -20,32 +18,37 @@ export const Default: Story = {
kafkaId: "1",
kafkaName: "kafka1",
topicId: "1",
topicName: "console_datagen_000-a"
topicName: "console_datagen_000-a",
topicStatus: "FullyReplicated",
},
{
kafkaId: "1",
kafkaName: "kafka1",
topicId: "3",
topicName: "console_datagen_000-b"
topicName: "console_datagen_000-b",
topicStatus: "UnderReplicated",
},
{
kafkaId: "2",
kafkaName: "kafka2",
topicId: "1",
topicName: "__consumer_offsets"
topicName: "__consumer_offsets",
topicStatus: "Unknown",
},
{
kafkaId: "2",
kafkaName: "kafka2",
topicId: "4",
topicName: "console_datagen_002-a"
topicName: "console_datagen_002-a",
topicStatus: "Offline",
},
{
kafkaId: "2",
kafkaName: "kafka2",
topicId: "6",
topicName: "console_datagen_002-b"
topicName: "console_datagen_002-b",
topicStatus: "FullyReplicated",
},
]
],
},
};
64 changes: 57 additions & 7 deletions ui/components/ClusterOverview/components/TopicsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,58 @@ import { Link } from "@/i18n/routing";
import { Truncate } from "@patternfly/react-core";
import { TableVariant } from "@patternfly/react-table";
import { useTranslations } from "next-intl";
import { ReactNode } from "react";
import { Icon } from "@/libs/patternfly/react-core";
import {
CheckCircleIcon,
ExclamationCircleIcon,
ExclamationTriangleIcon,
} from "@/libs/patternfly/react-icons";
import { TopicStatus } from "@/api/topics/schema";

export const TopicsTableColumns = ["name", "cluster"] as const;
export const TopicsTableColumns = ["name", "status"] as const;
const StatusLabel: Record<TopicStatus, ReactNode> = {
FullyReplicated: (
<>
<Icon status={"success"}>
<CheckCircleIcon />
</Icon>
&nbsp;Fully replicated
</>
),
UnderReplicated: (
<>
<Icon status={"warning"}>
<ExclamationTriangleIcon />
</Icon>
&nbsp;Under replicated
</>
),
PartiallyOffline: (
<>
<Icon status={"warning"}>
<ExclamationTriangleIcon />
</Icon>
&nbsp;Partially offline
</>
),
Unknown: (
<>
<Icon status={"warning"}>
<ExclamationTriangleIcon />
</Icon>
&nbsp;Unknown
</>
),
Offline: (
<>
<Icon status={"danger"}>
<ExclamationCircleIcon />
</Icon>
&nbsp;Offline
</>
),
};

export type TopicsTableProps = {
topics: ViewedTopic[] | undefined;
Expand All @@ -28,10 +78,10 @@ export function TopicsTable({ topics }: TopicsTableProps) {
{t("recently_viewed_topics.topic_name")}
</Th>
);
case "cluster":
case "status":
return (
<Th key={key} dataLabel={"Cluster"}>
{t("recently_viewed_topics.cluster")}
<Th key={key} dataLabel={"Status"}>
{t("recently_viewed_topics.topic_status")}
</Th>
);
}
Expand All @@ -46,10 +96,10 @@ export function TopicsTable({ topics }: TopicsTableProps) {
</Link>
</Td>
);
case "cluster":
case "status":
return (
<Td key={key} dataLabel={"Cluster"}>
<Link href={`/kafka/${row.kafkaId}`}>{row.kafkaName}</Link>
<Td key={key} dataLabel={"Status"}>
{StatusLabel[row.topicStatus!]}
</Td>
);
}
Expand Down
2 changes: 1 addition & 1 deletion ui/messages/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@
},
"recently_viewed_topics": {
"topic_name": "Name",
"cluster": "Cluster"
"topic_status": "Status"
}
},
"topic-creator": {
Expand Down
Loading