Skip to content

(CODUX-226) Translate the Overview dashboard #3091

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

Merged
numnx merged 3 commits into from
Jul 14, 2026
Merged

(CODUX-226) Translate the Overview dashboard #3091

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2376a1d
feat(task T09): implement via codex
Jul 14, 2026
70a0b48
fix(task T09): address qa review via codex
Jul 14, 2026
59bb1ab
fix(merge): resolve feature/CODUX-226-dashboard-internationalization-…
Jul 14, 2026
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
29 changes: 16 additions & 13 deletions dashboard/src/v2/DashboardV2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,16 @@ import { PageHeader } from "./components/layout/PageHeader.js";
import { Hexagon } from "lucide-preact";

import { SectionDivider } from "./components/ui/SectionDivider.js";
import { useDashboardI18n } from "./i18n/index.js";
import { overviewMessages } from "./i18n/messages/overview.js";

const OverviewTelemetry = lazy(() => import("./components/OverviewTelemetry.js").then(m => ({ default: m.OverviewTelemetry })));

export const DashboardV2: FunctionComponent = () => {
const mainContentRef = useRef<HTMLElement>(null);
const pageData = useOverviewPageData();
const prefersReducedMotion = useReducedMotion();
const { translate } = useDashboardI18n();

useLayoutEffect(() => {
const ctx = gsap.context(() => {
Expand All @@ -39,48 +42,48 @@ export const DashboardV2: FunctionComponent = () => {
}, [prefersReducedMotion]);

return (
<PageContainer containerRef={mainContentRef} padding="overview" className="gap-12 md:gap-24" aria-label="Dashboard Overview" data-route-page="overview">
<div className="sr-only" role="status" aria-live="polite">Overview route loaded</div>
<PageContainer containerRef={mainContentRef} padding="overview" className="gap-12 md:gap-24" aria-label={translate(overviewMessages, "routeLabel")} data-route-page="overview">
<div className="sr-only" role="status" aria-live="polite">{translate(overviewMessages, "routeLoaded")}</div>
{/* Page Header */}
<PageHeader
icon={Hexagon}
eyebrow="Mission Control"
title="Overview"
subtitle="Real-time metrics and operational intelligence across your cluster."
eyebrow={translate(overviewMessages, "eyebrow")}
title={translate(overviewMessages, "title")}
subtitle={translate(overviewMessages, "subtitle")}
actions={
<div role="status" aria-live="polite" aria-label="Status: Cluster Optimal" className="px-4 md:px-5 py-2 md:py-2.5 text-[10px] md:text-xs font-bold uppercase tracking-[0.14em] rounded-full bg-signal-500/8 dark:bg-signal-500/10 text-signal-600 dark:text-signal-400 border border-signal-500/15 dark:border-signal-500/20 flex items-center gap-2.5 shadow-[0_0_20px_rgba(0,224,160,0.08)] backdrop-blur-md">
<div role="status" aria-live="polite" aria-label={translate(overviewMessages, "clusterOptimalStatus")} className="px-4 md:px-5 py-2 md:py-2.5 text-[10px] md:text-xs font-bold uppercase tracking-[0.14em] rounded-full bg-signal-500/8 dark:bg-signal-500/10 text-signal-600 dark:text-signal-400 border border-signal-500/15 dark:border-signal-500/20 flex items-center gap-2.5 shadow-[0_0_20px_rgba(0,224,160,0.08)] backdrop-blur-md">
<span aria-hidden="true" className="w-2 h-2 rounded-full bg-signal-500 relative">
<span className="absolute inset-0 rounded-full animate-ping bg-signal-400 opacity-60 motion-reduce:animate-none" />
</span>
Cluster Optimal
{translate(overviewMessages, "clusterOptimal")}
</div>
}
/>

{/* Metrics Section */}
<section aria-label="Metrics" className="w-full relative z-20">
<section aria-label={translate(overviewMessages, "metrics")} className="w-full relative z-20">
<HeaderStats pageData={pageData} />
</section>

{/* Section Divider */}
<SectionDivider label="Data Streams" />
<SectionDivider label={translate(overviewMessages, "dataStreams")} />

{/* Main Grid */}
<div className="grid grid-cols-1 xl:grid-cols-12 gap-12 md:gap-24 flex-grow relative z-20">
{/* Sources and Tasks */}
<div className="xl:col-span-8 flex flex-col gap-16">
<section aria-label="Sources" className="w-full relative">
<section aria-label={translate(overviewMessages, "sources")} className="w-full relative">
<SourcesGrid />
</section>

<section aria-label="Tasks" className="w-full relative">
<section aria-label={translate(overviewMessages, "tasks")} className="w-full relative">
<TasksList pageData={pageData} />
</section>
</div>

{/* Live Telemetry */}
<aside aria-label="Live Telemetry" className="xl:col-span-4 h-full relative order-last xl:order-none mt-12 xl:mt-0">
<Suspense fallback={<SkeletonPanel />}>
<aside aria-label={translate(overviewMessages, "liveTelemetry")} className="xl:col-span-4 h-full relative order-last xl:order-none mt-12 xl:mt-0">
<Suspense fallback={<div role="status" aria-live="polite" aria-label={translate(overviewMessages, "loadingTelemetryPanel")}><SkeletonPanel /></div>}>
<OverviewTelemetry />
</Suspense>
</aside>
Expand Down
Loading
Loading