@oneuptime/common 12.0.33 → 13.0.0

package/UI/Components/Dashboard/DashboardVariableControl.tsx

@@ -0,0 +1,285 @@
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import DashboardVariable, {
+  DashboardVariableType,
+  DashboardVariableOption,
+} from "../../../Types/Dashboard/DashboardVariable";
+
+export interface VariableValueChange {
+  selectedValue?: string | undefined;
+  selectedValues?: Array<string> | undefined;
+}
+
+export interface ComponentProps {
+  variable: DashboardVariable;
+  dynamicOptions?: Array<string> | undefined;
+  isLoadingOptions?: boolean | undefined;
+  onVariableValueChange: (
+    variableId: string,
+    change: VariableValueChange,
+  ) => void;
+}
+
+const MultiSelectPopover: FunctionComponent<{
+  options: Array<DashboardVariableOption>;
+  selected: Array<string>;
+  label: string;
+  isLoading: boolean;
+  maxSelections?: number | undefined;
+  unavailableLabel?: string | undefined;
+  onChange: (next: Array<string>) => void;
+}> = ({
+  options,
+  selected,
+  label,
+  isLoading,
+  maxSelections,
+  unavailableLabel,
+  onChange,
+}: {
+  options: Array<DashboardVariableOption>;
+  selected: Array<string>;
+  label: string;
+  isLoading: boolean;
+  maxSelections?: number | undefined;
+  unavailableLabel?: string | undefined;
+  onChange: (next: Array<string>) => void;
+}): ReactElement => {
+  const [open, setOpen] = useState<boolean>(false);
+  const wrapRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) {
+      return undefined;
+    }
+    const onDocClick: (e: MouseEvent) => void = (e: MouseEvent): void => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onDocClick);
+    return () => {
+      document.removeEventListener("mousedown", onDocClick);
+    };
+  }, [open]);
+
+  const buttonText: string =
+    selected.length === 0
+      ? isLoading
+        ? "Loading…"
+        : "All"
+      : selected.length === 1
+        ? options.find((option: DashboardVariableOption) => {
+            return option.value === selected[0];
+          })?.label ||
+          unavailableLabel ||
+          (selected[0] as string)
+        : `${selected.length} selected`;
+
+  const toggle: (value: string) => void = (value: string): void => {
+    if (selected.includes(value)) {
+      onChange(
+        selected.filter((v: string) => {
+          return v !== value;
+        }),
+      );
+    } else {
+      onChange([...selected, value]);
+    }
+  };
+
+  return (
+    <div className="relative" ref={wrapRef}>
+      <button
+        type="button"
+        className="text-xs border border-gray-200 rounded-md px-2.5 py-1.5 bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-300 transition-colors flex items-center gap-1"
+        disabled={isLoading}
+        onClick={() => {
+          setOpen(!open);
+        }}
+        title={label}
+        aria-label={`${label}: ${buttonText}`}
+        aria-expanded={open}
+      >
+        <span className="truncate max-w-[10rem]">{buttonText}</span>
+        <span className="text-gray-400">▾</span>
+      </button>
+      {open && (
+        <div className="absolute z-30 mt-1 right-0 w-56 max-h-72 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg py-1">
+          <div className="flex items-center justify-between px-3 py-1.5 border-b border-gray-100 text-[11px] text-gray-500">
+            <span>{selected.length} selected</span>
+            <button
+              type="button"
+              className="text-blue-600 hover:underline disabled:text-gray-300"
+              disabled={selected.length === 0}
+              onClick={() => {
+                onChange([]);
+              }}
+            >
+              Clear
+            </button>
+          </div>
+          {maxSelections !== undefined && selected.length >= maxSelections && (
+            <p className="px-3 py-1 text-xs text-gray-500">
+              Choose up to {maxSelections} labels.
+            </p>
+          )}
+          {options.length === 0 ? (
+            <div className="px-3 py-2 text-xs text-gray-400">
+              {isLoading ? "Loading options…" : "No options available"}
+            </div>
+          ) : (
+            options.map((option: DashboardVariableOption) => {
+              const checked: boolean = selected.includes(option.value);
+              return (
+                <label
+                  key={option.value}
+                  className="flex items-center gap-2 px-3 py-1.5 text-xs text-gray-700 hover:bg-gray-50 cursor-pointer"
+                >
+                  <input
+                    type="checkbox"
+                    className="h-3.5 w-3.5"
+                    checked={checked}
+                    disabled={
+                      !checked &&
+                      maxSelections !== undefined &&
+                      selected.length >= maxSelections
+                    }
+                    onChange={() => {
+                      toggle(option.value);
+                    }}
+                  />
+                  <span className="truncate">{option.label}</span>
+                </label>
+              );
+            })
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const DashboardVariableControl: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const { variable } = props;
+  const isTelemetryAttribute: boolean =
+    variable.type === DashboardVariableType.TelemetryAttribute;
+  const isCustomList: boolean =
+    variable.type === DashboardVariableType.CustomList ||
+    Boolean(variable.customListValues);
+
+  const customListOptions: Array<string> = variable.customListValues
+    ? variable.customListValues.split(",").map((v: string) => {
+        return v.trim();
+      })
+    : [];
+
+  const isProjectLabel: boolean =
+    variable.type === DashboardVariableType.ProjectLabel;
+  const options: Array<DashboardVariableOption> = isProjectLabel
+    ? variable.labelOptions || []
+    : (isTelemetryAttribute
+        ? props.dynamicOptions || []
+        : customListOptions
+      ).map((value: string) => {
+        return { label: value, value };
+      });
+  const selectedValue: string =
+    variable.selectedValue ?? variable.defaultValue ?? "";
+  const isUnavailableSelection: boolean = Boolean(
+    isProjectLabel &&
+      selectedValue &&
+      !options.some((option: DashboardVariableOption) => {
+        return option.value === selectedValue;
+      }),
+  );
+
+  const useSelect: boolean =
+    isTelemetryAttribute || isCustomList || isProjectLabel;
+  const label: string = variable.label || variable.name;
+
+  return (
+    <div className="flex items-center gap-1.5">
+      <label className="text-xs font-medium text-gray-400 uppercase tracking-wide">
+        {label}
+      </label>
+      {useSelect && variable.isMultiSelect ? (
+        /*
+         * `selectedValues` only — never defaultValue. The popover renders
+         * "All" for an empty list, and DashboardVariableInterpolation
+         * resolves an empty list to no predicate, so the two agree. Seeding
+         * this from defaultValue would put a filter behind a control that
+         * reads "All".
+         */
+        <MultiSelectPopover
+          options={options}
+          selected={variable.selectedValues || []}
+          label={label}
+          isLoading={Boolean(props.isLoadingOptions)}
+          maxSelections={isProjectLabel ? 100 : undefined}
+          unavailableLabel={isProjectLabel ? "Unavailable label" : undefined}
+          onChange={(next: Array<string>) => {
+            props.onVariableValueChange(variable.id, { selectedValues: next });
+          }}
+        />
+      ) : useSelect ? (
+        <select
+          aria-label={label}
+          className="text-xs border border-gray-200 rounded-md px-2.5 py-1.5 bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-300 transition-colors"
+          /*
+           * `??`, not `||`: picking "All" stores selectedValue as "", which is
+           * a real selection and must not collapse back to defaultValue. Only
+           * an unset (undefined) selection falls through to the default — the
+           * same rule the query side applies in
+           * Common/Utils/Dashboard/VariableInterpolation.ts, so what the
+           * toolbar shows and what the widgets are filtered by stay in step.
+           */
+          value={variable.selectedValue ?? variable.defaultValue ?? ""}
+          disabled={props.isLoadingOptions}
+          onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+            props.onVariableValueChange(variable.id, {
+              selectedValue: e.target.value,
+            });
+          }}
+        >
+          <option value="">
+            {props.isLoadingOptions ? "Loading…" : "All"}
+          </option>
+          {isUnavailableSelection && (
+            <option value={selectedValue}>Unavailable label</option>
+          )}
+          {options.map((option: DashboardVariableOption) => {
+            return (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            );
+          })}
+        </select>
+      ) : (
+        <input
+          type="text"
+          aria-label={label}
+          className="text-xs border border-gray-200 rounded-md px-2.5 py-1.5 bg-white text-gray-700 w-28 focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-300 transition-colors"
+          // `??` so clearing the box stays cleared. See the select above.
+          value={variable.selectedValue ?? variable.defaultValue ?? ""}
+          placeholder={variable.name}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            props.onVariableValueChange(variable.id, {
+              selectedValue: e.target.value,
+            });
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default DashboardVariableControl;

package/UI/Components/Graphs/DayUptimeGraph.tsx

@@ -6,10 +6,13 @@ import OneUptimeDate from "../../../Types/Date";
 import Dictionary from "../../../Types/Dictionary";
 import ObjectID from "../../../Types/ObjectID";
 import UptimeBarTooltipIncident from "../../../Types/Monitor/UptimeBarTooltipIncident";
+import DayUptimeGraphUtil from "../../../Utils/Uptime/DayUptimeGraphUtil";
+import UptimeHistoryLabels from "../../../Types/Monitor/UptimeHistoryLabels";
 import React, {
   FunctionComponent,
   ReactElement,
   useEffect,
+  useRef,
   useState,
 } from "react";
 import UptimeEvent from "../../../Utils/Uptime/Event";
@@ -21,6 +24,20 @@ export interface BarChartRule {
   uptimePercentGreaterThanOrEqualTo: number;
 }
 
+/*
+ * Everything the tooltip shows for one day, handed to onBarClick so that a
+ * caller opening a dialog can show the same reading rather than a strictly
+ * poorer one. Before this existed the only way to see a day's uptime was to
+ * hover it, which is not something a touch screen or a keyboard can do.
+ */
+export interface UptimeBarDaySummary {
+  date: Date;
+  uptimePercent: number;
+  hasEvents: boolean;
+  statusDurations: Array<StatusDuration>;
+  incidents: Array<UptimeBarTooltipIncident>;
+}
+
 export interface ComponentProps {
   startDate: Date;
   endDate: Date;
@@ -31,9 +48,18 @@ export interface ComponentProps {
   defaultBarColor: Color;
   incidents?: Array<UptimeBarTooltipIncident> | undefined;
   onBarClick?:
-    | ((date: Date, incidents: Array<UptimeBarTooltipIncident>) => void)
+    | ((
+        date: Date,
+        incidents: Array<UptimeBarTooltipIncident>,
+        summary: UptimeBarDaySummary,
+      ) => void)
     | undefined;
   onIncidentClick?: ((incidentId: string) => void) | undefined;
+  /*
+   * Wording for the accessible names. Defaults to English, matching the
+   * tooltip; the status page passes translated strings.
+   */
+  labels?: UptimeHistoryLabels | undefined;
 }
 
 const DayUptimeGraph: FunctionComponent<ComponentProps> = (
@@ -41,6 +67,39 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
   const [days, setDays] = useState<number>(0);
 
+  /*
+   * The strip is one tab stop with a roving tabindex inside it - see
+   * DayUptimeGraphUtil. null means "nothing focused yet", which resolves to
+   * today rather than to three months ago.
+   */
+  const [focusedBarIndex, setFocusedBarIndex] = useState<number | null>(null);
+  const barRefs: React.MutableRefObject<Array<HTMLButtonElement | null>> =
+    useRef<Array<HTMLButtonElement | null>>([]);
+
+  /*
+   * Set only by a key press, so that moving focus is a thing the widget does
+   * in response to the keyboard and never a thing it does to a visitor who
+   * simply clicked. Focus is applied in an effect rather than in the handler
+   * because the bar the visitor is moving to may not be the same DOM node
+   * after the render that the key press causes.
+   */
+  const shouldRestoreFocus: React.MutableRefObject<boolean> =
+    useRef<boolean>(false);
+
+  useEffect(() => {
+    if (!shouldRestoreFocus.current) {
+      return;
+    }
+
+    shouldRestoreFocus.current = false;
+
+    if (focusedBarIndex === null) {
+      return;
+    }
+
+    barRefs.current[focusedBarIndex]?.focus();
+  }, [focusedBarIndex]);
+
   useEffect(() => {
     setDays(
       OneUptimeDate.getNumberOfDaysBetweenDatesInclusive(
@@ -50,6 +109,40 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
     );
   }, [props.startDate, props.endDate]);
 
+  const activeBarIndex: number = DayUptimeGraphUtil.getActiveBarIndex({
+    storedIndex: focusedBarIndex,
+    barCount: days,
+  });
+
+  type MoveFocusFunction = (event: React.KeyboardEvent, index: number) => void;
+
+  const moveFocus: MoveFocusFunction = (
+    event: React.KeyboardEvent,
+    index: number,
+  ): void => {
+    const nextIndex: number | null = DayUptimeGraphUtil.getNextFocusIndex({
+      key: event.key,
+      currentIndex: index,
+      barCount: days,
+    });
+
+    if (nextIndex === null) {
+      // Not ours: Tab, Enter and Space must keep their normal meaning.
+      return;
+    }
+
+    event.preventDefault();
+    shouldRestoreFocus.current = true;
+    setFocusedBarIndex(nextIndex);
+
+    /*
+     * Focused here as well as in the effect: when the strip does not re-render
+     * (the index it was already on), the effect does not run, and focus must
+     * still land somewhere real.
+     */
+    barRefs.current[nextIndex]?.focus();
+  };
+
   type GetIncidentsForDayFunction = (
     startOfDay: Date,
     endOfDay: Date,
@@ -236,8 +329,33 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
       });
     }
 
-    const hasDayIncidents: boolean = dayIncidents.length > 0;
-    const isClickable: boolean = hasDayIncidents && Boolean(props.onBarClick);
+    /*
+     * Every day opens, not only the days that happen to carry an incident.
+     * The uptime reading and the status breakdown used to live in a hover
+     * tooltip and nowhere else, which put them out of reach of every phone
+     * and every keyboard - and a phone is how most people read a status page
+     * during an outage.
+     */
+    const isClickable: boolean = Boolean(props.onBarClick);
+
+    const summary: UptimeBarDaySummary = {
+      date: todaysDay,
+      uptimePercent: uptimePercentForTheDay,
+      hasEvents: hasEvents,
+      statusDurations: statusDurations,
+      incidents: dayIncidents,
+    };
+
+    const ariaLabel: string = DayUptimeGraphUtil.getDayAriaLabel({
+      dateLabel: OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+        todaysDay,
+        true,
+      ),
+      hasEvents: hasEvents,
+      uptimePercent: uptimePercentForTheDay,
+      incidentCount: dayIncidents.length,
+      labels: props.labels,
+    });
 
     return (
       <Tooltip
@@ -250,22 +368,56 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
             statusDurations={statusDurations}
             incidents={dayIncidents}
             onIncidentClick={props.onIncidentClick}
+            labels={props.labels}
           />
         }
       >
-        <div
-          className={`${className}${isClickable ? " cursor-pointer hover:opacity-80" : ""}`}
+        <button
+          type="button"
+          ref={(element: HTMLButtonElement | null) => {
+            barRefs.current[dayNumber] = element;
+          }}
+          data-testid="uptime-bar"
+          data-day-index={dayNumber}
+          aria-label={ariaLabel}
+          /*
+           * One tab stop for the whole strip. Ninety bars per resource across
+           * a page of resources would otherwise bury the footer behind
+           * thousands of Tab presses.
+           */
+          tabIndex={DayUptimeGraphUtil.getBarTabIndex({
+            index: dayNumber,
+            activeIndex: activeBarIndex,
+          })}
+          /*
+           * The focus indicator is drawn *inside* the bar (a negative outline
+           * offset), not around it. Callers wrap this strip in an
+           * overflow-x-auto scroller so it can be swiped on a phone, and
+           * overflow-x also clips vertically - anything drawn outside the
+           * bar's own box loses its top and bottom edge to that scroller. Two
+           * pixels of indigo inside a seven pixel bar reads clearly against
+           * every bar colour and cannot be clipped by anything.
+           */
+          className={`${className} relative block p-0 border-0 appearance-none focus:outline-none focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-indigo-600${
+            isClickable ? " cursor-pointer hover:opacity-80" : ""
+          }`}
           style={{
             backgroundColor: color.toString(),
           }}
+          onFocus={() => {
+            setFocusedBarIndex(dayNumber);
+          }}
+          onKeyDown={(event: React.KeyboardEvent) => {
+            moveFocus(event, dayNumber);
+          }}
           onClick={
             isClickable
               ? () => {
-                  props.onBarClick!(todaysDay, dayIncidents);
+                  props.onBarClick!(todaysDay, dayIncidents, summary);
                 }
               : undefined
           }
-        ></div>
+        />
       </Tooltip>
     );
   };
@@ -282,8 +434,21 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
     return elements;
   };
 
+  /*
+   * Deliberately not overflow-hidden any more: it clipped the focus ring of
+   * the first and last bar, which is the one part of this widget a keyboard
+   * user has to be able to see.
+   */
   return (
-    <div className="flex space-x-0.5 rounded overflow-hidden">
+    <div
+      className="flex space-x-0.5 rounded"
+      role="group"
+      aria-label={DayUptimeGraphUtil.getGraphAriaLabel({
+        dayCount: days,
+        labels: props.labels,
+      })}
+      data-testid="day-uptime-graph"
+    >
       {getUptimeGraph()}
     </div>
   );