Adding Monaco editor for all Edit now

front/components/core/DefaultStatusView.vue

@@ -26,10 +26,10 @@ function getConditionColor(cond) {
         </div></template>
       </q-field>
     </div>
-    <div v-for="key in Object.keys(status).filter(k => typeof status[k] === 'string' && ['phase','latestImage','lastPushCommit', 'lastPushTime','lastAppliedRevision'].includes(key))" :key="key">
-      <q-field label="{{ key.charAt(0).toUpperCase() + key.slice(1) }}" stack-label borderless>
+    <div v-for="k in Object.keys(status).filter(key => typeof status[key] === 'string' && ['phase','latestImage','lastPushCommit', 'lastPushTime','lastAppliedRevision'].includes(key))" v-bind:key="k">
+      <q-field label="{{ k.charAt(0).toUpperCase() + k.slice(1) }}" stack-label borderless>
         <template v-slot:prepend><q-icon name="far fa-chart-bar" /></template>
-        <template v-slot:control><div class="self-center full-width no-outline" tabindex="0"> {{ status[key] }}
+        <template v-slot:control><div class="self-center full-width no-outline" tabindex="0"> {{ status[k] }}
         </div></template>
       </q-field>
     </div>

front/components/core/MonacoEditor.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import * as monaco from 'monaco-editor'
-import { ref, onMounted, nextTick } from "vue";
+import { ref, onMounted } from "vue";
+import { OpenAPIV3 } from "openapi-types";
 const emit = defineEmits(['update:text'])
 const props = withDefaults(defineProps<{
+  properties: Map<string, OpenAPIV3.SchemaObject>
   text: string
   lang?: string
   theme?: string
@@ -26,11 +28,12 @@ onMounted(() => {
     theme: props.theme,
     language: props.lang,
     lineNumbers: props.lineNumber?"on":"off",
+    scrollBeyondLastLine: false,
     wordWrap: props.wordWrap,
     wrappingIndent: props.wrappingIndent,
   });
   editor.focus();
-  editor.onDidBlurEditorText(() => {console.log('blur');emit('update:text', editor.getValue())})
+  editor.onDidBlurEditorText(() => {emit('update:text', editor.getValue())})
 });
 </script>
 <template>

front/components/core/index.ts

@@ -27,9 +27,10 @@ export function useCore() {
         tab: 'simple',
         yaml: '',
         spec: {},
+        ready: false,
         setSpec: (s) => {editor.value.spec = s;editor.value.yaml = stringify(s)},
-        setYaml: (y) => {editor.value.yaml = y;editor.value.spec = parse(y);console.log(editor.value.spec)},
-        updateFromQuery: (res: object, obj: object) => {if(!res['loading'])editor.value.setSpec(obj)},
+        setYaml: (y) => {editor.value.yaml = y;editor.value.spec = parse(y);},
+        updateFromQuery: (res: object, obj: object) => {editor.value.ready=false;if(!res['loading']){editor.value.setSpec(obj);editor.value.ready=true;}},
     });
     return {
         router, $q, pagination, setNamespaceFromRoute, setItemFromRoute, setNamespacedItemFromRoute,

front/components/fluxcd/Alert.ts

@@ -11,10 +11,10 @@ export const alertAllColumns = ([
 ] as Array<QTableColumn>).concat(alertColumns);
 
 export function useAlert() {
-  const { viewer, viewerUpdate, router, $q, pagination, setNamespaceFromRoute, setItemFromRoute, onErrorHandler, notify, notifySuccess, notifyError, notifyWorking, setNamespacedItemFromRoute } = useCore();
+  const { editor, viewer, viewerUpdate, router, $q, pagination, setNamespaceFromRoute, setItemFromRoute, onErrorHandler, notify, notifySuccess, notifyError, notifyWorking, setNamespacedItemFromRoute } = useCore();
   return {
     navigation: useNavigationStoreRef(),
-    viewer, viewerUpdate, router, pagination, setNamespaceFromRoute, setItemFromRoute, setNamespacedItemFromRoute, notify, notifySuccess, notifyError, notifyWorking, onErrorHandler,
+    editor, viewer, viewerUpdate, router, pagination, setNamespaceFromRoute, setItemFromRoute, setNamespacedItemFromRoute, notify, notifySuccess, notifyError, notifyWorking, onErrorHandler,
     onNotAlertFound: (res) => {
       if ( !res.loading && res.data.fluxcdAlert == null) {
         const matched = router.currentRoute.value.matched

front/components/fluxcd/AlertEdit.vue

@@ -4,16 +4,17 @@ import alertEdit from '@/queries/fluxcd/AlertEdit.graphql'
 import MetadataView from '../core/MetadataView.vue';
 import OpenApiEdit from '../core/OpenApiEdit.vue';
 import DefaultStatusView from '../core/DefaultStatusView.vue';
+import MonacoEditor from '../core/MonacoEditor.vue';
 import { ref, useQuery, useMutation, useAlert, sanitizeData, getProperties } from './Alert.js'
 const data = ref({});
-const { patchDone, patchError, notifyWorking, onNotAlertFound, setNamespacedItemFromRoute, navigation, onErrorHandler } = useAlert();setNamespacedItemFromRoute();
+const { editor, patchDone, patchError, notifyWorking, onNotAlertFound, setNamespacedItemFromRoute, navigation, onErrorHandler } = useAlert();setNamespacedItemFromRoute();
 const { result, loading, onResult, onError } = useQuery(fluxcdAlertQuery, {"namespace": navigation.currentNamespace, "name": navigation.currentItem}, { pollInterval: 500 });
 const { mutate: patchAlert, onDone: onPatchAlert, onError: onPatchError } = useMutation(alertEdit);
 function onSubmit() {
   notifyWorking('Update in progress');
   patchAlert({"namespace": result.value.fluxcdAlert.metadata.namespace, "name": result.value.fluxcdAlert.metadata.name, "spec": sanitizeData(data.value)});
 }
-onError(onErrorHandler);onResult(onNotAlertFound);onPatchAlert(patchDone);onPatchError(patchError);
+onError(onErrorHandler);onResult(res => {onNotAlertFound(res);editor.value.updateFromQuery(res, res.loading?{}:{spec: res.data.fluxcdAlert.metadata.obj.spec})});onPatchAlert(patchDone);onPatchError(patchError);
 </script>
 <template>
   <div class="row q-mb-sm q-ml-sm">
@@ -38,17 +39,27 @@ onError(onErrorHandler);onResult(onNotAlertFound);onPatchAlert(patchDone);onPatc
     </div>
   </div>
   <q-form @submit="onSubmit" class="q-gutter-md q-pt-sm q-ml-sm">
-    <q-card bordered v-if="!loading && result.fluxcdAlert!=null" class="q-ma-sm">
-      <q-card-section>
-        <div class="text-h6 text-grey-8 q-mt-none q-mb-none q-pt-none q-pb-none">Specification</div>
-      </q-card-section>
-      <q-card-section>
-        <OpenApiEdit
-          v-model:out="data"
-          :in="result.fluxcdAlert"
+    <q-card bordered v-if="!loading && editor.ready && result.fluxcdAlert!=null" class="q-ma-sm">
+      <q-tabs v-model="editor.tab" class="bg-primary text-white">
+        <q-tab label="Editor" name="simple" />
+        <q-tab label="Yaml" name="spec" />
+      </q-tabs>
+      <q-tab-panels v-model="editor.tab" animated>
+        <q-tab-panel name="simple">
+          <OpenApiEdit
+          :in="Object.keys(editor.spec).includes('spec')?editor.spec['spec']:{}"
+          @update:out="v=>{data=v;editor.setSpec({spec: v})}"
           :properties="getProperties(result.customResourceDefinition.versions.filter(v => v.served)[0].schema.openAPIV3Schema.properties.spec)"
-        />
-      </q-card-section>
+            />
+        </q-tab-panel>
+        <q-tab-panel name="spec">
+          <MonacoEditor
+          :text="editor.yaml" :key="editor.yaml"
+          @update:text="v=>editor.setYaml(v)"
+          :properties="getProperties(result.customResourceDefinition.versions.filter(v => v.served)[0].schema.openAPIV3Schema.properties.spec)"
+          />
+        </q-tab-panel>
+      </q-tab-panels>
       <q-card-actions>
         <q-btn label="Submit" type="submit" color="primary"/>
       </q-card-actions>

front/components/fluxcd/AlertView.vue

@@ -6,7 +6,7 @@ import OpenApiEdit from '../core/OpenApiEdit.vue';
 import DefaultStatusView from '../core/DefaultStatusView.vue';
 import MonacoViewer from '../core/MonacoViewer.vue';
 import { useQuery, useMutation, useAlert, getProperties } from './Alert.js'
-const { viewer, viewerUpdate, onErrorHandler, notifySuccess, notifyError, onNotAlertFound, navigation, setNamespacedItemFromRoute, toEdit, actionDelete } = useAlert();setNamespacedItemFromRoute();
+const { editor, viewer, viewerUpdate, onErrorHandler, notifySuccess, notifyError, onNotAlertFound, navigation, setNamespacedItemFromRoute, toEdit, actionDelete } = useAlert();setNamespacedItemFromRoute();
 const { result, loading, onResult, onError } = useQuery(fluxcdAlertQuery, {"namespace": navigation.currentNamespace, "name": navigation.currentItem }, { pollInterval: 500 });onError(onErrorHandler); onResult(res => {onNotAlertFound(res);viewerUpdate(res, res.loading?{}:res.data.fluxcdAlert.metadata.obj)});
 const { mutate: deletor, onDone: onDeleteDone, onError: onDeleteError } = useMutation(alertDelete);
 onDeleteDone(() => {

front/components/fluxcd/Bucket.ts

@@ -11,10 +11,10 @@ export const bucketAllColumns = ([
 ] as Array<QTableColumn>).concat(bucketColumns);
 
 export function useBucket() {
-  const { viewer, viewerUpdate, router, $q, pagination, setNamespaceFromRoute, setItemFromRoute, onErrorHandler, notify, notifySuccess, notifyError, notifyWorking, setNamespacedItemFromRoute } = useCore();
+  const { editor, viewer, viewerUpdate, router, $q, pagination, setNamespaceFromRoute, setItemFromRoute, onErrorHandler, notify, notifySuccess, notifyError, notifyWorking, setNamespacedItemFromRoute } = useCore();
   return {
     navigation: useNavigationStoreRef(),
-    viewer, viewerUpdate, router, pagination, setNamespaceFromRoute, setItemFromRoute, setNamespacedItemFromRoute, notify, notifySuccess, notifyError, notifyWorking, onErrorHandler,
+    editor, viewer, viewerUpdate, router, pagination, setNamespaceFromRoute, setItemFromRoute, setNamespacedItemFromRoute, notify, notifySuccess, notifyError, notifyWorking, onErrorHandler,
     onNotBucketFound: (res) => {
       if ( !res.loading && res.data.fluxcdBucket == null) {
         const matched = router.currentRoute.value.matched

front/components/fluxcd/BucketEdit.vue

@@ -4,16 +4,17 @@ import bucketEdit from '@/queries/fluxcd/BucketEdit.graphql'
 import MetadataView from '../core/MetadataView.vue';
 import OpenApiEdit from '../core/OpenApiEdit.vue';
 import DefaultStatusView from '../core/DefaultStatusView.vue';
+import MonacoEditor from '../core/MonacoEditor.vue';
 import { ref, useQuery, useMutation, useBucket, sanitizeData, getProperties } from './Bucket.js'
 const data = ref({});
-const { patchDone, patchError, notifyWorking, onNotBucketFound, setNamespacedItemFromRoute, navigation, onErrorHandler } = useBucket();setNamespacedItemFromRoute();
+const { editor, patchDone, patchError, notifyWorking, onNotBucketFound, setNamespacedItemFromRoute, navigation, onErrorHandler } = useBucket();setNamespacedItemFromRoute();
 const { result, loading, onResult, onError } = useQuery(fluxcdBucketQuery, {"namespace": navigation.currentNamespace, "name": navigation.currentItem}, { pollInterval: 500 });
 const { mutate: patchBucket, onDone: onPatchBucket, onError: onPatchError } = useMutation(bucketEdit);
 function onSubmit() {
   notifyWorking('Update in progress');
   patchBucket({"namespace": result.value.fluxcdBucket.metadata.namespace, "name": result.value.fluxcdBucket.metadata.name, "spec": sanitizeData(data.value)});
 }
-onError(onErrorHandler);onResult(onNotBucketFound);onPatchBucket(patchDone);onPatchError(patchError);
+onError(onErrorHandler);onResult(res => {onNotBucketFound(res);editor.value.updateFromQuery(res, res.loading?{}:{spec: res.data.fluxcdBucket.metadata.obj.spec})});onPatchBucket(patchDone);onPatchError(patchError);
 </script>
 <template>
   <div class="row q-mb-sm q-ml-sm">
@@ -38,17 +39,27 @@ onError(onErrorHandler);onResult(onNotBucketFound);onPatchBucket(patchDone);onPa
     </div>
   </div>
   <q-form @submit="onSubmit" class="q-gutter-md q-pt-sm q-ml-sm">
-    <q-card bordered v-if="!loading && result.fluxcdBucket!=null" class="q-ma-sm">
-      <q-card-section>
-        <div class="text-h6 text-grey-8 q-mt-none q-mb-none q-pt-none q-pb-none">Specification</div>
-      </q-card-section>
-      <q-card-section>
-        <OpenApiEdit
-          v-model:out="data"
-          :in="result.fluxcdBucket"
+    <q-card bordered v-if="!loading && editor.ready && result.fluxcdBucket!=null" class="q-ma-sm">
+      <q-tabs v-model="editor.tab" class="bg-primary text-white">
+        <q-tab label="Editor" name="simple" />
+        <q-tab label="Yaml" name="spec" />
+      </q-tabs>
+      <q-tab-panels v-model="editor.tab" animated>
+        <q-tab-panel name="simple">
+          <OpenApiEdit
+          :in="Object.keys(editor.spec).includes('spec')?editor.spec['spec']:{}"
+          @update:out="v=>{data=v;editor.setSpec({spec: v})}"
           :properties="getProperties(result.customResourceDefinition.versions.filter(v => v.served)[0].schema.openAPIV3Schema.properties.spec)"
-        />
-      </q-card-section>
+            />
+        </q-tab-panel>
+        <q-tab-panel name="spec">
+          <MonacoEditor
+          :text="editor.yaml" :key="editor.yaml"
+          @update:text="v=>editor.setYaml(v)"
+          :properties="getProperties(result.customResourceDefinition.versions.filter(v => v.served)[0].schema.openAPIV3Schema.properties.spec)"
+          />
+        </q-tab-panel>
+      </q-tab-panels>
       <q-card-actions>
         <q-btn label="Submit" type="submit" color="primary"/>
       </q-card-actions>

front/components/fluxcd/BucketView.vue

@@ -6,7 +6,7 @@ import OpenApiEdit from '../core/OpenApiEdit.vue';
 import DefaultStatusView from '../core/DefaultStatusView.vue';
 import MonacoViewer from '../core/MonacoViewer.vue';
 import { useQuery, useMutation, useBucket, getProperties } from './Bucket.js'
-const { viewer, viewerUpdate, onErrorHandler, notifySuccess, notifyError, onNotBucketFound, navigation, setNamespacedItemFromRoute, toEdit, actionDelete } = useBucket();setNamespacedItemFromRoute();
+const { editor, viewer, viewerUpdate, onErrorHandler, notifySuccess, notifyError, onNotBucketFound, navigation, setNamespacedItemFromRoute, toEdit, actionDelete } = useBucket();setNamespacedItemFromRoute();
 const { result, loading, onResult, onError } = useQuery(fluxcdBucketQuery, {"namespace": navigation.currentNamespace, "name": navigation.currentItem }, { pollInterval: 500 });onError(onErrorHandler); onResult(res => {onNotBucketFound(res);viewerUpdate(res, res.loading?{}:res.data.fluxcdBucket.metadata.obj)});
 const { mutate: deletor, onDone: onDeleteDone, onError: onDeleteError } = useMutation(bucketDelete);
 onDeleteDone(() => {

front/components/fluxcd/GitRepository.ts

@@ -14,10 +14,10 @@ export const gitRepositoryAllColumns = ([
 ] as Array<QTableColumn>).concat(gitRepositoryColumns);
 
 export function useGitRepository() {
-  const { viewer, viewerUpdate, router, $q, pagination, setNamespaceFromRoute, setItemFromRoute, onErrorHandler, notify, notifySuccess, notifyError, notifyWorking, setNamespacedItemFromRoute } = useCore();
+  const { editor, viewer, viewerUpdate, router, $q, pagination, setNamespaceFromRoute, setItemFromRoute, onErrorHandler, notify, notifySuccess, notifyError, notifyWorking, setNamespacedItemFromRoute } = useCore();
   return {
     navigation: useNavigationStoreRef(),
-    viewer, viewerUpdate, router, pagination, setNamespaceFromRoute, setItemFromRoute, setNamespacedItemFromRoute, notify, notifySuccess, notifyError, notifyWorking, onErrorHandler,
+    editor, viewer, viewerUpdate, router, pagination, setNamespaceFromRoute, setItemFromRoute, setNamespacedItemFromRoute, notify, notifySuccess, notifyError, notifyWorking, onErrorHandler,
     onNotGitRepositoryFound: (res) => {
       if ( !res.loading && res.data.fluxcdGitRepository == null) {
         const matched = router.currentRoute.value.matched

front/components/fluxcd/GitRepositoryEdit.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import monaco from 'monaco-editor'
 import fluxcdGitRepositoryQuery from '@/queries/fluxcd/GitRepositoryView.graphql'
 import gitRepositoryEdit from '@/queries/fluxcd/GitRepositoryEdit.graphql'
 import MetadataView from '../core/MetadataView.vue';
 import OpenApiEdit from '../core/OpenApiEdit.vue';
 import DefaultStatusView from '../core/DefaultStatusView.vue';
+import MonacoEditor from '../core/MonacoEditor.vue';
 import { ref, useQuery, useMutation, useGitRepository, sanitizeData, getProperties } from './GitRepository.js'
 const data = ref({});
-const { patchDone, patchError, notifyWorking, onNotGitRepositoryFound, setNamespacedItemFromRoute, navigation, onErrorHandler } = useGitRepository();setNamespacedItemFromRoute();
+const { editor, patchDone, patchError, notifyWorking, onNotGitRepositoryFound, setNamespacedItemFromRoute, navigation, onErrorHandler } = useGitRepository();setNamespacedItemFromRoute();
 const { result, loading, onResult, onError } = useQuery(fluxcdGitRepositoryQuery, {"namespace": navigation.currentNamespace, "name": navigation.currentItem}, { pollInterval: 500 });
 const { mutate: patchGitRepository, onDone: onPatchGitRepository, onError: onPatchError } = useMutation(gitRepositoryEdit);
 function onSubmit() {
   notifyWorking('Update in progress');
   patchGitRepository({"namespace": result.value.fluxcdGitRepository.metadata.namespace, "name": result.value.fluxcdGitRepository.metadata.name, "spec": sanitizeData(data.value)});
 }
-onError(onErrorHandler);onResult(onNotGitRepositoryFound);onPatchGitRepository(patchDone);onPatchError(patchError);
+onError(onErrorHandler);onResult(res => {onNotGitRepositoryFound(res);editor.value.updateFromQuery(res, res.loading?{}:{spec: res.data.fluxcdGitRepository.metadata.obj.spec})});onPatchGitRepository(patchDone);onPatchError(patchError);
 </script>
 <template>
   <div class="row q-mb-sm q-ml-sm">
@@ -39,17 +39,27 @@ onError(onErrorHandler);onResult(onNotGitRepositoryFound);onPatchGitRepository(p
     </div>
   </div>
   <q-form @submit="onSubmit" class="q-gutter-md q-pt-sm q-ml-sm">
-    <q-card bordered v-if="!loading && result.fluxcdGitRepository!=null" class="q-ma-sm">
-      <q-card-section>
-        <div class="text-h6 text-grey-8 q-mt-none q-mb-none q-pt-none q-pb-none">Specification</div>
-      </q-card-section>
-      <q-card-section>
-        <OpenApiEdit
-          v-model:out="data"
-          :in="result.fluxcdGitRepository"
+    <q-card bordered v-if="!loading && editor.ready && result.fluxcdGitRepository!=null" class="q-ma-sm">
+      <q-tabs v-model="editor.tab" class="bg-primary text-white">
+        <q-tab label="Editor" name="simple" />
+        <q-tab label="Yaml" name="spec" />
+      </q-tabs>
+      <q-tab-panels v-model="editor.tab" animated>
+        <q-tab-panel name="simple">
+          <OpenApiEdit
+          :in="Object.keys(editor.spec).includes('spec')?editor.spec['spec']:{}"
+          @update:out="v=>{data=v;editor.setSpec({spec: v})}"
           :properties="getProperties(result.customResourceDefinition.versions.filter(v => v.served)[0].schema.openAPIV3Schema.properties.spec)"
-        />
-      </q-card-section>
+            />
+        </q-tab-panel>
+        <q-tab-panel name="spec">
+          <MonacoEditor
+          :text="editor.yaml" :key="editor.yaml"
+          @update:text="v=>editor.setYaml(v)"
+          :properties="getProperties(result.customResourceDefinition.versions.filter(v => v.served)[0].schema.openAPIV3Schema.properties.spec)"
+          />
+        </q-tab-panel>
+      </q-tab-panels>
       <q-card-actions>
         <q-btn label="Submit" type="submit" color="primary"/>
       </q-card-actions>

front/components/fluxcd/GitRepositoryView.vue

@@ -6,7 +6,7 @@ import OpenApiEdit from '../core/OpenApiEdit.vue';
 import DefaultStatusView from '../core/DefaultStatusView.vue';
 import MonacoViewer from '../core/MonacoViewer.vue';
 import { useQuery, useMutation, useGitRepository, getProperties } from './GitRepository.js'
-const { viewer, viewerUpdate, onErrorHandler, notifySuccess, notifyError, onNotGitRepositoryFound, navigation, setNamespacedItemFromRoute, toEdit, actionDelete } = useGitRepository();setNamespacedItemFromRoute();
+const { editor, viewer, viewerUpdate, onErrorHandler, notifySuccess, notifyError, onNotGitRepositoryFound, navigation, setNamespacedItemFromRoute, toEdit, actionDelete } = useGitRepository();setNamespacedItemFromRoute();
 const { result, loading, onResult, onError } = useQuery(fluxcdGitRepositoryQuery, {"namespace": navigation.currentNamespace, "name": navigation.currentItem }, { pollInterval: 500 });onError(onErrorHandler); onResult(res => {onNotGitRepositoryFound(res);viewerUpdate(res, res.loading?{}:res.data.fluxcdGitRepository.metadata.obj)});
 const { mutate: deletor, onDone: onDeleteDone, onError: onDeleteError } = useMutation(gitRepositoryDelete);
 onDeleteDone(() => {