Adding TaskRun a viewver

sebt3 · May 4, 2024 · ce5e892 · ce5e892
1 parent 555bae4
commit ce5e892
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 4 deletions.
diff --git a/front/components/tekton/PipelineRunMeta.vue b/front/components/tekton/PipelineRunMeta.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { ref, computed, defineAsyncComponent } from 'vue';
 const props = defineProps<{
   model: object
 }>();
@@ -86,9 +86,18 @@ const links = computed(() => {
     midY: (getProjectedY(link.diy,stgs[link.col+1].length)+getProjectedY(link.siy,stgs[link.col].length)+stepHeight)/2,
   }}).map(link=>{return{...link,d:getPath(link)}})
 })
+const dialogs = ref(Object.fromEntries(Array.isArray(props.model.childtektonTaskRun)?props.model.childtektonTaskRun.map(tr=>[tr.metadata.name,false]):[]))
+const GenericView = defineAsyncComponent(() => import( '@/components/generic/GenericView.vue'));
+const showDialog = task => {
+  console.log(task,getTask(task.name))
+  if(getTask(task.name)!=null){dialogs.value[getTask(task.name).metadata.name]=true}
+}
 console.log(props.model, stages.value,links.value)
 </script>
-<template>
+<template><div>
+  <q-dialog v-for="task in Array.isArray(model.childtektonTaskRun)?model.childtektonTaskRun:[]" :key="task.metadata.name" v-model="dialogs[task.metadata.name]">
+    <GenericView :model="task" group="tekton" short="TaskRun" :showLabels="false" style="width: 700px; max-width: 80vw;" />
+  </q-dialog>
   <svg ref="svgRoot" :viewBox="[0,0,width,height]" :width="width" :height="height" stroke-linejoin="round" stroke-linecap="round" style="width: 100%; height: auto; font: 10px sans-serif;">
     <g class="links" v-for="link in links" :key="`${link.src}-${link.dst}`">
       <path :d="link.d" stroke="black" stroke-width="1" fill="none" />
@@ -97,22 +106,30 @@ console.log(props.model, stages.value,links.value)
         <rect v-for="(task, y) in steps" :key="`rect-${task.name}`"
           :width="stepWidth" :height="stepHeight" rx="5" ry="5"
           :x="getProjectedX(x)" :y="getProjectedY(y, steps.length)"
+          v-on:click="showDialog(task)"
           :class="getClass(task.name)" />
     </g>
     <g class="labels" text-anchor="middle"  v-for="(steps, x) in stages" :key="`labels-${x}`">
         <text v-for="(task, y) in steps" :key="`text-${task.name}`"
           :x="getProjectedX(x)+stepWidth/2" :y="getProjectedY(y, steps.length)+stepHeight-8"
           :class="getClass(task.name)"
+          v-on:click="showDialog(task)"
         >{{ task['name'] }}</text>
     </g>
   </svg>
-</template>
+</div></template>
 <style scoped lang="sass">
 @use "quasar/src/css/variables" as q
+rect.isFailed
+    cursor: pointer
+rect.isSuccess
+    cursor: pointer
 text.isFailed
     fill: q.$red
+    cursor: pointer
 text.isSuccess
     fill:  q.$light-green
+    cursor: pointer
 text.isSkipped
     fill: q.$grey
 text.isPending

diff --git a/front/components/tekton/TaskMeta.vue b/front/components/tekton/TaskMeta.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+const props = defineProps<{
+  model: object
+}>();
+console.log(props.model)
+const stepWidth = 100
+const stepHeight = 20
+const stepHMargin = 10
+const stepWMargin = 30
+const width = computed(() => props.model['spec'] != undefined && Array.isArray(props.model['spec']['steps'])?props.model['spec']['steps'].length*(stepWidth+stepWMargin)+stepWMargin:0)
+const height = computed(() => props.model['spec'] != undefined && Array.isArray(props.model['spec']['steps'])?stepHeight+stepHMargin:0)
+const getProjectedX = x => x*(stepWidth+stepWMargin)+stepWMargin/2
+const getArrowPath = x => `
+M${getProjectedX(x)+stepWidth} ${(stepHeight+stepHMargin)/2}
+L${getProjectedX(x+1)-5} ${(stepHeight+stepHMargin)/2}
+L${getProjectedX(x+1)-5} ${(stepHeight+stepHMargin)/2-3}
+L${getProjectedX(x+1)-1} ${(stepHeight+stepHMargin)/2}
+L${getProjectedX(x+1)-5} ${(stepHeight+stepHMargin)/2+3}
+L${getProjectedX(x+1)-5} ${(stepHeight+stepHMargin)/2}`
+</script>
+<template>
+  <svg ref="svgRoot" :viewBox="[0,0,width,height]" :width="width" :height="height" stroke-linejoin="round" stroke-linecap="round" style="width: 100%; height: auto; font: 10px sans-serif;">
+    <g class="links" v-if="props.model['spec'] != undefined && Array.isArray(props.model['spec']['steps'])">
+      <path  v-for="(steps, x) in props.model['spec']['steps'].filter((_,i)=>i!=0)" :key="`paths-${x}`"
+        :d="getArrowPath(x)"
+        stroke="black" stroke-width="1" fill="none" />
+    </g>
+    <g class="rects" v-if="props.model['spec'] != undefined && Array.isArray(props.model['spec']['steps'])">
+        <rect v-for="(steps, x) in props.model['spec']['steps']" :key="`rects-${x}`"
+          :width="stepWidth" :height="stepHeight" rx="5" ry="5"
+          :x="getProjectedX(x)" :y="stepHMargin/2"
+          class="isPending" />
+    </g>
+    <g class="labels" text-anchor="middle"  v-if="props.model['spec'] != undefined && Array.isArray(props.model['spec']['steps'])">
+        <text v-for="(steps, x) in props.model['spec']['steps']" :key="`text-${x}`"
+          :x="getProjectedX(x)+stepWidth/2" :y="stepHMargin/2+stepHeight-8"
+          class="isPending"
+        >{{ steps['name'] }}</text>
+    </g>
+  </svg>
+</template>
+<style scoped lang="sass">
+@use "quasar/src/css/variables" as q
+text.isPending
+    fill: q.$blue
+</style>
diff --git a/front/components/tekton/TaskRunMeta.vue b/front/components/tekton/TaskRunMeta.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+const props = defineProps<{
+  model: object
+}>();
+console.log(props.model)
+const stepWidth = 100
+const stepHeight = 20
+const stepHMargin = 10
+const stepWMargin = 30
+const width = computed(() => props.model['status'] != undefined && Array.isArray(props.model['status']['steps'])?props.model['status']['steps'].length*(stepWidth+stepWMargin)+stepWMargin:0)
+const height = computed(() => props.model['status'] != undefined && Array.isArray(props.model['status']['steps'])?stepHeight+stepHMargin:0)
+const getProjectedX = x => x*(stepWidth+stepWMargin)+stepWMargin/2
+const getClass = name => props.model['status'] != undefined && Array.isArray(props.model['status']['steps']) && props.model['status']['steps'].filter(s=>s.name==name && s.terminated != undefined && s.terminated.exitCode != undefined).length>0?(props.model['status']['steps'].filter(s=>s.name==name && s.terminated != undefined && s.terminated.exitCode != undefined)[0].terminated.exitCode==0?"isSuccess":"isFailed"):"isPending"
+const getArrowPath = x => `
+M${getProjectedX(x)+stepWidth} ${(stepHeight+stepHMargin)/2}
+L${getProjectedX(x+1)-5} ${(stepHeight+stepHMargin)/2}
+L${getProjectedX(x+1)-5} ${(stepHeight+stepHMargin)/2-3}
+L${getProjectedX(x+1)-1} ${(stepHeight+stepHMargin)/2}
+L${getProjectedX(x+1)-5} ${(stepHeight+stepHMargin)/2+3}
+L${getProjectedX(x+1)-5} ${(stepHeight+stepHMargin)/2}`
+</script>
+<template>
+  <div class="row">
+    <div class="col-md-3" v-if="props.model.spec != undefined && Array.isArray(props.model.spec.params)">
+      <q-field v-for="param in props.model.spec.params" :key="param.name"
+        :label="param.name" stack-label borderless>
+        <template v-slot:prepend><q-icon name="input" /></template>
+        <template v-slot:control>
+          <div class="self-center full-width no-outline">{{ param.value }}</div>
+        </template>
+      </q-field>
+    </div>
+    <div class="col-md-6">
+      <svg ref="svgRoot" :viewBox="[0,0,width,height]" :width="width" :height="height" stroke-linejoin="round" stroke-linecap="round" style="width: 100%; height: auto; font: 10px sans-serif;">
+        <g class="links" v-if="props.model['status'] != undefined && props.model['status']['taskSpec'] != undefined && Array.isArray(props.model['status']['taskSpec']['steps'])">
+          <path  v-for="(steps, x) in props.model['status']['taskSpec']['steps'].filter((_,i)=>i!=0)" :key="`paths-${x}`"
+            :d="getArrowPath(x)"
+            stroke="black" stroke-width="1" fill="none" />
+        </g>
+        <g class="rects" v-if="props.model['status'] != undefined && props.model['status']['taskSpec'] != undefined && props.model['status'] != undefined && Array.isArray(props.model['status']['taskSpec']['steps'])">
+            <rect v-for="(steps, x) in props.model['status']['taskSpec']['steps']" :key="`rects-${x}`"
+              :width="stepWidth" :height="stepHeight" rx="5" ry="5"
+              :x="getProjectedX(x)" :y="stepHMargin/2"
+              :class="getClass(steps['name'])" />
+        </g>
+        <g class="labels" text-anchor="middle" v-if="props.model['status'] != undefined && props.model['status']['taskSpec'] != undefined && Array.isArray(props.model['status']['taskSpec']['steps'])">
+            <text v-for="(steps, x) in props.model['status']['taskSpec']['steps']" :key="`text-${x}`"
+              :x="getProjectedX(x)+stepWidth/2" :y="stepHMargin/2+stepHeight-8"
+              :class="getClass(steps['name'])"
+            >{{ steps['name'] }}</text>
+        </g>
+      </svg>
+    </div>
+    <div class="col-md-3" v-if="props.model.status != undefined && Array.isArray(props.model.status.results)">
+      <q-field v-for="param in props.model.status.results" :key="param.name"
+        :label="param.name" stack-label borderless>
+        <template v-slot:prepend><q-icon name="output" /></template>
+        <template v-slot:control>
+          <div class="self-center full-width no-outline">{{ param.value }}</div>
+        </template>
+      </q-field>
+    </div>
+  </div>
+</template>
+<style scoped lang="sass">
+@use "quasar/src/css/variables" as q
+text.isFailed
+    fill: q.$red
+text.isSuccess
+    fill:  q.$light-green
+text.isSkipped
+    fill: q.$grey
+text.isPending
+    fill: q.$blue
+</style>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gramo",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "A cross-navigation Kubernetes front-end",
   "main": "index.js",
   "scripts": {