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

package/vue-components/v3/cards/StatCard.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+interface Props {
+  label: string;
+  value?: string | number;
+  suffix?: string;
+  progress?: number;
+  progressColor?: "success" | "info" | "warning" | "danger";
+  modifierClasses?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  value: "",
+  suffix: "",
+  progressColor: "success",
+  modifierClasses: "",
+});
+</script>
+
+<template>
+  <div class="is-flex is-flex-direction-column gap-8 p-12 b-1 is-rounded-8 bg-white is-clipped" :class="modifierClasses">
+    <div class="is-flex is-justify-content-space-between is-align-items-flex-start gap-8">
+      <p class="heading has-text-grey mb-0 tracking-normal">{{ label }}</p>
+      <slot name="badge" />
+    </div>
+
+    <div class="is-flex-grow-1">
+      <slot>
+        <p class="is-flex is-flex-wrap-wrap is-align-items-baseline gap-4">
+          <strong class="text-code font-28">{{ value }}</strong>
+          <span v-if="suffix" class="has-text-grey">{{ suffix }}</span>
+        </p>
+      </slot>
+    </div>
+
+    <progress
+      v-if="progress !== undefined"
+      class="progress height-6 mb-0"
+      :class="`is-${progressColor}`"
+      :value="progress"
+      max="100"
+    />
+
+    <div
+      v-if="$slots.footer"
+      class="is-flex is-justify-content-space-between is-align-items-center gap-8 text-xs has-text-grey"
+    >
+      <slot name="footer" />
+    </div>
+  </div>
+</template>

package/vue-components/v3/cards/SummaryCard.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import HeroiconsClipboardDocumentCheck from "~icons/heroicons/clipboard-document-check";
+
+interface SummaryItem {
+  // unique key; also used for the `item-<key>` slot
+  key?: string;
+  label: string;
+  value?: string | number;
+  // muted text shown after the value, e.g. "/ 20m SLA target"
+  suffix?: string;
+  // colors the value (and the tile for "warning" / "danger")
+  type?: "default" | "success" | "warning" | "danger";
+  // render the value in monospace font
+  mono?: boolean;
+  modifierClasses?: string;
+}
+
+interface Props {
+  title?: string;
+  // shown as a tag at the top right, e.g. "Workflow ID: #pitr-wf-94022"
+  tag?: string;
+  items?: SummaryItem[];
+  // items per row on desktop
+  columns?: 1 | 2 | 3 | 4;
+  showIcon?: boolean;
+  modifierClasses?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  title: "",
+  tag: "",
+  items: () => [],
+  columns: 3,
+  showIcon: true,
+  modifierClasses: "",
+});
+</script>
+
+<template>
+  <div class="summary-card" :class="modifierClasses">
+    <div
+      v-if="title || tag || $slots.header"
+      class="sc-header is-flex is-justify-content-space-between is-align-items-center is-flex-wrap-wrap gap-8"
+    >
+      <slot name="header">
+        <h5 class="sc-title is-flex is-align-items-center gap-12 mb-0">
+          <slot name="icon">
+            <HeroiconsClipboardDocumentCheck v-if="showIcon" class="sc-icon" />
+          </slot>
+          {{ title }}
+        </h5>
+        <span v-if="tag" class="sc-tag">{{ tag }}</span>
+      </slot>
+    </div>
+
+    <div class="sc-grid" :style="{ '--sc-columns': columns }">
+      <div
+        v-for="(item, idx) in items"
+        :key="item.key ?? idx"
+        class="sc-item"
+        :class="[`is-${item.type ?? 'default'}`, item.modifierClasses]"
+      >
+        <p class="sc-label mb-4">{{ item.label }}</p>
+        <slot :name="`item-${item.key ?? idx}`" :item="item">
+          <p class="sc-value mb-0" :class="{ 'is-mono': item.mono }">
+            {{ item.value }}
+            <span v-if="item.suffix" class="sc-suffix">{{ item.suffix }}</span>
+          </p>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.summary-card {
+  --sc-mono: "Inconsolata", monospace;
+
+  padding: 24px 28px;
+  border: 1px solid $color-border-light;
+  border-radius: 12px;
+  background-color: $slate-95;
+}
+
+.sc-header {
+  margin-bottom: 20px;
+}
+
+.sc-title {
+  font-size: 18px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: $color-heading;
+
+  .sc-icon {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+    color: $success;
+  }
+}
+
+.sc-tag {
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-family: var(--sc-mono);
+  font-size: 14px;
+  color: $color-label;
+  background-color: $slate-90;
+}
+
+.sc-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--sc-columns), minmax(0, 1fr));
+  gap: 24px;
+
+  @media (max-width: 768px) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+.sc-item {
+  padding: 16px 18px;
+  border: 1px solid $color-border;
+  border-radius: 8px;
+  background-color: $white-100;
+
+  &.is-success .sc-value {
+    color: $success;
+  }
+
+  &.is-warning {
+    border-color: $yellow-80;
+    background-color: $yellow-80;
+
+    .sc-label,
+    .sc-value {
+      color: $yellow-40;
+    }
+  }
+
+  &.is-danger {
+    border-color: $red-90;
+    background-color: $red-95;
+
+    .sc-label,
+    .sc-value {
+      color: $danger;
+    }
+  }
+}
+
+.sc-label {
+  font-size: 14px;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: $color-label;
+}
+
+.sc-value {
+  font-size: 16px;
+  font-weight: 600;
+  color: $color-heading;
+
+  &.is-mono {
+    font-family: var(--sc-mono);
+  }
+}
+
+.sc-suffix {
+  margin-left: 8px;
+  font-size: 14px;
+  font-weight: 400;
+  color: $color-label;
+}
+</style>

package/vue-components/v3/cards/TableCard.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts" generic="Row extends object">
+import { computed } from "vue";
+import type { AcTableCol } from "../../types/table";
+import AcTable from "../table/Table.vue";
+import TableRow from "../table/TableRow.vue";
+import TableCell from "../table/TableCell.vue";
+
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    description?: string;
+    columns: { key: string; label: string }[];
+    rows: Row[];
+    isLoaderActive?: boolean;
+    modifierClasses?: string;
+  }>(),
+  {
+    description: "",
+    isLoaderActive: false,
+    modifierClasses: "",
+  },
+);
+
+const tableHeaders = computed<AcTableCol[]>(() =>
+  props.columns.map(({ label }) => ({ name: label, type: "string", priority: 0 })),
+);
+</script>
+
+<template>
+  <div class="b-1 is-rounded-8 bg-white" :class="modifierClasses">
+    <div class="p-20 is-flex is-justify-content-space-between is-align-items-flex-start gap-16">
+      <div>
+        <h5>{{ title }}</h5>
+        <p v-if="description" class="has-text-grey">{{ description }}</p>
+      </div>
+      <slot name="actions" />
+    </div>
+
+    <AcTable
+      :table-headers="tableHeaders"
+      :is-loader-active="isLoaderActive"
+      :is-table-empty="!rows.length"
+      table-style=""
+    >
+      <TableRow v-for="(row, index) in rows" :key="index">
+        <TableCell v-for="column in columns" :key="column.key" class="pt-12 pb-12">
+          <slot :name="`cell-${column.key}`" :row="row" :value="row[column.key as keyof Row]">{{
+            row[column.key as keyof Row]
+          }}</slot>
+        </TableCell>
+      </TableRow>
+    </AcTable>
+
+    <div
+      v-if="$slots.footer"
+      class="is-flex is-justify-content-space-between is-align-items-center gap-8 pl-20 pr-20 pb-12"
+    >
+      <slot name="footer" />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,240 @@
+<script setup lang="ts">
+import { computed, watch } from "vue";
+
+import AcButton from "../button/Button.vue";
+import AcSegmentedControl from "../button/SegmentedControl.vue";
+import ScheduledMarker from "./ScheduledMarker.vue";
+import TimelineTrack from "./TimelineTrack.vue";
+import PhArrowClockwise from "~icons/ph/arrow-clockwise";
+
+import type { RecoveryPoint, RecoveryTrack, TimeRangeOption, TimelineHover } from "./types";
+import { DAY_MS, axisTicks, defaultRangeOptions, formatTime, parseDuration, toMs, type TimeDomain } from "./timeline";
+
+interface Props {
+  title?: string;
+  description?: string;
+  tracks: RecoveryTrack[];
+  now?: string | number;
+  loading?: boolean;
+  editableRanges?: boolean;
+  footnote?: string;
+  labelWidth?: string;
+  modifierClasses?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: "Recoverable Window",
+  description: "",
+  now: undefined,
+  loading: false,
+  editableRanges: false,
+  footnote: "",
+  labelWidth: "150px",
+  modifierClasses: "",
+});
+
+const emit = defineEmits<{
+  (e: "refresh"): void;
+  (e: "hover", payload: TimelineHover): void;
+  (e: "leave"): void;
+  (e: "select", point: RecoveryPoint): void;
+}>();
+
+const range = defineModel<string>("range", { default: "" });
+const ranges = defineModel<TimeRangeOption[]>("ranges", { default: () => defaultRangeOptions });
+
+const rangeLabels = computed<string[]>({
+  get: () => ranges.value.map((option) => option.label),
+  set: (labels) => {
+    ranges.value = labels.map((label, index) => ({
+      label,
+      durationMs: parseDuration(label) ?? ranges.value[index]?.durationMs ?? DAY_MS,
+    }));
+  },
+});
+
+watch(
+  ranges,
+  (options) => {
+    if (!options.some((option) => option.label === range.value)) range.value = options[0]?.label ?? "";
+  },
+  { immediate: true },
+);
+
+const nowMs = computed(() => toMs(props.now) ?? Date.now());
+
+const domain = computed<TimeDomain>(() => {
+  const selected = ranges.value.find((option) => option.label === range.value) ?? ranges.value[0];
+  const durationMs = selected?.durationMs ?? DAY_MS;
+  return { start: nowMs.value - durationMs, end: nowMs.value, durationMs };
+});
+
+const ticks = computed(() => axisTicks(domain.value));
+
+const nowLabel = computed(() => `now (${formatTime(nowMs.value)} Local Time)`);
+
+const gridStyle = computed(() => ({ "--rw-label-width": props.labelWidth }));
+</script>
+
+<template>
+  <div class="rw-card p-20 b-1 is-rounded-8 bg-white" :class="modifierClasses">
+    <div class="is-flex is-justify-content-space-between is-align-items-flex-start gap-16 mb-20">
+      <div>
+        <h5 class="mb-4">{{ title }}</h5>
+        <p v-if="description" class="text-sm has-text-grey mb-0">{{ description }}</p>
+      </div>
+
+      <div class="is-flex is-align-items-center gap-8">
+        <slot name="actions" />
+        <ac-segmented-control v-model:options="rangeLabels" v-model="range" :editable="editableRanges" />
+        <ac-button
+          icon-class="unplugin-icon"
+          modifier-classes="is-tinny is-white b-1"
+          tooltip="Refresh"
+          @click="emit('refresh')"
+        >
+          <template #icon>
+            <PhArrowClockwise />
+          </template>
+        </ac-button>
+      </div>
+    </div>
+
+    <div class="rw-grid" :class="{ 'rw-grid--loading': loading }" :style="gridStyle">
+      <template v-for="track in tracks" :key="track.key">
+        <div class="is-flex is-align-items-center gap-8">
+          <span class="rw-dot" :class="`rw-dot--${track.status ?? 'success'}`" />
+          <span class="text-sm">{{ track.label }}</span>
+        </div>
+        <timeline-track
+          :track="track"
+          :domain="domain"
+          @hover="emit('hover', $event)"
+          @leave="emit('leave')"
+          @select="emit('select', $event)"
+        />
+      </template>
+
+      <div />
+      <div class="rw-axis">
+        <span v-for="tick in ticks" :key="tick.time" class="rw-axis-tick" :style="{ left: `${tick.offset}%` }">
+          {{ tick.label }}
+        </span>
+        <span class="rw-axis-now">
+          <span class="rw-dot rw-dot--danger" />
+          {{ nowLabel }}
+        </span>
+      </div>
+    </div>
+
+    <div
+      class="rw-footer mt-12 pt-12 is-flex is-justify-content-space-between is-align-items-center is-flex-wrap-wrap gap-8"
+    >
+      <div class="is-flex is-flex-wrap-wrap is-align-items-center gap-16">
+        <slot name="legend">
+          <span class="rw-legend-item"><i class="rw-swatch rw-swatch--pitr" />Any point recoverable (PITR)</span>
+          <span class="rw-legend-item"><i class="rw-swatch rw-swatch--verified" />Verified Snapshot</span>
+          <span class="rw-legend-item"><i class="rw-swatch rw-swatch--failed" />Failed run (logged)</span>
+          <span class="rw-legend-item"><scheduled-marker class="rw-swatch rw-swatch--scheduled" />Next scheduled</span>
+        </slot>
+      </div>
+      <span v-if="footnote" class="text-code text-xs has-text-grey">{{ footnote }}</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "../../styles/components/charts/recoverable-window";
+
+.rw-grid {
+  display: grid;
+  grid-template-columns: var(--rw-label-width) 1fr;
+  column-gap: 16px;
+  row-gap: 14px;
+  align-items: center;
+
+  &--loading {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
+.rw-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background-color: $rw-dot-success;
+
+  &--warning {
+    background-color: $rw-dot-warning;
+  }
+
+  &--danger {
+    background-color: $rw-dot-danger;
+  }
+}
+
+.rw-axis {
+  position: relative;
+  height: 18px;
+  font-size: 12px;
+  color: $rw-axis-text;
+
+  .rw-axis-tick {
+    position: absolute;
+    transform: translateX(-50%);
+    font-family: monospace;
+    white-space: nowrap;
+  }
+
+  .rw-axis-now {
+    position: absolute;
+    right: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-family: monospace;
+    color: $rw-failed;
+    white-space: nowrap;
+  }
+}
+
+.rw-footer {
+  border-top: 1px solid $rw-rail-border;
+}
+
+.rw-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+}
+
+.rw-swatch {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  display: inline-block;
+
+  &--pitr {
+    background-color: $rw-pitr-legend;
+  }
+
+  &--verified {
+    background-color: $rw-snapshot;
+  }
+
+  &--failed {
+    background-color: $rw-failed;
+  }
+
+  &--scheduled {
+    width: 10px;
+    height: 14px;
+    border-radius: 0;
+    background-color: transparent;
+    color: $rw-scheduled;
+  }
+}
+</style>