Option in UI to annotations on resources. fixes Show annotations? #124

Author: benc-uk

public/css/main.css

@@ -126,3 +126,7 @@ pre {
   font-size: 1rem;
   font-weight: 500;
 }
+
+.clickable {
+  cursor: pointer;
+}

public/index.html

@@ -217,37 +217,51 @@
       <span x-text="panelData.kind" class="valign-middle"></span>
     </p>
     <section>
-      <div class="panel-block">
-        <button class="button is-small is-primary" :class="{'is-outlined':!showLabels}"
-          @click="showLabels=!showLabels">Labels</button>
+      <div class="panel-block is-flex">
+        <button class="button is-small is-primary mr-1" :class="{'is-outlined':!showLabels}"
+          @click="showLabels=!showLabels; showAnno=false">Labels</button>
+        <button class="button is-small is-primary" :class="{'is-outlined':!showAnno}"
+          @click="showAnno=!showAnno; showLabels=false">Annotations</button>
       </div>
-      <!-- Labels -->
+      <!-- Labels & Annotations -->
       <template x-for="(value, label) in panelData.labels" :key="label">
         <div class="panel-block py-0" x-show="showLabels">
           <div class="py-1 has-text-weight-bold" x-text="label"></div>
           <div class="py-1" x-text="`: ${value}`"></div>
         </div>
       </template>
+      <template x-for="(value, label) in panelData.annotations" :key="label">
+        <div class="panel-block py-0" x-show="showAnno">
+          <div class="py-1 has-text-weight-bold" x-text="label"></div>
+          <div class="py-1" x-text="`: ${value}`"></div>
+        </div>
+      </template>
       <!-- Properties -->
-      <div class="panel-block has-background-dark py-1">
-        <label class="label">Properties</label>
+      <div
+        class="panel-block has-background-dark py-0 is-flex is-justify-content-space-around is-align-items-center clickable"
+        @click="showProps=!showProps">
+        <label class="label is-flex-grow-1 pt-1 mr-3 clickable">Properties</label>
+        <i class="fas" :class="showProps ? 'fa-angles-up' : 'fa-angles-down'"></i>
       </div>
       <template x-for="(value, prop) in panelData.props" :key="prop">
-        <div class="panel-block py-0">
+        <div class="panel-block py-0" x-show="showProps" x-transition.scale.origin.top>
           <div class="py-1 has-text-weight-bold property" x-text="prop"></div>
           <div class="py-1" x-text="value"></div>
         </div>
       </template>
       <!-- Containers (pods only) -->
       <template x-for="(cont, name) in panelData.containers" :key="name">
         <div>
-          <div class="panel-block has-background-dark py-1">
-            <label class="label" x-text="`Container: ${name}`"></label>
+          <div
+            class="panel-block has-background-dark py-0 is-flex is-justify-content-space-around is-align-items-center clickable"
+            @click="showContainers=!showContainers" style="cursor: pointer">
+            <label class="label is-flex-grow-1 pt-1 mr-3 clickable" x-text="`Container: ${name}`"></label>
+            <i class="fas" :class="showContainers ? 'fa-angles-up' : 'fa-angles-down'"></i>
           </div>
           <template x-for="(value, prop) in cont" :key="prop">
-            <div class="panel-block py-0">
+            <div class="panel-block py-0" x-show="showContainers" x-transition.scale.origin.top>
               <div class="py-1 has-text-weight-bold property" x-text="prop"></div>
-              <div class="py-1" x-text="value"></div>
+              <div class="py-1=" x-text="value"></div>
             </div>
           </template>
         </div>

public/js/side-panel.js

@@ -12,6 +12,10 @@ import { getResource } from './graph.js'
 export default () => ({
   open: false,
   showLabels: false,
+  showAnno: false,
+  showProps: true,
+  showContainers: true,
+
   /** @type {PanelData} */
   panelData: {
     id: '',
@@ -20,6 +24,7 @@ export default () => ({
     props: {},
     containers: {},
     labels: {},
+    annotations: {},
   },
 
   init() {
@@ -147,6 +152,15 @@ export default () => ({
       }
     }
 
+    // Annotations
+    /** @type {Record<string, string>} */
+    const annotations = {}
+    if (res.metadata?.annotations) {
+      for (const [key, value] of Object.entries(res.metadata.annotations)) {
+        annotations[key] = value
+      }
+    }
+
     /** @type {Record<string, any>} */
     const containers = {}
     if (res.status?.containerStatuses) {
@@ -170,6 +184,7 @@ export default () => ({
       props,
       containers,
       labels,
+      annotations,
     }
   },
 })

public/js/types/custom.d.ts

@@ -30,6 +30,7 @@ declare type Resource = {
     creationTimestamp: string
     deletionTimestamp: string | null
     labels: Record<string, string>
+    annotations: Record<string, string>
     ownerReferences: Array<{
       uid: string
     }>
@@ -48,4 +49,5 @@ declare type PanelData = {
   props: Record<string, string>
   containers: Record<string, any>
   labels: Record<string, string>
+  annotations: Record<string, string>
 }

readme.md

@@ -26,9 +26,9 @@ Note: This is a v2 and complete rewrite the original KubeView project [see below
 
 ## 🏗️ Architecture & Design
 
-KubeView is built using Go for the backend, exposing a REST API that provides the data for the frontend, and serves static HTML/JS. The frontend is a static web application that uses HTML, CSS, and JavaScript to render the user interface. It uses [Cytoscape.js](https://js.cytoscape.org/) for graph visualization, [Alpine.js](https://alpinejs.dev/) for client-side interactivity, and [Bulma](https://bulma.io/) for styling.
+KubeView is built using Go for the backend, exposing a REST API that provides the data for the frontend, and serves static HTML/JS. The frontend is a static web application that uses HTML, CSS, and plain modern JavaScript (ES6) to render the user interface. It uses [Cytoscape.js](https://js.cytoscape.org/) for graph visualization, [Alpine.js](https://alpinejs.dev/) for client-side interactivity, and [Bulma](https://bulma.io/) for styling.
 
-The backend uses the Go client for Kubernetes to interact with the cluster and retrieve resource information, including setting up watchers for real-time updates streamed using SSE. The data is then processed and sent to the frontend as JSON, which the frontend uses to render the graph and update the UI.
+The backend uses the Go client for Kubernetes to retrieve resource information, including setting up watchers for real-time updates streamed using SSE. The data is then processed and sent to the frontend as JSON, which the frontend uses to render the graph and update the UI.
 
 ![diagram of system](./docs/diagram.drawio.png)