@allurereport/web-awesome 3.0.0-beta.8 → 3.0.0

package/src/components/Charts/index.tsx

@@ -0,0 +1,245 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+import { ChartType } from "@allurereport/charts-api";
+import { type UIChartData } from "@allurereport/web-commons";
+import {
+  CurrentStatusChartWidget,
+  DurationDynamicsChartWidget,
+  DurationsChartWidget,
+  FBSUAgePyramidChartWidget,
+  Grid,
+  GridItem,
+  HeatMapWidget,
+  Loadable,
+  PageLoader,
+  StabilityDistributionWidget,
+  StatusDynamicsChartWidget,
+  StatusTransitionsChartWidget,
+  TestBaseGrowthDynamicsChartWidget,
+  TestingPyramidWidget,
+  ThemeProvider,
+  TrSeveritiesChartWidget,
+  TreeMapChartWidget,
+} from "@allurereport/web-components";
+import { useEffect } from "preact/hooks";
+import { themeStore } from "@/stores";
+import { chartsStore, fetchChartsData } from "@/stores/chart";
+import { currentEnvironment } from "@/stores/env";
+import { useI18n } from "@/stores/locale";
+import * as styles from "./styles.scss";
+
+const getChartWidgetByType = (
+  chartData: UIChartData,
+  { t, empty }: Record<string, (key: string, options?: any) => string>,
+) => {
+  switch (chartData.type) {
+    case ChartType.CurrentStatus: {
+      const title = chartData.title ?? t("currentStatus.title");
+
+      return (
+        <CurrentStatusChartWidget
+          title={title}
+          data={chartData.data}
+          statuses={chartData.statuses}
+          metric={chartData.metric}
+          i18n={(key, props = {}) => t(`currentStatus.${key}`, props)}
+        />
+      );
+    }
+    case ChartType.StatusDynamics: {
+      const title = chartData.title ?? t("statusDynamics.title");
+
+      return (
+        <StatusDynamicsChartWidget
+          title={title}
+          data={chartData.data}
+          limit={chartData.limit}
+          statuses={chartData.statuses}
+          i18n={(key, props = {}) => t(`statusDynamics.${key}`, props)}
+        />
+      );
+    }
+    case ChartType.StatusTransitions: {
+      const title = chartData.title ?? t("statusTransitions.title");
+
+      return (
+        <StatusTransitionsChartWidget
+          title={title}
+          data={chartData.data}
+          i18n={(key, props = {}) => t(`statusTransitions.${key}`, props)}
+        />
+      );
+    }
+    case ChartType.Durations: {
+      const title =
+        chartData.title ??
+        (chartData.groupBy === "none"
+          ? t("durations.title_none")
+          : t("durations.title", { groupBy: chartData.groupBy }));
+
+      return (
+        <DurationsChartWidget
+          title={title}
+          data={chartData.data}
+          groupBy={chartData.groupBy}
+          keys={chartData.keys}
+          i18n={(key, props = {}) => t(`durations.${key}`, props)}
+        />
+      );
+    }
+    case ChartType.StabilityDistribution: {
+      const title = chartData.title ?? t("stabilityDistribution.title");
+
+      return (
+        <StabilityDistributionWidget
+          title={title}
+          data={chartData.data}
+          keys={chartData.keys}
+          i18n={(key, props = {}) => t(`stabilityDistribution.${key}`, props)}
+        />
+      );
+    }
+    case ChartType.TestBaseGrowthDynamics: {
+      const title = chartData.title ?? t("testBaseGrowthDynamics.title");
+
+      return (
+        <TestBaseGrowthDynamicsChartWidget
+          title={title}
+          data={chartData.data}
+          statuses={chartData.statuses}
+          i18n={(key, props = {}) => t(`testBaseGrowthDynamics.${key}`, props)}
+        />
+      );
+    }
+    case ChartType.FBSUAgePyramid: {
+      const title = chartData.title ?? t("fbsuAgePyramid.title");
+
+      return (
+        <FBSUAgePyramidChartWidget
+          title={title}
+          data={chartData.data}
+          statuses={chartData.statuses}
+          i18n={(key, props = {}) => t(`fbsuAgePyramid.${key}`, props)}
+        />
+      );
+    }
+    case ChartType.TrSeverities: {
+      const title = chartData.title ?? t("trSeverities.title");
+
+      return (
+        <TrSeveritiesChartWidget
+          title={title}
+          data={chartData.data}
+          levels={chartData.levels}
+          statuses={chartData.statuses}
+          i18n={(key, props = {}) => t(`trSeverities.${key}`, props)}
+        />
+      );
+    }
+    case ChartType.DurationDynamics: {
+      const title = chartData.title ?? t("durationDynamics.title");
+
+      return (
+        <DurationDynamicsChartWidget
+          title={title}
+          data={chartData.data}
+          i18n={(key, props = {}) => t(`durationDynamics.${key}`, props)}
+        />
+      );
+    }
+    case ChartType.CoverageDiff: {
+      return (
+        <TreeMapChartWidget
+          data={chartData.treeMap}
+          chartType={ChartType.CoverageDiff}
+          title={chartData.title}
+          formatLegend={chartData.formatLegend}
+          colors={chartData.colors}
+          legendDomain={chartData.legendDomain}
+          tooltipRows={chartData.tooltipRows}
+          translations={{ "no-results": empty("no-results") }}
+        />
+      );
+    }
+
+    case ChartType.SuccessRateDistribution: {
+      return (
+        <TreeMapChartWidget
+          chartType={ChartType.SuccessRateDistribution}
+          data={chartData.treeMap}
+          title={chartData.title}
+          formatLegend={chartData.formatLegend}
+          colors={chartData.colors}
+          legendDomain={chartData.legendDomain}
+          tooltipRows={chartData.tooltipRows}
+          translations={{ "no-results": empty("no-results") }}
+        />
+      );
+    }
+    case ChartType.ProblemsDistribution: {
+      return (
+        <HeatMapWidget
+          title={chartData.title}
+          data={chartData.data}
+          translations={{ "no-results": empty("no-results") }}
+        />
+      );
+    }
+    case ChartType.TestingPyramid: {
+      const isDataEmpty = !chartData.data.some((item) => item.testCount > 0);
+
+      return (
+        <TestingPyramidWidget
+          title={chartData.title}
+          data={isDataEmpty ? [] : chartData.data}
+          translations={{ "no-results": empty("no-results") }}
+        />
+      );
+    }
+    default: {
+      return null;
+    }
+  }
+};
+
+export const Charts = () => {
+  const { t } = useI18n("charts");
+  const { t: empty } = useI18n("empty");
+
+  useEffect(() => {
+    fetchChartsData();
+  }, []);
+
+  return (
+    <ThemeProvider theme={themeStore.value}>
+      <Loadable
+        source={chartsStore}
+        renderLoader={() => <PageLoader />}
+        renderData={(data) => {
+          const currentChartsData = currentEnvironment.value ? data.byEnv[currentEnvironment.value] : data.general;
+
+          if (!currentChartsData) {
+            return null;
+          }
+
+          const charts = Object.entries(currentChartsData).map(([chartId, value]) => {
+            const chartWidget = getChartWidgetByType(value, { t, empty });
+
+            return (
+              <GridItem key={chartId} className={styles["overview-grid-item"]}>
+                {chartWidget}
+              </GridItem>
+            );
+          });
+
+          return (
+            <div className={styles.overview}>
+              <Grid kind="swap" className={styles["overview-grid"]}>
+                {charts}
+              </Grid>
+            </div>
+          );
+        }}
+      />
+    </ThemeProvider>
+  );
+};

package/src/components/Charts/styles.scss

@@ -0,0 +1,27 @@
+.overview {
+  padding: 0 24px;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.overview-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: 1fr;
+
+  @media (min-width: 1024px) {
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(50% - 12px)), 1fr));
+  }
+}
+
+.overview-grid-item {
+  padding: 4px;
+  width: 100%;
+  box-shadow: var(--shadow-small);
+
+  & *[data-drop-shadow="true"] {
+    box-shadow: none;
+  }
+}

package/src/components/EnvironmentPicker/index.tsx

@@ -0,0 +1,60 @@
+import { DropdownButton, Menu, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import { useI18n } from "@/stores";
+import { currentEnvironment, environmentsStore, setCurrentEnvironment } from "@/stores/env";
+import * as styles from "./styles.scss";
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+export const EnvironmentPicker = () => {
+  const { t } = useI18n("environments");
+  const environment = currentEnvironment.value;
+  const handleSelect = (selectedOption: string) => {
+    setCurrentEnvironment(selectedOption);
+  };
+
+  // TODO: use props instead
+  if (environmentsStore.value.data.length <= 1) {
+    return null;
+  }
+
+  return (
+    <div className={styles["environment-picker"]} data-testid={"environment-picker"}>
+      <SvgIcon id={allureIcons.environment} size={"s"} />
+      <Text className={styles["environment-picker-label"]} type={"ui"} size={"s"} bold>
+        {t("environment", { count: 1 })}:
+      </Text>
+      <Menu
+        size="s"
+        menuTrigger={({ isOpened, onClick }) => (
+          <DropdownButton
+            style="ghost"
+            size="s"
+            text={environment || t("all")}
+            isExpanded={isOpened}
+            data-testid={"environment-picker-button"}
+            onClick={onClick}
+          />
+        )}
+      >
+        <Menu.Section>
+          <Menu.ItemWithCheckmark
+            data-testid={"environment-picker-item"}
+            onClick={() => handleSelect("")}
+            isChecked={!environment}
+          >
+            {t("all")}
+          </Menu.ItemWithCheckmark>
+          {environmentsStore.value.data.map((env) => (
+            <Menu.ItemWithCheckmark
+              data-testid={"environment-picker-item"}
+              onClick={() => handleSelect(env)}
+              key={env}
+              isChecked={env === environment}
+            >
+              {env}
+            </Menu.ItemWithCheckmark>
+          ))}
+        </Menu.Section>
+      </Menu>
+    </div>
+  );
+};

package/src/components/EnvironmentPicker/styles.scss

@@ -0,0 +1,9 @@
+.environment-picker {
+  display: flex;
+  align-items: center;
+  gap: 0 4px;
+}
+
+.environment-picker-label {
+  text-transform: capitalize;
+}

package/src/components/Footer/FooterLogo.tsx

@@ -1,5 +1,4 @@
-import { Text } from "@allurereport/web-components";
-import { ReportLogoFull } from "../ReportLogoFull";
+import { ReportLogoFull, Text } from "@allurereport/web-components";
 import * as styles from "./styles.scss";
 
 export const FooterLogo = () => {

package/src/components/Footer/FooterVersion.tsx

@@ -1,18 +1,22 @@
 import { getReportOptions } from "@allurereport/web-commons";
 import { Text } from "@allurereport/web-components";
 import { useEffect, useState } from "preact/hooks";
-import type { AllureAwesomeReportOptions } from "types";
+import type { AwesomeReportOptions } from "types";
 import { currentLocaleIso } from "@/stores";
 import * as styles from "./styles.scss";
 
 export const FooterVersion = () => {
   const [createdAt, setCreatedAt] = useState<number | null>(null);
+  const [currentVersion, setCurrentVersion] = useState<string>();
 
   useEffect(() => {
-    const reportOptions = getReportOptions<AllureAwesomeReportOptions>();
+    const reportOptions = getReportOptions<AwesomeReportOptions>();
     if (reportOptions?.createdAt) {
       setCreatedAt(Number(reportOptions.createdAt));
     }
+    if (reportOptions?.allureVersion) {
+      setCurrentVersion(reportOptions.allureVersion as string);
+    }
   }, []);
 
   const formattedCreatedAt = new Date(createdAt as number).toLocaleDateString(currentLocaleIso.value as string, {
@@ -27,7 +31,7 @@ export const FooterVersion = () => {
   return (
     <Text type="paragraph" size="m" className={styles.version}>
       {formattedCreatedAt}
-      <span> Ver: 3.0.0</span>
+      {currentVersion && <span> Ver: {currentVersion}</span>}
     </Text>
   );
 };

package/src/components/Footer/index.tsx

@@ -1,11 +1,15 @@
+import type { ClassValue } from "clsx";
 import { clsx } from "clsx";
 import * as styles from "@/components/BaseLayout/styles.scss";
 import { FooterLogo } from "@/components/Footer/FooterLogo";
 import { FooterVersion } from "@/components/Footer/FooterVersion";
 
-export const Footer = () => {
+interface FooterProps {
+  className?: ClassValue;
+}
+export const Footer = ({ className }: FooterProps) => {
   return (
-    <div className={clsx(styles.below)}>
+    <div className={clsx(styles.below, className)}>
       <FooterLogo />
       <FooterVersion />
     </div>

package/src/components/Header/CiInfo/index.tsx

@@ -0,0 +1,67 @@
+import { CiDescriptor, CiType } from "@allurereport/core-api";
+import { getReportOptions } from "@allurereport/web-commons";
+import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import type { ClassValue } from "clsx";
+import clsx from "clsx";
+import type { AwesomeReportOptions } from "../../../../types";
+import * as styles from "./styles.scss";
+
+interface CiInfoProps {
+  className?: ClassValue;
+}
+
+interface CiIconProps {
+  type: CiDescriptor["type"];
+}
+
+export const CiIcon = ({ type }: CiIconProps) => {
+  const iconCommonProps = {
+    width: 16,
+    height: 16,
+  };
+
+  switch (type) {
+    case CiType.Amazon:
+      return <SvgIcon id={allureIcons.amazon} {...iconCommonProps} />;
+    case CiType.Azure:
+      return <SvgIcon id={allureIcons.azure} {...iconCommonProps} />;
+    case CiType.Bitbucket:
+      return <SvgIcon id={allureIcons.bitbucket} {...iconCommonProps} />;
+    case CiType.Circle:
+      return <SvgIcon id={allureIcons.circleci} {...iconCommonProps} />;
+    case CiType.Drone:
+      return <SvgIcon id={allureIcons.drone} {...iconCommonProps} />;
+    case CiType.Github:
+      return <SvgIcon id={allureIcons.github} {...iconCommonProps} />;
+    case CiType.Gitlab:
+      return <SvgIcon id={allureIcons.gitlab} {...iconCommonProps} />;
+    case CiType.Jenkins:
+      return <SvgIcon id={allureIcons.jenkins} {...iconCommonProps} />;
+    default:
+      return null;
+  }
+};
+
+export const CiInfo = ({ className }: CiInfoProps) => {
+  const { ci } = getReportOptions<AwesomeReportOptions>();
+
+  if (!ci) {
+    return null;
+  }
+
+  const link = ci.pullRequestUrl || ci.jobRunUrl || ci.jobUrl;
+  const label = ci.pullRequestName || ci.jobRunName || ci.jobName || link;
+
+  if (!link) {
+    return null;
+  }
+
+  return (
+    <a className={clsx(styles["ci-info"], className)} href={link} target="_blank">
+      <CiIcon type={ci.type} />
+      <Text type={"paragraph"} size={"m"} bold>
+        {label}
+      </Text>
+    </a>
+  );
+};

package/src/components/Header/CiInfo/styles.scss

@@ -0,0 +1,7 @@
+.ci-info {
+  display: flex;
+  align-items: center;
+  gap: 0 6px;
+  color: var(--on-text-secondary);
+  text-decoration: none;
+}

package/src/components/Header/index.tsx

@@ -1,14 +1,27 @@
-import { LanguagePicker } from "@/components/LanguagePicker";
-import { ThemeButton } from "@/components/ThemeButton/ThemeButton";
+import type { ClassValue } from "clsx";
+import clsx from "clsx";
+import { HeaderControls } from "@/components/HeaderControls";
+import { SectionPicker } from "@/components/SectionPicker";
+import { TrBreadcrumbs } from "@/components/TestResult/TrHeader/TrBreadcrumbs";
+import { route } from "@/stores/router";
+import { availableSections } from "@/stores/sections";
+import { testResultStore } from "@/stores/testResults";
+import { CiInfo } from "./CiInfo";
 import * as styles from "./styles.scss";
 
-export const Header = () => {
+interface HeaderProps {
+  className?: ClassValue;
+}
+
+export const Header = ({ className }: HeaderProps) => {
+  const testResultId = route.value.params?.testResultId;
+
   return (
-    <div className={styles.above}>
-      <div className={styles.right}>
-        <LanguagePicker />
-        <ThemeButton />
-      </div>
+    <div className={clsx(styles.above, className)}>
+      {Boolean(availableSections.value?.length) && <SectionPicker />}
+      {!testResultId && <CiInfo />}
+      {testResultId && <TrBreadcrumbs testResult={testResultStore.value?.data?.[testResultId]} />}
+      <HeaderControls className={styles.right} />
     </div>
   );
 };

package/src/components/Header/styles.scss

@@ -5,6 +5,7 @@
   justify-content: space-between;
   align-items: center;
   gap: 12px;
+  padding: 8px 24px 12px;
 }
 
 .logoWrapper {
@@ -18,9 +19,16 @@
   top: -2px;
 }
 
+.left {
+  margin-right: auto;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
 .right {
   margin-left: auto;
   display: flex;
-  gap: 12px;
+  gap: 4px;
   align-items: center;
 }

package/src/components/HeaderControls/index.tsx

@@ -0,0 +1,20 @@
+import { LanguagePicker, ThemeButton } from "@allurereport/web-components";
+import { EnvironmentPicker } from "@/components/EnvironmentPicker";
+import ToggleLayout from "@/components/ToggleLayout";
+import { currentLocale, setLocale } from "@/stores/locale";
+import { getTheme, themeStore, toggleTheme } from "@/stores/theme";
+
+interface HeaderControlsProps {
+  className?: string;
+}
+
+export const HeaderControls = ({ className }: HeaderControlsProps) => {
+  return (
+    <div className={className}>
+      <EnvironmentPicker />
+      <LanguagePicker locale={currentLocale.value} setLocale={setLocale} />
+      <ToggleLayout />
+      <ThemeButton theme={themeStore.value} toggleTheme={toggleTheme} getTheme={getTheme} />
+    </div>
+  );
+};

package/src/components/MainReport/index.tsx

@@ -1,17 +1,95 @@
-import * as styles from "@/components/BaseLayout/styles.scss";
-import { Header } from "@/components/Header";
+import { Counter, Loadable } from "@allurereport/web-components";
+import clsx from "clsx";
+import { NavTab, NavTabs, NavTabsList, useNavTabsContext } from "@/components/NavTabs";
 import { ReportBody } from "@/components/ReportBody";
+import { ReportGlobalAttachments } from "@/components/ReportGlobalAttachments";
+import { ReportGlobalErrors } from "@/components/ReportGlobalErrors";
 import { ReportHeader } from "@/components/ReportHeader";
 import { ReportMetadata } from "@/components/ReportMetadata";
+import { reportStatsStore } from "@/stores";
+import { useI18n } from "@/stores";
+import { globalsStore } from "@/stores/globals";
+import { isSplitMode } from "@/stores/layout";
+import { qualityGateStore } from "@/stores/qualityGate";
+import { ReportQualityGateResults } from "../ReportQualityGateResults";
+import * as styles from "./styles.scss";
+
+enum ReportRootTab {
+  Results = "results",
+  QualityGate = "qualityGate",
+  GlobalAttachments = "globalAttachments",
+  GlobalErrors = "globalErrors",
+}
+
+const viewsByTab = {
+  [ReportRootTab.Results]: () => (
+    <>
+      <ReportMetadata />
+      <ReportBody />
+    </>
+  ),
+  [ReportRootTab.GlobalAttachments]: () => <ReportGlobalAttachments />,
+  [ReportRootTab.GlobalErrors]: () => <ReportGlobalErrors />,
+  [ReportRootTab.QualityGate]: () => <ReportQualityGateResults />,
+};
+
+const MainReportContent = () => {
+  const { currentTab } = useNavTabsContext();
+  const tab = (currentTab as ReportRootTab) || ReportRootTab.Results;
+  const Content = viewsByTab[tab];
+
+  return <Content />;
+};
 
 const MainReport = () => {
+  const { t } = useI18n("tabs");
+
   return (
     <>
-      <Header />
-      <div className={styles.content}>
+      <div className={clsx(styles.content, isSplitMode.value ? styles["scroll-inside"] : "")}>
         <ReportHeader />
-        <ReportMetadata />
-        <ReportBody />
+        <div className={styles["main-report-tabs"]}>
+          <NavTabs initialTab={ReportRootTab.Results}>
+            <NavTabsList>
+              <Loadable
+                source={reportStatsStore}
+                renderData={(stats) => (
+                  <NavTab id={ReportRootTab.Results}>
+                    {t("results")} <Counter count={stats?.total ?? 0} />
+                  </NavTab>
+                )}
+              />
+              <Loadable
+                source={qualityGateStore}
+                renderData={(results) => (
+                  <>
+                    <NavTab id={ReportRootTab.QualityGate}>
+                      {t("qualityGates")}{" "}
+                      <Counter status={results.length > 0 ? "failed" : undefined} count={results.length} />
+                    </NavTab>
+                  </>
+                )}
+              />
+              <Loadable
+                source={globalsStore}
+                renderData={({ attachments = [], errors = [] }) => (
+                  <>
+                    <NavTab id={ReportRootTab.GlobalAttachments}>
+                      {t("globalAttachments")} <Counter count={attachments.length} />
+                    </NavTab>
+                    <NavTab id={ReportRootTab.GlobalErrors}>
+                      {t("globalErrors")}{" "}
+                      <Counter status={errors.length > 0 ? "failed" : undefined} count={errors.length} />
+                    </NavTab>
+                  </>
+                )}
+              />
+            </NavTabsList>
+            <div className={styles["main-report-tabs-content"]}>
+              <MainReportContent />
+            </div>
+          </NavTabs>
+        </div>
       </div>
     </>
   );

package/src/components/MainReport/styles.scss

@@ -0,0 +1,20 @@
+.content {
+  box-shadow: var(--shadow-small);
+  background: var(--bg-base-primary);
+  border-radius: 12px;
+  width: 100%;
+}
+
+.scroll-inside {
+  overflow: auto;
+  height: 100%;
+  border-radius: 0;
+}
+
+.main-report-tabs {
+  padding: 0 24px;
+}
+
+.main-report-tabs-content {
+  border-top: 1px solid var(--on-border-primary);
+}