Switch to criticality in Metrics report

src/components/Dashboard/NewReport/Chart/ServiceTile/TooltipKeyValue/styles.ts

@@ -10,5 +10,6 @@ export const Container = styled.div`
 `;
 
 export const Label = styled.span`
+  text-transform: capitalize;
   color: ${({ theme }) => theme.colors.v3.text.secondary};
 `;

src/components/Dashboard/NewReport/Chart/ServiceTile/index.tsx

@@ -10,7 +10,8 @@ const getFormattedNumber = (viewMode: ReportTimeMode, value: number) =>
 export const ServiceTile = ({
   name,
   criticalIssuesCount,
-  impactScore,
+  scoreCriterion,
+  score,
   severity,
   viewMode,
   onIssuesClick: onSeeIssuesClick
@@ -19,7 +20,7 @@ export const ServiceTile = ({
     viewMode,
     criticalIssuesCount
   );
-  const formattedImpactScore = getFormattedNumber(viewMode, impactScore);
+  const formattedScore = getFormattedNumber(viewMode, score);
 
   return (
     <Tile
@@ -28,18 +29,18 @@ export const ServiceTile = ({
       tooltip={
         <s.TooltipContent>
           <span>{name}</span>
-          <TooltipKeyValue label={"Critical Issues"}>
+          <TooltipKeyValue label={"Critical issues"}>
             {formattedCriticalIssuesCount}
           </TooltipKeyValue>
-          <TooltipKeyValue label={"Impact Score"}>
-            {formattedImpactScore}
+          <TooltipKeyValue label={`${scoreCriterion} score`}>
+            {formattedScore}
           </TooltipKeyValue>
         </s.TooltipContent>
       }
     >
       <s.StyledLink onClick={() => onSeeIssuesClick && onSeeIssuesClick(name)}>
         <span>
-          {formattedCriticalIssuesCount} | {formattedImpactScore}
+          {formattedCriticalIssuesCount} | {formattedScore}
         </span>
       </s.StyledLink>
     </Tile>

src/components/Dashboard/NewReport/Chart/ServiceTile/types.ts

@@ -1,10 +1,12 @@
 import { Severity } from "../../MetricsTable/types";
 import { ReportTimeMode } from "../../ReportHeader/types";
+import { ScoreCriterion } from "../../types";
 
 export interface ServiceTileProps {
   name: string;
   criticalIssuesCount: number;
-  impactScore: number;
+  scoreCriterion: ScoreCriterion;
+  score: number;
   severity: Severity;
   viewMode: ReportTimeMode;
   onIssuesClick?: (service: string) => void;

src/components/Dashboard/NewReport/Chart/index.tsx

@@ -11,7 +11,11 @@ import { ServiceTile } from "./ServiceTile";
 import * as s from "./styles";
 import { ChartProps } from "./types";
 
-export const Chart = ({ data, onServiceSelected }: ChartProps) => {
+export const Chart = ({
+  data,
+  onServiceSelected,
+  scoreCriterion
+}: ChartProps) => {
   const { width, height, observe } = useDimensions();
 
   const viewMode: ReportTimeMode = data.some((service) =>
@@ -20,34 +24,27 @@ export const Chart = ({ data, onServiceSelected }: ChartProps) => {
     ? "changes"
     : "baseline";
 
-  const transformedData = data.map((service) => ({
-    ...service,
-    impact: Math.round(service.impact * 100)
-  }));
-
   const handSeeIssuesClick = (service: string) => {
     sendUserActionTrackingEvent(trackingEvents.HEATMAP_SEE_ISSUES_LINK_CLICKED);
     onServiceSelected(service);
   };
 
-  const minImpactScore = Math.min(...transformedData.map((x) => x.impact));
-  const maxImpactScore = Math.max(...transformedData.map((x) => x.impact));
+  const minScore = Math.min(...data.map((x) => x[scoreCriterion]));
+  const maxScore = Math.max(...data.map((x) => x[scoreCriterion]));
 
-  const chartData: Input<TileData>[] = transformedData.map((service) => {
-    const severity = getSeverity(
-      minImpactScore,
-      maxImpactScore,
-      service.impact
-    );
+  const chartData: Input<TileData>[] = data.map((service) => {
+    const score = service[scoreCriterion];
+    const severity = getSeverity(minScore, maxScore, score);
 
     return {
       id: service.key.service,
-      value: service.impact,
+      value: service[scoreCriterion],
       content: (
         <ServiceTile
           name={service.key.service}
           criticalIssuesCount={service.issues}
-          impactScore={service.impact}
+          scoreCriterion={scoreCriterion}
+          score={score}
           severity={severity}
           viewMode={viewMode}
           onIssuesClick={handSeeIssuesClick}

src/components/Dashboard/NewReport/Chart/types.ts

@@ -1,6 +1,7 @@
-import { ServiceData } from "../types";
+import { ScoreCriterion, ServiceData } from "../types";
 
 export interface ChartProps {
   data: ServiceData[];
   onServiceSelected: (name: string) => void;
+  scoreCriterion: ScoreCriterion;
 }

src/components/Dashboard/NewReport/MetricsTable/index.tsx

@@ -13,17 +13,19 @@ import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserA
 import { SortIcon } from "../../../common/icons/16px/SortIcon";
 import { SORTING_ORDER } from "../../../common/SortingSelector/types";
 import { trackingEvents } from "../tracking";
-import { ServiceData } from "../types";
+import { ScoreCriterion, ServiceData } from "../types";
 import { getSeverity } from "../utils";
 import * as s from "./styles";
 import { ColumnMeta, MetricsTableProps, Severity } from "./types";
 
-const sortImpactFn: SortingFn<ServiceData> = (rowA, rowB) => {
-  const impactA = rowA.original.impact;
-  const impactB = rowB.original.impact;
+const getSortScoreFn =
+  (scoreCriterion: ScoreCriterion): SortingFn<ServiceData> =>
+  (rowA, rowB) => {
+    const scoreA = rowA.original[scoreCriterion];
+    const scoreB = rowB.original[scoreCriterion];
 
-  return impactA - impactB;
-};
+    return scoreA - scoreB;
+  };
 
 const sortIssuesFn: SortingFn<ServiceData> = (rowA, rowB) => {
   const issuesA = rowA.original.issues;
@@ -67,11 +69,12 @@ const IssuesLink = ({
 export const MetricsTable = ({
   data,
   showSign,
-  onServiceSelected
+  onServiceSelected,
+  scoreCriterion
 }: MetricsTableProps) => {
   const columnHelper = createColumnHelper<ServiceData>();
-  const minImpact = Math.min(...data.map((x) => x.impact));
-  const maxImpact = Math.max(...data.map((x) => x.impact));
+  const minScore = Math.min(...data.map((x) => x[scoreCriterion]));
+  const maxScore = Math.max(...data.map((x) => x[scoreCriterion]));
 
   const handleSeeIssuesLinkClick = (service: string, source: string) => {
     onServiceSelected(service);
@@ -107,33 +110,36 @@ export const MetricsTable = ({
       enableSorting: true
     }),
     columnHelper.accessor((row) => row, {
-      id: "impact",
-      header: "Impact",
+      id: "score",
+      header: scoreCriterion,
       cell: (info) => (
         <IssuesLink
           onClick={() =>
-            handleSeeIssuesLinkClick(info.getValue().key.service, "impact")
+            handleSeeIssuesLinkClick(
+              info.getValue().key.service,
+              scoreCriterion
+            )
           }
         >
-          {Math.round(info.getValue().impact * 100)}
+          {info.getValue()[scoreCriterion]}
         </IssuesLink>
       ),
-      sortingFn: sortImpactFn,
+      sortingFn: getSortScoreFn(scoreCriterion),
       enableSorting: true,
       meta: {
         contentAlign: "center"
       }
     }),
     columnHelper.accessor(
-      (row) => getSeverity(minImpact, maxImpact, row.impact),
+      (row) => getSeverity(minScore, maxScore, row[scoreCriterion]),
       {
         header: "Rank",
         id: "rank",
         enableSorting: true,
         cell: (info) => {
           return info.getValue();
         },
-        sortingFn: sortImpactFn,
+        sortingFn: getSortScoreFn(scoreCriterion),
         meta: {
           contentAlign: "center"
         }

src/components/Dashboard/NewReport/MetricsTable/mockData.ts

@@ -4,6 +4,7 @@ export const mockedReport: ServiceMetricsReport = {
   reports: [
     {
       impact: 100.123123,
+      criticality: 100.123123,
       key: {
         environment: "TEST",
         service: "Transactions",
@@ -13,6 +14,7 @@ export const mockedReport: ServiceMetricsReport = {
     },
     {
       impact: 50,
+      criticality: 50,
       key: {
         environment: "TEST",
         service: "API",
@@ -22,6 +24,7 @@ export const mockedReport: ServiceMetricsReport = {
     },
     {
       impact: 1,
+      criticality: 1,
       key: {
         environment: "TEST",
         service: "Orders",
@@ -31,6 +34,7 @@ export const mockedReport: ServiceMetricsReport = {
     },
     {
       impact: 120,
+      criticality: 120,
       key: {
         environment: "TEST",
         service: "Users",
@@ -40,6 +44,7 @@ export const mockedReport: ServiceMetricsReport = {
     },
     {
       impact: 120,
+      criticality: 120,
       key: {
         environment: "TEST",
         service: "Users1",
@@ -49,6 +54,7 @@ export const mockedReport: ServiceMetricsReport = {
     },
     {
       impact: 70,
+      criticality: 70,
       key: {
         environment: "TEST",
         service: "Users2",
@@ -58,6 +64,7 @@ export const mockedReport: ServiceMetricsReport = {
     },
     {
       impact: 99.1231,
+      criticality: 99.1231,
       key: {
         environment: "TEST",
         service: "Users3",

src/components/Dashboard/NewReport/MetricsTable/styles.ts

@@ -50,6 +50,7 @@ export const TableHeaderCellContent = styled(TableCellContent)`
   gap: 4px;
   color: ${({ theme }) => theme.colors.v3.text.tertiary};
   ${({ onClick }) => (onClick ? "cursor: pointer;" : "")}
+  text-transform: capitalize;
 `;
 
 export const TableBodyRow = styled.tr`

src/components/Dashboard/NewReport/MetricsTable/types.ts

@@ -1,9 +1,10 @@
-import { ServiceData } from "../types";
+import { ScoreCriterion, ServiceData } from "../types";
 
 export interface MetricsTableProps {
   data: ServiceData[];
   showSign: boolean;
   onServiceSelected: (name: string) => void;
+  scoreCriterion: ScoreCriterion;
 }
 
 export type ContentAlignment = "left" | "center" | "right";

src/components/Dashboard/NewReport/index.tsx

@@ -1,4 +1,7 @@
 import { useLayoutEffect, useState } from "react";
+import { getFeatureFlagValue } from "../../../featureFlags";
+import { useConfigSelector } from "../../../store/config/useConfigSelector";
+import { FeatureFlag } from "../../../types";
 import { changeScope } from "../../../utils/actions/changeScope";
 import { DigmaLogoIcon } from "../../common/icons/16px/DigmaLogoIcon";
 import { SCOPE_CHANGE_EVENTS } from "../../Main/types";
@@ -21,6 +24,12 @@ export const NewReport = () => {
   const [query, setQuery] = useState<ReportFilterQuery>(DefaultQuery);
   const { data } = useReportsData(query);
   const [viewMode, setViewMode] = useState<ReportViewMode>("table");
+  const { backendInfo } = useConfigSelector();
+  const isCriticalityEnabled = getFeatureFlagValue(
+    backendInfo,
+    FeatureFlag.IS_METRICS_REPORT_CRITICALITY_ENABLED
+  );
+  const scoreCriterion = isCriticalityEnabled ? "criticality" : "impact";
 
   useLayoutEffect(() => {
     window.sendMessageToDigma({
@@ -50,6 +59,10 @@ export const NewReport = () => {
   };
 
   const serviceData = (query?.services.length > 0 ? data?.reports : null) ?? [];
+  const transformedData = serviceData.map((service) => ({
+    ...service,
+    [scoreCriterion]: Math.round(service[scoreCriterion] * 100)
+  }));
 
   return (
     <s.Section>
@@ -62,13 +75,18 @@ export const NewReport = () => {
         />
         {viewMode === "table" && (
           <MetricsTable
-            data={serviceData}
+            scoreCriterion={scoreCriterion}
+            data={transformedData}
             showSign={query.lastDays !== null}
             onServiceSelected={handleServiceSelected}
           />
         )}
         {viewMode === "treemap" && (
-          <Chart onServiceSelected={handleServiceSelected} data={serviceData} />
+          <Chart
+            scoreCriterion={scoreCriterion}
+            onServiceSelected={handleServiceSelected}
+            data={transformedData}
+          />
         )}
         <s.Footer>
           <DigmaLogoIcon size={14} />

src/components/Dashboard/NewReport/types.ts

@@ -30,8 +30,11 @@ export interface ServiceData {
   };
   issues: number;
   impact: number;
+  criticality: number;
 }
 
 export interface ServiceMetricsReport {
   reports: ServiceData[];
 }
+
+export type ScoreCriterion = "impact" | "criticality";