show container spec & status on click in Pod insights

iximiuz · Feb 10, 2024 · 40bfdd5 · 40bfdd5
1 parent eb70da0
commit 40bfdd5
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 17 deletions.
diff --git a/ui/src/common/repr.ts b/ui/src/common/repr.ts
@@ -2,6 +2,10 @@ import yaml from "js-yaml";
 
 import type { KubeObject, RawKubeObject, RawKubeObjectWithStatus, V1Pod } from "./types";
 
+export function reprYamlRaw(obj: any): string {
+  return yaml.dump(obj);
+}
+
 export function reprYaml(obj: KubeObject): string {
   return yaml.dump(pretty(obj));
 }

diff --git a/ui/src/components/KubeObjectViewerPodContainers.vue b/ui/src/components/KubeObjectViewerPodContainers.vue
@@ -6,6 +6,7 @@ import type { KubeObject, V1Pod, V1Container } from "../common/types";
 
 const props = defineProps<{
   object: KubeObject<V1Pod>,
+  onContainerClick:(container: V1Container) => void,
 }>();
 
 const initContainers = computed(() => {
@@ -86,6 +87,7 @@ function onEphemeralContainerHover(container: V1Container, enter: boolean) {
         :style="{
           'z-index': 130 - idx,
         }"
+        @click.stop="onContainerClick(ic)"
       >
         <div class="-rotate-90">
           <template v-if="ic.name.length <= 2 * regularContainers.length - 1">
@@ -106,6 +108,7 @@ function onEphemeralContainerHover(container: V1Container, enter: boolean) {
           :style="{
             'z-index': 100 + idx,
           }"
+          @click.stop="onContainerClick(c)"
         >
           {{ c.name }}
         </div>
@@ -116,18 +119,19 @@ function onEphemeralContainerHover(container: V1Container, enter: boolean) {
       class="border-black border-l-2 border-t-2 flex flex flex-col grow mt-2 rounded-md"
     >
       <div
-        v-for="(c, idx) in ephemeralContainers"
-        :key="c.name"
+        v-for="(ec, idx) in ephemeralContainers"
+        :key="ec.name"
         class="!tooltip-bottom border-b-2 border-r-2 ephemeral-container grow h-[2.1rem] px-2"
-        :data-tip="_containerTooltip(c, 'ephemeral')"
-        :class="_containerClass(c, 'ephemeral')"
+        :data-tip="_containerTooltip(ec, 'ephemeral')"
+        :class="_containerClass(ec, 'ephemeral')"
         :style="{
           'z-index': 200 - idx,
         }"
-        @mouseenter="onEphemeralContainerHover(c, true)"
-        @mouseleave="onEphemeralContainerHover(c, false)"
+        @click.stop="onContainerClick(ec)"
+        @mouseenter="onEphemeralContainerHover(ec, true)"
+        @mouseleave="onEphemeralContainerHover(ec, false)"
       >
-        {{ c.name }}
+        {{ ec.name }}
       </div>
     </div>
   </div>

diff --git a/ui/src/components/KubeObjectViewerPodInsightsTab.vue b/ui/src/components/KubeObjectViewerPodInsightsTab.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 
-import { podPhaseClass, reprTimeRelative, reprPodPhase } from "../common/repr";
-import type { KubeObject, V1Pod } from "../common/types";
+import { podPhaseClass, reprTimeRelative, reprPodPhase, reprYamlRaw } from "../common/repr";
+import type { KubeObject, V1Container, V1Pod } from "../common/types";
 
+import CodeEditor from "./CodeEditor.vue";
 import KubeObjectViewerPodConditions from "./KubeObjectViewerPodConditions.vue";
 import KubeObjectViewerPodContainers from "./KubeObjectViewerPodContainers.vue";
 
@@ -15,16 +16,40 @@ const props = defineProps<{
 }>();
 
 const phase = computed(() => reprPodPhase(props.object.raw));
+
+const selectedContainer = ref<V1Container | null>(null);
+
+const selectedContainerYaml = computed(() => {
+  if (!selectedContainer.value) {
+    return "";
+  }
+
+  const statuses = [
+    ...(props.object.raw.status!.initContainerStatuses! || []),
+    ...(props.object.raw.status!.containerStatuses! || []),
+    ...(props.object.raw.status!.ephemeralContainerStatuses! || []),
+  ];
+
+  return reprYamlRaw({
+    spec: selectedContainer.value,
+    status: statuses.find((s) => s.name === selectedContainer.value!.name),
+  });
+});
 </script>
 
 <template>
-  <div class="overflow-auto scrollbar-styled">
+  <div
+    class="overflow-auto scrollbar-styled"
+    @click="selectedContainer = null"
+  >
     <div class="divide-y flex flex-col gap-y-8 p-4">
       <div
         :key="object.rev"
         class="grid grid-cols-2"
       >
-        <div>Phase:</div>
+        <div class="cursor-default">
+          Phase:
+        </div>
         <div
           class="flex font-semibold gap-x-2 items-center"
         >
@@ -34,24 +59,43 @@ const phase = computed(() => reprPodPhase(props.object.raw));
           />
           {{ phase.title }}
         </div>
-        <div>Started:</div>
+        <div class="cursor-default">
+          Started:
+        </div>
         <div :title="object.raw.status!.startTime + ''">
           {{ reprTimeRelative(object.raw.status!.startTime + '') }} ago
         </div>
-        <div>IPs:</div>
+        <div class="cursor-default">
+          IPs:
+        </div>
         <div>{{ object.raw.status!.podIPs?.map((el) => el.ip)?.join(" ") }}</div>
       </div>
 
       <div>
-        <h2 class="font-semibold mb-1 mt-4 text-lg text-slate-600">
+        <h2 class="cursor-default font-semibold mb-1 mt-4 text-lg text-slate-600">
           Containers
         </h2>
 
         <KubeObjectViewerPodContainers
           :object="object"
+          :on-container-click="(c: any) => selectedContainer = c"
         />
 
-        <div class="max-w-[35ch] mt-2">
+        <div
+          class="duration-150 ease-in-out mt-2 overflow-hidden rounded-md transition-all"
+          :class="{
+            'h-0': !selectedContainerYaml,
+            'h-[200px]': selectedContainerYaml,
+          }"
+        >
+          <CodeEditor
+            v-if="selectedContainerYaml"
+            :key="object.rev"
+            :code="selectedContainerYaml"
+          />
+        </div>
+
+        <div class="cursor-default max-w-[35ch] mt-2">
           <span class="text-slate-600">Legend</span>
           <div class="grid grid-cols-2 justify-start leading-[1.6rem] mt-2">
             <div class="border border-black container-waiting h-[1.4rem] rounded-md w-[4rem]" />
@@ -83,7 +127,7 @@ const phase = computed(() => reprPodPhase(props.object.raw));
       </div>
 
       <div>
-        <h2 class="font-semibold mb-1 mt-4 text-lg text-slate-600">
+        <h2 class="cursor-default font-semibold mb-1 mt-4 text-lg text-slate-600">
           Conditions
         </h2>
         <KubeObjectViewerPodConditions :object="object" />