Skip to content

Commit

Permalink
Update branding
Browse files Browse the repository at this point in the history
Signed-off-by: Michael Edgar <[email protected]>
  • Loading branch information
MikeEdgar committed Apr 26, 2024
1 parent daae468 commit 28e223b
Show file tree
Hide file tree
Showing 12 changed files with 135 additions and 68 deletions.
2 changes: 1 addition & 1 deletion ui/app/[locale]/AppMasthead.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export function AppMasthead() {
<Link href={"/"} className={"pf-v5-c-masthead_brand"}>
<img
className={"pf-v5-c-brand"}
src={"/Logo-Red_Hat-AMQ-A-Reverse-RGB.svg"}
src={"/masthead-logo.svg"}
alt={t("common.title")}
style={{ height: 48 }}
/>
Expand Down
20 changes: 4 additions & 16 deletions ui/app/[locale]/ClusterConnectionDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -105,25 +105,13 @@ export async function ClusterConnectionDetails({
<Divider />
<Stack hasGutter={true} className={"pf-v5-u-p-lg"}>
<StackItem>
<ExternalLink
testId={"drawer-footer-help-1"}
href={
"https://access.redhat.com/documentation/en-us/red_hat_amq_streams/2.5/html/developing_kafka_client_applications/"
}
>
{t(
"ClusterConnectionDetails.developing_kafka_client_applications",
)}
<ExternalLink testId={"drawer-footer-help-1"} href={t("learning.links.connecting")}>
{t("ClusterConnectionDetails.developing_kafka_client_applications",)}
</ExternalLink>
</StackItem>
<StackItem>
<ExternalLink
testId={"drawer-footer-help-1"}
href={
"https://access.redhat.com/documentation/en-us/red_hat_amq/7.7/html-single/amq_streams_on_openshift_overview/index"
}
>
{t("ClusterConnectionDetails.amq_streams_portal")}
<ExternalLink testId={"drawer-footer-help-1"} href={t("learning.links.overview")}>
{t("ClusterConnectionDetails.streams_portal")}
</ExternalLink>
</StackItem>
</Stack>
Expand Down
54 changes: 15 additions & 39 deletions ui/app/[locale]/home/page.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { useTranslations } from "next-intl";
import { getConsumerGroups } from "@/api/consumerGroups/actions";
import { getKafkaCluster, getKafkaClusters } from "@/api/kafka/actions";
import { ClusterList } from "@/api/kafka/schema";
Expand Down Expand Up @@ -40,6 +41,7 @@ import { Suspense } from "react";
import styles from "./home.module.css";

export default function Home() {
const t = useTranslations();
const allClusters = getKafkaClusters();
return (
<>
Expand All @@ -48,10 +50,10 @@ export default function Home() {
<div>
<TextContent>
<Title headingLevel={"h1"} size={"2xl"}>
Welcome to the AMQ streams console
Welcome to the {t("common.product")} console
</Title>
<Text className={"pf-v5-u-color-200"}>
The Red Hat AMQ Streams console provides a user interface for
The {t("common.brand")} {t("common.product")} console provides a user interface for
managing and monitoring your streaming resources
</Text>
</TextContent>
Expand Down Expand Up @@ -90,15 +92,14 @@ export default function Home() {
Recently viewed topics{" "}
<Tooltip
content={
"When you start looking at specific topics through the AMQ Streams console, they'll start showing here."
`When you start looking at specific topics through the ${t("common.product")} console, they'll start showing here.`
}
>
<HelpIcon />
</Tooltip>
</b>
<Text component={"small"}>
The last 5 topics this account has accessed from the AMQ
Streams console.
The last 5 topics this account has accessed from the {t("common.product")} console.
</Text>
</TextContent>
}
Expand Down Expand Up @@ -164,7 +165,7 @@ export default function Home() {
dataListCells={[
<DataListCell key="gs-1-1" width={2}>
<span id="gs-1-1">
AMQ Streams on OpenShift Overview
{t("common.product")} on OpenShift Overview
</span>
</DataListCell>,
<DataListCell key="gs-1-2">
Expand All @@ -173,12 +174,7 @@ export default function Home() {
</Label>
</DataListCell>,
<DataListCell key="gs-1-3">
<ExternalLink
testId={"gs-1-3"}
href={
"https://access.redhat.com/documentation/en-us/red_hat_amq_streams/2.5/html/amq_streams_on_openshift_overview"
}
>
<ExternalLink testId={"gs-1-3"} href={t("learning.links.overview")}>
View documentation
</ExternalLink>
</DataListCell>,
Expand All @@ -192,7 +188,7 @@ export default function Home() {
dataListCells={[
<DataListCell key="gs-2-1" width={2}>
<span id="gs-2-1">
Getting Started with AMQ Streams on Openshift
Getting Started with {t("common.product")} on Openshift
</span>
</DataListCell>,
<DataListCell key="gs-2-2">
Expand All @@ -201,12 +197,7 @@ export default function Home() {
</Label>
</DataListCell>,
<DataListCell key="gs-2-3">
<ExternalLink
testId={"gs-2-3"}
href={
"https://access.redhat.com/documentation/en-us/red_hat_amq_streams/2.5/html/getting_started_with_amq_streams_on_openshift"
}
>
<ExternalLink testId={"gs-2-3"} href={t("learning.links.gettingStarted")}>
View documentation
</ExternalLink>
</DataListCell>,
Expand All @@ -229,12 +220,7 @@ export default function Home() {
</Label>
</DataListCell>,
<DataListCell key="gs-3-3">
<ExternalLink
testId={"gs-3-3"}
href={
"https://access.redhat.com/documentation/en-us/red_hat_amq_streams/2.5/html/developing_kafka_client_applications"
}
>
<ExternalLink testId={"gs-3-3"} href={t("learning.links.connecting")}>
View documentation
</ExternalLink>
</DataListCell>,
Expand All @@ -257,12 +243,7 @@ export default function Home() {
</Label>
</DataListCell>,
<DataListCell key="gs-4-3">
<ExternalLink
testId={"gs-4-3"}
href={
"https://access.redhat.com/documentation/en-us/red_hat_amq_streams/2.5/html/deploying_and_managing_amq_streams_on_openshift/using-the-topic-operator-str#doc-wrapper"
}
>
<ExternalLink testId={"gs-4-3"} href={t("learning.links.topicOperatorUse")}>
View documentation
</ExternalLink>
</DataListCell>,
Expand Down Expand Up @@ -342,24 +323,19 @@ async function ConnectedClustersTable({
}

async function RecentTopics() {
const t = useTranslations();
const viewedTopics = await getViewedTopics();
return viewedTopics.length > 0 ? (
<TopicsTable topics={viewedTopics} />
) : (
<EmptyState variant={"xs"}>
<EmptyStateHeader title={"No topics were viewed yet"} />
<EmptyStateBody>
When you start looking at specific topics through the AMQ Streams
console, they&quot;ll start showing here.
When you start looking at specific topics through the {t("common.product")} console, they&quot;ll start showing here.
</EmptyStateBody>
<EmptyStateFooter>
<EmptyStateActions className={"pf-v5-u-font-size-sm"}>
<ExternalLink
testId={"recent-topics-empty-state-link"}
href={
"https://access.redhat.com/documentation/en-us/red_hat_amq_streams/2.5/html-single/deploying_and_managing_amq_streams_on_openshift/index#ref-operator-topic-str"
}
>
<ExternalLink testId={"recent-topics-empty-state-link"} href={t("learning.links.topicOperatorUse")}>
Using the Topic Operator to manage Kafka topics
</ExternalLink>
</EmptyStateActions>
Expand Down
19 changes: 15 additions & 4 deletions ui/messages/en.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,20 @@
{
"common": {
"title": "Red Hat AMQ Streams console",
"description": "Red Hat AMQ is a lightweight, high-performance, robust messaging platform.",
"brand": "Red Hat",
"product": "Streams for Apache Kafka",
"title": "Red Hat Streams for Apache Kafka console",
"description": "Red Hat Streams for Apache Kafka is a lightweight, high-performance, robust messaging platform.",
"search_hint": "Filter by {label}"
},
"learning": {
"links": {
"overview": "https://access.redhat.com/documentation/en-us/red_hat_amq_streams/2.5/html/amq_streams_on_openshift_overview",
"gettingStarted": "https://access.redhat.com/documentation/en-us/red_hat_amq_streams/2.5/html/getting_started_with_amq_streams_on_openshift",
"connecting": "https://access.redhat.com/documentation/en-us/red_hat_amq_streams/2.5/html/developing_kafka_client_applications",
"topicOperatorUse": "https://access.redhat.com/documentation/en-us/red_hat_amq_streams/2.5/html/deploying_and_managing_amq_streams_on_openshift/using-the-topic-operator-str#doc-wrapper"

}
},
"RefreshButton": {
"refresh_button_label": "Refresh",
"refresh_description": "Reload contents",
Expand Down Expand Up @@ -158,7 +169,7 @@
},
"ManagedTopicLabel": {
"label": "Managed",
"tooltip": "Managed topics are created using the KafkaTopic custom resource and are created and updated in the Kafka cluster by the AMQ Streams Topic Operator."
"tooltip": "Managed topics are created using the KafkaTopic custom resource and are created and updated in the Kafka cluster by the Streams for Apache Kafka Topic Operator."
},
"AdvancedSearch": {
"dialog_label": "Search messages",
Expand Down Expand Up @@ -220,7 +231,7 @@
"internal_Servers_bootstraps_description": "Internal listeners provide client access to a Kafka cluster only from within the OpenShift cluster.",
"when_you_have_established_a_connection": "When you have established a connection, you can begin consuming messages from Kafka topics or producing messages to them.",
"developing_kafka_client_applications": "Developing Kafka client applications",
"amq_streams_portal": "AMQ Streams portal"
"streams_portal": "Streams for Apache Kafka portal"
},
"ClusterDrawer": {
"cluster_connection_details": "Cluster connection details"
Expand Down
1 change: 0 additions & 1 deletion ui/public/Logo-Red_Hat-AMQ-A-Reverse-RGB.svg

This file was deleted.

Binary file removed ui/public/logo.png
Binary file not shown.
93 changes: 93 additions & 0 deletions ui/public/masthead-logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed ui/public/strimzi-dark-picto.png
Binary file not shown.
Binary file removed ui/public/strimzi-dark.png
Binary file not shown.
Binary file removed ui/public/strimzi.png
Binary file not shown.
Loading

0 comments on commit 28e223b

Please sign in to comment.