support PriorityClass on frontend

web/api/v1/node.ts

@@ -5,7 +5,7 @@ export const applyNode = async (req: V1Node, onError: (_: string) => void) => {
   try {
     const res = await instance.post<V1Node>(`/nodes`, req);
     return res.data;
-  } catch (e) {
+  } catch (e: any) {
     onError(e);
   }
 };

web/api/v1/pod.ts

@@ -5,7 +5,7 @@ export const applyPod = async (req: V1Pod, onError: (_: string) => void) => {
   try {
     const res = await instance.post<V1Pod>(`/pods`, req);
     return res.data;
-  } catch (e) {
+  } catch (e: any) {
     onError(e);
   }
 };

web/api/v1/priorityclass.ts

@@ -0,0 +1,32 @@
+import { V1PriorityClass, V1PriorityClassList } from "@kubernetes/client-node";
+import { instance } from "@/api/v1/index";
+
+export const applyPriorityClass = async (
+  req: V1PriorityClass,
+  onError: (_: string) => void
+) => {
+  try {
+    const res = await instance.post<V1PriorityClass>(`/priorityclasses`, req);
+    return res.data;
+  } catch (e: any) {
+    onError(e);
+  }
+};
+
+export const listPriorityClass = async () => {
+  const res = await instance.get<V1PriorityClassList>(`/priorityclasses`, {});
+  return res.data;
+};
+
+export const getPriorityClass = async (name: string) => {
+  const res = await instance.get<V1PriorityClass>(
+    `/priorityclasses/${name}`,
+    {}
+  );
+  return res.data;
+};
+
+export const deletePriorityClass = async (name: string) => {
+  const res = await instance.delete(`/priorityclasses/${name}`, {});
+  return res.data;
+};

web/api/v1/pv.ts

@@ -14,7 +14,7 @@ export const applyPersistentVolume = async (
       req
     );
     return res.data;
-  } catch (e) {
+  } catch (e: any) {
     onError(e);
   }
 };

web/api/v1/pvc.ts

@@ -14,7 +14,7 @@ export const applyPersistentVolumeClaim = async (
       req
     );
     return res.data;
-  } catch (e) {
+  } catch (e: any) {
     onError(e);
   }
 };

web/api/v1/schedulerconfiguration.ts

@@ -11,7 +11,7 @@ export const applySchedulerConfiguration = async (
       req
     );
     return res.data;
-  } catch (e) {
+  } catch (e: any) {
     onError(e);
   }
 };

web/api/v1/storageclass.ts

@@ -8,7 +8,7 @@ export const applyStorageClass = async (
   try {
     const res = await instance.post<V1StorageClass>(`/storageclasses`, req);
     return res.data;
-  } catch (e) {
+  } catch (e: any) {
     onError(e);
   }
 };

web/components/PriorityClassList.vue

@@ -0,0 +1,56 @@
+<template>
+  <v-row v-if="priorityclasses.length !== 0" no-gutters>
+    <v-col>
+      <v-card class="ma-2" outlined>
+        <v-card-title class="mb-1"> PriorityClasses </v-card-title>
+        <v-card-actions>
+          <v-chip
+            v-for="(p, i) in priorityclasses"
+            :key="i"
+            class="ma-2"
+            color="primary"
+            outlined
+            large
+            label
+            @click.stop="onClick(p)"
+          >
+            {{ p.metadata.name }}
+          </v-chip>
+        </v-card-actions>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts">
+import { V1PriorityClass } from "@kubernetes/client-node";
+import {
+  computed,
+  inject,
+  onMounted,
+  defineComponent,
+} from "@nuxtjs/composition-api";
+import {} from "./lib/util";
+import PriorityClassStoreKey from "./StoreKey/PriorityClassStoreKey";
+export default defineComponent({
+  setup() {
+    const store = inject(PriorityClassStoreKey);
+    if (!store) {
+      throw new Error(`${PriorityClassStoreKey} is not provided`);
+    }
+
+    const getPriorityClassList = async () => {
+      await store.fetchlist();
+    };
+    const onClick = (priorityclass: V1PriorityClass) => {
+      store.select(priorityclass, false);
+    };
+    onMounted(getPriorityClassList);
+    const priorityclasses = computed(() => store.priorityclasses);
+    return {
+      priorityclasses,
+      onClick,
+    };
+  },
+});
+</script>

web/components/ResourceAddButton.vue

@@ -20,27 +20,31 @@ import {
   pvTemplate,
   pvcTemplate,
   storageclassTemplate,
+  priorityclassTemplate,
 } from "./lib/template";
 import {} from "./lib/util";
 import PodStoreKey from "./StoreKey/PodStoreKey";
 import NodeStoreKey from "./StoreKey/NodeStoreKey";
 import PersistentVolumeStoreKey from "./StoreKey/PVStoreKey";
 import PersistentVolumeClaimStoreKey from "./StoreKey/PVCStoreKey";
 import StorageClassStoreKey from "./StoreKey/StorageClassStoreKey";
+import PriorityClassStoreKey from "./StoreKey/PriorityClassStoreKey";
 import {
   V1Node,
   V1PersistentVolumeClaim,
   V1PersistentVolume,
   V1Pod,
   V1StorageClass,
+  V1PriorityClass,
 } from "@kubernetes/client-node";
 
 type Resource =
   | V1Pod
   | V1Node
   | V1PersistentVolumeClaim
   | V1PersistentVolume
-  | V1StorageClass;
+  | V1StorageClass
+  | V1PriorityClass;
 
 interface Store {
   readonly selected: object | null;
@@ -77,13 +81,19 @@ export default defineComponent({
       throw new Error(`${StorageClassStoreKey} is not provided`);
     }
 
+    const priorityclassstore = inject(PriorityClassStoreKey);
+    if (!priorityclassstore) {
+      throw new Error(`${PriorityClassStoreKey} is not provided`);
+    }
+
     const dialog = ref(false);
     const resourceNames = [
       "StorageClass",
       "PersistentVolumeClaim",
       "PersistentVolume",
       "Node",
       "Pod",
+      "PriorityClass",
     ];
 
     const create = (rn: string) => {
@@ -114,6 +124,11 @@ export default defineComponent({
           // if store.count = 0, name suffix is 1.
           targetTemplate = storageclassTemplate((store.count + 1).toString());
           break;
+        case "PriorityClass":
+          store = priorityclassstore;
+          // if store.count = 2, name suffix is 1.
+          targetTemplate = priorityclassTemplate((store.count - 1).toString());
+          break;
       }
 
       if (store) {

web/components/ResourceBar/ResourceBar.vue

@@ -50,6 +50,7 @@ import NodeStoreKey from "../StoreKey/NodeStoreKey";
 import PersistentVolumeStoreKey from "../StoreKey/PVStoreKey";
 import PersistentVolumeClaimStoreKey from "../StoreKey/PVCStoreKey";
 import StorageClassStoreKey from "../StoreKey/StorageClassStoreKey";
+import PriorityClassStoreKey from "../StoreKey/PriorityClassStoreKey";
 import SchedulerConfigurationStoreKey from "../StoreKey/SchedulerConfigurationStoreKey";
 import YamlEditor from "./YamlEditor.vue";
 import SchedulingResults from "./SchedulingResults.vue";
@@ -61,6 +62,7 @@ import {
   V1PersistentVolume,
   V1Pod,
   V1StorageClass,
+  V1PriorityClassList,
 } from "@kubernetes/client-node";
 import SnackBarStoreKey from "../StoreKey/SnackBarStoreKey";
 import { SchedulerConfiguration } from "~/api/v1/types";
@@ -71,6 +73,7 @@ type Resource =
   | V1PersistentVolumeClaim
   | V1PersistentVolume
   | V1StorageClass
+  | V1PriorityClassList
   | SchedulerConfiguration;
 
 interface Store {
@@ -118,6 +121,10 @@ export default defineComponent({
     if (!storageclassstore) {
       throw new Error(`${StorageClassStoreKey} is not provided`);
     }
+    const priorityclassstore = inject(PriorityClassStoreKey);
+    if (!priorityclassstore) {
+      throw new Error(`${PriorityClassStoreKey} is not provided`);
+    }
     const schedulerconfigurationstore = inject(SchedulerConfigurationStoreKey);
     if (!schedulerconfigurationstore) {
       throw new Error(`${SchedulerConfigurationStoreKey} is not provided`);
@@ -169,6 +176,12 @@ export default defineComponent({
       selected.value = sc.value;
     });
 
+    const pc = computed(() => priorityclassstore.selected);
+    watch(pc, () => {
+      store = priorityclassstore;
+      selected.value = pc.value;
+    });
+
     const config = computed(() => schedulerconfigurationstore.selected);
     watch(config, () => {
       store = schedulerconfigurationstore;

web/components/StoreKey/PriorityClassStoreKey.ts

@@ -0,0 +1,6 @@
+import { InjectionKey } from "@nuxtjs/composition-api";
+import { PriorityClassStore } from "~/store/priorityclass";
+
+const PriorityClassStoreKey: InjectionKey<PriorityClassStore> =
+  Symbol("PriorityClassStore");
+export default PriorityClassStoreKey;

web/components/StoreProvider/PriorityClassStoreProvider.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, provide } from "@nuxtjs/composition-api";
+import priorityClassStore from "../../store/priorityclass";
+import PriorityClassStoreKey from "../StoreKey/PriorityClassStoreKey";
+
+export default defineComponent({
+  setup() {
+    provide(PriorityClassStoreKey, priorityClassStore());
+    return {};
+  },
+});
+</script>

web/components/lib/template.ts

@@ -4,6 +4,7 @@ import {
   V1PersistentVolumeClaim,
   V1Pod,
   V1StorageClass,
+  V1PriorityClass,
 } from "@kubernetes/client-node";
 import yaml from "js-yaml";
 
@@ -51,3 +52,12 @@ export const storageclassTemplate = (namesuffix: string): V1StorageClass => {
   }
   return { provisioner: "" };
 };
+
+export const priorityclassTemplate = (namesuffix: string): V1PriorityClass => {
+  if (process.env.PC_TEMPLATE) {
+    const temp = yaml.load(process.env.PC_TEMPLATE);
+    temp.metadata.name = temp.metadata.name + namesuffix;
+    return temp;
+  }
+  return { value: 1000, globalDefault: true };
+};

web/components/lib/templates/priorityclass.yaml

@@ -0,0 +1,6 @@
+
+metadata:
+  name: priority-class
+value: 1000
+globalDefault: true
+description: "This is a template priority class for all pods"

web/nuxt.config.js

@@ -77,5 +77,9 @@ export default {
       "./components/lib/templates/storageclass.yaml",
       "utf8"
     ),
+    PC_TEMPLATE: fs.readFileSync(
+      "./components/lib/templates/priorityclass.yaml",
+      "utf8"
+    ),
   },
 };

web/pages/index.vue

@@ -5,17 +5,20 @@
         <PVCStoreProvider>
           <SchedulerConfigurationStoreProvider>
             <StorageClassStoreProvider>
-              <SnackbarStoreProvider>
-                <ResourceBar />
-                <SchedulerConfigurationEditButton />
-                <ResourceAddButton />
-                <NodeList />
-                <UnscheduledPodList />
-                <PVList />
-                <PVCList />
-                <StorageClassList />
-                <Snackbar />
-              </SnackbarStoreProvider>
+              <PriorityClassStoreProvider>
+                <SnackbarStoreProvider>
+                  <ResourceBar />
+                  <SchedulerConfigurationEditButton />
+                  <ResourceAddButton />
+                  <NodeList />
+                  <UnscheduledPodList />
+                  <PVList />
+                  <PVCList />
+                  <StorageClassList />
+                  <PriorityClassList />
+                  <Snackbar />
+                </SnackbarStoreProvider>
+              </PriorityClassStoreProvider>
             </StorageClassStoreProvider>
           </SchedulerConfigurationStoreProvider>
         </PVCStoreProvider>
@@ -32,6 +35,7 @@ import PVStoreProvider from "~/components/StoreProvider/PVStoreProvider.vue";
 import PVCStoreProvider from "~/components/StoreProvider/PVCStoreProvider.vue";
 import SchedulerConfigurationStoreProvider from "~/components/StoreProvider/SchedulerConfigurationStoreProvider.vue";
 import StorageClassStoreProvider from "~/components/StoreProvider/StorageClassStoreProvider.vue";
+import PriorityClassStoreProvider from "~/components/StoreProvider/PriorityClassStoreProvider.vue";
 import NodeList from "~/components/NodeList.vue";
 import UnscheduledPodList from "~/components/UnscheduledPodList.vue";
 import PVList from "~/components/PVList.vue";
@@ -61,6 +65,7 @@ export default defineComponent({
     PVCStoreProvider,
     SchedulerConfigurationEditButton,
     SchedulerConfigurationStoreProvider,
+    PriorityClassStoreProvider,
   },
 });
 </script>