nuxt-observe 0.0.2

package/dist/runtime/app/pages/settings/group-detail.vue

@@ -0,0 +1,149 @@
+<script setup>
+import { ref, watch } from "vue";
+import { useRoute, useRuntimeConfig, navigateTo } from "#imports";
+import { useObserveGroups, useObserveGroupDetail } from "../../composables/useObserveGroups";
+import { useObserveServices } from "../../composables/useObserveServices";
+import { useObserveAbility } from "../../composables/useObserveAbility";
+const route = useRoute();
+const id = route.params.id;
+const { prefix } = useRuntimeConfig().public.observe;
+const { data, pending, error, refresh } = useObserveGroupDetail(id);
+const { data: allServices } = useObserveServices();
+const { update, remove, setMembership } = useObserveGroups();
+const { can } = useObserveAbility();
+const renameOpen = ref(false);
+const renaming = ref(false);
+const savingMembers = ref(false);
+const memberIds = ref([]);
+watch(data, (d) => {
+  if (d) memberIds.value = d.services.map((s) => s.id);
+}, { immediate: true });
+async function onRename(name) {
+  renaming.value = true;
+  try {
+    await update(id, name);
+    renameOpen.value = false;
+    await refresh();
+  } finally {
+    renaming.value = false;
+  }
+}
+async function onSaveMembers() {
+  savingMembers.value = true;
+  try {
+    await setMembership(id, memberIds.value);
+    await refresh();
+  } finally {
+    savingMembers.value = false;
+  }
+}
+async function onDelete() {
+  await remove(id);
+  await navigateTo(`${prefix}/settings/groups`);
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <UButton
+      :to="`${prefix}/settings/groups`"
+      icon="i-lucide-arrow-left"
+      color="neutral"
+      variant="ghost"
+      size="sm"
+      label="Groups"
+    />
+
+    <UAlert
+      v-if="error"
+      color="error"
+      variant="subtle"
+      title="Failed to load group"
+      :description="error.message"
+    />
+
+    <template v-else-if="data">
+      <div class="flex items-start justify-between">
+        <div>
+          <h1 class="text-lg font-semibold">
+            {{ data.group.name }}
+          </h1>
+          <div class="font-mono text-xs text-muted">
+            {{ data.group.slug }}
+          </div>
+        </div>
+        <div
+          v-if="can('groups.manage')"
+          class="flex gap-2"
+        >
+          <UButton
+            icon="i-lucide-pencil"
+            color="neutral"
+            variant="soft"
+            label="Rename"
+            @click="() => {
+  renameOpen = true;
+}"
+          />
+          <UButton
+            icon="i-lucide-trash-2"
+            color="error"
+            variant="soft"
+            label="Delete"
+            @click="onDelete"
+          />
+        </div>
+      </div>
+
+      <section class="space-y-3">
+        <h2 class="text-sm font-semibold uppercase tracking-wider text-muted">
+          Member services
+        </h2>
+        <template v-if="can('groups.manage')">
+          <ObserveGroupMembershipEditor
+            v-model="memberIds"
+            :services="allServices ?? []"
+          />
+          <div class="flex justify-end">
+            <UButton
+              label="Save membership"
+              :loading="savingMembers"
+              @click="onSaveMembers"
+            />
+          </div>
+        </template>
+        <div
+          v-else-if="!data.services.length"
+          class="text-sm text-muted"
+        >
+          No services in this group.
+        </div>
+        <ul
+          v-else
+          class="space-y-1 text-sm"
+        >
+          <li
+            v-for="s in data.services"
+            :key="s.id"
+          >
+            {{ s.name }}
+          </li>
+        </ul>
+      </section>
+
+      <ObserveGroupFormModal
+        v-model:open="renameOpen"
+        :loading="renaming"
+        :initial-name="data.group.name"
+        @submit="onRename"
+      />
+    </template>
+
+    <div
+      v-else-if="pending"
+      class="text-sm text-muted"
+    >
+      Loading…
+    </div>
+  </div>
+</template>

package/dist/runtime/app/pages/settings/group-detail.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/settings/groups.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/settings/groups.vue

@@ -0,0 +1,107 @@
+<script setup>
+import { ref, computed } from "vue";
+import { useRuntimeConfig } from "#imports";
+import { useObserveGroups } from "../../composables/useObserveGroups";
+const { prefix } = useRuntimeConfig().public.observe;
+const { data, pending, error, refresh, create, remove } = useObserveGroups();
+const formOpen = ref(false);
+const creating = ref(false);
+async function onCreate(name) {
+  creating.value = true;
+  try {
+    await create(name);
+    formOpen.value = false;
+    await refresh();
+  } finally {
+    creating.value = false;
+  }
+}
+async function onDelete(group) {
+  await remove(group.id);
+  await refresh();
+}
+const columns = computed(() => [
+  { id: "name", accessorKey: "name", header: "Group" },
+  { id: "count", accessorKey: "serviceCount", header: "Services", meta: { class: { th: "text-right", td: "text-right tabular-nums" } } },
+  { id: "actions", header: "" }
+]);
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="flex items-center justify-between">
+      <p class="text-sm text-muted">
+        Groups organise services for scoping and rollups.
+      </p>
+      <ObserveCan capability="groups.manage">
+        <UButton
+          icon="i-lucide-plus"
+          label="New group"
+          @click="() => {
+  formOpen = true;
+}"
+        />
+      </ObserveCan>
+    </div>
+
+    <UAlert
+      v-if="error"
+      color="error"
+      variant="subtle"
+      title="Failed to load groups"
+      :description="error.message"
+    />
+
+    <UCard
+      v-else
+      :ui="{ body: 'p-0 sm:p-0' }"
+    >
+      <UTable
+        :data="data ?? []"
+        :columns="columns"
+        :loading="pending"
+        empty="No groups yet."
+      >
+        <template #name-cell="{ row }">
+          <NuxtLink
+            :to="`${prefix}/settings/groups/${row.original.id}`"
+            class="font-medium hover:underline"
+          >
+            {{ row.original.name }}
+          </NuxtLink>
+          <div class="text-xs text-muted">
+            {{ row.original.slug }}
+          </div>
+        </template>
+        <template #actions-cell="{ row }">
+          <ObserveCan capability="groups.manage">
+            <div class="flex justify-end gap-1">
+              <UButton
+                :to="`${prefix}/settings/groups/${row.original.id}`"
+                icon="i-lucide-pencil"
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                label="Manage"
+              />
+              <UButton
+                icon="i-lucide-trash-2"
+                color="error"
+                variant="ghost"
+                size="xs"
+                label="Delete"
+                @click="onDelete(row.original)"
+              />
+            </div>
+          </ObserveCan>
+        </template>
+      </UTable>
+    </UCard>
+
+    <ObserveGroupFormModal
+      v-model:open="formOpen"
+      :loading="creating"
+      @submit="onCreate"
+    />
+  </div>
+</template>

package/dist/runtime/app/pages/settings/groups.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/settings/index.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/settings/index.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { computed } from "vue";
+import { useRuntimeConfig } from "#imports";
+import { useObserveAbility } from "../../composables/useObserveAbility";
+const { prefix } = useRuntimeConfig().public.observe;
+const { can } = useObserveAbility();
+const cards = computed(() => {
+  const items = [
+    { title: "Services", description: "Register observables, manage ingest keys, origins and versions.", icon: "i-lucide-boxes", to: `${prefix}/settings/services` },
+    { title: "Groups", description: "Organise services into groups for scoping and rollups.", icon: "i-lucide-folder-tree", to: `${prefix}/settings/groups` }
+  ];
+  if (can("users.manage")) {
+    items.push({ title: "Users", description: "Manage dashboard users, roles and assigned scope.", icon: "i-lucide-users", to: `${prefix}/settings/users` });
+  }
+  if (can("migrations.manage")) {
+    items.push({ title: "Migrations", description: "Review and run gated schema migrations with live output.", icon: "i-lucide-database", to: `${prefix}/settings/migrations` });
+  }
+  return items;
+});
+</script>
+
+<template>
+  <div class="grid gap-4 sm:grid-cols-2">
+    <NuxtLink
+      v-for="c in cards"
+      :key="c.to"
+      :to="c.to"
+    >
+      <UCard class="h-full transition hover:bg-elevated/50">
+        <div class="flex items-start gap-3">
+          <UIcon
+            :name="c.icon"
+            class="size-6 shrink-0 text-primary"
+          />
+          <div>
+            <h2 class="font-semibold">
+              {{ c.title }}
+            </h2>
+            <p class="text-sm text-muted">
+              {{ c.description }}
+            </p>
+          </div>
+        </div>
+      </UCard>
+    </NuxtLink>
+  </div>
+</template>

package/dist/runtime/app/pages/settings/index.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/settings/migrations.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/settings/migrations.vue

@@ -0,0 +1,275 @@
+<script setup>
+import { ref, computed, nextTick, watch } from "vue";
+import { formatRelative } from "../../../shared/utils/format-relative";
+import { useObserveMigrations } from "../../composables/useObserveMigrations";
+const { status, pending, error, refresh, run } = useObserveMigrations();
+const statuses = computed(() => status.value?.statuses ?? []);
+const notApplied = computed(() => statuses.value.filter((s) => s.state !== "applied"));
+const appliedCount = computed(() => statuses.value.filter((s) => s.state === "applied").length);
+const willBackup = computed(() => notApplied.value.some((s) => s.class === "destructive"));
+const nextPendingId = computed(() => statuses.value.find((s) => s.state === "pending")?.id ?? null);
+const running = ref(false);
+const confirmOpen = ref(false);
+const logLines = ref([]);
+const termRef = ref(null);
+watch(logLines, async () => {
+  await nextTick();
+  if (termRef.value) termRef.value.scrollTop = termRef.value.scrollHeight;
+}, { deep: true });
+function onFrame(frame) {
+  if (frame.type === "log") logLines.value.push(frame.line);
+  else if (frame.type === "error") logLines.value.push(`[error] ${frame.message}`);
+  else if (frame.type === "complete") {
+    logLines.value.push(
+      frame.failedAt ? `[complete] stopped at ${frame.failedAt} (applied ${frame.applied.length})` : `[complete] applied ${frame.applied.length} migration(s)`
+    );
+  }
+}
+async function doRun(ids) {
+  if (running.value) return;
+  running.value = true;
+  logLines.value = [];
+  try {
+    await run(ids, onFrame);
+  } catch (e) {
+    logLines.value.push(`[error] ${e.message}`);
+  } finally {
+    running.value = false;
+    await refresh();
+  }
+}
+async function onRunAll() {
+  confirmOpen.value = false;
+  await doRun(void 0);
+}
+function lineClass(line) {
+  if (line.startsWith("[fail]") || line.startsWith("[error]")) return "text-error";
+  if (line.startsWith("[ok]") || line.startsWith("[complete]")) return "text-success";
+  if (line.startsWith("[backup]")) return "text-warning";
+  if (line.startsWith("[run]")) return "text-primary";
+  return "text-muted";
+}
+const columns = computed(() => [
+  { id: "id", accessorKey: "id", header: "Migration" },
+  { id: "class", accessorKey: "class", header: "Class" },
+  { id: "state", accessorKey: "state", header: "State" },
+  { id: "applied", accessorKey: "applied_at", header: "Applied", meta: { class: { th: "text-right", td: "text-right tabular-nums" } } },
+  { id: "actions", header: "" }
+]);
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="flex items-center justify-between gap-3">
+      <p class="text-sm text-muted">
+        Additive schema migrations apply automatically at boot. Destructive migrations wait
+        here for an explicit admin run; a database backup is taken before the first one.
+      </p>
+      <ObserveCan capability="migrations.manage">
+        <UButton
+          v-if="notApplied.length"
+          icon="i-lucide-play"
+          color="error"
+          label="Run all pending"
+          :loading="running"
+          :disabled="running"
+          @click="() => {
+  confirmOpen = true;
+}"
+        />
+      </ObserveCan>
+    </div>
+
+    <UAlert
+      v-if="error"
+      color="error"
+      variant="subtle"
+      title="Failed to load migrations"
+      :description="error.message"
+      :actions="[{ label: 'Retry', color: 'error', variant: 'soft', onClick: () => refresh() }]"
+    />
+
+    <template v-else>
+      <UAlert
+        v-if="(status?.driftWarnings?.length ?? 0) > 0"
+        color="warning"
+        variant="subtle"
+        icon="i-lucide-triangle-alert"
+        title="Checksum drift detected"
+        :description="`A shipped migration was edited after it ran: ${status?.driftWarnings.join(', ')}. This is a warning only; ship a corrective migration.`"
+      />
+
+      <UAlert
+        v-if="!pending && notApplied.length === 0"
+        color="success"
+        variant="subtle"
+        icon="i-lucide-check"
+        title="Schema is up to date"
+        :description="`${appliedCount} migration(s) applied.`"
+      />
+
+      <UCard :ui="{ body: 'p-0 sm:p-0' }">
+        <UTable
+          :data="statuses"
+          :columns="columns"
+          :loading="pending"
+          empty="No migrations registered."
+        >
+          <template #id-cell="{ row }">
+            <div class="font-medium">
+              {{ row.original.id }}
+            </div>
+            <div class="text-xs text-muted">
+              {{ row.original.description }}
+            </div>
+          </template>
+          <template #class-cell="{ row }">
+            <UBadge
+              :color="row.original.class === 'destructive' ? 'error' : 'neutral'"
+              variant="subtle"
+              :label="row.original.class"
+            />
+          </template>
+          <template #state-cell="{ row }">
+            <div class="flex items-center gap-1.5">
+              <UBadge
+                :color="row.original.state === 'applied' ? 'success' : row.original.state === 'pending' ? 'warning' : 'neutral'"
+                variant="subtle"
+                :label="row.original.state"
+              />
+              <UBadge
+                v-if="row.original.driftWarning"
+                color="warning"
+                variant="outline"
+                label="drift"
+              />
+            </div>
+          </template>
+          <template #applied-cell="{ row }">
+            <span
+              v-if="row.original.applied_at"
+              class="text-muted"
+            >{{ formatRelative(row.original.applied_at) }}</span>
+            <span
+              v-else
+              class="text-dimmed"
+            >—</span>
+          </template>
+          <template #actions-cell="{ row }">
+            <ObserveCan capability="migrations.manage">
+              <div
+                v-if="row.original.state !== 'applied'"
+                class="flex justify-end"
+              >
+                <UButton
+                  v-if="row.original.id === nextPendingId"
+                  icon="i-lucide-play"
+                  :color="row.original.class === 'destructive' ? 'error' : 'primary'"
+                  variant="ghost"
+                  size="xs"
+                  label="Run this"
+                  :loading="running"
+                  :disabled="running"
+                  @click="doRun([row.original.id])"
+                />
+                <UTooltip
+                  v-else
+                  text="An earlier pending migration must run first."
+                >
+                  <UButton
+                    icon="i-lucide-play"
+                    color="neutral"
+                    variant="ghost"
+                    size="xs"
+                    label="Run this"
+                    disabled
+                  />
+                </UTooltip>
+              </div>
+            </ObserveCan>
+          </template>
+        </UTable>
+      </UCard>
+
+      <UCard
+        v-if="logLines.length"
+        :ui="{ body: 'p-0 sm:p-0' }"
+      >
+        <template #header>
+          <div class="flex items-center gap-2">
+            <UIcon
+              name="i-lucide-terminal"
+              class="size-4"
+            />
+            <span class="text-sm font-medium">Migration output</span>
+          </div>
+        </template>
+        <div
+          ref="termRef"
+          class="max-h-80 overflow-y-auto bg-elevated/40 p-3 font-mono text-xs leading-relaxed"
+        >
+          <div
+            v-for="(line, i) in logLines"
+            :key="i"
+            :class="lineClass(line)"
+            class="whitespace-pre-wrap"
+          >
+            {{ line }}
+          </div>
+        </div>
+      </UCard>
+    </template>
+
+    <UModal
+      v-model:open="confirmOpen"
+      title="Run pending migrations"
+    >
+      <template #body>
+        <div class="space-y-3">
+          <p class="text-sm text-muted">
+            The following migration(s) will run in order:
+          </p>
+          <ul class="space-y-1 text-sm">
+            <li
+              v-for="m in notApplied"
+              :key="m.id"
+              class="flex items-center gap-2"
+            >
+              <UBadge
+                :color="m.class === 'destructive' ? 'error' : 'neutral'"
+                variant="subtle"
+                size="sm"
+                :label="m.class"
+              />
+              <span class="font-mono">{{ m.id }}</span>
+            </li>
+          </ul>
+          <UAlert
+            v-if="willBackup"
+            color="warning"
+            variant="subtle"
+            icon="i-lucide-database-backup"
+            title="A database backup is taken first"
+            description="A copy of the SQLite file is written next to it before the first destructive migration runs."
+          />
+          <div class="flex justify-end gap-2">
+            <UButton
+              color="neutral"
+              variant="ghost"
+              label="Cancel"
+              @click="() => {
+  confirmOpen = false;
+}"
+            />
+            <UButton
+              color="error"
+              label="Run migrations"
+              :loading="running"
+              @click="onRunAll"
+            />
+          </div>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>

package/dist/runtime/app/pages/settings/migrations.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/settings/service-detail.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;