feat: more bar

Author: adityathebe

src/components/Configs/Changes/ConfigChangesSwimlane.tsx

@@ -1,7 +1,18 @@
 import { ConfigChange } from "@flanksource-ui/api/types/configs";
+import { parseDateMath } from "@flanksource-ui/ui/Dates/TimeRangePicker/parseDateMath";
+import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams";
+import {
+  TimeRangeOption,
+  displayTimeFormat,
+  timeRangeOptionsToAbsolute
+} from "@flanksource-ui/ui/Dates/TimeRangePicker/rangeOptions";
 import dayjs from "dayjs";
 import { useCallback, useMemo, useRef, useState } from "react";
 import ConfigChangesSwimlaneLegend from "./Swimlane/Legend";
+import {
+  MORE_TIME_RANGE_BAR_WIDTH,
+  MoreTimeRangeBar
+} from "./Swimlane/MoreTimeRangeHandle";
 import {
   EmptySwimlaneState,
   GroupParentRow,
@@ -23,6 +34,64 @@ import {
   useResizableColumn
 } from "./Swimlane/Utils";
 
+const GRAPH_RANGE_PRESETS = [
+  { display: "5 minutes", range: "now-5m", ms: 5 * 60 * 1000 },
+  { display: "15 minutes", range: "now-15m", ms: 15 * 60 * 1000 },
+  { display: "30 minutes", range: "now-30m", ms: 30 * 60 * 1000 },
+  { display: "1 hour", range: "now-1h", ms: 60 * 60 * 1000 },
+  { display: "2 hours", range: "now-2h", ms: 2 * 60 * 60 * 1000 },
+  { display: "3 hours", range: "now-3h", ms: 3 * 60 * 60 * 1000 },
+  { display: "6 hours", range: "now-6h", ms: 6 * 60 * 60 * 1000 },
+  { display: "12 hours", range: "now-12h", ms: 12 * 60 * 60 * 1000 },
+  { display: "24 hours", range: "now-24h", ms: 24 * 60 * 60 * 1000 },
+  { display: "2 days", range: "now-2d", ms: 2 * 24 * 60 * 60 * 1000 },
+  { display: "7 days", range: "now-7d", ms: 7 * 24 * 60 * 60 * 1000 }
+];
+
+const GRAPH_DEFAULT_RANGE: TimeRangeOption = {
+  type: "relative",
+  display: "2 hours",
+  range: "now-2h"
+};
+
+function resolveRangeDate(value: string, roundUp = false) {
+  if (value === "now") {
+    return dayjs();
+  }
+  if (value.startsWith("now")) {
+    return dayjs(parseDateMath(value, roundUp));
+  }
+  return dayjs(value);
+}
+
+function getIncreasedTimeRange(range?: TimeRangeOption): TimeRangeOption {
+  const currentRange = range ?? GRAPH_DEFAULT_RANGE;
+  const { from, to } = timeRangeOptionsToAbsolute(currentRange);
+  const fromDate = resolveRangeDate(from);
+  const toDate = resolveRangeDate(to, true);
+  const durationMs = Math.max(0, toDate.diff(fromDate));
+  const nextPreset =
+    GRAPH_RANGE_PRESETS.find((preset) => preset.ms > durationMs + 1000) ??
+    GRAPH_RANGE_PRESETS[GRAPH_RANGE_PRESETS.length - 1]!;
+
+  if (currentRange.type === "relative" && to === "now") {
+    return {
+      type: "relative",
+      display: nextPreset.display,
+      range: nextPreset.range
+    };
+  }
+
+  return {
+    type: "absolute",
+    display: "Custom",
+    from: toDate
+      .subtract(nextPreset.ms, "millisecond")
+      .format(displayTimeFormat),
+    to: toDate.format(displayTimeFormat)
+  };
+}
+
 type ConfigChangesSwimlaneProps = {
   changes: ConfigChange[];
   isLoading?: boolean;
@@ -39,6 +108,11 @@ export default function ConfigChangesSwimlane({
   );
   const containerRef = useRef<HTMLDivElement | null>(null);
   const markersRef = useRef<HTMLDivElement | null>(null);
+  const { setTimeRangeParams, getTimeRangeFromUrl } = useTimeRangeParams();
+  const timeRangeValue = getTimeRangeFromUrl();
+  const increaseTimeRange = useCallback(() => {
+    setTimeRangeParams(getIncreasedTimeRange(timeRangeValue));
+  }, [setTimeRangeParams, timeRangeValue]);
   const containerWidth = useContainerWidth(containerRef);
   const initialColumnWidth = Math.min(
     MAX_COLUMN_WIDTH,
@@ -49,7 +123,7 @@ export default function ConfigChangesSwimlane({
   const markersWidth = useContainerWidth(markersRef);
   const numBuckets = Math.max(1, Math.floor(markersWidth / BUCKET_MIN_PX));
 
-  const { groups, min, max, ticks } = useMemo(() => {
+  const { groups, min, max, ticks, hasPreRangeChanges } = useMemo(() => {
     const grouped = new Map<string, ConfigChange[]>();
     for (const c of changes) {
       const key = c.config_id ?? c.config?.id ?? c.id;
@@ -102,7 +176,8 @@ export default function ConfigChangesSwimlane({
       groups: groupRowsByPath(rows),
       min,
       max,
-      ticks: generateTimeTicks(min, max)
+      ticks: generateTimeTicks(min, max),
+      hasPreRangeChanges: rows.some((row) => row.preRangeBadge)
     };
   }, [changes, numBuckets]);
 
@@ -118,6 +193,10 @@ export default function ConfigChangesSwimlane({
   if (isLoading) return <LoadingSwimlaneState />;
   if (changes.length === 0) return <EmptySwimlaneState />;
 
+  const timelineOffsetWidth = hasPreRangeChanges
+    ? MORE_TIME_RANGE_BAR_WIDTH
+    : 0;
+
   let rowIdx = 0;
 
   const renderGroup = (
@@ -135,6 +214,7 @@ export default function ConfigChangesSwimlane({
           numBuckets={numBuckets}
           onItemClicked={onItemClicked}
           onResizeMouseDown={onResizeMouseDown}
+          timelineOffsetWidth={timelineOffsetWidth}
           min={min}
           max={max}
           indentLevel={indentLevel}
@@ -156,6 +236,7 @@ export default function ConfigChangesSwimlane({
           numBuckets={numBuckets}
           onItemClicked={onItemClicked}
           onResizeMouseDown={onResizeMouseDown}
+          timelineOffsetWidth={timelineOffsetWidth}
           min={min}
           max={max}
           indentLevel={indentLevel}
@@ -174,13 +255,18 @@ export default function ConfigChangesSwimlane({
       <TimeAxisHeader
         columnWidth={columnWidth}
         markersRef={markersRef}
+        timelineOffsetWidth={timelineOffsetWidth}
         ticks={ticks}
         min={min}
         max={max}
       />
 
       <ConfigChangesSwimlaneLegend changes={changes} />
 
+      {hasPreRangeChanges && (
+        <MoreTimeRangeBar left={columnWidth} onClick={increaseTimeRange} />
+      )}
+
       <div className="flex-1">{groups.map((group) => renderGroup(group))}</div>
     </div>
   );

src/components/Configs/Changes/Swimlane/GroupParentRow.tsx

@@ -19,6 +19,7 @@ export function GroupParentRow({
   numBuckets,
   onItemClicked,
   onResizeMouseDown,
+  timelineOffsetWidth = 0,
   min,
   max,
   indentLevel = 0
@@ -30,6 +31,7 @@ export function GroupParentRow({
   numBuckets: number;
   onItemClicked: (change: ConfigChange) => void;
   onResizeMouseDown: (e: React.MouseEvent) => void;
+  timelineOffsetWidth?: number;
   min: number;
   max: number;
   indentLevel?: number;
@@ -110,7 +112,10 @@ export function GroupParentRow({
         <ResizeHandle onMouseDown={onResizeMouseDown} />
       </div>
       {collapsed && (
-        <div className="flex flex-1 flex-row items-stretch border-l border-gray-200">
+        <div
+          className="flex flex-1 flex-row items-stretch border-l border-gray-200"
+          style={{ paddingLeft: timelineOffsetWidth }}
+        >
           <BucketCells
             buckets={mergedBuckets}
             numBuckets={numBuckets}

src/components/Configs/Changes/Swimlane/MoreTimeRangeHandle.tsx

@@ -0,0 +1,27 @@
+export const MORE_TIME_RANGE_BAR_WIDTH = 16;
+
+export function MoreTimeRangeBar({
+  left,
+  onClick
+}: {
+  left: number;
+  onClick: () => void;
+}) {
+  return (
+    <div className="sticky top-0 z-30 h-0">
+      <button
+        type="button"
+        title="Increase time range"
+        aria-label="Increase time range"
+        onClick={(e) => {
+          e.stopPropagation();
+          onClick();
+        }}
+        className="absolute top-0 flex h-screen items-center justify-center border-x border-gray-200 bg-gray-50 text-[9px] font-medium uppercase tracking-wide text-gray-400 hover:bg-blue-50 hover:text-blue-600"
+        style={{ left, width: MORE_TIME_RANGE_BAR_WIDTH }}
+      >
+        <span className="[writing-mode:vertical-rl]">More</span>
+      </button>
+    </div>
+  );
+}

src/components/Configs/Changes/Swimlane/SwimlaneRow.tsx

@@ -12,6 +12,7 @@ export function SwimlaneRow({
   numBuckets,
   onItemClicked,
   onResizeMouseDown,
+  timelineOffsetWidth = 0,
   min,
   max,
   indentLevel = 0,
@@ -22,6 +23,7 @@ export function SwimlaneRow({
   numBuckets: number;
   onItemClicked: (change: ConfigChange) => void;
   onResizeMouseDown: (e: React.MouseEvent) => void;
+  timelineOffsetWidth?: number;
   min: number;
   max: number;
   indentLevel?: number;
@@ -47,15 +49,22 @@ export function SwimlaneRow({
             <span className="truncate">{row.name}</span>
           </ConfigsTypeIcon>
         </div>
+
         <span className="h-4 w-px shrink-0 bg-gray-200" />
+
         <SeverityBadges
           severity={row.severity}
           changes={allChanges}
           onExpand={onItemClicked}
         />
+
         <ResizeHandle onMouseDown={onResizeMouseDown} />
       </div>
-      <div className="flex flex-1 flex-row items-stretch border-l border-gray-200">
+
+      <div
+        className="flex flex-1 flex-row items-stretch border-l border-gray-200"
+        style={{ paddingLeft: timelineOffsetWidth }}
+      >
         {row.preRangeBadge && (
           <span className="flex items-center px-1 text-[10px] text-gray-400">
             {row.preRangeBadge}

src/components/Configs/Changes/Swimlane/TimeAxisHeader.tsx

@@ -5,12 +5,14 @@ import { calcPercent } from "./Utils";
 export function TimeAxisHeader({
   columnWidth,
   markersRef,
+  timelineOffsetWidth = 0,
   ticks,
   min,
   max
 }: {
   columnWidth: number;
   markersRef: React.MutableRefObject<HTMLDivElement | null>;
+  timelineOffsetWidth?: number;
   ticks: number[];
   min: number;
   max: number;
@@ -20,6 +22,7 @@ export function TimeAxisHeader({
       <div className="shrink-0" style={{ width: columnWidth }} />
       <div
         className="relative flex-1 border-l border-gray-200 px-2 py-1"
+        style={{ paddingLeft: timelineOffsetWidth }}
         ref={(el) => {
           markersRef.current = el;
         }}