@allurereport/web-awesome 3.0.0-beta.22 → 3.0.0-beta.24

package/dist/single/manifest.json

@@ -1,3 +1,3 @@
 {
-  "main.js": "app-0e422701ed9861ee2c14.js"
+  "main.js": "app-bfa8df3fad4158726f8e.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.0.0-beta.22",
+  "version": "3.0.0-beta.24",
   "description": "The static files for Allure Awesome Report",
   "keywords": [
     "allure",
@@ -31,11 +31,11 @@
     "IE 11"
   ],
   "dependencies": {
-    "@allurereport/charts-api": "3.0.0-beta.22",
-    "@allurereport/core-api": "3.0.0-beta.22",
-    "@allurereport/plugin-api": "3.0.0-beta.22",
-    "@allurereport/web-commons": "3.0.0-beta.22",
-    "@allurereport/web-components": "3.0.0-beta.22",
+    "@allurereport/charts-api": "3.0.0-beta.24",
+    "@allurereport/core-api": "3.0.0-beta.24",
+    "@allurereport/plugin-api": "3.0.0-beta.24",
+    "@allurereport/web-commons": "3.0.0-beta.24",
+    "@allurereport/web-components": "3.0.0-beta.24",
     "@preact/signals": "^1.3.0",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",

package/src/assets/scss/theme.scss

@@ -30,6 +30,7 @@
   --constant-on-border-heavy: var(--constant-on-border-heavy-day);
   --constant-on-icon-primary: var(--constant-on-icon-primary-day);
   --constant-on-text-primary: var(--constant-on-text-primary-day);
+  --constant-on-text-secondary: var(--gray-neutral-alpha-night-300);
   --on-border-control: var(--on-border-control-day);
   --on-border-heavy: var(--on-border-heavy-day);
   --on-border-medium: var(--on-border-medium-day);
@@ -59,73 +60,77 @@
   color-scheme: light;
 }
 
-:root[data-theme="dark"] {
-  --ad-other-focus: var(--ad-other-focus-night);
-  --ad-other-modal-overlay: var(--ad-other-modal-overlay-night);
-  --bg-alpha-capella-heavy: var(--bg-alpha-capella-heavy-night);
-  --bg-alpha-capella-medium: var(--bg-alpha-capella-medium-night);
-  --bg-alpha-capella: var(--bg-alpha-capella-night);
-  --bg-alpha-castor-heavy: var(--bg-alpha-castor-heavy-night);
-  --bg-base-modal: var(--bg-base-modal-night);
-  --bg-base-neutral: var(--bg-base-neutral-night);
-  --bg-base-primary: var(--bg-base-primary-night);
-  --bg-base-secondary: var(--bg-base-secondary-night);
-  --bg-control-flat-heavy: var(--bg-control-flat-heavy-night);
-  --bg-control-flat-medium: var(--bg-control-flat-medium-night);
-  --bg-control-flat: var(--bg-control-flat-night);
-  --bg-control-secondary-heavy: var(--bg-control-secondary-heavy-night);
-  --bg-control-secondary-medium: var(--bg-control-secondary-medium-night);
-  --bg-control-secondary: var(--bg-control-secondary-night);
-  --bg-support-aldebaran-heavy: var(--bg-support-aldebaran-heavy-night);
-  --bg-support-aldebaran-medium: var(--bg-support-aldebaran-medium-night);
-  --bg-support-aldebaran: var(--bg-support-aldebaran-night);
-  --bg-support-atlas-heavy: var(--bg-support-atlas-heavy-night);
-  --bg-support-atlas-medium: var(--bg-support-atlas-medium-night);
-  --bg-support-atlas: var(--bg-support-atlas-night);
-  --bg-support-capella-heavy: var(--bg-support-capella-heavy-night);
-  --bg-support-capella-medium: var(--bg-support-capella-medium-night);
-  --bg-support-capella: var(--bg-support-capella-night);
-  --bg-support-castor-heavy: var(--bg-support-castor-heavy-night);
-  --bg-support-castor-medium: var(--bg-support-castor-medium-night);
-  --bg-support-castor: var(--bg-support-castor-night);
-  --bg-support-rau: var(--bg-support-rau-night);
-  --bg-support-skat: var(--bg-support-skat-night);
-  --bg-support-sirius: var(--bg-support-sirius-night);
-  --constant-bg-base-modal: var(--constant-bg-base-modal-night);
-  --constant-bg-base-primary: var(--constant-bg-base-primary-night);
-  --constant-on-border-heavy: var(--constant-on-border-heavy-night);
-  --constant-on-icon-primary: var(--constant-on-icon-primary-night);
-  --constant-on-text-primary: var(--constant-on-text-primary-night);
-  --on-border-control: var(--on-border-control-night);
-  --on-border-heavy: var(--on-border-heavy-night);
-  --on-border-medium: var(--on-border-medium-night);
-  --on-border-muted: var(--on-border-muted-night);
-  --on-border-primary: var(--on-border-primary-night);
-  --on-icon-hint: var(--on-icon-hint-night);
-  --on-icon-primary: var(--on-icon-primary-night);
-  --on-icon-secondary: var(--on-icon-secondary-night);
-  --on-support-aldebaran-heavy: var(--on-support-aldebaran-heavy-night);
-  --on-support-aldebaran-medium: var(--on-support-aldebaran-medium-night);
-  --on-support-aldebaran: var(--on-support-aldebaran-night);
-  --on-support-atlas-heavy: var(--on-support-atlas-heavy-night);
-  --on-support-atlas-medium: var(--on-support-atlas-medium-night);
-  --on-support-atlas: var(--on-support-atlas-night);
-  --on-support-capella-heavy: var(--on-support-capella-heavy-night);
-  --on-support-capella-medium: var(--on-support-capella-medium-night);
-  --on-support-capella: var(--on-support-capella-night);
-  --on-support-castor-heavy: var(--on-support-castor-heavy-night);
-  --on-support-castor-medium: var(--on-support-castor-medium-night);
-  --on-support-castor: var(--on-support-castor-night);
-  --on-support-sirius: var(--on-support-sirius-night);
-  --on-text-hint: var(--on-text-hint-night);
-  --on-text-primary: var(--on-text-primary-night);
-  --on-text-secondary: var(--on-text-secondary-night);
-  --on-text-universal-primary: var(--on-text-universal-primary-night);
+@media (prefers-color-scheme: dark) {
+  :root[data-theme="auto"],
+  :root[data-theme="dark"] {
+    --ad-other-focus: var(--ad-other-focus-night);
+    --ad-other-modal-overlay: var(--ad-other-modal-overlay-night);
+    --bg-alpha-capella-heavy: var(--bg-alpha-capella-heavy-night);
+    --bg-alpha-capella-medium: var(--bg-alpha-capella-medium-night);
+    --bg-alpha-capella: var(--bg-alpha-capella-night);
+    --bg-alpha-castor-heavy: var(--bg-alpha-castor-heavy-night);
+    --bg-base-modal: var(--bg-base-modal-night);
+    --bg-base-neutral: var(--bg-base-neutral-night);
+    --bg-base-primary: var(--bg-base-primary-night);
+    --bg-base-secondary: var(--bg-base-secondary-night);
+    --bg-control-flat-heavy: var(--bg-control-flat-heavy-night);
+    --bg-control-flat-medium: var(--bg-control-flat-medium-night);
+    --bg-control-flat: var(--bg-control-flat-night);
+    --bg-control-secondary-heavy: var(--bg-control-secondary-heavy-night);
+    --bg-control-secondary-medium: var(--bg-control-secondary-medium-night);
+    --bg-control-secondary: var(--bg-control-secondary-night);
+    --bg-support-aldebaran-heavy: var(--bg-support-aldebaran-heavy-night);
+    --bg-support-aldebaran-medium: var(--bg-support-aldebaran-medium-night);
+    --bg-support-aldebaran: var(--bg-support-aldebaran-night);
+    --bg-support-atlas-heavy: var(--bg-support-atlas-heavy-night);
+    --bg-support-atlas-medium: var(--bg-support-atlas-medium-night);
+    --bg-support-atlas: var(--bg-support-atlas-night);
+    --bg-support-capella-heavy: var(--bg-support-capella-heavy-night);
+    --bg-support-capella-medium: var(--bg-support-capella-medium-night);
+    --bg-support-capella: var(--bg-support-capella-night);
+    --bg-support-castor-heavy: var(--bg-support-castor-heavy-night);
+    --bg-support-castor-medium: var(--bg-support-castor-medium-night);
+    --bg-support-castor: var(--bg-support-castor-night);
+    --bg-support-rau: var(--bg-support-rau-night);
+    --bg-support-skat: var(--bg-support-skat-night);
+    --bg-support-sirius: var(--bg-support-sirius-night);
+    --constant-bg-base-modal: var(--constant-bg-base-modal-night);
+    --constant-bg-base-primary: var(--constant-bg-base-primary-night);
+    --constant-on-border-heavy: var(--constant-on-border-heavy-night);
+    --constant-on-icon-primary: var(--constant-on-icon-primary-night);
+    --constant-on-text-primary: var(--constant-on-text-primary-night);
+    --constant-on-text-secondary: var(--gray-neutral-alpha-night-300);
+    --on-border-control: var(--on-border-control-night);
+    --on-border-heavy: var(--on-border-heavy-night);
+    --on-border-medium: var(--on-border-medium-night);
+    --on-border-muted: var(--on-border-muted-night);
+    --on-border-primary: var(--on-border-primary-night);
+    --on-icon-hint: var(--on-icon-hint-night);
+    --on-icon-primary: var(--on-icon-primary-night);
+    --on-icon-secondary: var(--on-icon-secondary-night);
+    --on-support-aldebaran-heavy: var(--on-support-aldebaran-heavy-night);
+    --on-support-aldebaran-medium: var(--on-support-aldebaran-medium-night);
+    --on-support-aldebaran: var(--on-support-aldebaran-night);
+    --on-support-atlas-heavy: var(--on-support-atlas-heavy-night);
+    --on-support-atlas-medium: var(--on-support-atlas-medium-night);
+    --on-support-atlas: var(--on-support-atlas-night);
+    --on-support-capella-heavy: var(--on-support-capella-heavy-night);
+    --on-support-capella-medium: var(--on-support-capella-medium-night);
+    --on-support-capella: var(--on-support-capella-night);
+    --on-support-castor-heavy: var(--on-support-castor-heavy-night);
+    --on-support-castor-medium: var(--on-support-castor-medium-night);
+    --on-support-castor: var(--on-support-castor-night);
+    --on-support-sirius: var(--on-support-sirius-night);
+    --on-text-hint: var(--on-text-hint-night);
+    --on-text-primary: var(--on-text-primary-night);
+    --on-text-secondary: var(--on-text-secondary-night);
+    --on-text-universal-primary: var(--on-text-universal-primary-night);
 
-  --scrollbar-color: var(--gray-400);
-  --bg-alpha-atlas: var(--atlas-night-darken-5-12);
-  --bg-alpha-rau: var(--rau-night-darken-5-12);
-  --bg-alpha-castor: var(--castor-night-darken-5-20);
-  --bg-alpha-skat: var(--skat-night-darken-5-12);
-  color-scheme: dark;
+    --scrollbar-color: var(--gray-400);
+    --bg-alpha-atlas: var(--atlas-night-darken-5-12);
+    --bg-alpha-rau: var(--rau-night-darken-5-12);
+    --bg-alpha-castor: var(--castor-night-darken-5-20);
+    --bg-alpha-skat: var(--skat-night-darken-5-12);
+    color-scheme: dark;
+  }
 }

package/src/components/Charts/index.tsx

@@ -1,21 +1,20 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-import { BarChartType, ChartType, FunnelChartType } from "@allurereport/charts-api";
-import { capitalize } from "@allurereport/core-api";
+import { BarChartType, ChartDataType, ChartType, FunnelChartType } from "@allurereport/charts-api";
+import { capitalize, statusesList } from "@allurereport/core-api";
 import { type UIChartData } from "@allurereport/web-commons";
 import {
   BarChartWidget,
   ComingSoonChartWidget,
+  CurrentStatusChartWidget,
   Grid,
   GridItem,
   HeatMapWidget,
   Loadable,
   PageLoader,
   StabilityRateDistributionWidget,
-  SuccessRatePieChart,
   TestingPyramidWidget,
   TreeMapChartWidget,
   TrendChartWidget,
-  Widget,
 } from "@allurereport/web-components";
 import { useEffect } from "preact/hooks";
 import { chartsStore, fetchChartsData } from "@/stores/chart";
@@ -31,12 +30,17 @@ const getChartWidgetByType = (
     case ChartType.Trend: {
       const type = t(`trend.type.${chartData.dataType}`);
       const title = chartData.title ?? t("trend.title", { type: capitalize(type) });
+      let isDataEmpty = false;
+
+      if (chartData.dataType === ChartDataType.Status) {
+        isDataEmpty = !chartData.slices.some((slice) => slice.min > 0 || slice.max > 0);
+      }
 
       return (
         <TrendChartWidget
           title={title}
           mode={chartData.mode}
-          items={chartData.items}
+          items={isDataEmpty ? [] : chartData.items}
           slices={chartData.slices}
           min={chartData.min}
           max={chartData.max}
@@ -44,22 +48,29 @@ const getChartWidgetByType = (
         />
       );
     }
-    case ChartType.Pie: {
-      const title = chartData.title ?? t("pie.title");
+    case ChartType.CurrentStatus: {
+      const title = chartData.title ?? t("currentStatus.title");
 
       return (
-        <Widget title={title}>
-          <div className={styles["overview-grid-item-pie-chart-wrapper"]}>
-            <div className={styles["overview-grid-item-pie-chart-wrapper-squeezer"]}>
-              <SuccessRatePieChart slices={chartData.slices} percentage={chartData.percentage} />
-            </div>
-          </div>
-        </Widget>
+        <CurrentStatusChartWidget
+          title={title}
+          data={chartData.data}
+          statuses={chartData.statuses}
+          metric={chartData.metric}
+          i18n={(key, props = {}) => t(`currentStatus.${key}`, props)}
+        />
       );
     }
     case ChartType.Bar: {
       const type = t(`bar.type.${chartData.dataType}`);
       const title = chartData.title ?? t("bar.title", { type: capitalize(type) });
+      /**
+       * A flag that indicates whether the chart data should be considered empty.
+       * For some chart types, simply checking the `data` array length is not sufficient,
+       * because additional logic may be needed to assess the presence of meaningful data.
+       * This flag ensures that specific conditions for data emptiness are handled per chart type.
+       */
+      let isDataEmpty = false;
 
       if (chartData.dataType === BarChartType.StabilityRateDistribution) {
         return (
@@ -80,11 +91,54 @@ const getChartWidgetByType = (
         );
       }
 
+      if (chartData.dataType === BarChartType.StatusChangeTrend) {
+        /*
+         * For StatusChangeTrend data:
+         * - The data consists of keys such as newPassed, newFailed, newBroken, newSkipped, etc., all with numeric values.
+         * - We must check if any of these metrics in any group are greater than 0.
+         * - If at least one statistic is greater than 0, we should display the chart.
+         */
+        isDataEmpty = !chartData.data.some((item) => chartData.keys.some((key) => (item[key] ?? 0) > 0));
+      }
+
+      if (chartData.dataType === BarChartType.StatusBySeverity) {
+        /*
+         * Data for this chart type consists of statistics where each group contains
+         * metrics such as passed, failed, broken, etc., represented as numbers.
+         * To determine if the chart should be displayed, we need to check if any of these
+         * metrics in any group is greater than 0. If at least one of the statistics is
+         * greater than 0, we display the chart; otherwise, we consider the data empty.
+         */
+        isDataEmpty = !chartData.data.some(
+          (item) => chartData.keys.includes(item.groupId) && statusesList.some((status) => (item[status] ?? 0) > 0),
+        );
+      }
+
+      if (chartData.dataType === BarChartType.StatusTrend) {
+        /*
+         * The data structure contains keys such as passed, failed, and broken, each associated with numeric values.
+         * To determine whether the chart should be displayed, we need to check if any value for these keys
+         * is greater than 0 in any of the data groups. If at least one of those metrics is greater than 0,
+         * the chart will be displayed; otherwise, it should be considered empty.
+         */
+        isDataEmpty = !chartData.data.some((item) => chartData.keys.some((key) => (item[key] ?? 0) > 0));
+      }
+
+      if (chartData.dataType === BarChartType.FbsuAgePyramid) {
+        /*
+         * For FbsuAgePyramid data:
+         * - Each group contains keys such as passed, failed, broken, etc., with numeric values.
+         * - To determine if the chart should be shown, check if any statistic in any group is greater than 0.
+         * - If at least one such statistic exists, display the chart; otherwise, consider the data empty.
+         */
+        isDataEmpty = !chartData.data.some((item) => chartData.keys.some((key) => (item[key] ?? 0) > 0));
+      }
+
       return (
         <BarChartWidget
           title={title}
           mode={chartData.mode}
-          data={chartData.data}
+          data={isDataEmpty ? [] : chartData.data}
           keys={chartData.keys}
           indexBy={chartData.indexBy}
           colors={chartData.colors}
@@ -124,10 +178,12 @@ const getChartWidgetByType = (
         return null;
       }
 
+      const isDataEmpty = !chartData.data.some((item) => item.testCount > 0);
+
       return (
         <TestingPyramidWidget
           title={chartData.title}
-          data={chartData.data}
+          data={isDataEmpty ? [] : chartData.data}
           translations={{ "no-results": empty("no-results") }}
         />
       );

package/src/components/Charts/styles.scss

@@ -14,16 +14,4 @@
 .overview-grid-item {
   padding: 4px;
   width: 100%;
-}
-
-.overview-grid-item-pie-chart-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-
-.overview-grid-item-pie-chart-wrapper-squeezer {
-  width: 50%;
-}
+}

package/src/components/SectionPicker/index.tsx

@@ -13,6 +13,7 @@ const defaultSection: SectionItem = { name: "report", logo: allureIcons.reportLo
 const sectionMap: Record<string, SectionItem> = {
   default: defaultSection,
   charts: { name: "charts", logo: allureIcons.lineChartsBarChartSquare },
+  timeline: { name: "timeline", logo: allureIcons.lineChartsTimeline },
 };
 
 export const SectionPicker = () => {

package/src/components/SectionSwitcher/index.tsx

@@ -2,12 +2,14 @@ import type { VNode } from "preact";
 import { Charts } from "@/components/Charts";
 import { Report } from "@/components/Report";
 import { currentSection } from "@/stores/sections";
+import { Timeline } from "../Timeline";
 import * as styles from "./styles.scss";
 
 export const SectionSwitcher = () => {
   const sectionMap: Record<string, VNode> = {
     report: <Report />,
     charts: <Charts />,
+    timeline: <Timeline />,
   };
 
   return <div className={styles.layout}>{sectionMap[currentSection.value] || sectionMap.report}</div>;

package/src/components/Timeline/index.tsx

@@ -0,0 +1,108 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+import type { TestResult } from "@allurereport/core-api";
+import { Timeline as AllureTimeline, Grid, GridItem, Loadable, PageLoader, Widget } from "@allurereport/web-components";
+import { computed } from "@preact/signals";
+import { useEffect, useMemo } from "preact/hooks";
+import { useI18n } from "@/stores";
+import { currentEnvironment } from "@/stores/env";
+import { fetchTimelineData, timelineStore } from "@/stores/timeline";
+import * as styles from "./styles.scss";
+
+const getHosts = (tests: TestResult[]) => [
+  ...new Set(tests.map((test) => test.labels.find((label) => label.name === "host")?.value).filter(Boolean)),
+];
+
+const filterTestsByHost = (tests: TestResult[], host: string) =>
+  tests.filter((test) => test.labels.find((label) => label.name === "host")?.value === host);
+
+const currentTimelineData = computed(() => {
+  if (!timelineStore.value.data) {
+    return [];
+  }
+
+  if (currentEnvironment.value) {
+    const testsToEnv = timelineStore.value.data.filter((test) => test.environment === currentEnvironment.value);
+    const hostsByEnv = getHosts(testsToEnv);
+
+    return hostsByEnv.map((host) => ({
+      data: filterTestsByHost(testsToEnv, host),
+      host,
+    }));
+  }
+
+  const hosts = getHosts(timelineStore.value.data);
+
+  return hosts.map((host) => ({
+    data: filterTestsByHost(timelineStore.value.data, host),
+    host,
+  }));
+});
+
+// Detects if the user prefers reduced motion to disable animations for accessibility
+const prefersLessMovement = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+export const Timeline = () => {
+  const { t } = useI18n("timeline");
+
+  useEffect(() => {
+    fetchTimelineData();
+  }, []);
+
+  const translations = useMemo(
+    () => ({
+      empty: t("empty"),
+      selected: (props: { count: number; percentage: string; minDuration: string; maxDuration: string }) =>
+        t("selected", {
+          count: props.count,
+          percentage: props.percentage,
+          minDuration: props.minDuration,
+          maxDuration: props.maxDuration,
+        }),
+    }),
+    [t],
+  );
+
+  return (
+    <Loadable
+      source={timelineStore}
+      renderLoader={() => <PageLoader />}
+      renderData={() => {
+        if (currentTimelineData.value.length === 0) {
+          return (
+            <div className={styles.overview}>
+              <Grid kind="swap" className={styles["overview-grid"]}>
+                <GridItem className={styles["overview-grid-item"]}>
+                  <Widget>
+                    <div className={styles.empty}>{t("empty")}</div>
+                  </Widget>
+                </GridItem>
+              </Grid>
+            </div>
+          );
+        }
+
+        return (
+          <div className={styles.overview}>
+            <Grid kind="swap" className={styles["overview-grid"]}>
+              {currentTimelineData.value.map(({ data, host }) => (
+                <GridItem key={host} className={styles["overview-grid-item"]}>
+                  <Widget title={t("host", { host })}>
+                    {data.length > 0 && (
+                      <AllureTimeline
+                        data={data}
+                        dataId={host}
+                        width={100}
+                        enableAnimations={!prefersLessMovement}
+                        translations={translations}
+                      />
+                    )}
+                    {data.length === 0 && <div className={styles.empty}>{t("empty_host", { host })}</div>}
+                  </Widget>
+                </GridItem>
+              ))}
+            </Grid>
+          </div>
+        );
+      }}
+    />
+  );
+};

package/src/components/Timeline/styles.scss

@@ -0,0 +1,45 @@
+.overview {
+  padding: 0 24px;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+
+  --timeline-font-family: var(--font-family);
+  --timeline-grid: var(--on-border-control);
+  --timeline-border-primary: var(--on-border-primary);
+  --timeline-axis-text: var(--on-text-secondary);
+  --timeline-bg: var(--bg-base-primary);
+  --timeline-selection-bg: var(--bg-control-flat-medium);
+}
+
+.overview-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.overview-grid-item {
+  padding: 4px;
+  width: 100%;
+}
+
+.overview-grid-item-pie-chart-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.overview-grid-item-pie-chart-wrapper-squeezer {
+  width: 50%;
+}
+
+.empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  min-height: 320px;
+  color: var(--on-text-hint);
+}

package/src/locales/az.json

@@ -162,7 +162,15 @@
   },
   "sections": {
     "report": "Report",
-    "charts": "Qrafiklər"
+    "charts": "Qrafiklər",
+    "timeline": "Zaman xətti"
+  },
+  "timeline": {
+    "empty": "Məlumat yoxdur",
+    "empty_host": "{{ host }} üçün məlumat yoxdur",
+    "selected_one": "{{ count }} test ({{ percentage }}%) {{ minDuration }}-dən çox və {{ maxDuration }}-dən az müddətlə seçildi",
+    "selected_other": "{{ count }} test ({{ percentage }}%) {{ minDuration }}-dən çox və {{ maxDuration }}-dən az müddətlə seçildi",
+    "host": "Host: {{ host }}"
   },
   "charts": {
     "trend": {
@@ -172,8 +180,29 @@
         "severity": "Ciddilik"
       }
     },
-    "pie": {
-      "title": "Test Uğur Dərəcəsi"
+    "currentStatus": {
+      "title": "Cari Status",
+      "status": {
+        "passed": "$t(statuses:passed, capitalize)",
+        "failed": "$t(statuses:failed, capitalize)",
+        "broken": "$t(statuses:broken, capitalize)",
+        "skipped": "$t(statuses:skipped, capitalize)",
+        "unknown": "$t(statuses:unknown, capitalize)"
+      },
+      "percentage": "{{percentage}}%",
+      "of": "{{total}} dən",
+      "total": "cəmi",
+      "tests": {
+        "new_zero": "Yeni test yoxdur",
+        "new_one": "{{count}} yeni test",
+        "new_other": "{{count}} yeni test",
+        "flaky_zero": "Qeyri-sabit test yoxdur",
+        "flaky_one": "{{count}} qeyri-sabit test",
+        "flaky_other": "{{count}} qeyri-sabit test",
+        "retries_zero": "Yenidən cəhd edilmiş test yoxdur",
+        "retries_one": "{{count}} yenidən cəhd edilmiş test",
+        "retries_other": "{{count}} yenidən cəhd edilmiş test"
+      }
     }
   },
   "transitions.description": {

package/src/locales/de.json

@@ -162,7 +162,15 @@
   },
   "sections": {
     "report": "Report",
-    "charts": "Graphen"
+    "charts": "Graphen",
+    "timeline": "Zeitleiste"
+  },
+  "timeline": {
+    "empty": "Keine Daten",
+    "empty_host": "Keine Daten für {{ host }}",
+    "selected_one": "{{ count }} Test ({{ percentage }}%) mit Dauer mehr als {{ minDuration }} und weniger als {{ maxDuration }} ausgewählt",
+    "selected_other": "{{ count }} Tests ({{ percentage }}%) mit Dauer mehr als {{ minDuration }} und weniger als {{ maxDuration }} ausgewählt",
+    "host": "Host: {{ host }}"
   },
   "charts": {
     "trend": {
@@ -172,8 +180,29 @@
         "severity": "Schweregrad"
       }
     },
-    "pie": {
-      "title": "Testerfolgsrate"
+    "currentStatus": {
+      "title": "Aktueller Status",
+      "status": {
+        "passed": "$t(statuses:passed, capitalize)",
+        "failed": "$t(statuses:failed, capitalize)",
+        "broken": "$t(statuses:broken, capitalize)",
+        "skipped": "$t(statuses:skipped, capitalize)",
+        "unknown": "$t(statuses:unknown, capitalize)"
+      },
+      "percentage": "{{percentage}}%",
+      "of": "von {{total}}",
+      "total": "gesamt",
+      "tests": {
+        "new_zero": "Keine neuen Tests",
+        "new_one": "{{count}} neuer Test",
+        "new_other": "{{count}} neue Tests",
+        "flaky_zero": "Keine instabilen Tests",
+        "flaky_one": "{{count}} instabiler Test",
+        "flaky_other": "{{count}} instabile Tests",
+        "retries_zero": "Keine wiederholten Tests",
+        "retries_one": "{{count}} wiederholter Test",
+        "retries_other": "{{count}} wiederholte Tests"
+      }
     }
   },
   "transitions.description": {