Improvements

sebt3 · Jan 19, 2024 · bc453fe · bc453fe
1 parent d00e4c1
commit bc453fe
Show file tree

Hide file tree

Showing 39 changed files with 1,505 additions and 182 deletions.
diff --git a/front/components/core/DefaultStatusView.vue b/front/components/core/DefaultStatusView.vue
@@ -1,13 +1,36 @@
 <script setup lang="ts">
+import { elude } from "."
 const props = defineProps<{status: object}>();
-console.log(props)
+console.log(props.status)
+function getConditionColor(cond) {
+  if (cond.type == "Ready") return cond.status=='True'?'positive':'negative'
+  return 'info' // 'warning'
+}
 </script>
 <template>
   <div class="q-gutter-md">
-    <div v-if="Object.keys(status).includes('conditions')">
+    <div v-if="Object.keys(status).includes('conditions') && Array.isArray(status['conditions'])">
       <q-field label="Conditions" stack-label borderless>
-        <template v-slot:prepend><q-icon name="dashboard" /></template>
-        <template v-slot:control><div class="self-center full-width no-outline" tabindex="0">{{ status['conditions'] }}</div></template>
+        <template v-slot:prepend><q-icon name="grading" /></template>
+        <template v-slot:control><div class="self-center full-width no-outline" tabindex="0">
+          <span v-for="cond in status['conditions'].filter(c=>c.type!='ArtifactInStorage')" v-bind:key="cond.message">
+            <q-badge align="middle" :label="elude(cond.message, 50)"  :color="getConditionColor(cond)" class="q-mb-sm q-mr-sm" />
+          </span>
+        </div></template>
+      </q-field>
+    </div>
+    <div v-if="Object.keys(status).includes('artifact') && typeof status['artifact'] === 'object' && Object.keys(status['artifact']).includes('revision')">
+      <q-field label="Revision" stack-label borderless>
+        <template v-slot:prepend><q-icon name="change_circle" /></template>
+        <template v-slot:control><div class="self-center full-width no-outline" tabindex="0"> {{ status['artifact']['revision'] }}
+        </div></template>
+      </q-field>
+    </div>
+    <div v-if="Object.keys(status).includes('phase') && typeof status['phase'] === 'string'">
+      <q-field label="Phase" 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['phase'] }}
+        </div></template>
       </q-field>
     </div>
   </div>

diff --git a/front/components/core/MetadataView.vue b/front/components/core/MetadataView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { metadataType } from "./interfaces"
+import { elude } from "."
 defineProps<{metadata: metadataType}>();
 function getColor(name) {
   const vynil = /^vynil.solidite.fr/;
@@ -27,9 +28,8 @@ function getColor(name) {
         <template v-slot:prepend><q-icon name="short_text" /></template>
         <template v-slot:control><div class="self-center full-width no-outline" tabindex="0">
           <span v-for="note in metadata.annotations" v-bind:key="note.name">
-            <q-badge align="middle" :label="note.name"  :color="getColor(note.name)" class="q-pb-sm q-pr-sm">
-              <q-badge align="middle" :label="note.value" :color="getColor(note.name)" v-if="note.name != 'kubectl.kubernetes.io/last-applied-configuration'" class="bg-grey-1" outline />
-              <q-badge align="middle" label="..." :color="getColor(note.name)" v-else class="bg-grey-1" outline />
+            <q-badge align="middle" :label="note.name"  :color="getColor(note.name)" class="q-mb-sm q-mr-sm">
+              <q-badge align="middle" :label="elude(note.value as unknown as string)" :color="getColor(note.name)" class="bg-grey-1" outline />
             </q-badge>
           </span>
         </div></template>

diff --git a/front/components/core/index.ts b/front/components/core/index.ts
@@ -72,3 +72,10 @@ export function sanitizeData(data:object) {
     if (typeof result === "object" && Object.keys(result).length<1) return null;
     return result;
 }
+
+export function elude(str:string, maxsize:number=20) {
+    if (str.length>maxsize) {
+      return str.substring(0,maxsize-3)+'...'
+    }
+    return str;
+}
diff --git a/front/components/fluxcd/GitRepository.ts b/front/components/fluxcd/GitRepository.ts
@@ -4,6 +4,9 @@ export { ref, useCore, useQuery, useMutation, sanitizeData, getProperties } from
 
 export const gitRepositoryColumns:Array<QTableColumn> = [
   {name: 'Name', label: 'Name', field: row => row.metadata.name, sortable: true, align: tableColumnAlign.left},
+  {name: 'URL',  label: 'URL', field: row => row.url, sortable: true, align: tableColumnAlign.left},
+  {name: 'Branch',  label: 'Branch', field: row => row.ref.branch, sortable: true, align: tableColumnAlign.left},
+  {name: 'Revision',  label: 'Revision', field: row => row.status.artifact?.revision, sortable: true, align: tableColumnAlign.left},
   {name: 'Action', label: '', field: 'Action', sortable: false, align: tableColumnAlign.right}
 ];
 export const gitRepositoryAllColumns = ([

diff --git a/front/components/fluxcd/ImagePolicy.ts b/front/components/fluxcd/ImagePolicy.ts
@@ -4,6 +4,8 @@ export { ref, useCore, useQuery, useMutation, sanitizeData, getProperties } from
 
 export const imagePolicyColumns:Array<QTableColumn> = [
   {name: 'Name', label: 'Name', field: row => row.metadata.name, sortable: true, align: tableColumnAlign.left},
+  {name: 'Image',  label: 'Image', field: row => row.imageRepositoryRef, sortable: true, align: tableColumnAlign.left},
+  {name: 'Latest',  label: 'Latest', field: row => row.status.latestImage, sortable: true, align: tableColumnAlign.left},
   {name: 'Action', label: '', field: 'Action', sortable: false, align: tableColumnAlign.right}
 ];
 export const imagePolicyAllColumns = ([

diff --git a/front/components/fluxcd/ImageRepository.ts b/front/components/fluxcd/ImageRepository.ts
@@ -4,6 +4,10 @@ export { ref, useCore, useQuery, useMutation, sanitizeData, getProperties } from
 
 export const imageRepositoryColumns:Array<QTableColumn> = [
   {name: 'Name', label: 'Name', field: row => row.metadata.name, sortable: true, align: tableColumnAlign.left},
+  {name: 'Image',  label: 'Image', field: row => row.image, sortable: true, align: tableColumnAlign.left},
+  {name: 'Condition',  label: 'Condition', field: row => row.status.conditions[0].message, sortable: true, align: tableColumnAlign.left},
+  {name: 'LatestTag',  label: 'Latest Tag', field: row => row.status.lastScanResult.latestTags[0], sortable: true, align: tableColumnAlign.left},
+  {name: 'Tags',  label: 'Tags', field: row => row.status.lastScanResult.tagCount, sortable: true, align: tableColumnAlign.left},
   {name: 'Action', label: '', field: 'Action', sortable: false, align: tableColumnAlign.right}
 ];
 export const imageRepositoryAllColumns = ([

diff --git a/front/components/fluxcd/ImageUpdateAutomation.ts b/front/components/fluxcd/ImageUpdateAutomation.ts
@@ -4,6 +4,10 @@ export { ref, useCore, useQuery, useMutation, sanitizeData, getProperties } from
 
 export const imageUpdateAutomationColumns:Array<QTableColumn> = [
   {name: 'Name', label: 'Name', field: row => row.metadata.name, sortable: true, align: tableColumnAlign.left},
+  {name: 'Source',  label: 'Source', field: row => row.sourceRef.name, sortable: true, align: tableColumnAlign.left},
+  {name: 'Branch',  label: 'Branch', field: row => row.push.branch, sortable: true, align: tableColumnAlign.left},
+  {name: 'Path',  label: 'Path', field: row => row.update.path, sortable: true, align: tableColumnAlign.left},
+  {name: 'Condition',  label: 'Condition', field: row => row.status.conditions[0].message, sortable: true, align: tableColumnAlign.left},
   {name: 'Action', label: '', field: 'Action', sortable: false, align: tableColumnAlign.right}
 ];
 export const imageUpdateAutomationAllColumns = ([

diff --git a/front/components/fluxcd/Kustomization.ts b/front/components/fluxcd/Kustomization.ts
@@ -4,6 +4,7 @@ export { ref, useCore, useQuery, useMutation, sanitizeData, getProperties } from
 
 export const kustomizationColumns:Array<QTableColumn> = [
   {name: 'Name', label: 'Name', field: row => row.metadata.name, sortable: true, align: tableColumnAlign.left},
+  {name: 'Condition',  label: 'Condition', field: row => row.status.conditions[0].message, sortable: true, align: tableColumnAlign.left},
   {name: 'Action', label: '', field: 'Action', sortable: false, align: tableColumnAlign.right}
 ];
 export const kustomizationAllColumns = ([