@raclettejs/workbench 0.1.35 → 0.1.36-canary.0

package/plugins/raclette__cache/frontend/widgets/CacheListWidget.vue

@@ -0,0 +1,742 @@
+<template>
+  <div class="tw:p-4 tw:pt-2">
+    <v-alert
+      v-if="showValueTruncatedWarning"
+      type="warning"
+      density="compact"
+      class="tw:mb-3"
+      :text="$t('workbench.cacheList.truncatedDetailHint')"
+    />
+
+    <template v-if="!isValueView">
+    <BaseDataTable
+      :items="tableItems"
+      :exportable-items="exportableItems"
+      :loading="isLoading"
+      :headers="listHeaders"
+      :data-name="$t('workbench.cacheList.dataName')"
+      :show-filters="true"
+      :show-actions-column="true"
+      :actions-header-title="$t('workbench.cacheList.tableActions')"
+      :group-by="listAllKeys ? 'keyGroup' : undefined"
+      item-value="_id"
+      :row-click-handler="openDetail"
+    >
+      <template #toolbar-leading>
+        <v-select
+          v-model="db"
+          density="compact"
+          hide-details
+          variant="outlined"
+          class="tw:min-w-[5rem]"
+          :items="dbOptions"
+          :label="$t('workbench.cacheList.dbLabel')"
+          @update:model-value="reloadFromStart"
+        />
+        <v-text-field
+          v-model="pattern"
+          density="compact"
+          hide-details
+          variant="outlined"
+          class="tw:min-w-[14rem]"
+          :label="$t('workbench.cacheList.patternLabel')"
+          :placeholder="$t('workbench.cacheList.patternPlaceholder')"
+          prepend-inner-icon="mdi-magnify"
+          clearable
+          @keyup.enter="reloadFromStart"
+          @click:clear="reloadFromStart"
+        />
+        <v-select
+          v-model="limit"
+          density="compact"
+          hide-details
+          variant="outlined"
+          class="tw:min-w-[8rem]"
+          :items="batchSizeOptions"
+          :label="$t('workbench.cacheList.batchSizeLabel')"
+          @update:model-value="reloadFromStart"
+        />
+        <v-autocomplete
+          v-model="pickerKey"
+          density="compact"
+          hide-details
+          variant="outlined"
+          class="tw:min-w-[16rem]"
+          :items="keyPickerItems"
+          :label="$t('workbench.cacheList.keyPickerLabel')"
+          @update:model-value="onKeyPickerSelect"
+        />
+        <v-btn
+          variant="tonal"
+          prepend-icon="mdi-refresh"
+          :text="$t('workbench.cacheList.refresh')"
+          :loading="isLoading"
+          @click="reloadFromStart"
+        />
+      </template>
+      <template #toolbar-end>
+        <v-btn
+          v-if="hasMore"
+          variant="outlined"
+          prepend-icon="mdi-chevron-down"
+          :text="$t('workbench.cacheList.loadMore')"
+          :loading="isLoadingMore"
+          @click="loadMore"
+        />
+        <span
+          v-if="total !== null"
+          class="tw:text-sm tw:text-medium-emphasis tw:whitespace-nowrap"
+        >
+          {{
+            $t("workbench.cacheList.showingCount", {
+              shown: tableItems.length,
+              total,
+            })
+          }}
+          ·
+          {{ $t("workbench.cacheList.dbActive", { db: activeDb }) }}
+        </span>
+      </template>
+      <template #item.value="{ item }">
+        <code class="tw:text-xs tw:break-all tw:line-clamp-2">
+          {{ displayValue(item) }}
+        </code>
+        <v-chip
+          v-if="item.truncated"
+          size="x-small"
+          color="warning"
+          class="tw:ml-1"
+          :text="$t('workbench.cacheList.truncated')"
+        />
+      </template>
+      <template #row-actions="{ item }">
+        <v-tooltip
+          :text="$t('workbench.cacheList.openValueTable')"
+          location="top"
+        >
+          <template #activator="{ props: tooltipProps }">
+            <v-btn
+              v-bind="tooltipProps"
+              icon="mdi-table"
+              size="small"
+              variant="text"
+              color="primary"
+              :aria-label="openValueTableAriaLabel(item)"
+              @click.stop.prevent="openValueTable(item)"
+            />
+          </template>
+        </v-tooltip>
+      </template>
+    </BaseDataTable>
+
+    <div class="tw:flex tw:justify-center tw:mt-2">
+      <v-btn
+        prepend-icon="mdi-table-cog"
+        rounded
+        variant="tonal"
+        color="primary"
+        @click="listConfigureDialogOpen = true"
+      >
+        {{ $t("workbench.cacheList.customizeTable") }}
+        <template v-if="listDisabledHeaders.length" #append>
+          ({{ listDisabledHeaders.length }})
+        </template>
+      </v-btn>
+    </div>
+
+    <TableColumnConfigDialog
+      v-model="listConfigureDialogOpen"
+      :headers="listAllHeaders"
+      :disabled-headers="listDisabledHeaders"
+      @toggle-header="handleToggleListHeader"
+      @select-all="handleSelectAllListHeaders"
+      @deselect-all="handleDeselectAllListHeaders"
+    />
+    </template>
+
+    <template v-else>
+    <div class="tw:flex tw:flex-wrap tw:gap-2 tw:items-center tw:justify-between tw:mb-3">
+      <div class="tw:flex tw:flex-wrap tw:gap-2 tw:items-center">
+        <v-btn
+          variant="tonal"
+          prepend-icon="mdi-arrow-left"
+          :text="$t('workbench.cacheList.backToList')"
+          @click="exitValueView"
+        />
+        <v-autocomplete
+          v-model="pickerKey"
+          density="compact"
+          hide-details
+          variant="outlined"
+          class="tw:min-w-[16rem]"
+          :items="keyPickerItems"
+          :label="$t('workbench.cacheList.keyPickerLabel')"
+          clearable
+          @update:model-value="onKeyPickerSelect"
+          @click:clear="exitValueView"
+        />
+      </div>
+      <span
+        v-if="valueTableEntry"
+        class="tw:text-sm tw:text-medium-emphasis tw:whitespace-nowrap"
+      >
+        {{ $t("workbench.cacheList.detailTtl") }}:
+        {{ valueTableEntry.ttlLabel }}
+        ·
+        {{ $t("workbench.cacheList.dbActive", { db: activeDb }) }}
+      </span>
+    </div>
+
+    <v-progress-linear
+      v-if="isLoadingCacheEntry"
+      indeterminate
+      class="tw:mb-3"
+    />
+
+    <BaseDataTable
+      v-if="!valueShowPrettyPrint"
+      :items="valueTableItems"
+      :headers="visibleValueTableHeaders"
+      :loading="isLoadingCacheEntry"
+      :data-name="valueTableDataName"
+      :show-filters="valueTableItems.length > 1"
+      :show-export="false"
+      :show-actions-column="false"
+      item-value="_id"
+    >
+      <template
+        v-for="header in visibleValueTableHeaders"
+        :key="header.key"
+        #[`item.${header.key}`]="{ item }"
+      >
+        <code class="tw:text-xs tw:break-all tw:whitespace-pre-wrap">{{
+          formatValueTableCell(item[header.key])
+        }}</code>
+      </template>
+    </BaseDataTable>
+
+    <pre
+      v-else-if="valueTableEntry && !isLoadingCacheEntry"
+      class="tw:text-xs tw:overflow-auto tw:max-h-[calc(100vh-16rem)] tw:p-3 tw:rounded tw:bg-surface-variant"
+    >{{ formatDetailValue(valueTableEntry) }}</pre>
+
+    <div v-if="!valueShowPrettyPrint" class="tw:flex tw:justify-center tw:mt-2">
+      <v-btn
+        prepend-icon="mdi-table-cog"
+        rounded
+        variant="tonal"
+        color="primary"
+        @click="valueConfigureDialogOpen = true"
+      >
+        {{ $t("workbench.cacheList.customizeTable") }}
+        <template v-if="valueDisabledHeaders.length" #append>
+          ({{ valueDisabledHeaders.length }})
+        </template>
+      </v-btn>
+    </div>
+
+    <TableColumnConfigDialog
+      v-if="!valueShowPrettyPrint"
+      v-model="valueConfigureDialogOpen"
+      :headers="valueTableAllHeaders"
+      :disabled-headers="valueDisabledHeaders"
+      @toggle-header="handleToggleValueHeader"
+      @select-all="handleSelectAllValueHeaders"
+      @deselect-all="handleDeselectAllValueHeaders"
+    />
+    </template>
+
+    <v-dialog v-model="detailOpen" max-width="720">
+      <v-card v-if="selectedEntry">
+        <v-card-title class="tw:break-all">
+          {{ selectedEntry.key }}
+        </v-card-title>
+        <v-card-subtitle>
+          {{ $t("workbench.cacheList.detailTtl") }}:
+          {{ selectedEntry.ttlLabel }}
+        </v-card-subtitle>
+        <v-card-text>
+          <v-alert
+            v-if="selectedEntry.truncated"
+            type="warning"
+            density="compact"
+            class="tw:mb-3"
+            :text="$t('workbench.cacheList.truncatedDetailHint')"
+          />
+          <pre class="tw:text-xs tw:overflow-auto tw:max-h-[24rem]">{{
+            formatDetailValue(selectedEntry)
+          }}</pre>
+        </v-card-text>
+        <v-card-actions>
+          <v-btn
+            variant="tonal"
+            color="primary"
+            prepend-icon="mdi-table"
+            :text="$t('workbench.cacheList.openValueTable')"
+            @click="openValueTableFromDetail"
+          />
+          <v-spacer />
+          <v-btn :text="$t('workbench.global.back')" @click="detailOpen = false" />
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { usePluginApi } from "@raclettejs/core/orchestrator/composables"
+import BaseDataTable from "@raclettejs/core/orchestrator/components/dataTable/BaseDataTable.vue"
+import TableColumnConfigDialog from "../components/TableColumnConfigDialog.vue"
+import { useTableColumnConfig } from "../composables/useTableColumnConfig"
+import {
+  CACHE_KEY_COLUMN,
+  cacheEntriesValueTableRows,
+  isScalarFallbackResult,
+  type ValueTableHeader,
+} from "../utils/cacheValueTableRows"
+import { computed, onMounted, ref } from "vue"
+import { useI18n } from "vue-i18n"
+
+type CacheEntry = {
+  _id: string
+  key: string
+  keyGroup: string
+  value: string
+  valuePreview?: string
+  truncated: boolean
+  valueParsed?: unknown
+  ttl: number
+  ttlLabel: string
+}
+
+type CacheEntryPayloadItem = {
+  _id?: string
+  _source?: CacheEntry
+}
+
+type CacheEntriesBody = {
+  items?: CacheEntryPayloadItem[]
+  hits?: {
+    total: number
+    offset: number
+    limit: number
+    hasMore: boolean
+    instanceId: string
+    pattern: string
+    listAll: boolean
+    db: number
+  }
+}
+
+type CacheEntryBody = {
+  items?: CacheEntryPayloadItem[]
+  hits?: {
+    total: number
+    key: string
+    db: number
+    found: boolean
+  }
+}
+
+type CacheEntriesResponse = {
+  body?: CacheEntriesBody
+}
+
+type CacheEntryResponse = {
+  body?: CacheEntryBody
+}
+
+type ExecuteResult = {
+  result?: CacheEntry[] | { _source?: CacheEntry }[]
+  /** Axios response (useStore) or payload (useStore: false). */
+  response?: CacheEntriesResponse | CacheEntryResponse | { data?: CacheEntriesResponse | CacheEntryResponse }
+}
+
+const responsePayload = (
+  result: ExecuteResult | undefined,
+): CacheEntriesResponse | CacheEntryResponse | undefined => {
+  const raw = result?.response
+  if (!raw) return undefined
+  if ("body" in raw) return raw as CacheEntriesResponse | CacheEntryResponse
+  return (raw as { data?: CacheEntriesResponse | CacheEntryResponse }).data
+}
+
+defineProps<{
+  uuid: string
+}>()
+
+const { t } = useI18n()
+const { $data } = usePluginApi()
+
+const { execute, isLoading, clear } = $data.cacheEntries.get({
+  options: { useStore: true },
+})
+
+const { execute: fetchCacheEntry, isLoading: isLoadingCacheEntry } =
+  $data.cacheEntry.get({
+    options: { useStore: false },
+  })
+
+const pattern = ref("")
+const db = ref(0)
+const dbOptions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
+const activeDb = ref(0)
+const listAllKeys = ref(true)
+const tableItems = ref<CacheEntry[]>([])
+const exportableItems = ref<CacheEntry[]>([])
+const total = ref<number | null>(null)
+const hasMore = ref(false)
+const offset = ref(0)
+const batchSizeOptions = [25, 50, 100, 200, 500]
+const limit = ref(100)
+const isLoadingMore = ref(false)
+const detailOpen = ref(false)
+const selectedEntry = ref<CacheEntry | null>(null)
+const pickerKey = ref<string | null>(null)
+const valueTableEntry = ref<CacheEntry | null>(null)
+const valueTableItems = ref<Record<string, string>[]>([])
+const valueTableAllHeaders = ref<ValueTableHeader[]>([])
+const valueShowPrettyPrint = ref(false)
+
+const {
+  configureDialogOpen: listConfigureDialogOpen,
+  disabledHeaders: listDisabledHeaders,
+  filterHeaders: filterListHeaders,
+  toggleHeader: handleToggleListHeader,
+  selectAll: selectAllListHeaders,
+  deselectAll: deselectAllListHeaders,
+} = useTableColumnConfig("workbench-cache-list-hidden-columns")
+
+const {
+  configureDialogOpen: valueConfigureDialogOpen,
+  disabledHeaders: valueDisabledHeaders,
+  filterHeaders: filterValueHeaders,
+  toggleHeader: handleToggleValueHeader,
+  selectAll: selectAllValueHeaders,
+  deselectAll: deselectAllValueHeaders,
+} = useTableColumnConfig("workbench-cache-value-hidden-columns")
+
+const handleSelectAllListHeaders = () => {
+  selectAllListHeaders(listAllHeaders.value)
+}
+
+const handleDeselectAllListHeaders = () => {
+  deselectAllListHeaders(listAllHeaders.value)
+}
+
+const handleSelectAllValueHeaders = () => {
+  selectAllValueHeaders(valueTableAllHeaders.value)
+}
+
+const handleDeselectAllValueHeaders = () => {
+  deselectAllValueHeaders(valueTableAllHeaders.value)
+}
+
+const isValueView = computed(() => valueTableEntry.value !== null)
+
+/** Only warn when transport string was truncated and full parsed data is unavailable. */
+const showValueTruncatedWarning = computed(() => {
+  const entry = valueTableEntry.value
+  if (!isValueView.value || !entry?.truncated) {
+    return false
+  }
+  return entry.valueParsed === undefined
+})
+
+const valueTableDataName = computed(() => {
+  const key = valueTableEntry.value?.key
+  if (!key) {
+    return t("workbench.cacheList.valueTableTitle")
+  }
+  return `${t("workbench.cacheList.valueTableTitle")}: ${key}`
+})
+
+const keyPickerItems = computed(() => {
+  const keys = new Set(tableItems.value.map((row) => row.key))
+  if (pickerKey.value?.trim()) {
+    keys.add(pickerKey.value.trim())
+  }
+  return [...keys].sort((a, b) => a.localeCompare(b))
+})
+
+const exitValueView = () => {
+  valueTableEntry.value = null
+  valueTableItems.value = []
+  valueTableAllHeaders.value = []
+  valueShowPrettyPrint.value = false
+  pickerKey.value = null
+}
+
+const listAllHeaders = computed(() => {
+  const base = [
+    {
+      title: t("workbench.cacheList.tableHeaders.key"),
+      key: "key",
+    },
+    {
+      title: t("workbench.cacheList.tableHeaders.ttl"),
+      key: "ttlLabel",
+    },
+    {
+      title: t("workbench.cacheList.tableHeaders.value"),
+      key: "value",
+    },
+  ]
+
+  if (!listAllKeys.value) {
+    return base
+  }
+
+  return [
+    {
+      title: t("workbench.cacheList.tableHeaders.keyGroup"),
+      key: "keyGroup",
+    },
+    ...base,
+  ]
+})
+
+const listHeaders = computed(() =>
+  filterListHeaders(listAllHeaders.value),
+)
+
+const visibleValueTableHeaders = computed(() =>
+  filterValueHeaders(valueTableAllHeaders.value),
+)
+
+const valueHeaderTitle = (key: string) => {
+  if (key === CACHE_KEY_COLUMN) {
+    return t("workbench.cacheList.tableHeaders.key")
+  }
+  if (key === "value") {
+    return t("workbench.cacheList.valueTableHeaders.value")
+  }
+  if (key === "entryKey") {
+    return t("workbench.cacheList.valueTableHeaders.entryKey")
+  }
+  if (key === "raw") {
+    return t("workbench.cacheList.valueTableHeaders.raw")
+  }
+  return key
+}
+
+const toTableRow = (entry: Partial<CacheEntry> & { key?: string }): CacheEntry => {
+  const key = entry.key ?? String(entry._id ?? "")
+  return {
+    _id: key,
+    key,
+    keyGroup: entry.keyGroup ?? "",
+    value: entry.value ?? "",
+    valuePreview: entry.valuePreview,
+    truncated: entry.truncated ?? false,
+    valueParsed: entry.valueParsed,
+    ttl: entry.ttl ?? -2,
+    ttlLabel: entry.ttlLabel ?? "",
+  }
+}
+
+const extractEntries = (result: ExecuteResult | undefined): CacheEntry[] => {
+  if (Array.isArray(result?.result) && result.result.length > 0) {
+    return result.result.map((row) =>
+      toTableRow(
+        (row as { _source?: CacheEntry })._source ??
+          (row as CacheEntry),
+      ),
+    )
+  }
+
+  const items = responsePayload(result)?.body?.items ?? []
+  return items.map((item) =>
+    toTableRow(item._source ?? (item as unknown as CacheEntry)),
+  )
+}
+
+const extractSingleEntry = (
+  result: ExecuteResult | undefined,
+): CacheEntry | null => {
+  const entries = extractEntries(result)
+  return entries[0] ?? null
+}
+
+const applyHits = (result: ExecuteResult | undefined) => {
+  const hits = responsePayload(result)?.body?.hits
+  if (!hits || !("hasMore" in hits)) {
+    return
+  }
+  total.value = hits.total ?? tableItems.value.length
+  hasMore.value = hits.hasMore ?? false
+  listAllKeys.value = hits.listAll ?? !pattern.value.trim()
+  activeDb.value = hits.db ?? db.value
+}
+
+const buildQueryParams = () => {
+  const trimmed = pattern.value.trim()
+  const params: Record<string, number | string> = {
+    db: db.value,
+    offset: offset.value,
+    limit: limit.value,
+  }
+  if (trimmed.length > 0) {
+    params.pattern = trimmed
+  }
+  return params
+}
+
+const fetchEntries = async (append: boolean) => {
+  const result = (await execute(buildQueryParams())) as ExecuteResult | undefined
+  const entries = extractEntries(result)
+  applyHits(result)
+
+  if (append) {
+    const existing = new Set(tableItems.value.map((row) => row._id))
+    const merged = [...tableItems.value]
+    for (const entry of entries) {
+      if (!existing.has(entry._id)) {
+        merged.push(entry)
+        existing.add(entry._id)
+      }
+    }
+    tableItems.value = merged
+    exportableItems.value = merged
+  } else {
+    tableItems.value = entries
+    exportableItems.value = entries
+  }
+}
+
+const reloadFromStart = async () => {
+  offset.value = 0
+  await clear()
+  try {
+    await fetchEntries(false)
+  } catch {
+    tableItems.value = []
+    exportableItems.value = []
+    total.value = null
+    hasMore.value = false
+  }
+}
+
+const loadMore = async () => {
+  if (!hasMore.value) return
+  isLoadingMore.value = true
+  offset.value += limit.value
+  try {
+    await fetchEntries(true)
+  } finally {
+    isLoadingMore.value = false
+  }
+}
+
+const displayValue = (item: CacheEntry) => {
+  if (item.truncated && item.valuePreview) {
+    return item.valuePreview
+  }
+  if (item.valueParsed !== undefined) {
+    return JSON.stringify(item.valueParsed)
+  }
+  return item.value
+}
+
+const formatDetailValue = (item: CacheEntry) => {
+  if (item.valueParsed !== undefined) {
+    return JSON.stringify(item.valueParsed, null, 2)
+  }
+  return item.value
+}
+
+const formatValueTableCell = (value: string | undefined) => value ?? ""
+
+const openDetail = (item: CacheEntry) => {
+  selectedEntry.value = item
+  detailOpen.value = true
+}
+
+const openValueTableAriaLabel = (item: CacheEntry) =>
+  t("workbench.cacheList.openValueTableFor", { key: item.key })
+
+const openValueTable = (item: CacheEntry) => {
+  void loadEntryForKey(item.key)
+}
+
+const openValueTableFromDetail = () => {
+  const entry = selectedEntry.value
+  if (!entry) {
+    return
+  }
+  detailOpen.value = false
+  void loadEntryForKey(entry.key)
+}
+
+const applyValueTable = (entry: CacheEntry) => {
+  const { rows, headers: shapeHeaders } = cacheEntriesValueTableRows(
+    [entry],
+    entry,
+  )
+  valueShowPrettyPrint.value = isScalarFallbackResult(rows, shapeHeaders, entry)
+  valueTableItems.value = rows
+  valueTableAllHeaders.value = shapeHeaders.map((header) => ({
+    key: header.key,
+    title: valueHeaderTitle(header.key),
+  }))
+  valueTableEntry.value = entry
+  pickerKey.value = entry.key
+}
+
+const stubEntryForKey = (key: string): CacheEntry => {
+  const listRow = tableItems.value.find((row) => row.key === key)
+  if (listRow) {
+    return listRow
+  }
+  return {
+    _id: key,
+    key,
+    keyGroup: "",
+    value: "",
+    truncated: false,
+    ttl: -2,
+    ttlLabel: "",
+  }
+}
+
+const loadEntryForKey = async (key: string) => {
+  const trimmed = key.trim()
+  if (!trimmed.length || isLoadingCacheEntry.value) {
+    return
+  }
+
+  pickerKey.value = trimmed
+  valueTableEntry.value = stubEntryForKey(trimmed)
+  valueShowPrettyPrint.value = false
+
+  try {
+    const result = (await fetchCacheEntry({
+      key: trimmed,
+      db: db.value,
+    })) as ExecuteResult | undefined
+    const entry = extractSingleEntry(result)
+    if (!entry) {
+      exitValueView()
+      return
+    }
+    applyValueTable(entry)
+  } catch {
+    exitValueView()
+  }
+}
+
+const onKeyPickerSelect = (key: string | null | undefined) => {
+  const trimmed = key?.trim() ?? ""
+  if (!trimmed.length) {
+    if (isValueView.value) {
+      exitValueView()
+    }
+    return
+  }
+  void loadEntryForKey(trimmed)
+}
+
+onMounted(() => {
+  reloadFromStart()
+})
+</script>