Add scheduler preview

src/app/navi-items.ts

@@ -42,6 +42,12 @@ export function useNaviItems() {
       to: { name: "queue" },
       exact: true,
     },
+    {
+      icon: "mdi-script-text",
+      title: "Preview",
+      to: { name: "preview" },
+      exact: true,
+    },
   ]);
 
   return { naviItems };

src/components/schedule/preview/Editor.vue

@@ -0,0 +1,16 @@
+<template>
+  <div ref="element" style="height: 100%"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs } from "vue";
+import { useMonacoEditor } from "@/utils/monaco-editor";
+
+interface Props {
+  source: string;
+}
+const props = defineProps<Props>();
+const { source } = toRefs(props);
+const element = ref<HTMLElement>();
+useMonacoEditor({ element, source });
+</script>

src/components/schedule/preview/PreviewFrame.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="g-container">
+    <div class="g-breadcrumb">
+      <VBreadcrumbs :items="breadcrumb"> </VBreadcrumbs>
+    </div>
+    <div class="g-top">
+      <VBtn variant="flat" color="primary-fixed" :disabled="loading" @click="load">
+        preview
+      </VBtn>
+      <VProgressCircular
+        indeterminate
+        size="25"
+        color="primary"
+        v-if="loading"
+      ></VProgressCircular>
+    </div>
+    <div class="g-body" v-if="!loading">
+      <VAlert type="error" variant="tonal" v-if="error">
+        <pre
+          v-text="error"
+          style="white-space: pre-wrap; overflow-wrap: anywhere"
+        ></pre>
+      </VAlert>
+      <editor :source="script" v-else-if="script"> </editor>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { usePreview } from "./preview";
+import Editor from "./Editor.vue";
+const breadcrumb = [{ title: "Scheduler Preview", disabled: false }];
+const { script, loading, error, load } = usePreview();
+</script>
+
+<style scoped>
+.g-container {
+  block-size: 100%;
+  display: grid;
+  padding: 12px;
+  row-gap: 24px;
+  justify-content: center;
+  grid-template-columns: minmax(min-content, 960px);
+  grid-template-rows: min-content min-content 1fr;
+  grid-template-areas: "breadcrumb" "top" "body";
+}
+
+.g-breadcrumb {
+  grid-area: breadcrumb;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.g-top {
+  grid-area: top;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.g-body {
+  grid-area: body;
+  block-size: 100%;
+}
+</style>

src/components/schedule/preview/PreviewView.vue

@@ -0,0 +1,7 @@
+<template>
+  <PreviewFrame></PreviewFrame>
+</template>
+
+<script setup lang="ts">
+import PreviewFrame from "./PreviewFrame.vue";
+</script>

src/components/schedule/preview/preview.ts

@@ -0,0 +1,43 @@
+import { computed } from "vue";
+import type { Ref, ComputedRef } from "vue";
+import { refThrottled } from "@vueuse/core";
+import { useScheduleSchedulerPreviewQuery } from "@/graphql/codegen/generated";
+import { useRefresh } from "@/graphql/urql";
+
+interface _UsePreviewResponse {
+  script: ComputedRef<string | undefined>;
+  loading: Ref<boolean>;
+  error: ComputedRef<Error | undefined>;
+  load: () => Promise<void>;
+}
+
+type UsePreviewResponse = _UsePreviewResponse & PromiseLike<_UsePreviewResponse>;
+
+export function usePreview(): UsePreviewResponse {
+  const query = useScheduleSchedulerPreviewQuery({
+    requestPolicy: "network-only",
+    variables: {},
+    pause: true,
+  });
+
+  const { refresh: load, refreshing } = useRefresh(query);
+
+  const loading = refThrottled(
+    computed(() => query.fetching.value || refreshing.value),
+    300
+  );
+
+  const error = computed(() => query.error?.value);
+
+  const script = computed(() => query.data.value?.schedule.scheduler.preview.script);
+
+  const ret = { script, loading, error, load };
+
+  return {
+    ...ret,
+    async then(onFulfilled, onRejected) {
+      await query;
+      return Promise.resolve(ret).then(onFulfilled, onRejected);
+    },
+  };
+}

src/graphql/codegen/generated.ts

@@ -314,6 +314,7 @@ export type QueryScheduleScheduler = {
   apiUrl: Scalars['String']['output'];
   lengthMinutes: Scalars['Int']['output'];
   policy: Scalars['String']['output'];
+  preview: ScheduleSchedulerPreviewItem;
 };
 
 export type RunNode = {
@@ -389,6 +390,11 @@ export type ScheduleQueuePushInput = {
   script: Scalars['String']['input'];
 };
 
+export type ScheduleSchedulerPreviewItem = {
+  __typename?: 'ScheduleSchedulerPreviewItem';
+  script: Scalars['String']['output'];
+};
+
 export type StdoutNode = {
   __typename?: 'StdoutNode';
   id: Scalars['Int']['output'];
@@ -689,6 +695,11 @@ export type ScheduleQueueItemsQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type ScheduleQueueItemsQuery = { __typename?: 'Query', schedule: { __typename?: 'QuerySchedule', queue: { __typename?: 'QueryScheduleQueue', items: Array<{ __typename?: 'ScheduleQueueItem', id: number, name: string, createdAt: any, script: string }> } } };
 
+export type ScheduleSchedulerPreviewQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type ScheduleSchedulerPreviewQuery = { __typename?: 'Query', schedule: { __typename?: 'QuerySchedule', scheduler: { __typename?: 'QueryScheduleScheduler', preview: { __typename?: 'ScheduleSchedulerPreviewItem', script: string } } } };
+
 export type CtrlContinuousEnabledSSubscriptionVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -1141,6 +1152,21 @@ export const ScheduleQueueItemsDocument = gql`
 export function useScheduleQueueItemsQuery(options: Omit<Urql.UseQueryArgs<never, ScheduleQueueItemsQueryVariables>, 'query'>) {
   return Urql.useQuery<ScheduleQueueItemsQuery, ScheduleQueueItemsQueryVariables>({ query: ScheduleQueueItemsDocument, ...options });
 };
+export const ScheduleSchedulerPreviewDocument = gql`
+    query ScheduleSchedulerPreview {
+  schedule {
+    scheduler {
+      preview {
+        script
+      }
+    }
+  }
+}
+    `;
+
+export function useScheduleSchedulerPreviewQuery(options: Omit<Urql.UseQueryArgs<never, ScheduleSchedulerPreviewQueryVariables>, 'query'>) {
+  return Urql.useQuery<ScheduleSchedulerPreviewQuery, ScheduleSchedulerPreviewQueryVariables>({ query: ScheduleSchedulerPreviewDocument, ...options });
+};
 export const CtrlContinuousEnabledSDocument = gql`
     subscription CtrlContinuousEnabledS {
   ctrlContinuousEnabled

src/graphql/gql/queries/schedule/scheduler/Preview.gql

@@ -0,0 +1,9 @@
+query ScheduleSchedulerPreview {
+  schedule {
+    scheduler {
+      preview {
+        script
+      }
+    }
+  }
+}

src/plugins/router.ts

@@ -21,6 +21,11 @@ const routes: RouteRecordRaw[] = [
     name: "queue",
     component: () => import("@/components/schedule/queue/QueueView.vue"),
   },
+  {
+    path: "/preview",
+    name: "preview",
+    component: () => import("@/components/schedule/preview/PreviewView.vue"),
+  },
   {
     path: "/db/runs",
     name: "runs",