@appscode/design-system 2.17.86 → 2.17.91-alpha.1

package/vue-components/v3/charts/ScheduledMarker.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts"></script>
+
+<template>
+  <svg viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1 5.2V1.6h3.1" />
+    <path d="M9 5.2V1.6H5.9" />
+    <path d="M1 10.8v3.6h3.1" />
+    <path d="M9 10.8v3.6H5.9" />
+  </svg>
+</template>
+
+<style lang="scss" scoped>
+svg {
+  stroke: currentColor;
+  stroke-width: 1.2;
+  stroke-linecap: square;
+}
+</style>

package/vue-components/v3/charts/TimelineTrack.vue

@@ -0,0 +1,405 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useElementSize } from "@vueuse/core";
+
+import ScheduledMarker from "./ScheduledMarker.vue";
+import type { RecoveryPoint, RecoveryTrack, TimelineHover } from "./types";
+import {
+  clipRange,
+  formatTimestamp,
+  isRecoverableAt,
+  offsetOf,
+  pointState,
+  subTicks,
+  timeAt,
+  toMs,
+  type PointState,
+  type TimeDomain,
+} from "./timeline";
+
+interface Props {
+  track: RecoveryTrack;
+  domain: TimeDomain;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (e: "hover", payload: TimelineHover): void;
+  (e: "leave"): void;
+  (e: "select", point: RecoveryPoint): void;
+}>();
+
+const rail = ref<HTMLElement | null>(null);
+const cursorOffset = ref<number | null>(null);
+const cursorTime = ref<number | null>(null);
+const hoveredMark = ref<Mark | null>(null);
+
+const { width: railWidth } = useElementSize(rail);
+
+const MARK_SLOT_PX = 14;
+const STATE_PRIORITY: PointState[] = ["failed", "running", "succeeded", "verified", "scheduled"];
+
+const isContinuous = computed(() => props.track.kind === "continuous");
+
+interface Box {
+  left: number;
+  width: number;
+}
+
+const spans = computed<Box[]>(() =>
+  (props.track.spans ?? []).reduce<Box[]>((boxes, span) => {
+    const box = clipRange(span, props.domain);
+    if (box) boxes.push({ left: box.left, width: box.width });
+    return boxes;
+  }, []),
+);
+
+const gaps = computed<(Box & { error?: string })[]>(() =>
+  (props.track.gaps ?? []).reduce<(Box & { error?: string })[]>((boxes, gap) => {
+    const box = clipRange(gap, props.domain);
+    if (box) boxes.push({ left: box.left, width: box.width, error: gap.error });
+    return boxes;
+  }, []),
+);
+
+interface Mark {
+  points: RecoveryPoint[];
+  time: number;
+  endTime: number;
+  offset: number;
+  state: PointState;
+  failed: number;
+}
+
+const rawMarks = computed<Mark[]>(() =>
+  (props.track.points ?? []).reduce<Mark[]>((list, point) => {
+    const time = toMs(point.snapshotTime);
+    if (time === undefined || time < props.domain.start || time > props.domain.end) return list;
+    const state = pointState(point);
+    list.push({
+      points: [point],
+      time,
+      endTime: time,
+      offset: offsetOf(time, props.domain),
+      state,
+      failed: state === "failed" ? 1 : 0,
+    });
+    return list;
+  }, []),
+);
+
+const marks = computed<Mark[]>(() => {
+  const list = rawMarks.value;
+  const capacity = railWidth.value ? Math.floor(railWidth.value / MARK_SLOT_PX) : list.length;
+  if (list.length <= capacity || capacity < 1) return list;
+
+  const bucketMs = props.domain.durationMs / capacity;
+  const buckets = new Map<number, Mark>();
+  list.forEach((mark) => {
+    const index = Math.min(capacity - 1, Math.floor((mark.time - props.domain.start) / bucketMs));
+    const bucket = buckets.get(index);
+    if (!bucket) {
+      const start = props.domain.start + index * bucketMs;
+      buckets.set(index, {
+        points: [...mark.points],
+        time: start,
+        endTime: start + bucketMs,
+        offset: offsetOf(start + bucketMs / 2, props.domain),
+        state: mark.state,
+        failed: mark.failed,
+      });
+      return;
+    }
+    bucket.points.push(...mark.points);
+    bucket.failed += mark.failed;
+    if (STATE_PRIORITY.indexOf(mark.state) < STATE_PRIORITY.indexOf(bucket.state)) bucket.state = mark.state;
+  });
+  return [...buckets.values()];
+});
+
+const nextScheduledOffset = computed(() => {
+  const time = toMs(props.track.nextScheduled);
+  if (time === undefined) return null;
+  return time > props.domain.end ? 100 : offsetOf(time, props.domain);
+});
+
+const guides = computed(() => (isContinuous.value ? subTicks(props.domain) : []));
+
+const cursorState = computed(() => {
+  if (cursorTime.value === null) return null;
+  return isRecoverableAt(cursorTime.value, props.track.spans, props.track.gaps);
+});
+
+const tooltip = computed(() => {
+  const mark = hoveredMark.value;
+  if (mark && mark.points.length > 1) {
+    const lines = [`${mark.points.length} runs`];
+    if (mark.failed) lines.push(`${mark.failed} failed`);
+    return { title: `${formatTimestamp(mark.time)} — ${formatTimestamp(mark.endTime)}`, lines };
+  }
+  if (mark) {
+    const point = mark.points[0];
+    const lines = [
+      point.phase === "Failed"
+        ? "Failed run"
+        : `${point.phase}${point.verificationStatus ? ` · ${point.verificationStatus}` : ""}`,
+    ];
+    if (point.size) lines.push(point.size);
+    if (point.error) lines.push(point.error);
+    return { title: formatTimestamp(mark.time), lines };
+  }
+  if (cursorTime.value === null) return null;
+  if (!isContinuous.value) return null;
+  const state = cursorState.value;
+  const lines = state?.recoverable
+    ? ["Any point recoverable"]
+    : [state?.gap ? "Gap — archive push failed" : "Outside recoverable window"];
+  if (state?.gap?.error) lines.push(state.gap.error);
+  return { title: formatTimestamp(cursorTime.value), lines };
+});
+
+function onMove(event: MouseEvent) {
+  const el = rail.value;
+  if (!el) return;
+  const rect = el.getBoundingClientRect();
+  const ratio = (event.clientX - rect.left) / rect.width;
+  const time = timeAt(ratio, props.domain);
+  cursorOffset.value = Math.min(100, Math.max(0, ratio * 100));
+  cursorTime.value = time;
+  const state = isRecoverableAt(time, props.track.spans, props.track.gaps);
+  const mark = hoveredMark.value;
+  const point = mark?.points.length === 1 ? mark.points[0] : undefined;
+  const recoverable = isContinuous.value ? state.recoverable : !!point && point.phase === "Succeeded";
+  emit("hover", { trackKey: props.track.key, time, recoverable, gap: state.gap, point: point ?? undefined });
+}
+
+function onLeave() {
+  cursorOffset.value = null;
+  cursorTime.value = null;
+  hoveredMark.value = null;
+  emit("leave");
+}
+</script>
+
+<template>
+  <div
+    ref="rail"
+    class="rw-track"
+    :class="isContinuous ? 'rw-track--continuous' : 'rw-track--discrete'"
+    @mousemove="onMove"
+    @mouseleave="onLeave"
+  >
+    <div v-if="isContinuous" class="rw-clip">
+      <span v-for="(guide, index) in guides" :key="`guide-${index}`" class="rw-guide" :style="{ left: `${guide}%` }" />
+
+      <span
+        v-for="(item, index) in spans"
+        :key="`span-${index}`"
+        class="rw-span"
+        :style="{ left: `${item.left}%`, width: `${item.width}%` }"
+      >
+        <span
+          class="rw-span-fill"
+          :style="{ left: `${(-item.left / item.width) * 100}%`, width: `${(100 / item.width) * 100}%` }"
+        />
+      </span>
+
+      <span
+        v-for="(item, index) in gaps"
+        :key="`gap-${index}`"
+        class="rw-gap"
+        :style="{ left: `${item.left}%`, width: `${item.width}%` }"
+      />
+
+      <span
+        v-for="item in rawMarks"
+        :key="`base-${item.time}`"
+        class="rw-base"
+        :class="`rw-base--${item.state}`"
+        :style="{ left: `${item.offset}%` }"
+        @mouseenter="hoveredMark = item"
+        @mouseleave="hoveredMark = null"
+      />
+
+      <span v-if="cursorOffset !== null" class="rw-cursor" :style="{ left: `${cursorOffset}%` }" />
+    </div>
+
+    <template v-else>
+      <span
+        v-for="item in marks"
+        :key="item.time"
+        class="rw-mark"
+        :class="[`rw-mark--${item.state}`, { 'rw-mark--grouped': item.points.length > 1 }]"
+        :style="{ left: `${item.offset}%` }"
+        @mouseenter="hoveredMark = item"
+        @mouseleave="hoveredMark = null"
+        @click="emit('select', item.points[0])"
+      />
+    </template>
+
+    <span
+      v-if="nextScheduledOffset !== null"
+      class="rw-mark rw-mark--scheduled"
+      :class="{ 'rw-mark--edge': nextScheduledOffset >= 99 }"
+      :style="nextScheduledOffset >= 99 ? undefined : { left: `${nextScheduledOffset}%` }"
+      :title="`Next scheduled${track.interval ? ` · every ${track.interval}` : ''}`"
+    >
+      <scheduled-marker />
+    </span>
+
+    <div
+      v-if="tooltip && cursorOffset !== null"
+      class="rw-tooltip"
+      :style="{ left: `${Math.min(92, Math.max(8, cursorOffset))}%` }"
+    >
+      <strong class="text-xs">{{ tooltip.title }}</strong>
+      <span v-for="(line, index) in tooltip.lines" :key="index" class="text-xs has-text-grey">{{ line }}</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "../../styles/components/charts/recoverable-window";
+
+.rw-track {
+  position: relative;
+  height: 26px;
+  border-radius: 4px;
+  cursor: crosshair;
+
+  &--continuous {
+    background-color: $rw-rail;
+  }
+
+  &--discrete {
+    background-color: $white-100;
+    border: 1px solid $rw-rail-border;
+  }
+}
+
+.rw-clip {
+  position: absolute;
+  inset: 0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.rw-guide {
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  width: 1px;
+  background-color: $rw-guide;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.rw-span {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  border-radius: 4px;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.rw-span-fill {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: linear-gradient(to right, $rw-pitr-start, $rw-pitr-end);
+}
+
+.rw-gap {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 3;
+  background-color: $rw-failed;
+}
+
+.rw-base {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  margin-left: -1px;
+  z-index: 4;
+  background-color: $rw-base-divider;
+
+  &--failed {
+    background-color: $rw-failed;
+  }
+}
+
+.rw-mark {
+  position: absolute;
+  top: 50%;
+  width: 10px;
+  height: 14px;
+  margin-left: -5px;
+  transform: translateY(-50%);
+  border-radius: 2px;
+  background-color: $rw-pitr-legend;
+
+  &--verified {
+    background-color: $rw-snapshot;
+  }
+
+  &--failed {
+    background-color: $rw-failed;
+  }
+
+  &--running {
+    background-color: $rw-running;
+  }
+
+  &--scheduled {
+    display: flex;
+    width: 10px;
+    height: 16px;
+    margin-left: -5px;
+    background-color: transparent;
+    color: $rw-scheduled;
+  }
+
+  &--grouped {
+    width: 6px;
+    margin-left: -3px;
+  }
+
+  &--edge {
+    left: auto;
+    right: 6px;
+    margin-left: 0;
+  }
+}
+
+.rw-cursor {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: rgba($rw-base-divider, 0.8);
+  z-index: 5;
+  pointer-events: none;
+}
+
+.rw-tooltip {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  transform: translateX(-50%);
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 6px 8px;
+  white-space: nowrap;
+  border-radius: 4px;
+  border: 1px solid $rw-rail-border;
+  background-color: $white-100;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  pointer-events: none;
+}
+</style>

package/vue-components/v3/charts/timeline.ts

@@ -0,0 +1,142 @@
+import type { RecoveryGap, RecoveryPoint, RecoverySpan, TimeRangeOption } from "./types";
+
+export const HOUR_MS = 60 * 60 * 1000;
+export const DAY_MS = 24 * HOUR_MS;
+
+export const defaultRangeOptions: TimeRangeOption[] = [
+  { label: "24h", durationMs: DAY_MS },
+  { label: "7d", durationMs: 7 * DAY_MS },
+  { label: "30d", durationMs: 30 * DAY_MS },
+];
+
+const DURATION_UNITS: Record<string, number> = {
+  m: 60 * 1000,
+  h: HOUR_MS,
+  d: DAY_MS,
+  w: 7 * DAY_MS,
+};
+
+export function parseDuration(label: string): number | undefined {
+  const match = /^\s*(\d+(?:\.\d+)?)\s*(m|h|d|w)\s*$/i.exec(label);
+  if (!match) return undefined;
+  const unit = DURATION_UNITS[match[2].toLowerCase()];
+  const value = Number(match[1]);
+  if (!unit || !value) return undefined;
+  return value * unit;
+}
+
+export interface TimeDomain {
+  start: number;
+  end: number;
+  durationMs: number;
+}
+
+export interface AxisTick {
+  time: number;
+  label: string;
+  offset: number;
+}
+
+export function toMs(value?: string | number | null): number | undefined {
+  if (value === undefined || value === null || value === "") return undefined;
+  const ms = typeof value === "number" ? value : Date.parse(value);
+  return Number.isNaN(ms) ? undefined : ms;
+}
+
+export function offsetOf(time: number, domain: TimeDomain): number {
+  const ratio = (time - domain.start) / domain.durationMs;
+  return Math.min(100, Math.max(0, ratio * 100));
+}
+
+export function timeAt(ratio: number, domain: TimeDomain): number {
+  const clamped = Math.min(1, Math.max(0, ratio));
+  return Math.round(domain.start + clamped * domain.durationMs);
+}
+
+export function clipRange(
+  range: { start?: string; end?: string },
+  domain: TimeDomain,
+): { left: number; width: number; start: number; end: number } | null {
+  const start = toMs(range.start) ?? domain.start;
+  const end = toMs(range.end) ?? domain.end;
+  if (end <= domain.start || start >= domain.end) return null;
+  const left = offsetOf(start, domain);
+  const width = offsetOf(end, domain) - left;
+  return { left, width: Math.max(width, 0.15), start, end };
+}
+
+function tickStep(durationMs: number): { step: number; withDate: boolean } {
+  if (durationMs <= DAY_MS) return { step: 4 * HOUR_MS, withDate: false };
+  if (durationMs <= 7 * DAY_MS) return { step: DAY_MS, withDate: true };
+  return { step: 5 * DAY_MS, withDate: true };
+}
+
+export function formatTime(time: number, withDate = false): string {
+  const date = new Date(time);
+  if (withDate) return date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+  return date.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit", hour12: false });
+}
+
+export function formatTimestamp(time: number): string {
+  return new Date(time).toLocaleString(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+  });
+}
+
+export function axisTicks(domain: TimeDomain): AxisTick[] {
+  const { step, withDate } = tickStep(domain.durationMs);
+  const ticks: AxisTick[] = [];
+  const offset = new Date(domain.start).getTimezoneOffset() * 60 * 1000;
+  let time = Math.ceil((domain.start - offset) / step) * step + offset;
+  while (time <= domain.end) {
+    ticks.push({ time, label: formatTime(time, withDate), offset: offsetOf(time, domain) });
+    time += step;
+  }
+  return ticks.filter((tick) => tick.offset <= 74);
+}
+
+export function subTicks(domain: TimeDomain): number[] {
+  const { step } = tickStep(domain.durationMs);
+  const sub = step / 2;
+  const offsetTz = new Date(domain.start).getTimezoneOffset() * 60 * 1000;
+  const marks: number[] = [];
+  let time = Math.ceil((domain.start - offsetTz) / sub) * sub + offsetTz;
+  while (time < domain.end) {
+    marks.push(offsetOf(time, domain));
+    time += sub;
+  }
+  return marks;
+}
+
+export function isRecoverableAt(
+  time: number,
+  spans: RecoverySpan[] = [],
+  gaps: RecoveryGap[] = [],
+): { recoverable: boolean; gap?: RecoveryGap } {
+  const inSpan = spans.some((span) => {
+    const start = toMs(span.start);
+    const end = toMs(span.end);
+    return start !== undefined && end !== undefined && time >= start && time <= end;
+  });
+  if (!inSpan) return { recoverable: false };
+  const gap = gaps.find((item) => {
+    const start = toMs(item.start);
+    const end = toMs(item.end);
+    return start !== undefined && end !== undefined && time >= start && time <= end;
+  });
+  return { recoverable: !gap, gap };
+}
+
+export type PointState = "verified" | "succeeded" | "failed" | "running" | "scheduled";
+
+export function pointState(point: RecoveryPoint): PointState {
+  if (point.phase === "Failed" || point.verificationStatus === "VerificationFailed") return "failed";
+  if (point.phase === "Pending" || point.phase === "Running") return "running";
+  if (point.verificationStatus === "Verified") return "verified";
+  return "succeeded";
+}

package/vue-components/v3/charts/types.ts

@@ -0,0 +1,51 @@
+export type SnapshotPhase = "Pending" | "Running" | "Succeeded" | "Failed";
+
+export type VerificationStatus = "Verified" | "NotVerified" | "VerificationFailed";
+
+export type TrackKind = "continuous" | "discrete";
+
+export interface RecoveryPoint {
+  snapshotTime: string;
+  phase: SnapshotPhase;
+  verificationStatus?: VerificationStatus;
+  snapshotID?: string;
+  size?: string;
+  error?: string;
+}
+
+export interface RecoverySpan {
+  start: string;
+  end: string;
+  lsn?: string;
+}
+
+export interface RecoveryGap {
+  start: string;
+  end: string;
+  error?: string;
+}
+
+export interface RecoveryTrack {
+  key: string;
+  label: string;
+  kind: TrackKind;
+  status?: "success" | "warning" | "danger";
+  spans?: RecoverySpan[];
+  gaps?: RecoveryGap[];
+  points?: RecoveryPoint[];
+  nextScheduled?: string;
+  interval?: string;
+}
+
+export interface TimelineHover {
+  trackKey: string;
+  time: number;
+  recoverable: boolean;
+  point?: RecoveryPoint;
+  gap?: RecoveryGap;
+}
+
+export interface TimeRangeOption {
+  label: string;
+  durationMs: number;
+}

package/vue-components/v3/navbar/ThemeMode.vue

@@ -29,9 +29,30 @@ const themeModes = ref<ThemeModes>({
 
 const emit = defineEmits(["set:theme"]);
 
+// localStorage throws when the origin's quota is full, and when storage is
+// unreachable altogether (private browsing, sandboxed iframe, blocked site
+// data, server-side render). Remembering the theme is a convenience, so a
+// failure must never stop the theme from being read or applied.
+const readThemeMode = (): string | null => {
+  try {
+    return localStorage.getItem("themeMode");
+  } catch {
+    // no stored preference available
+    return null;
+  }
+};
+
+const persistThemeMode = (mode: string) => {
+  try {
+    localStorage.setItem("themeMode", mode);
+  } catch {
+    // not remembered across reloads, but it still applies for this session
+  }
+};
+
 onMounted(() => {
   // get theme mode from localStorage or set default one
-  themeMode.value = localStorage.getItem("themeMode") || "light";
+  themeMode.value = readThemeMode() || "light";
 });
 
 onUnmounted(() => {
@@ -39,7 +60,7 @@ onUnmounted(() => {
 });
 
 const onThemeModeChange = (n: string) => {
-  localStorage.setItem("themeMode", n);
+  persistThemeMode(n);
 
   let theme = n;
   if (n === "system") {