feat(schedule-details): add static metrics chart series (SLICE-9.1 / PR09d)

Render visx markers for successful runs, missed executions, and the next execution time from static fixture data, replacing the empty state when series data is present.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: Assem-Uber

src/views/schedule-page/schedule-detail-metrics-chart/__fixtures__/schedule-detail-metrics-chart-fixture.ts

@@ -0,0 +1,18 @@
+import { type ScheduleMetricsChartSeriesData } from '../schedule-detail-metrics-chart-series.types';
+
+export const SCHEDULE_METRICS_CHART_FIXTURE_NOW_MS = new Date(
+  '2024-06-15T12:00:00.000Z'
+).getTime();
+
+export const scheduleMetricsChartFixture: ScheduleMetricsChartSeriesData = {
+  successfulRuns: [
+    { scheduledTimeMs: SCHEDULE_METRICS_CHART_FIXTURE_NOW_MS - 6 * 60 * 60 * 1000 },
+    { scheduledTimeMs: SCHEDULE_METRICS_CHART_FIXTURE_NOW_MS - 4 * 60 * 60 * 1000 },
+    { scheduledTimeMs: SCHEDULE_METRICS_CHART_FIXTURE_NOW_MS - 1 * 60 * 60 * 1000 },
+  ],
+  missedExecutions: [
+    { scheduledTimeMs: SCHEDULE_METRICS_CHART_FIXTURE_NOW_MS - 2 * 60 * 60 * 1000 },
+  ],
+  nextExecutionTimeMs:
+    SCHEDULE_METRICS_CHART_FIXTURE_NOW_MS + 2 * 60 * 60 * 1000,
+};

src/views/schedule-page/schedule-detail-metrics-chart/__tests__/schedule-detail-metrics-chart-empty-state.test.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { render, screen } from '@/test-utils/rtl';
+
+import {
+  CHART_EMPTY_STATE_MESSAGE,
+  CHART_REGION_ARIA_LABEL,
+  CHART_SVG_TEST_ID,
+} from '../schedule-detail-metrics-chart.constants';
+import ScheduleDetailMetricsChart from '../schedule-detail-metrics-chart';
+
+jest.mock('@visx/responsive', () => ({
+  ParentSize: ({
+    children,
+  }: {
+    children: (args: { width: number; height: number }) => React.ReactNode;
+  }) => <>{children({ width: 800, height: 280 })}</>,
+}));
+
+jest.mock('../__fixtures__/schedule-detail-metrics-chart-fixture', () => ({
+  SCHEDULE_METRICS_CHART_FIXTURE_NOW_MS: new Date(
+    '2024-06-15T12:00:00.000Z'
+  ).getTime(),
+  scheduleMetricsChartFixture: {
+    successfulRuns: [],
+    missedExecutions: [],
+    nextExecutionTimeMs: null,
+  },
+}));
+
+describe(`${ScheduleDetailMetricsChart.name} empty state`, () => {
+  it('renders empty state when there is no chart data', () => {
+    render(
+      <ScheduleDetailMetricsChart
+        params={{
+          domain: 'test-domain',
+          cluster: 'test-cluster',
+          scheduleId: 'my-schedule',
+          scheduleTab: 'runs',
+        }}
+      />
+    );
+
+    expect(
+      screen.getByRole('region', { name: CHART_REGION_ARIA_LABEL })
+    ).toBeInTheDocument();
+    expect(screen.getByRole('status')).toHaveTextContent(
+      CHART_EMPTY_STATE_MESSAGE
+    );
+    expect(
+      screen.queryByTestId(CHART_SVG_TEST_ID)
+    ).not.toBeInTheDocument();
+  });
+});

src/views/schedule-page/schedule-detail-metrics-chart/__tests__/schedule-detail-metrics-chart.test.tsx

@@ -5,10 +5,12 @@ import { render, screen, within } from '@/test-utils/rtl';
 import {
   CHART_NOW_LINE_TEST_ID,
   CHART_REGION_ARIA_LABEL,
+  CHART_SERIES_TEST_IDS,
   CHART_SVG_TEST_ID,
   CHART_TOOLBAR_ARIA_LABEL,
   CHART_TOOLBAR_BUTTON_LABELS,
 } from '../schedule-detail-metrics-chart.constants';
+import { SCHEDULE_METRICS_CHART_FIXTURE_NOW_MS } from '../__fixtures__/schedule-detail-metrics-chart-fixture';
 import ScheduleDetailMetricsChart from '../schedule-detail-metrics-chart';
 
 jest.mock('@visx/responsive', () => ({
@@ -19,24 +21,35 @@ jest.mock('@visx/responsive', () => ({
   }) => <>{children({ width: 800, height: 280 })}</>,
 }));
 
-const mockNow = new Date('2024-06-15T12:00:00Z').getTime();
-
 describe(ScheduleDetailMetricsChart.name, () => {
   beforeEach(() => {
-    jest.useFakeTimers({ now: mockNow });
+    jest.useFakeTimers({ now: SCHEDULE_METRICS_CHART_FIXTURE_NOW_MS });
   });
 
   afterEach(() => {
     jest.useRealTimers();
   });
 
-  it('renders chart region with svg frame', () => {
+  it('renders chart region with svg frame and static fixture series markers', () => {
     setup();
 
     expect(
       screen.getByRole('region', { name: CHART_REGION_ARIA_LABEL })
     ).toBeInTheDocument();
     expect(screen.getByTestId(CHART_SVG_TEST_ID)).toBeInTheDocument();
+    expect(
+      screen.getByTestId(CHART_SERIES_TEST_IDS.svg)
+    ).toBeInTheDocument();
+    expect(
+      screen.getAllByTestId(CHART_SERIES_TEST_IDS.successfulRunMarker)
+    ).toHaveLength(3);
+    expect(
+      screen.getByTestId(CHART_SERIES_TEST_IDS.missedExecutionMarker)
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId(CHART_SERIES_TEST_IDS.nextExecutionMarker)
+    ).toBeInTheDocument();
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
   });
 
   it('renders x and y axes in the chart svg', () => {

src/views/schedule-page/schedule-detail-metrics-chart/helpers/has-schedule-metrics-chart-data.ts

@@ -0,0 +1,11 @@
+import { type ScheduleMetricsChartSeriesData } from '../schedule-detail-metrics-chart-series.types';
+
+export default function hasScheduleMetricsChartData(
+  data: ScheduleMetricsChartSeriesData
+) {
+  return (
+    data.successfulRuns.length > 0 ||
+    data.missedExecutions.length > 0 ||
+    data.nextExecutionTimeMs != null
+  );
+}

src/views/schedule-page/schedule-detail-metrics-chart/schedule-detail-metrics-chart-series.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+
+import { Group } from '@visx/group';
+import { Circle, Line } from '@visx/shape';
+
+import {
+  CHART_SERIES_MARKER_RADIUS_PX,
+  CHART_SERIES_MISSED_MARKER_RADIUS_PX,
+  CHART_SERIES_MISSED_STROKE_WIDTH_PX,
+  CHART_SERIES_MISSED_Y_RATIO,
+  CHART_SERIES_NEXT_EXECUTION_STROKE_WIDTH_PX,
+  CHART_SERIES_SUCCESS_Y_RATIO,
+  CHART_SERIES_TEST_IDS,
+} from './schedule-detail-metrics-chart.constants';
+import { type ScheduleMetricsChartSeriesProps } from './schedule-detail-metrics-chart-series.types';
+
+export default function ScheduleDetailMetricsChartSeries({
+  width,
+  height,
+  xScale,
+  data,
+  successfulRunColor,
+  missedExecutionColor,
+  nextExecutionColor,
+}: ScheduleMetricsChartSeriesProps) {
+  const successfulRunY = height * CHART_SERIES_SUCCESS_Y_RATIO;
+  const missedExecutionY = height * CHART_SERIES_MISSED_Y_RATIO;
+
+  return (
+    <Group data-testid={CHART_SERIES_TEST_IDS.svg}>
+      {data.successfulRuns.map(({ scheduledTimeMs }) => (
+        <Circle
+          key={`successful-${scheduledTimeMs}`}
+          cx={xScale(scheduledTimeMs)}
+          cy={successfulRunY}
+          r={CHART_SERIES_MARKER_RADIUS_PX}
+          fill={successfulRunColor}
+          data-testid={CHART_SERIES_TEST_IDS.successfulRunMarker}
+        />
+      ))}
+      {data.missedExecutions.map(({ scheduledTimeMs }) => {
+        const x = xScale(scheduledTimeMs);
+
+        return (
+          <Group key={`missed-${scheduledTimeMs}`}>
+            <Line
+              from={{ x, y: successfulRunY }}
+              to={{ x, y: missedExecutionY }}
+              stroke={missedExecutionColor}
+              strokeWidth={CHART_SERIES_MISSED_STROKE_WIDTH_PX}
+              strokeDasharray="4 3"
+              pointerEvents="none"
+            />
+            <Circle
+              cx={x}
+              cy={missedExecutionY}
+              r={CHART_SERIES_MISSED_MARKER_RADIUS_PX}
+              fill="transparent"
+              stroke={missedExecutionColor}
+              strokeWidth={CHART_SERIES_MISSED_STROKE_WIDTH_PX}
+              data-testid={CHART_SERIES_TEST_IDS.missedExecutionMarker}
+            />
+          </Group>
+        );
+      })}
+      {data.nextExecutionTimeMs != null && (
+        <Line
+          from={{ x: xScale(data.nextExecutionTimeMs), y: 0 }}
+          to={{ x: xScale(data.nextExecutionTimeMs), y: height }}
+          stroke={nextExecutionColor}
+          strokeWidth={CHART_SERIES_NEXT_EXECUTION_STROKE_WIDTH_PX}
+          strokeDasharray="6 4"
+          pointerEvents="none"
+          data-testid={CHART_SERIES_TEST_IDS.nextExecutionMarker}
+        />
+      )}
+      <rect width={width} height={height} fill="transparent" pointerEvents="none" />
+    </Group>
+  );
+}

src/views/schedule-page/schedule-detail-metrics-chart/schedule-detail-metrics-chart-series.types.ts

@@ -0,0 +1,23 @@
+import { type ScaleLinear } from 'd3-scale';
+
+export type ScheduleMetricsChartExecutionPoint = {
+  scheduledTimeMs: number;
+};
+
+export type ScheduleMetricsChartSeriesData = {
+  successfulRuns: ScheduleMetricsChartExecutionPoint[];
+  missedExecutions: ScheduleMetricsChartExecutionPoint[];
+  nextExecutionTimeMs: number | null;
+};
+
+export type ScheduleMetricsChartXScale = ScaleLinear<number, number, never>;
+
+export type ScheduleMetricsChartSeriesProps = {
+  width: number;
+  height: number;
+  xScale: ScheduleMetricsChartXScale;
+  data: ScheduleMetricsChartSeriesData;
+  successfulRunColor: string;
+  missedExecutionColor: string;
+  nextExecutionColor: string;
+};

src/views/schedule-page/schedule-detail-metrics-chart/schedule-detail-metrics-chart.constants.ts

@@ -18,6 +18,8 @@ export const CHART_TOOLBAR_BUTTON_LABELS = {
   now: 'Now',
 } as const;
 
+export const CHART_EMPTY_STATE_MESSAGE = 'No chart data available yet';
+
 export const CHART_REGION_ARIA_LABEL = 'Schedule metrics chart';
 
 export const CHART_TOOLBAR_ARIA_LABEL = 'Chart controls';
@@ -37,3 +39,17 @@ export const CHART_FUTURE_GUTTER_MS = 30 * 60_000;
 
 /** Horizontal inset applied to the chart drawable area (px). */
 export const CHART_SIDE_PADDING_PX = 24;
+
+export const CHART_SERIES_TEST_IDS = {
+  svg: 'schedule-metrics-chart-series-svg',
+  successfulRunMarker: 'schedule-metrics-chart-successful-run-marker',
+  missedExecutionMarker: 'schedule-metrics-chart-missed-execution-marker',
+  nextExecutionMarker: 'schedule-metrics-chart-next-execution-marker',
+} as const;
+
+export const CHART_SERIES_MARKER_RADIUS_PX = 5;
+export const CHART_SERIES_MISSED_MARKER_RADIUS_PX = 6;
+export const CHART_SERIES_NEXT_EXECUTION_STROKE_WIDTH_PX = 2;
+export const CHART_SERIES_MISSED_STROKE_WIDTH_PX = 2;
+export const CHART_SERIES_SUCCESS_Y_RATIO = 0.45;
+export const CHART_SERIES_MISSED_Y_RATIO = 0.65;

src/views/schedule-page/schedule-detail-metrics-chart/schedule-detail-metrics-chart.styles.ts

@@ -33,6 +33,15 @@ export const styled = {
     width: '100%',
     height: '100%',
   })),
+  EmptyState: createStyled('div', ({ $theme }: { $theme: Theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%',
+    ...$theme.typography.ParagraphSmall,
+    color: $theme.colors.contentSecondary,
+  })),
 };
 
 const toolbarButtonRootOverrides = {