Merge pull request #42 from simonsobs/queue

Add Queue
simonsobs · May 7, 2024 · aefa479 · aefa479
2 parents 338f60f + 99dba79
commit aefa479
Show file tree

Hide file tree

Showing 51 changed files with 1,504 additions and 210 deletions.
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
     <link rel="icon" href="/favicon.ico">
     <title>loading..</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.x/css/materialdesignicons.min.css">
   </head>
   <body>
     <noscript>

diff --git a/package.json b/package.json
@@ -14,6 +14,8 @@
   "dependencies": {
     "@material/material-color-utilities": "^0.2.7",
     "@urql/vue": "^1.1.2",
+    "@vuelidate/core": "^2.0.3",
+    "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^10.7.2",
     "@vueuse/integrations": "^10.7.2",
     "canvas": "^2.11.2",
@@ -24,7 +26,7 @@
     "pinia": "^2.1.7",
     "vue": "~3.4.18",
     "vue-router": "^4.2.5",
-    "vuetify": "~3.5.3"
+    "vuetify": "~3.5.14"
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",
@@ -55,6 +57,6 @@
     "vite": "~5.1.1",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vite-plugin-package-version": "^1.1.0",
-    "vitest": "~1.2.2"
+    "vitest": "~1.4.0"
   }
 }
diff --git a/src/api/index.ts b/src/api/index.ts
@@ -2,4 +2,5 @@ export * from "./use-run-no-subscription";
 export * from "./use-state-subscription";
 export * from "./use-trace_ids-subscription";
 export * from "./use-continuous-enabled-subscription";
-export * from "./use-schedule-auto-mode-subscription";
+export * from "./use-schedule-auto-mode-state-subscription";
+export * from "./use-schedule-auto-mode-mode-subscription";
diff --git a/src/api/use-schedule-auto-mode-mode-subscription.ts b/src/api/use-schedule-auto-mode-mode-subscription.ts
@@ -0,0 +1,42 @@
+import { computed } from "vue";
+import type { ComputedRef } from "vue";
+import {
+  useQScheduleAutoModeModeQuery,
+  useScheduleAutoModeModeSubscription,
+} from "@/graphql/codegen/generated";
+
+// type AutoMode = "off" | "scheduler" | "queue";
+
+interface _ScheduleAutoModeModeSubscription {
+  autoModeMode: ComputedRef<string | undefined>;
+  error: ComputedRef<Error | undefined>;
+  subscription: ReturnType<typeof useScheduleAutoModeModeSubscription>;
+  query: ReturnType<typeof useQScheduleAutoModeModeQuery>;
+}
+
+type ScheduleAutoModeModeSubscription = _ScheduleAutoModeModeSubscription &
+  PromiseLike<_ScheduleAutoModeModeSubscription>;
+
+export function useSubscribeScheduleAutoModeMode(): ScheduleAutoModeModeSubscription {
+  const query = useQScheduleAutoModeModeQuery({ requestPolicy: "network-only" });
+  const subscription = useScheduleAutoModeModeSubscription();
+
+  const error = computed(() => subscription.error?.value || query.error?.value);
+
+  const autoModeMode = computed(() =>
+    error.value
+      ? undefined
+      : subscription.data?.value?.scheduleAutoModeMode ||
+        query.data?.value?.schedule.autoMode.mode
+  );
+
+  const ret = { autoModeMode, error, subscription, query };
+
+  return {
+    ...ret,
+    async then(onFulfilled, onRejected) {
+      await query;
+      return Promise.resolve(ret).then(onFulfilled, onRejected);
+    },
+  };
+}
diff --git a/...pi/use-schedule-auto-mode-subscription.ts → ...-schedule-auto-mode-state-subscription.ts b/...pi/use-schedule-auto-mode-subscription.ts → ...-schedule-auto-mode-state-subscription.ts
@@ -5,18 +5,17 @@ import {
   useScheduleAutoModeStateSubscription,
 } from "@/graphql/codegen/generated";
 
-interface _ScheduleAutoModeSubscription {
-  autoMode: ComputedRef<boolean | undefined>;
+interface _ScheduleAutoModeStateSubscription {
   autoModeState: ComputedRef<string | undefined>;
   error: ComputedRef<Error | undefined>;
   subscription: ReturnType<typeof useScheduleAutoModeStateSubscription>;
   query: ReturnType<typeof useQScheduleAutoModeStateQuery>;
 }
 
-type ScheduleAutoModeSubscription = _ScheduleAutoModeSubscription &
-  PromiseLike<_ScheduleAutoModeSubscription>;
+type ScheduleAutoModeStateSubscription = _ScheduleAutoModeStateSubscription &
+  PromiseLike<_ScheduleAutoModeStateSubscription>;
 
-export function useSubscribeScheduleAutoMode(): ScheduleAutoModeSubscription {
+export function useSubscribeScheduleAutoModeState(): ScheduleAutoModeStateSubscription {
   const query = useQScheduleAutoModeStateQuery({ requestPolicy: "network-only" });
   const subscription = useScheduleAutoModeStateSubscription();
 
@@ -29,13 +28,7 @@ export function useSubscribeScheduleAutoMode(): ScheduleAutoModeSubscription {
         query.data?.value?.schedule.autoMode.state
   );
 
-  const autoMode = computed(() => {
-    const s = autoModeState.value;
-    if (s === "off") return false;
-    if (s === "waiting" || s?.startsWith("auto")) return true;
-    return undefined;
-  });
-  const ret = { autoMode, autoModeState, error, subscription, query };
+  const ret = { autoModeState, error, subscription, query };
 
   return {
     ...ret,

diff --git a/src/api/use-schedule-queue-items-subscription.ts b/src/api/use-schedule-queue-items-subscription.ts
@@ -0,0 +1,43 @@
+import { computed } from "vue";
+import type { ComputedRef } from "vue";
+import {
+  useQScheduleQueueItemsQuery,
+  useSScheduleQueueItemsSubscription,
+} from "@/graphql/codegen/generated";
+import type { ScheduleQueueItem } from "@/graphql/codegen/generated";
+
+interface _ScheduleQueueItemsSubscription {
+  items: ComputedRef<ScheduleQueueItem[] | undefined>;
+  loading: ComputedRef<boolean>;
+  error: ComputedRef<Error | undefined>;
+  subscription: ReturnType<typeof useSScheduleQueueItemsSubscription>;
+  query: ReturnType<typeof useQScheduleQueueItemsQuery>;
+}
+
+type ScheduleQueueItemsSubscription = _ScheduleQueueItemsSubscription &
+  PromiseLike<_ScheduleQueueItemsSubscription>;
+
+export function useSubscribeScheduleQueueItems(): ScheduleQueueItemsSubscription {
+  const query = useQScheduleQueueItemsQuery({ requestPolicy: "network-only" });
+  const subscription = useSScheduleQueueItemsSubscription();
+
+  const loading = computed(() => query.fetching?.value);
+  const error = computed(() => subscription.error?.value || query.error?.value);
+
+  const items = computed(() =>
+    error.value
+      ? undefined
+      : subscription.data?.value?.scheduleQueueItems ||
+        query.data?.value?.schedule.queue.items
+  );
+
+  const ret = { items, loading, error, subscription, query };
+
+  return {
+    ...ret,
+    async then(onFulfilled, onRejected) {
+      await query;
+      return Promise.resolve(ret).then(onFulfilled, onRejected);
+    },
+  };
+}
diff --git a/src/app/AppBar.vue b/src/app/AppBar.vue
@@ -13,13 +13,15 @@
       </router-link>
     </template>
     <template v-slot:append>
-      <span v-if="!mobile"> {{ version }} </span>
-      <v-btn icon="mdi-graphql" :href="apiHttp" target="_blank"> </v-btn>
-      <toggle-dark-mode-button></toggle-dark-mode-button>
-      <schedule-ctrl></schedule-ctrl>
+      <template v-if="!mobile">
+        <span class="mx-4"> {{ version }} </span>
+        <v-btn icon="mdi-graphql" :href="apiHttp" target="_blank"> </v-btn>
+        <toggle-dark-mode-button></toggle-dark-mode-button>
+      </template>
+      <auto-mode-button></auto-mode-button>
     </template>
     <template v-slot:extension v-if="!mobile">
-        <tab-navi></tab-navi>
+      <tab-navi></tab-navi>
     </template>
   </v-app-bar>
 </template>
@@ -29,10 +31,10 @@ import { ref, computed } from "vue";
 import { useDisplay } from "vuetify";
 
 import { useConfig } from "@/utils/config";
+import ToggleDarkModeButton from "@/components/utils/ToggleDarkModeButtonWithTooltip.vue";
+import AutoModeButton from "@/components/auto-mode-button/AutoModeButton.vue";
 
 import TabNavi from "./TabNavi.vue";
-import ToggleDarkModeButton from "@/components/utils/ToggleDarkModeButton.vue";
-import ScheduleCtrl from "@/components/ScheduleCtrl.vue";
 
 const { mobile } = useDisplay();
 

diff --git a/src/app/AppMain.vue b/src/app/AppMain.vue
@@ -25,6 +25,18 @@
     </div>
   </div>
 </template>
+<!-- Note on transition and keep-alive:
+
+The v-fade-transition component has options leave-absolute and hide-on-leave.
+
+The combination of leave-absolute and keep-alive should work. However, the
+component content might shift before the transition starts unless the
+component's CSS is carefully designed. This shift can be quite distracting.
+
+If that happens, instead of leave-absolute, hide-on-leave can be useful. However,
+hide-on-leave doesn't work with keep-alive because the component content will
+stay hidden.
+-->
 
 <script setup lang="ts">
 import { useDisplay } from "vuetify";

diff --git a/src/app/NavigationDrawer.vue b/src/app/NavigationDrawer.vue
@@ -1,11 +1,12 @@
 <template>
   <v-navigation-drawer disable-resize-watcher comment="fallthrough attributes">
     <div class="px-8 py-5">
-      <span class="text-primary font-weight-bold"> {{ appName }} </span>
+      <span class="text-primary font-weight-bold"> {{ appName }} : {{ apiName }} </span>
     </div>
     <list-navi></list-navi>
     <template v-slot:append>
       <div class="ma-4 d-flex justify-space-around align-center">
+        <toggle-dark-mode-button></toggle-dark-mode-button>
         <span class="text-secondary text-body-2">v{{ version }}</span>
       </div>
     </template>
@@ -15,8 +16,10 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import { useConfig } from "@/utils/config";
+import ToggleDarkModeButton from "@/components/utils/ToggleDarkModeButton.vue";
 import ListNavi from "./ListNavi.vue";
 const { config } = useConfig();
 const version = ref(import.meta.env.PACKAGE_VERSION);
 const appName = computed(() => config.value.appName || "loading...");
+const apiName = computed(() => config.value.apiName || "");
 </script>
diff --git a/src/app/navi-items.ts b/src/app/navi-items.ts
@@ -36,6 +36,12 @@ export function useNaviItems() {
       to: toValue(lastInDb),
       exact: false,
     },
+    {
+      icon: "mdi-list-box",
+      title: "Queue",
+      to: { name: "queue" },
+      exact: true,
+    }
   ]);
 
   return { naviItems };

diff --git a/src/components/DialogAutoMode.vue b/src/components/DialogAutoMode.vue
diff --git a/src/components/ScheduleCtrl.vue b/src/components/ScheduleCtrl.vue
diff --git a/src/components/auto-mode-button/AutoModeButton.vue b/src/components/auto-mode-button/AutoModeButton.vue
@@ -0,0 +1,17 @@
+<template>
+  <v-card-actions>
+    <button-off v-if="mode === 'off'"></button-off>
+    <button-scheduler v-else-if="mode === 'scheduler'"></button-scheduler>
+    <button-queue v-else-if="mode === 'queue'"></button-queue>
+    <button-error v-else></button-error>
+  </v-card-actions>
+</template>
+
+<script setup lang="ts">
+import ButtonError from "./modes/error/Button.vue";
+import ButtonOff from "./modes/off/Button.vue";
+import ButtonScheduler from "./modes/scheduler/Button.vue";
+import ButtonQueue from "./modes/queue/Button.vue";
+import { useSubscribeScheduleAutoModeMode } from "@/api";
+const { autoModeMode: mode } = await useSubscribeScheduleAutoModeMode();
+</script>
diff --git a/src/components/auto-mode-button/modes/error/Button.vue b/src/components/auto-mode-button/modes/error/Button.vue
@@ -0,0 +1,12 @@
+<template>
+    <v-menu>
+      <template v-slot:activator="{ props }">
+        <v-btn v-bind="props" variant="tonal" color="error"> Auto Mode: Unknown </v-btn>
+      </template>
+        <dialog-error></dialog-error>
+    </v-menu>
+</template>
+
+<script setup lang="ts">
+import DialogError from "./Dialog.vue";
+</script>