From 74a0718d113c2824c4b52d7a4103ac6cb18bf0a7 Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Wed, 24 Jan 2024 10:42:56 +0100
Subject: [PATCH 01/28] Can we use actuator

---
 ui/src/App.vue    | 15 +++++++++++++--
 ui/src/api/api.ts | 41 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 5a32918c8..9657f121a 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -14,6 +14,11 @@
           </div>
           <Login @loginEvent="reloadUser" v-else />
         </div>
+        <div class="row">
+          <pre>
+            {{ JSON.stringify(metrics, null, 3) }}
+          </pre>
+        </div>
       </div>
     </div>
   </div>
@@ -23,8 +28,8 @@
 import Navbar from "@/components/Navbar.vue";
 import Tabs from "@/components/Tabs.vue";
 import Login from "@/views/Login.vue";
-import { defineComponent, onMounted, ref, Ref } from "vue";
-import { getPrincipal, getVersion, logout } from "@/api/api";
+import { defineComponent, onMounted, ref, Ref, toRaw } from "vue";
+import { getPrincipal, getVersion, getMetrics, logout } from "@/api/api";
 import { useRouter } from "vue-router";
 import { ApiError } from "@/helpers/errors";
 
@@ -39,11 +44,13 @@ export default defineComponent({
     const isAuthenticated: Ref<boolean> = ref(false);
     const username: Ref<string> = ref("");
     const version: Ref<string> = ref("");
+    const metrics: Ref<Array<string>> = ref([]);
     const router = useRouter();
 
     onMounted(() => {
       loadUser();
       loadVersion();
+      loadMetrics();
     });
 
     const loadUser = async () => {
@@ -68,10 +75,14 @@ export default defineComponent({
       version.value = await getVersion();
     };
 
+    const loadMetrics = async () => {
+      metrics.value = await getMetrics();
+    };
     return {
       username,
       isAuthenticated,
       version,
+      metrics,
       loadUser,
       loadVersion,
     };
diff --git a/ui/src/api/api.ts b/ui/src/api/api.ts
index 56f29629c..d8157cacb 100644
--- a/ui/src/api/api.ts
+++ b/ui/src/api/api.ts
@@ -85,6 +85,47 @@ export async function getVersion() {
   return result.build.version;
 }
 
+export async function getMetrics() {
+  let result = await get("/actuator/metrics")
+    .then((data) => {
+      // Check if the data has 'names' property
+      if (data.hasOwnProperty("names")) {
+        // Initialize an empty tree
+        let tree = { _bare: {} };
+
+        // Process each name
+        data.names.forEach((name: string) => {
+          tree["_bare"][name] = {};
+          // Split the name into parts
+          let parts = name.split(".");
+
+          // Start at the root of the tree
+          let node = tree;
+
+          // For each part, add a node to the tree if it doesn't exist
+          parts.forEach((part: PropertyKey) => {
+            if (!node.hasOwnProperty(part)) {
+              node[part] = {};
+            }
+
+            // Move to the next level of the tree
+            node = node[part];
+          });
+        });
+
+        // Log the tree
+        console.log(tree);
+        return tree;
+      } else {
+        console.log("No names found in the data");
+      }
+    })
+    .catch((error) => {
+      console.error("Error:", error);
+    });
+  return result;
+}
+
 export async function deleteUser(email: string) {
   return delete_("/access/users", email);
 }

From c161c882746efd2c2704c0711173bf7141dfec3d Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Thu, 25 Jan 2024 15:13:43 +0100
Subject: [PATCH 02/28] Restructure little

---
 ui/src/App.vue                     | 15 ++------------
 ui/src/api/api.ts                  | 23 +++++++++++++++++----
 ui/src/components/Actuator.vue     | 33 ++++++++++++++++++++++++++++++
 ui/src/components/ActuatorItem.vue | 26 +++++++++++++++++++++++
 ui/src/views/Users.vue             |  4 ++++
 5 files changed, 84 insertions(+), 17 deletions(-)
 create mode 100644 ui/src/components/Actuator.vue
 create mode 100644 ui/src/components/ActuatorItem.vue

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 9657f121a..5a32918c8 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -14,11 +14,6 @@
           </div>
           <Login @loginEvent="reloadUser" v-else />
         </div>
-        <div class="row">
-          <pre>
-            {{ JSON.stringify(metrics, null, 3) }}
-          </pre>
-        </div>
       </div>
     </div>
   </div>
@@ -28,8 +23,8 @@
 import Navbar from "@/components/Navbar.vue";
 import Tabs from "@/components/Tabs.vue";
 import Login from "@/views/Login.vue";
-import { defineComponent, onMounted, ref, Ref, toRaw } from "vue";
-import { getPrincipal, getVersion, getMetrics, logout } from "@/api/api";
+import { defineComponent, onMounted, ref, Ref } from "vue";
+import { getPrincipal, getVersion, logout } from "@/api/api";
 import { useRouter } from "vue-router";
 import { ApiError } from "@/helpers/errors";
 
@@ -44,13 +39,11 @@ export default defineComponent({
     const isAuthenticated: Ref<boolean> = ref(false);
     const username: Ref<string> = ref("");
     const version: Ref<string> = ref("");
-    const metrics: Ref<Array<string>> = ref([]);
     const router = useRouter();
 
     onMounted(() => {
       loadUser();
       loadVersion();
-      loadMetrics();
     });
 
     const loadUser = async () => {
@@ -75,14 +68,10 @@ export default defineComponent({
       version.value = await getVersion();
     };
 
-    const loadMetrics = async () => {
-      metrics.value = await getMetrics();
-    };
     return {
       username,
       isAuthenticated,
       version,
-      metrics,
       loadUser,
       loadVersion,
     };
diff --git a/ui/src/api/api.ts b/ui/src/api/api.ts
index d8157cacb..9bab722ea 100644
--- a/ui/src/api/api.ts
+++ b/ui/src/api/api.ts
@@ -85,13 +85,17 @@ export async function getVersion() {
   return result.build.version;
 }
 
+interface Tree {
+  [key: string]: any;
+}
+
 export async function getMetrics() {
   let result = await get("/actuator/metrics")
     .then((data) => {
       // Check if the data has 'names' property
       if (data.hasOwnProperty("names")) {
         // Initialize an empty tree
-        let tree = { _bare: {} };
+        let tree: Tree = { _bare: {} };
 
         // Process each name
         data.names.forEach((name: string) => {
@@ -100,10 +104,10 @@ export async function getMetrics() {
           let parts = name.split(".");
 
           // Start at the root of the tree
-          let node = tree;
+          let node: Tree = tree;
 
           // For each part, add a node to the tree if it doesn't exist
-          parts.forEach((part: PropertyKey) => {
+          parts.forEach((part: string) => {
             if (!node.hasOwnProperty(part)) {
               node[part] = {};
             }
@@ -115,7 +119,7 @@ export async function getMetrics() {
 
         // Log the tree
         console.log(tree);
-        return tree;
+        return JSON.parse(JSON.stringify(tree));
       } else {
         console.log("No names found in the data");
       }
@@ -126,6 +130,17 @@ export async function getMetrics() {
   return result;
 }
 
+export async function getMetric(name: string) {
+  let result = await get(`/actuator/metrics/${name}`)
+    .then((data) => {
+      return JSON.parse(JSON.stringify(data));
+    })
+    .catch((error) => {
+      console.error("Error:", error);
+    });
+  return result;
+}
+
 export async function deleteUser(email: string) {
   return delete_("/access/users", email);
 }
diff --git a/ui/src/components/Actuator.vue b/ui/src/components/Actuator.vue
new file mode 100644
index 000000000..8eeb09199
--- /dev/null
+++ b/ui/src/components/Actuator.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { getMetrics } from "@/api/api";
+import { ref, watch } from "vue";
+
+const metrics = ref(null);
+const names = ref<Array<string>>([]);
+
+const loadMetrics = async () => {
+  metrics.value = await getMetrics();
+  console.log(metrics.value);
+};
+
+loadMetrics();
+
+watch(metrics, async () => {
+  const bare: Object = metrics.value ? ["_bare"] : [];
+  names.value = Object.keys(bare);
+});
+</script>
+<template>
+  <h3>Actuator</h3>
+  <div class="row">
+    <pre>
+      {{ JSON.stringify(metrics, null, 3) }}
+    </pre>
+    <div>
+      <div v-for="name in names">
+        <p>{{ name }}</p>
+        <!-- <ActuatorItem :name="name"/> -->
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/ui/src/components/ActuatorItem.vue b/ui/src/components/ActuatorItem.vue
new file mode 100644
index 000000000..eca09c9fa
--- /dev/null
+++ b/ui/src/components/ActuatorItem.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { getMetric } from "@/api/api";
+import { ref } from "vue";
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+});
+
+const actuatorItem = ref(null);
+
+async function fetchData() {
+  debugger;
+  let res = await getMetric(props.name);
+  console.log(res);
+  actuatorItem.value = res;
+}
+fetchData();
+</script>
+<template>
+  <div>
+    {{ actuatorItem }}
+  </div>
+</template>
diff --git a/ui/src/views/Users.vue b/ui/src/views/Users.vue
index 344bc7d37..dd24bdc0a 100644
--- a/ui/src/views/Users.vue
+++ b/ui/src/views/Users.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <Actuator />
     <h2 class="mt-3">Users</h2>
     <div class="row">
       <div class="col">
@@ -124,6 +125,8 @@ import SearchBar from "@/components/SearchBar.vue";
 import Table from "@/components/Table.vue";
 import InlineRowEdit from "@/components/InlineRowEdit.vue";
 import FeedbackMessage from "@/components/FeedbackMessage.vue";
+import Actuator from "@/components/Actuator.vue";
+
 import { deleteUser, getUsers, putUser, getProjects } from "@/api/api";
 import { sortAlphabetically, stringIncludesOtherString } from "@/helpers/utils";
 import { defineComponent, onMounted, Ref, ref } from "vue";
@@ -135,6 +138,7 @@ import { processErrorMessages } from "@/helpers/errorProcessing";
 export default defineComponent({
   name: "Users",
   components: {
+    Actuator,
     Badge,
     BadgeList,
     ButtonGroup,

From ea557fbeae9f730384bfec72e228ab4d9915ad10 Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Wed, 31 Jan 2024 16:56:02 +0100
Subject: [PATCH 03/28] Display each metric

---
 ui/src/api/api.ts                  | 23 ++++++++--
 ui/src/components/Actuator.vue     | 20 ++++----
 ui/src/components/ActuatorItem.vue | 73 ++++++++++++++++++++++++++++--
 3 files changed, 99 insertions(+), 17 deletions(-)

diff --git a/ui/src/api/api.ts b/ui/src/api/api.ts
index 9bab722ea..f6f544430 100644
--- a/ui/src/api/api.ts
+++ b/ui/src/api/api.ts
@@ -89,8 +89,13 @@ interface Tree {
   [key: string]: any;
 }
 
+/**
+ * build a property tree out of dot separated path.
+ *
+ * a.b.c => {a: { b: { c: { path: a.b.c } } } }
+ */
 export async function getMetrics() {
-  let result = await get("/actuator/metrics")
+  return await get("/actuator/metrics")
     .then((data) => {
       // Check if the data has 'names' property
       if (data.hasOwnProperty("names")) {
@@ -115,23 +120,31 @@ export async function getMetrics() {
             // Move to the next level of the tree
             node = node[part];
           });
+          node["path"] = name;
         });
 
         // Log the tree
         console.log(tree);
-        return JSON.parse(JSON.stringify(tree));
+        return JSON.parse(JSON.stringify(tree["_bare"]));
       } else {
         console.log("No names found in the data");
+        return {};
       }
     })
     .catch((error) => {
       console.error("Error:", error);
     });
-  return result;
 }
 
-export async function getMetric(name: string) {
-  let result = await get(`/actuator/metrics/${name}`)
+/**
+ * Fetches on property from actuator
+ *
+ * @path: dot separated string
+ *
+ * Example: a.b.c
+ */
+export async function getMetric(path: string) {
+  let result = await get(`/actuator/metrics/${path}`)
     .then((data) => {
       return JSON.parse(JSON.stringify(data));
     })
diff --git a/ui/src/components/Actuator.vue b/ui/src/components/Actuator.vue
index 8eeb09199..0ed486247 100644
--- a/ui/src/components/Actuator.vue
+++ b/ui/src/components/Actuator.vue
@@ -1,32 +1,34 @@
 <script setup lang="ts">
 import { getMetrics } from "@/api/api";
 import { ref, watch } from "vue";
+import ActuatorItem from "./ActuatorItem.vue";
 
 const metrics = ref(null);
 const names = ref<Array<string>>([]);
 
 const loadMetrics = async () => {
   metrics.value = await getMetrics();
-  console.log(metrics.value);
+  console.log("Loaded?", metrics.value);
+  const bare = metrics.value ? ["_bare"] : {};
+  names.value = Object.keys(bare);
+  console.log("Names?", names.value);
 };
 
 loadMetrics();
 
 watch(metrics, async () => {
-  const bare: Object = metrics.value ? ["_bare"] : [];
-  names.value = Object.keys(bare);
+  if (metrics.value) {
+    // names.value = Object.keys(metrics.value?["_bare"]:{});
+    // console.log("Names", names.value);
+  }
 });
 </script>
 <template>
   <h3>Actuator</h3>
   <div class="row">
-    <pre>
-      {{ JSON.stringify(metrics, null, 3) }}
-    </pre>
     <div>
-      <div v-for="name in names">
-        <p>{{ name }}</p>
-        <!-- <ActuatorItem :name="name"/> -->
+      <div v-for="(node, path) in metrics">
+        <ActuatorItem :name="path" />
       </div>
     </div>
   </div>
diff --git a/ui/src/components/ActuatorItem.vue b/ui/src/components/ActuatorItem.vue
index eca09c9fa..614ee7273 100644
--- a/ui/src/components/ActuatorItem.vue
+++ b/ui/src/components/ActuatorItem.vue
@@ -12,15 +12,82 @@ const props = defineProps({
 const actuatorItem = ref(null);
 
 async function fetchData() {
-  debugger;
   let res = await getMetric(props.name);
   console.log(res);
   actuatorItem.value = res;
 }
 fetchData();
+
+function convertBytes(bytes: number) {
+  const units = ["bytes", "KB", "MB", "GB", "TB"];
+  let unitIndex = 0;
+
+  while (bytes >= 1024 && unitIndex < units.length - 1) {
+    bytes /= 1024;
+    unitIndex++;
+  }
+
+  return `${bytes.toFixed(2)} ${units[unitIndex]}`;
+}
+
+console.log(convertBytes(222837712)); // Call the function with your byte value
+
+/*
+{
+   "name": "application.ready.time",
+   "description": "Time taken for the application to be ready to service requests",
+   "baseUnit": "seconds",
+   "measurements": [
+      {
+         "statistic": "VALUE",
+         "value": 2.649
+      }
+   ],
+   "availableTags": [
+      {
+         "tag": "main.application.class",
+         "values": [
+            "org.molgenis.armadillo.ArmadilloServiceApplication"
+         ]
+      }
+   ]
+}
+*/
 </script>
 <template>
-  <div>
-    {{ actuatorItem }}
+  <div v-if="actuatorItem">
+    <h3>
+      {{ actuatorItem.name }}
+    </h3>
+    <summary>
+      <details>
+        <pre>
+          {{ JSON.stringify(actuatorItem, null, 3) }}
+        </pre>
+      </details>
+    </summary>
+    <h4 v-if="actuatorItem.description">
+      {{ actuatorItem.description }}
+    </h4>
+    <table class="table">
+      <thead>
+        <tr>
+          <th scope="col">#</th>
+          <th>statistic</th>
+          <th>value</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(v, k) in actuatorItem.measurements">
+          <td scope="col">{{ k }}</td>
+          <td>{{ v.statistic }}</td>
+          <td v-if="actuatorItem.baseUnit === 'bytes'">
+            {{ convertBytes(v.value) }}
+          </td>
+          <td v-else>{{ v.value }} {{ actuatorItem.baseUnit }}</td>
+        </tr>
+      </tbody>
+    </table>
   </div>
+  <div v-else>Waiting for {{ name }}</div>
 </template>

From b7123ed4cd0f7e7f230eec7ba6aac1d3e6f35d40 Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Thu, 1 Feb 2024 15:31:06 +0100
Subject: [PATCH 04/28] Make it more condensed

---
 ui/src/components/ActuatorItem.vue | 34 ++++++++++++++++++------------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/ui/src/components/ActuatorItem.vue b/ui/src/components/ActuatorItem.vue
index 614ee7273..6c4261792 100644
--- a/ui/src/components/ActuatorItem.vue
+++ b/ui/src/components/ActuatorItem.vue
@@ -56,23 +56,11 @@ console.log(convertBytes(222837712)); // Call the function with your byte value
 </script>
 <template>
   <div v-if="actuatorItem">
-    <h3>
-      {{ actuatorItem.name }}
-    </h3>
-    <summary>
-      <details>
-        <pre>
-          {{ JSON.stringify(actuatorItem, null, 3) }}
-        </pre>
-      </details>
-    </summary>
-    <h4 v-if="actuatorItem.description">
-      {{ actuatorItem.description }}
-    </h4>
     <table class="table">
       <thead>
         <tr>
           <th scope="col">#</th>
+          <th>key</th>
           <th>statistic</th>
           <th>value</th>
         </tr>
@@ -80,12 +68,32 @@ console.log(convertBytes(222837712)); // Call the function with your byte value
       <tbody>
         <tr v-for="(v, k) in actuatorItem.measurements">
           <td scope="col">{{ k }}</td>
+          <td :title="actuatorItem.description">
+            <span>
+              {{ actuatorItem.name }}
+              <i
+                v-if="actuatorItem.description"
+                class="bi bi-info-circle-fill"
+              ></i>
+            </span>
+          </td>
           <td>{{ v.statistic }}</td>
           <td v-if="actuatorItem.baseUnit === 'bytes'">
             {{ convertBytes(v.value) }}
           </td>
           <td v-else>{{ v.value }} {{ actuatorItem.baseUnit }}</td>
         </tr>
+        <tr>
+          <td colspan="5">
+            <summary>
+              <details>
+                <pre>
+                  {{ JSON.stringify(actuatorItem, null, 3) }}
+                </pre>
+              </details>
+            </summary>
+          </td>
+        </tr>
       </tbody>
     </table>
   </div>

From 33af39e944c74bae27c91a8f3241ad39b47d53ba Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Thu, 1 Feb 2024 15:32:14 +0100
Subject: [PATCH 05/28] Add FileMetrics example

---
 .../molgenis/armadillo/info/FileMetrics.java  | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 armadillo/src/main/java/org/molgenis/armadillo/info/FileMetrics.java

diff --git a/armadillo/src/main/java/org/molgenis/armadillo/info/FileMetrics.java b/armadillo/src/main/java/org/molgenis/armadillo/info/FileMetrics.java
new file mode 100644
index 000000000..61799ffe1
--- /dev/null
+++ b/armadillo/src/main/java/org/molgenis/armadillo/info/FileMetrics.java
@@ -0,0 +1,44 @@
+package org.molgenis.armadillo.info;
+
+import io.micrometer.core.instrument.Gauge;
+import io.micrometer.core.instrument.MeterRegistry;
+import io.micrometer.core.instrument.binder.MeterBinder;
+import java.io.File;
+import org.springframework.stereotype.Component;
+
+@Component
+public class FileMetrics implements MeterBinder {
+
+  private static final String PATH = System.getProperty("user.dir");
+
+  @Override
+  public void bindTo(MeterRegistry registry) {
+    File folder = new File(PATH);
+    File[] listOfFiles = folder.listFiles();
+
+    int fileCount = 0;
+    int dirCount = 0;
+
+    if (listOfFiles != null) {
+      for (File file : listOfFiles) {
+        if (file.isFile()) {
+          fileCount++;
+        } else if (file.isDirectory()) {
+          dirCount++;
+        }
+      }
+    }
+
+    Gauge.builder("user.files.count", fileCount, Integer::doubleValue)
+        .description("Number of files in the current directory")
+        .baseUnit("files")
+        .tags("path", PATH)
+        .register(registry);
+
+    Gauge.builder("user.directories.count", dirCount, Integer::doubleValue)
+        .description("Number of directories in the current directory")
+        .baseUnit("user.directory.count")
+        .tags("path", PATH)
+        .register(registry);
+  }
+}

From 22ef955adea68d83a7b291a26dbafb10d7e5e047 Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Fri, 9 Feb 2024 17:28:27 +0100
Subject: [PATCH 06/28] Use button group

---
 ui/src/api/api.ts                  | 66 +++++++++++++--------
 ui/src/components/Actuator.vue     | 57 ++++++++++++------
 ui/src/components/ActuatorItem.vue | 94 +++++++++++-------------------
 ui/src/views/Insight.vue           | 51 ++++++++++++----
 ui/src/views/Users.vue             |  3 -
 5 files changed, 159 insertions(+), 112 deletions(-)

diff --git a/ui/src/api/api.ts b/ui/src/api/api.ts
index 48adeea74..9dedb95d4 100644
--- a/ui/src/api/api.ts
+++ b/ui/src/api/api.ts
@@ -106,13 +106,32 @@ export async function getVersion() {
 interface Tree {
   [key: string]: any;
 }
+/**
+ * Fetch all metric values on one go using the list.
+ */
+export async function getMetricsAll() {
+  try {
+    const metrics = await getMetrics();
+    const paths = Object.keys(metrics);
+    // FIXME: path.forEach is more appropiate
+    await Promise.all(
+      paths.map(async (path) => {
+        const response = await getMetric(path);
+        metrics[path] = response;
+        return { path: response };
+      })
+    );
+
+    return metrics;
+  } catch (error) {
+    console.error("Error:", error);
+  }
+}
 
 /**
- * build a property tree out of dot separated path.
- *
- * a.b.c => {a: { b: { c: { path: a.b.c } } } }
+ * Get list of metrics.
  */
-export async function getMetrics() {
+async function getMetrics() {
   return await get("/actuator/metrics")
     .then((data) => {
       // Check if the data has 'names' property
@@ -123,26 +142,27 @@ export async function getMetrics() {
         // Process each name
         data.names.forEach((name: string) => {
           tree["_bare"][name] = {};
-          // Split the name into parts
-          let parts = name.split(".");
-
-          // Start at the root of the tree
-          let node: Tree = tree;
-
-          // For each part, add a node to the tree if it doesn't exist
-          parts.forEach((part: string) => {
-            if (!node.hasOwnProperty(part)) {
-              node[part] = {};
-            }
-
-            // Move to the next level of the tree
-            node = node[part];
-          });
-          node["path"] = name;
+
+          // FIXME: do we need a tree structure?
+          // // Split the name into parts
+          // let parts = name.split(".");
+
+          // // Start at the root of the tree
+          // let node: Tree = tree;
+
+          // // For each part, add a node to the tree if it doesn't exist
+          // parts.forEach((part: string) => {
+          //   if (!node.hasOwnProperty(part)) {
+          //     node[part] = {};
+          //   }
+
+          //   // Move to the next level of the tree
+          //   node = node[part];
+          // });
+          // node["path"] = name;
         });
 
-        // Log the tree
-        console.log(tree);
+        // console.log(tree);
         return JSON.parse(JSON.stringify(tree["_bare"]));
       } else {
         console.log("No names found in the data");
@@ -161,7 +181,7 @@ export async function getMetrics() {
  *
  * Example: a.b.c
  */
-export async function getMetric(path: string) {
+async function getMetric(path: string) {
   let result = await get(`/actuator/metrics/${path}`)
     .then((data) => {
       return JSON.parse(JSON.stringify(data));
diff --git a/ui/src/components/Actuator.vue b/ui/src/components/Actuator.vue
index 0ed486247..6dbbf635e 100644
--- a/ui/src/components/Actuator.vue
+++ b/ui/src/components/Actuator.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import { getMetrics } from "@/api/api";
-import { ref, watch } from "vue";
+import { getMetricsAll } from "@/api/api";
+import { ref } from "vue";
 import ActuatorItem from "./ActuatorItem.vue";
 
 const metrics = ref(null);
 const names = ref<Array<string>>([]);
 
 const loadMetrics = async () => {
-  metrics.value = await getMetrics();
+  // metrics.value = await getMetrics();
+  metrics.value = await getMetricsAll();
   console.log("Loaded?", metrics.value);
   const bare = metrics.value ? ["_bare"] : {};
   names.value = Object.keys(bare);
@@ -16,20 +17,42 @@ const loadMetrics = async () => {
 
 loadMetrics();
 
-watch(metrics, async () => {
-  if (metrics.value) {
-    // names.value = Object.keys(metrics.value?["_bare"]:{});
-    // console.log("Names", names.value);
-  }
-});
+function downloadJSON(json, filename: string) {
+  var dataStr =
+    "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(json));
+  var downloadAnchorNode = document.createElement("a");
+  downloadAnchorNode.setAttribute("href", dataStr);
+  downloadAnchorNode.setAttribute("download", filename + ".json");
+  document.body.appendChild(downloadAnchorNode); // required for firefox
+  downloadAnchorNode.click();
+  setTimeout(() => downloadAnchorNode.remove(), 10);
+}
+
+function downloadMetrics() {
+  downloadJSON(metrics.value, "armadillo-metrics-" + new Date().toISOString());
+}
 </script>
 <template>
-  <h3>Actuator</h3>
-  <div class="row">
-    <div>
-      <div v-for="(node, path) in metrics">
-        <ActuatorItem :name="path" />
-      </div>
-    </div>
-  </div>
+  <button class="btn btn-primary" v-if="metrics" @click="downloadMetrics">
+    <i class="bi bi-box-arrow-down"></i>
+    Download metrics
+  </button>
+  <table class="table">
+    <thead>
+      <tr>
+        <th scope="col">#</th>
+        <th>key</th>
+        <th>statistic</th>
+        <th>value</th>
+      </tr>
+    </thead>
+    <tbody>
+      <ActuatorItem
+        v-for="(items, path, index) in metrics"
+        :key="index"
+        :data="items"
+        :name="path"
+      />
+    </tbody>
+  </table>
 </template>
diff --git a/ui/src/components/ActuatorItem.vue b/ui/src/components/ActuatorItem.vue
index 6c4261792..5c9c0b2e3 100644
--- a/ui/src/components/ActuatorItem.vue
+++ b/ui/src/components/ActuatorItem.vue
@@ -1,25 +1,21 @@
 <script setup lang="ts">
-import { getMetric } from "@/api/api";
-import { ref } from "vue";
-
 const props = defineProps({
   name: {
     type: String,
     required: true,
   },
+  data: {
+    type: Object,
+    required: true,
+  },
 });
 
-const actuatorItem = ref(null);
-
-async function fetchData() {
-  let res = await getMetric(props.name);
-  console.log(res);
-  actuatorItem.value = res;
-}
-fetchData();
-
-function convertBytes(bytes: number) {
-  const units = ["bytes", "KB", "MB", "GB", "TB"];
+/**
+ * Convert given bytes to 2 digits precision round exponent version string.
+ * @param bytes number
+ */
+function convertBytes(bytes: number): string {
+  const units = ["bytes", "KB", "MB", "GB", "TB", "EB"];
   let unitIndex = 0;
 
   while (bytes >= 1024 && unitIndex < units.length - 1) {
@@ -30,8 +26,6 @@ function convertBytes(bytes: number) {
   return `${bytes.toFixed(2)} ${units[unitIndex]}`;
 }
 
-console.log(convertBytes(222837712)); // Call the function with your byte value
-
 /*
 {
    "name": "application.ready.time",
@@ -55,47 +49,29 @@ console.log(convertBytes(222837712)); // Call the function with your byte value
 */
 </script>
 <template>
-  <div v-if="actuatorItem">
-    <table class="table">
-      <thead>
-        <tr>
-          <th scope="col">#</th>
-          <th>key</th>
-          <th>statistic</th>
-          <th>value</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(v, k) in actuatorItem.measurements">
-          <td scope="col">{{ k }}</td>
-          <td :title="actuatorItem.description">
-            <span>
-              {{ actuatorItem.name }}
-              <i
-                v-if="actuatorItem.description"
-                class="bi bi-info-circle-fill"
-              ></i>
-            </span>
-          </td>
-          <td>{{ v.statistic }}</td>
-          <td v-if="actuatorItem.baseUnit === 'bytes'">
-            {{ convertBytes(v.value) }}
-          </td>
-          <td v-else>{{ v.value }} {{ actuatorItem.baseUnit }}</td>
-        </tr>
-        <tr>
-          <td colspan="5">
-            <summary>
-              <details>
-                <pre>
-                  {{ JSON.stringify(actuatorItem, null, 3) }}
-                </pre>
-              </details>
-            </summary>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-  <div v-else>Waiting for {{ name }}</div>
+  <tr v-for="(v, k) in data.measurements">
+    <td scope="col">{{ k }}</td>
+    <td :title="data.description">
+      <span>
+        {{ data.name }}
+        <i v-if="data.description" class="bi bi-info-circle-fill"></i>
+      </span>
+    </td>
+    <td>{{ v.statistic }}</td>
+    <td v-if="data.baseUnit === 'bytes'">
+      {{ convertBytes(v.value) }}
+    </td>
+    <td v-else>{{ v.value }} {{ data.baseUnit }}</td>
+  </tr>
+  <tr>
+    <td colspan="5">
+      <summary>
+        <details>
+          <pre>
+            {{ JSON.stringify(data, null, 3) }}
+          </pre>
+        </details>
+      </summary>
+    </td>
+  </tr>
 </template>
diff --git a/ui/src/views/Insight.vue b/ui/src/views/Insight.vue
index 87e8df97f..41f8de3e8 100644
--- a/ui/src/views/Insight.vue
+++ b/ui/src/views/Insight.vue
@@ -1,19 +1,50 @@
 <template>
-  <div>
-    <h2>Insight</h2>
-    <div class="row">
-      <div class="col">
-        <div class="row">
-          <div class="col">
-            <h3>Files</h3>
-            <RemoteFiles />
-          </div>
-        </div>
+  <h2>Insight</h2>
+  <!-- FIXME: Cannot use tabs as it
+    uses router views but we have sub views.
+    <Tabs :menu="tabs" :icons="tabIcons" />
+  -->
+  <div class="row">
+    <div class="col">
+      <div class="btn-group" role="group" aria-label="Basic outlined example">
+        <button
+          v-for="(tab, index) in tabs"
+          :key="index"
+          class="btn"
+          :class="{
+            active: currentTab === index,
+            'btn-primary': currentTab === index,
+            'btn-secondary': currentTab !== index,
+          }"
+          @click="currentTab = index"
+        >
+          {{ tab }}
+        </button>
+      </div>
+    </div>
+    <div>
+      <div v-show="currentTab === 0">
+        <RemoteFiles />
+      </div>
+      <div v-show="currentTab === 1">
+        <Actuator />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import Actuator from "@/components/Actuator.vue";
 import RemoteFiles from "@/components/RemoteFiles.vue";
+import { ref } from "vue";
+
+let currentTab = ref(0);
+const tabs = ["Files", "Server metrics"];
 </script>
+
+<style scoped>
+.active {
+  border: 2p solid red;
+  /* Styles for active tab */
+}
+</style>
diff --git a/ui/src/views/Users.vue b/ui/src/views/Users.vue
index dd24bdc0a..a3a9cf012 100644
--- a/ui/src/views/Users.vue
+++ b/ui/src/views/Users.vue
@@ -1,6 +1,5 @@
 <template>
   <div>
-    <Actuator />
     <h2 class="mt-3">Users</h2>
     <div class="row">
       <div class="col">
@@ -125,7 +124,6 @@ import SearchBar from "@/components/SearchBar.vue";
 import Table from "@/components/Table.vue";
 import InlineRowEdit from "@/components/InlineRowEdit.vue";
 import FeedbackMessage from "@/components/FeedbackMessage.vue";
-import Actuator from "@/components/Actuator.vue";
 
 import { deleteUser, getUsers, putUser, getProjects } from "@/api/api";
 import { sortAlphabetically, stringIncludesOtherString } from "@/helpers/utils";
@@ -138,7 +136,6 @@ import { processErrorMessages } from "@/helpers/errorProcessing";
 export default defineComponent({
   name: "Users",
   components: {
-    Actuator,
     Badge,
     BadgeList,
     ButtonGroup,

From dfc3a8c8629b69374419167fb98c8db7f52300e7 Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Mon, 12 Feb 2024 13:12:20 +0100
Subject: [PATCH 07/28] Small fixes

---
 .../main/java/org/molgenis/armadillo/info/FileMetrics.java   | 5 +++--
 .../src/main/java/org/molgenis/armadillo/info/RMetrics.java  | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/armadillo/src/main/java/org/molgenis/armadillo/info/FileMetrics.java b/armadillo/src/main/java/org/molgenis/armadillo/info/FileMetrics.java
index 61799ffe1..805c3f7b2 100644
--- a/armadillo/src/main/java/org/molgenis/armadillo/info/FileMetrics.java
+++ b/armadillo/src/main/java/org/molgenis/armadillo/info/FileMetrics.java
@@ -1,5 +1,6 @@
 package org.molgenis.armadillo.info;
 
+import io.micrometer.common.lang.NonNull;
 import io.micrometer.core.instrument.Gauge;
 import io.micrometer.core.instrument.MeterRegistry;
 import io.micrometer.core.instrument.binder.MeterBinder;
@@ -12,7 +13,7 @@ public class FileMetrics implements MeterBinder {
   private static final String PATH = System.getProperty("user.dir");
 
   @Override
-  public void bindTo(MeterRegistry registry) {
+  public void bindTo(@NonNull MeterRegistry registry) {
     File folder = new File(PATH);
     File[] listOfFiles = folder.listFiles();
 
@@ -37,7 +38,7 @@ public void bindTo(MeterRegistry registry) {
 
     Gauge.builder("user.directories.count", dirCount, Integer::doubleValue)
         .description("Number of directories in the current directory")
-        .baseUnit("user.directory.count")
+        .baseUnit("directories")
         .tags("path", PATH)
         .register(registry);
   }
diff --git a/armadillo/src/main/java/org/molgenis/armadillo/info/RMetrics.java b/armadillo/src/main/java/org/molgenis/armadillo/info/RMetrics.java
index 81f787304..cdf39a8dd 100644
--- a/armadillo/src/main/java/org/molgenis/armadillo/info/RMetrics.java
+++ b/armadillo/src/main/java/org/molgenis/armadillo/info/RMetrics.java
@@ -13,7 +13,7 @@
 public class RMetrics {
 
   @Bean
-  MeterBinder rProcesses(ProfileService profileService, RProcessEndpoint processes) {
+  MeterBinder rProcesses(ProfileService profileService, RProcessEndpoint rProcessEndpoint) {
 
     return registry ->
         runAsSystem(
@@ -24,7 +24,7 @@ MeterBinder rProcesses(ProfileService profileService, RProcessEndpoint processes
                         environment ->
                             Gauge.builder(
                                     "rserve.processes.current",
-                                    () -> processes.countRServeProcesses(environment))
+                                    () -> rProcessEndpoint.countRServeProcesses(environment))
                                 .tag("environment", environment)
                                 .description(
                                     "Current number of RServe processes on the R environment")

From 3676460a0a26041d610e60753cec9e695aa47984 Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Mon, 12 Feb 2024 16:05:14 +0100
Subject: [PATCH 08/28] feat: add metrics with search

---
 ui/src/components/Actuator.vue     | 43 +++++++++++++++++++++++++++---
 ui/src/components/ActuatorItem.vue |  4 +--
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/Actuator.vue b/ui/src/components/Actuator.vue
index 6dbbf635e..ed597e4f6 100644
--- a/ui/src/components/Actuator.vue
+++ b/ui/src/components/Actuator.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { getMetricsAll } from "@/api/api";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import ActuatorItem from "./ActuatorItem.vue";
+import SearchBar from "@/components/SearchBar.vue";
+import { json } from "stream/consumers";
 
 const metrics = ref(null);
 const names = ref<Array<string>>([]);
@@ -13,6 +15,8 @@ const loadMetrics = async () => {
   const bare = metrics.value ? ["_bare"] : {};
   names.value = Object.keys(bare);
   console.log("Names?", names.value);
+  // preload search values
+  filteredLines();
 };
 
 loadMetrics();
@@ -31,12 +35,45 @@ function downloadJSON(json, filename: string) {
 function downloadMetrics() {
   downloadJSON(metrics.value, "armadillo-metrics-" + new Date().toISOString());
 }
+
+const filterValue = ref("");
+watch(filterValue, (_newVal, _oldVal) => filteredLines());
+
+const FIELD_DISPLAY = "_display";
+const SEARCH_TEXT_FIELDS = "searchWords";
+
+function filteredLines() {
+  const filterOn: string = filterValue.value.toLowerCase();
+  console.log("Filtering", filterOn);
+  for (let [key, value] of Object.entries(metrics.value)) {
+    if (!value[SEARCH_TEXT_FIELDS]) {
+      value[SEARCH_TEXT_FIELDS] = JSON.stringify(value).toLowerCase();
+    }
+    const searchWords: string = value[SEARCH_TEXT_FIELDS];
+    value[FIELD_DISPLAY] = filterOn === "" || searchWords.includes(filterOn);
+  }
+  console.log(metrics.value);
+}
+
+function displayMetric(metric) {
+  console.log(metric);
+  if (metric[FIELD_DISPLAY]) {
+    return metric[FIELD_DISPLAY];
+  } else {
+    return false;
+  }
+}
 </script>
 <template>
   <button class="btn btn-primary" v-if="metrics" @click="downloadMetrics">
     <i class="bi bi-box-arrow-down"></i>
     Download metrics
   </button>
+  <div class="row">
+    <div class="col-sm-3">
+      <SearchBar id="searchbox" v-model="filterValue" />
+    </div>
+  </div>
   <table class="table">
     <thead>
       <tr>
@@ -48,9 +85,9 @@ function downloadMetrics() {
     </thead>
     <tbody>
       <ActuatorItem
-        v-for="(items, path, index) in metrics"
+        v-for="(metric, path, index) in metrics"
         :key="index"
-        :data="items"
+        :data="metric"
         :name="path"
       />
     </tbody>
diff --git a/ui/src/components/ActuatorItem.vue b/ui/src/components/ActuatorItem.vue
index 5c9c0b2e3..ee85f08c4 100644
--- a/ui/src/components/ActuatorItem.vue
+++ b/ui/src/components/ActuatorItem.vue
@@ -49,7 +49,7 @@ function convertBytes(bytes: number): string {
 */
 </script>
 <template>
-  <tr v-for="(v, k) in data.measurements">
+  <tr v-if="data._display" v-for="(v, k) in data.measurements">
     <td scope="col">{{ k }}</td>
     <td :title="data.description">
       <span>
@@ -63,7 +63,7 @@ function convertBytes(bytes: number): string {
     </td>
     <td v-else>{{ v.value }} {{ data.baseUnit }}</td>
   </tr>
-  <tr>
+  <tr v-if="data._display">
     <td colspan="5">
       <summary>
         <details>

From ac512fc2d7c76f8e0eec8c2a69b99c059df9a083 Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Tue, 13 Feb 2024 11:43:36 +0100
Subject: [PATCH 09/28] cleanup and dev edgecases

---
 ui/src/api/api.ts              | 33 ++++++++++-----------------------
 ui/src/components/Actuator.vue |  4 +---
 ui/vite.config.js              |  7 +++++++
 3 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/ui/src/api/api.ts b/ui/src/api/api.ts
index 9dedb95d4..128024280 100644
--- a/ui/src/api/api.ts
+++ b/ui/src/api/api.ts
@@ -126,13 +126,15 @@ export async function getMetricsAll() {
   } catch (error) {
     console.error("Error:", error);
   }
+  return {};
 }
 
 /**
  * Get list of metrics.
  */
 async function getMetrics() {
-  return await get("/actuator/metrics")
+  const path = "/actuator/metrics";
+  return await get(path)
     .then((data) => {
       // Check if the data has 'names' property
       if (data.hasOwnProperty("names")) {
@@ -142,24 +144,6 @@ async function getMetrics() {
         // Process each name
         data.names.forEach((name: string) => {
           tree["_bare"][name] = {};
-
-          // FIXME: do we need a tree structure?
-          // // Split the name into parts
-          // let parts = name.split(".");
-
-          // // Start at the root of the tree
-          // let node: Tree = tree;
-
-          // // For each part, add a node to the tree if it doesn't exist
-          // parts.forEach((part: string) => {
-          //   if (!node.hasOwnProperty(part)) {
-          //     node[part] = {};
-          //   }
-
-          //   // Move to the next level of the tree
-          //   node = node[part];
-          // });
-          // node["path"] = name;
         });
 
         // console.log(tree);
@@ -170,7 +154,8 @@ async function getMetrics() {
       }
     })
     .catch((error) => {
-      console.error("Error:", error);
+      console.error(`Error fetching ${path}`, error);
+      return {};
     });
 }
 
@@ -181,13 +166,15 @@ async function getMetrics() {
  *
  * Example: a.b.c
  */
-async function getMetric(path: string) {
-  let result = await get(`/actuator/metrics/${path}`)
+async function getMetric(id: string) {
+  const path = `/actuator/metrics/${id}`;
+  let result = await get(path)
     .then((data) => {
       return JSON.parse(JSON.stringify(data));
     })
     .catch((error) => {
-      console.error("Error:", error);
+      console.error(`Error fetching ${path}`, error);
+      return {};
     });
   return result;
 }
diff --git a/ui/src/components/Actuator.vue b/ui/src/components/Actuator.vue
index ed597e4f6..068de8b6d 100644
--- a/ui/src/components/Actuator.vue
+++ b/ui/src/components/Actuator.vue
@@ -3,13 +3,11 @@ import { getMetricsAll } from "@/api/api";
 import { ref, watch } from "vue";
 import ActuatorItem from "./ActuatorItem.vue";
 import SearchBar from "@/components/SearchBar.vue";
-import { json } from "stream/consumers";
 
-const metrics = ref(null);
+const metrics = ref({});
 const names = ref<Array<string>>([]);
 
 const loadMetrics = async () => {
-  // metrics.value = await getMetrics();
   metrics.value = await getMetricsAll();
   console.log("Loaded?", metrics.value);
   const bare = metrics.value ? ["_bare"] : {};
diff --git a/ui/vite.config.js b/ui/vite.config.js
index 639c316c3..f1aca8e4c 100644
--- a/ui/vite.config.js
+++ b/ui/vite.config.js
@@ -25,6 +25,13 @@ export default defineConfig({
           port: 8080,
         },
       },
+      "^/actuator/.*": {
+        target: {
+          protocol: "http:",
+          host: "localhost",
+          port: 8080,
+        },
+      },
       "^/insight/.*": {
         target: {
           protocol: "http:",

From ec1214b0fe35502bf94c1042cb58616b92da710f Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Tue, 13 Feb 2024 11:44:55 +0100
Subject: [PATCH 10/28] dev: ignore other data/project

---
 .gitignore | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.gitignore b/.gitignore
index 9035d791a..2c01b7ab7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,9 @@ dist
 ### STORAGE ###
 data/user-*
 data/system
+# Ignore all projects but life-cycle
+data/shared-*
+!data/shared-lifecycle
 
 HELP.md
 target/

From 774a567c4d992cec318558eb7f17765e63d43b1d Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Tue, 13 Feb 2024 13:12:32 +0100
Subject: [PATCH 11/28] Add other actuator links at bottom.

---
 ui/src/api/api.ts              |  3 ++
 ui/src/components/Actuator.vue | 78 +++++++++++++++++++++++++++-------
 ui/vite.config.js              |  7 +++
 3 files changed, 72 insertions(+), 16 deletions(-)

diff --git a/ui/src/api/api.ts b/ui/src/api/api.ts
index 128024280..02c618f1b 100644
--- a/ui/src/api/api.ts
+++ b/ui/src/api/api.ts
@@ -159,6 +159,9 @@ async function getMetrics() {
     });
 }
 
+async function getActuators() {
+  return await get("/actuator");
+}
 /**
  * Fetches on property from actuator
  *
diff --git a/ui/src/components/Actuator.vue b/ui/src/components/Actuator.vue
index 068de8b6d..a78f4c7c9 100644
--- a/ui/src/components/Actuator.vue
+++ b/ui/src/components/Actuator.vue
@@ -1,27 +1,37 @@
 <script setup lang="ts">
-import { getMetricsAll } from "@/api/api";
+import { getActuator, getMetricsAll } from "@/api/api";
 import { ref, watch } from "vue";
 import ActuatorItem from "./ActuatorItem.vue";
 import SearchBar from "@/components/SearchBar.vue";
 
+const actuator = ref({});
 const metrics = ref({});
-const names = ref<Array<string>>([]);
 
+const loadActuator = async () => {
+  let result = (await getActuator())["_links"];
+  let list = [];
+  for (let key in result) {
+    const item = result[key];
+    item["key"] = key;
+    list.push(result[key]);
+  }
+  actuator.value = list;
+  console.log(JSON.stringify(actuator.value, null, 2));
+};
 const loadMetrics = async () => {
   metrics.value = await getMetricsAll();
-  console.log("Loaded?", metrics.value);
-  const bare = metrics.value ? ["_bare"] : {};
-  names.value = Object.keys(bare);
-  console.log("Names?", names.value);
+
   // preload search values
   filteredLines();
 };
 
 loadMetrics();
-
+loadActuator();
 function downloadJSON(json, filename: string) {
+  const cleanedUp = removeFields(json);
   var dataStr =
-    "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(json));
+    "data:text/json;charset=utf-8," +
+    encodeURIComponent(JSON.stringify(cleanedUp));
   var downloadAnchorNode = document.createElement("a");
   downloadAnchorNode.setAttribute("href", dataStr);
   downloadAnchorNode.setAttribute("download", filename + ".json");
@@ -40,26 +50,37 @@ watch(filterValue, (_newVal, _oldVal) => filteredLines());
 const FIELD_DISPLAY = "_display";
 const SEARCH_TEXT_FIELDS = "searchWords";
 
+/**
+ * Filter metrics on search value
+ *
+ * We add:
+ * - string search field for matching
+ * - booelan display field for storing matched
+ */
 function filteredLines() {
   const filterOn: string = filterValue.value.toLowerCase();
-  console.log("Filtering", filterOn);
   for (let [key, value] of Object.entries(metrics.value)) {
     if (!value[SEARCH_TEXT_FIELDS]) {
+      // TODO: drop keys before stringify?
       value[SEARCH_TEXT_FIELDS] = JSON.stringify(value).toLowerCase();
     }
     const searchWords: string = value[SEARCH_TEXT_FIELDS];
     value[FIELD_DISPLAY] = filterOn === "" || searchWords.includes(filterOn);
   }
-  console.log(metrics.value);
 }
 
-function displayMetric(metric) {
-  console.log(metric);
-  if (metric[FIELD_DISPLAY]) {
-    return metric[FIELD_DISPLAY];
-  } else {
-    return false;
+/**
+ * Remove added fields for searching.
+ *
+ * @param json
+ */
+function removeFields(json) {
+  const result = JSON.parse(JSON.stringify(json));
+  for (let [key, value] of Object.entries(result)) {
+    delete value[SEARCH_TEXT_FIELDS];
+    delete value[FIELD_DISPLAY];
   }
+  return result;
 }
 </script>
 <template>
@@ -90,4 +111,29 @@ function displayMetric(metric) {
       />
     </tbody>
   </table>
+  <hr />
+  <summary>
+    <h3>Other Actuator links</h3>
+    <details>
+      <table>
+        <thead>
+          <tr>
+            <td>key</td>
+            <td>href</td>
+            <td>templated</td>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="item in actuator">
+            <td>{{ item.key }}</td>
+            <td v-if="item.templated">{{ item.href }}</td>
+            <td v-if="!item.templated">
+              <a href="{{item.href}}">{{ item.href }}</a>
+            </td>
+            <td>{{ item.templated }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </details>
+  </summary>
 </template>
diff --git a/ui/vite.config.js b/ui/vite.config.js
index f1aca8e4c..0e93732c2 100644
--- a/ui/vite.config.js
+++ b/ui/vite.config.js
@@ -25,6 +25,13 @@ export default defineConfig({
           port: 8080,
         },
       },
+      "^/actuator$": {
+        target: {
+          protocol: "http:",
+          host: "localhost",
+          port: 8080,
+        },
+      },
       "^/actuator/.*": {
         target: {
           protocol: "http:",

From 87bd688a1a3da1dfb89d073f6779cc414a80953a Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Tue, 13 Feb 2024 13:16:53 +0100
Subject: [PATCH 12/28] Fix link by binding

---
 ui/src/components/Actuator.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/components/Actuator.vue b/ui/src/components/Actuator.vue
index a78f4c7c9..b93c13aeb 100644
--- a/ui/src/components/Actuator.vue
+++ b/ui/src/components/Actuator.vue
@@ -128,7 +128,7 @@ function removeFields(json) {
             <td>{{ item.key }}</td>
             <td v-if="item.templated">{{ item.href }}</td>
             <td v-if="!item.templated">
-              <a href="{{item.href}}">{{ item.href }}</a>
+              <a :href="item.href" target="_new">{{ item.href }}</a>
             </td>
             <td>{{ item.templated }}</td>
           </tr>

From 38f64835f5be20e600c8d07f14588418abda5716 Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Wed, 14 Feb 2024 15:03:51 +0100
Subject: [PATCH 13/28] Add types for used /actuator request.

---
 ui/src/api/api.ts     | 29 +++++++++++++++--------------
 ui/src/types/api.d.ts | 43 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/ui/src/api/api.ts b/ui/src/api/api.ts
index 02c618f1b..b033d8cd3 100644
--- a/ui/src/api/api.ts
+++ b/ui/src/api/api.ts
@@ -8,7 +8,11 @@ import {
   Auth,
   RemoteFileInfo,
   RemoteFileDetail,
+  Metric,
+  HALResponse,
+  Metrics,
 } from "@/types/api";
+
 import { ObjectWithStringKey, StringArray } from "@/types/types";
 import { APISettings } from "./config";
 
@@ -103,17 +107,14 @@ export async function getVersion() {
   return result.build.version;
 }
 
-interface Tree {
-  [key: string]: any;
-}
 /**
  * Fetch all metric values on one go using the list.
  */
-export async function getMetricsAll() {
+export async function getMetricsAll(): Promise<Metrics> {
   try {
     const metrics = await getMetrics();
     const paths = Object.keys(metrics);
-    // FIXME: path.forEach is more appropiate
+
     await Promise.all(
       paths.map(async (path) => {
         const response = await getMetric(path);
@@ -125,12 +126,12 @@ export async function getMetricsAll() {
     return metrics;
   } catch (error) {
     console.error("Error:", error);
+    return [];
   }
-  return {};
 }
 
 /**
- * Get list of metrics.
+ * Get list of metric IDs in as dictionary keys.
  */
 async function getMetrics() {
   const path = "/actuator/metrics";
@@ -138,16 +139,15 @@ async function getMetrics() {
     .then((data) => {
       // Check if the data has 'names' property
       if (data.hasOwnProperty("names")) {
-        // Initialize an empty tree
-        let tree: Tree = { _bare: {} };
+        let result: { [name: string]: Metric | null } = {};
 
         // Process each name
         data.names.forEach((name: string) => {
-          tree["_bare"][name] = {};
+          result[name] = null;
         });
 
         // console.log(tree);
-        return JSON.parse(JSON.stringify(tree["_bare"]));
+        return JSON.parse(JSON.stringify(result));
       } else {
         console.log("No names found in the data");
         return {};
@@ -159,17 +159,18 @@ async function getMetrics() {
     });
 }
 
-async function getActuators() {
+async function getActuators(): Promise<HALResponse> {
   return await get("/actuator");
 }
+
 /**
- * Fetches on property from actuator
+ * Fetches give Metric ID.
  *
  * @path: dot separated string
  *
  * Example: a.b.c
  */
-async function getMetric(id: string) {
+async function getMetric(id: string): Promise<Metric> {
   const path = `/actuator/metrics/${id}`;
   let result = await get(path)
     .then((data) => {
diff --git a/ui/src/types/api.d.ts b/ui/src/types/api.d.ts
index 03320a792..b17e5aece 100644
--- a/ui/src/types/api.d.ts
+++ b/ui/src/types/api.d.ts
@@ -71,3 +71,46 @@ export type Profile = {
 };
 
 export type Auth = { user: string; pwd: string };
+
+/**
+ * Type for /actuator response
+ *
+ * Seems HAL API
+ */
+interface Link {
+  href: string;
+  templated?: boolean;
+}
+
+interface Links {
+  [key: string]: Link;
+}
+
+export interface HALResponse {
+  _links: Links;
+}
+
+/**
+ * Types for /actuator/metric response.
+ */
+type Measurement = {
+  statistic: string;
+  value: number;
+};
+
+type AvailableTag = {
+  tag: string;
+  values: string[];
+};
+
+export type Metric = {
+  name: string;
+  description: string;
+  baseUnit: string;
+  measurements: Measurement[];
+  availableTags: AvailableTag[];
+  searchWords: string;
+  _display: boolean;
+};
+
+export type Metrics = Metric[];

From 0aa0fc14f7031d14aa1061f205f733bb031e6c61 Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Mon, 26 Feb 2024 13:42:30 +0100
Subject: [PATCH 14/28] codestyle: remove soms TS warnings

---
 ui/src/api/api.ts              |  8 ++------
 ui/src/components/Actuator.vue | 24 +++++++++++++++---------
 ui/src/types/api.d.ts          | 12 ++++++------
 3 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/ui/src/api/api.ts b/ui/src/api/api.ts
index b033d8cd3..c7b48f4d6 100644
--- a/ui/src/api/api.ts
+++ b/ui/src/api/api.ts
@@ -9,7 +9,7 @@ import {
   RemoteFileInfo,
   RemoteFileDetail,
   Metric,
-  HALResponse,
+  HalResponse,
   Metrics,
 } from "@/types/api";
 
@@ -92,7 +92,7 @@ export async function handleResponse(response: Response) {
   }
 }
 
-export async function getActuator() {
+export async function getActuator(): Promise<HalResponse> {
   let result = await get("/actuator");
   return result;
 }
@@ -159,10 +159,6 @@ async function getMetrics() {
     });
 }
 
-async function getActuators(): Promise<HALResponse> {
-  return await get("/actuator");
-}
-
 /**
  * Fetches give Metric ID.
  *
diff --git a/ui/src/components/Actuator.vue b/ui/src/components/Actuator.vue
index b93c13aeb..ec81cd6a3 100644
--- a/ui/src/components/Actuator.vue
+++ b/ui/src/components/Actuator.vue
@@ -3,9 +3,11 @@ import { getActuator, getMetricsAll } from "@/api/api";
 import { ref, watch } from "vue";
 import ActuatorItem from "./ActuatorItem.vue";
 import SearchBar from "@/components/SearchBar.vue";
+import { Metrics, HalLinks } from "@/types/api";
+import { ObjectWithStringKey } from "@/types/types";
 
-const actuator = ref({});
-const metrics = ref({});
+const actuator = ref<HalLinks>();
+const metrics = ref<Metrics>([]);
 
 const loadActuator = async () => {
   let result = (await getActuator())["_links"];
@@ -27,7 +29,8 @@ const loadMetrics = async () => {
 
 loadMetrics();
 loadActuator();
-function downloadJSON(json, filename: string) {
+
+function downloadJSON(json: Metrics, filename: string) {
   const cleanedUp = removeFields(json);
   var dataStr =
     "data:text/json;charset=utf-8," +
@@ -59,7 +62,7 @@ const SEARCH_TEXT_FIELDS = "searchWords";
  */
 function filteredLines() {
   const filterOn: string = filterValue.value.toLowerCase();
-  for (let [key, value] of Object.entries(metrics.value)) {
+  for (let [_key, value] of Object.entries(metrics.value)) {
     if (!value[SEARCH_TEXT_FIELDS]) {
       // TODO: drop keys before stringify?
       value[SEARCH_TEXT_FIELDS] = JSON.stringify(value).toLowerCase();
@@ -74,11 +77,14 @@ function filteredLines() {
  *
  * @param json
  */
-function removeFields(json) {
-  const result = JSON.parse(JSON.stringify(json));
-  for (let [key, value] of Object.entries(result)) {
-    delete value[SEARCH_TEXT_FIELDS];
-    delete value[FIELD_DISPLAY];
+function removeFields(json: Metrics) {
+  // Copy object
+  const result: Metrics = JSON.parse(JSON.stringify(json));
+  for (let [_key, value] of Object.entries(result)) {
+    const wrapper: ObjectWithStringKey = value;
+
+    delete wrapper[SEARCH_TEXT_FIELDS];
+    delete wrapper[FIELD_DISPLAY];
   }
   return result;
 }
diff --git a/ui/src/types/api.d.ts b/ui/src/types/api.d.ts
index b17e5aece..a34ea6a47 100644
--- a/ui/src/types/api.d.ts
+++ b/ui/src/types/api.d.ts
@@ -73,21 +73,21 @@ export type Profile = {
 export type Auth = { user: string; pwd: string };
 
 /**
- * Type for /actuator response
+ * Types for /actuator response
  *
  * Seems HAL API
  */
-interface Link {
+interface ActuatorLink {
   href: string;
   templated?: boolean;
 }
 
-interface Links {
-  [key: string]: Link;
+interface HalLinks {
+  [key: string]: ActuatorLink;
 }
 
-export interface HALResponse {
-  _links: Links;
+export interface HalResponse {
+  _links: HalLinks;
 }
 
 /**

From e398e967b2bb2721130652668a1791c54ec40da1 Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Mon, 26 Feb 2024 14:45:37 +0100
Subject: [PATCH 15/28] add spinner while loading

---
 ui/src/components/Actuator.vue | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/Actuator.vue b/ui/src/components/Actuator.vue
index ec81cd6a3..627963778 100644
--- a/ui/src/components/Actuator.vue
+++ b/ui/src/components/Actuator.vue
@@ -8,6 +8,7 @@ import { ObjectWithStringKey } from "@/types/types";
 
 const actuator = ref<HalLinks>();
 const metrics = ref<Metrics>([]);
+const isLoading = ref<boolean>(true);
 
 const loadActuator = async () => {
   let result = (await getActuator())["_links"];
@@ -90,14 +91,20 @@ function removeFields(json: Metrics) {
 }
 </script>
 <template>
-  <button class="btn btn-primary" v-if="metrics" @click="downloadMetrics">
-    <i class="bi bi-box-arrow-down"></i>
-    Download metrics
-  </button>
-  <div class="row">
+<div>
+  <div class="col mt-3" v-if="isLoading">
+    <LoadingSpinner />
+  </div>
+  <div class="row" v-else>
     <div class="col-sm-3">
       <SearchBar id="searchbox" v-model="filterValue" />
     </div>
+    <div class="col">
+      <button class="btn btn-primary float-end" v-if="metrics" @click="downloadMetrics">
+        <i class="bi bi-box-arrow-down"></i>
+        Download metrics
+      </button>
+    </div>
   </div>
   <table class="table">
     <thead>
@@ -142,4 +149,5 @@ function removeFields(json: Metrics) {
       </table>
     </details>
   </summary>
+</div>
 </template>

From b56b8a7f4ce8db5be8851167c05fbf25c2e964cd Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Mon, 26 Feb 2024 15:00:39 +0100
Subject: [PATCH 16/28] Cleanup search words

---
 ui/src/components/Actuator.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/Actuator.vue b/ui/src/components/Actuator.vue
index 627963778..3c165ab0c 100644
--- a/ui/src/components/Actuator.vue
+++ b/ui/src/components/Actuator.vue
@@ -54,6 +54,18 @@ watch(filterValue, (_newVal, _oldVal) => filteredLines());
 const FIELD_DISPLAY = "_display";
 const SEARCH_TEXT_FIELDS = "searchWords";
 
+function concatValues(obj: any): string {
+    let result = '';
+    for (const key in obj) {
+        if (typeof obj[key] === 'object' && obj[key] !== null) {
+            result += concatValues(obj[key]);
+        } else {
+            result += obj[key];
+        }
+    }
+    return result;
+}
+
 /**
  * Filter metrics on search value
  *
@@ -65,8 +77,7 @@ function filteredLines() {
   const filterOn: string = filterValue.value.toLowerCase();
   for (let [_key, value] of Object.entries(metrics.value)) {
     if (!value[SEARCH_TEXT_FIELDS]) {
-      // TODO: drop keys before stringify?
-      value[SEARCH_TEXT_FIELDS] = JSON.stringify(value).toLowerCase();
+      value[SEARCH_TEXT_FIELDS] = concatValues(value).toLowerCase();
     }
     const searchWords: string = value[SEARCH_TEXT_FIELDS];
     value[FIELD_DISPLAY] = filterOn === "" || searchWords.includes(filterOn);

From 71c1c87307633acf1258306cbbc3d82392a6a16b Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Mon, 26 Feb 2024 15:12:02 +0100
Subject: [PATCH 17/28] Fix loader status

---
 ui/src/components/Actuator.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/Actuator.vue b/ui/src/components/Actuator.vue
index 3c165ab0c..a68ce9dba 100644
--- a/ui/src/components/Actuator.vue
+++ b/ui/src/components/Actuator.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { getActuator, getMetricsAll } from "@/api/api";
 import { ref, watch } from "vue";
-import ActuatorItem from "./ActuatorItem.vue";
-import SearchBar from "@/components/SearchBar.vue";
 import { Metrics, HalLinks } from "@/types/api";
 import { ObjectWithStringKey } from "@/types/types";
 
+import ActuatorItem from "./ActuatorItem.vue";
+import SearchBar from "@/components/SearchBar.vue";
+import LoadingSpinner from "./LoadingSpinner.vue";
+
 const actuator = ref<HalLinks>();
 const metrics = ref<Metrics>([]);
 const isLoading = ref<boolean>(true);
@@ -19,13 +21,13 @@ const loadActuator = async () => {
     list.push(result[key]);
   }
   actuator.value = list;
-  console.log(JSON.stringify(actuator.value, null, 2));
 };
 const loadMetrics = async () => {
   metrics.value = await getMetricsAll();
 
   // preload search values
   filteredLines();
+  isLoading.value = false;
 };
 
 loadMetrics();

From fcba6bf60f15136adbbc017b0d356c5724c94fa3 Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Mon, 26 Feb 2024 15:12:18 +0100
Subject: [PATCH 18/28] Code style.

---
 ui/src/components/Actuator.vue | 124 +++++++++++++++++----------------
 1 file changed, 65 insertions(+), 59 deletions(-)

diff --git a/ui/src/components/Actuator.vue b/ui/src/components/Actuator.vue
index a68ce9dba..6e3f4c6c1 100644
--- a/ui/src/components/Actuator.vue
+++ b/ui/src/components/Actuator.vue
@@ -57,15 +57,15 @@ const FIELD_DISPLAY = "_display";
 const SEARCH_TEXT_FIELDS = "searchWords";
 
 function concatValues(obj: any): string {
-    let result = '';
-    for (const key in obj) {
-        if (typeof obj[key] === 'object' && obj[key] !== null) {
-            result += concatValues(obj[key]);
-        } else {
-            result += obj[key];
-        }
+  let result = "";
+  for (const key in obj) {
+    if (typeof obj[key] === "object" && obj[key] !== null) {
+      result += concatValues(obj[key]);
+    } else {
+      result += obj[key];
     }
-    return result;
+  }
+  return result;
 }
 
 /**
@@ -104,63 +104,69 @@ function removeFields(json: Metrics) {
 }
 </script>
 <template>
-<div>
-  <div class="col mt-3" v-if="isLoading">
-    <LoadingSpinner />
-  </div>
-  <div class="row" v-else>
-    <div class="col-sm-3">
-      <SearchBar id="searchbox" v-model="filterValue" />
-    </div>
-    <div class="col">
-      <button class="btn btn-primary float-end" v-if="metrics" @click="downloadMetrics">
-        <i class="bi bi-box-arrow-down"></i>
-        Download metrics
-      </button>
+  <div class="row">
+    <div class="col mt-3" v-if="isLoading">
+      <LoadingSpinner />
     </div>
-  </div>
-  <table class="table">
-    <thead>
-      <tr>
-        <th scope="col">#</th>
-        <th>key</th>
-        <th>statistic</th>
-        <th>value</th>
-      </tr>
-    </thead>
-    <tbody>
-      <ActuatorItem
-        v-for="(metric, path, index) in metrics"
-        :key="index"
-        :data="metric"
-        :name="path"
-      />
-    </tbody>
-  </table>
-  <hr />
-  <summary>
-    <h3>Other Actuator links</h3>
-    <details>
-      <table>
+    <div class="col" v-else>
+      <div class="row">
+        <div class="col-sm-3">
+          <SearchBar id="searchbox" v-model="filterValue" />
+        </div>
+        <div class="col">
+          <button
+            class="btn btn-primary float-end"
+            v-if="metrics"
+            @click="downloadMetrics"
+          >
+            <i class="bi bi-box-arrow-down"></i>
+            Download metrics
+          </button>
+        </div>
+      </div>
+      <table class="table">
         <thead>
           <tr>
-            <td>key</td>
-            <td>href</td>
-            <td>templated</td>
+            <th scope="col">#</th>
+            <th>key</th>
+            <th>statistic</th>
+            <th>value</th>
           </tr>
         </thead>
         <tbody>
-          <tr v-for="item in actuator">
-            <td>{{ item.key }}</td>
-            <td v-if="item.templated">{{ item.href }}</td>
-            <td v-if="!item.templated">
-              <a :href="item.href" target="_new">{{ item.href }}</a>
-            </td>
-            <td>{{ item.templated }}</td>
-          </tr>
+          <ActuatorItem
+            v-for="(metric, path, index) in metrics"
+            :key="index"
+            :data="metric"
+            :name="path"
+          />
         </tbody>
       </table>
-    </details>
-  </summary>
-</div>
+      <hr />
+      <summary>
+        <h3>Other Actuator links</h3>
+        <details>
+          <table>
+            <thead>
+              <tr>
+                <td>key</td>
+                <td>href</td>
+                <td>templated</td>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="item in actuator">
+                <td>{{ item.key }}</td>
+                <td v-if="item.templated">{{ item.href }}</td>
+                <td v-if="!item.templated">
+                  <a :href="item.href" target="_new">{{ item.href }}</a>
+                </td>
+                <td>{{ item.templated }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </details>
+      </summary>
+    </div>
+  </div>
 </template>

From ae16ac12cd1f8c5f56cd37cc959a7db166ed9976 Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Mon, 26 Feb 2024 15:28:57 +0100
Subject: [PATCH 19/28] More cleanup

---
 ui/src/components/Actuator.vue | 7 ++++---
 ui/src/types/api.d.ts          | 4 ++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/Actuator.vue b/ui/src/components/Actuator.vue
index 6e3f4c6c1..34b972754 100644
--- a/ui/src/components/Actuator.vue
+++ b/ui/src/components/Actuator.vue
@@ -22,6 +22,7 @@ const loadActuator = async () => {
   }
   actuator.value = list;
 };
+
 const loadMetrics = async () => {
   metrics.value = await getMetricsAll();
 
@@ -33,8 +34,8 @@ const loadMetrics = async () => {
 loadMetrics();
 loadActuator();
 
-function downloadJSON(json: Metrics, filename: string) {
-  const cleanedUp = removeFields(json);
+function downloadJSON(filename: string) {
+  const cleanedUp = removeFields(metrics.value);
   var dataStr =
     "data:text/json;charset=utf-8," +
     encodeURIComponent(JSON.stringify(cleanedUp));
@@ -47,7 +48,7 @@ function downloadJSON(json: Metrics, filename: string) {
 }
 
 function downloadMetrics() {
-  downloadJSON(metrics.value, "armadillo-metrics-" + new Date().toISOString());
+  downloadJSON("armadillo-metrics-" + new Date().toISOString());
 }
 
 const filterValue = ref("");
diff --git a/ui/src/types/api.d.ts b/ui/src/types/api.d.ts
index a34ea6a47..cec17c13d 100644
--- a/ui/src/types/api.d.ts
+++ b/ui/src/types/api.d.ts
@@ -109,8 +109,8 @@ export type Metric = {
   baseUnit: string;
   measurements: Measurement[];
   availableTags: AvailableTag[];
-  searchWords: string;
-  _display: boolean;
+  searchWords?: string;
+  _display?: boolean;
 };
 
 export type Metrics = Metric[];

From 65705c2b076c916b5023b1b604af5bc35fa4ad27 Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Mon, 26 Feb 2024 16:00:45 +0100
Subject: [PATCH 20/28] Add objectDeepCopy and use it

---
 ui/src/api/api.ts              | 11 +++++------
 ui/src/components/Actuator.vue |  4 ++--
 ui/src/helpers/utils.ts        |  9 +++++++++
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/ui/src/api/api.ts b/ui/src/api/api.ts
index c7b48f4d6..f5225e52d 100644
--- a/ui/src/api/api.ts
+++ b/ui/src/api/api.ts
@@ -1,5 +1,5 @@
 import { ApiError } from "@/helpers/errors";
-import { sanitizeObject } from "@/helpers/utils";
+import { objectDeepCopy, sanitizeObject } from "@/helpers/utils";
 import {
   Principal,
   Profile,
@@ -133,7 +133,7 @@ export async function getMetricsAll(): Promise<Metrics> {
 /**
  * Get list of metric IDs in as dictionary keys.
  */
-async function getMetrics() {
+async function getMetrics(): Promise<Metrics | {}> {
   const path = "/actuator/metrics";
   return await get(path)
     .then((data) => {
@@ -166,17 +166,16 @@ async function getMetrics() {
  *
  * Example: a.b.c
  */
-async function getMetric(id: string): Promise<Metric> {
+async function getMetric(id: string): Promise<Metric | {}> {
   const path = `/actuator/metrics/${id}`;
-  let result = await get(path)
+  return await get(path)
     .then((data) => {
-      return JSON.parse(JSON.stringify(data));
+      return objectDeepCopy<Metric>(data);
     })
     .catch((error) => {
       console.error(`Error fetching ${path}`, error);
       return {};
     });
-  return result;
 }
 
 export async function deleteUser(email: string) {
diff --git a/ui/src/components/Actuator.vue b/ui/src/components/Actuator.vue
index 34b972754..e88925d90 100644
--- a/ui/src/components/Actuator.vue
+++ b/ui/src/components/Actuator.vue
@@ -7,6 +7,7 @@ import { ObjectWithStringKey } from "@/types/types";
 import ActuatorItem from "./ActuatorItem.vue";
 import SearchBar from "@/components/SearchBar.vue";
 import LoadingSpinner from "./LoadingSpinner.vue";
+import { objectDeepCopy } from "@/helpers/utils";
 
 const actuator = ref<HalLinks>();
 const metrics = ref<Metrics>([]);
@@ -93,8 +94,7 @@ function filteredLines() {
  * @param json
  */
 function removeFields(json: Metrics) {
-  // Copy object
-  const result: Metrics = JSON.parse(JSON.stringify(json));
+  const result: Metrics = objectDeepCopy<Metrics>(json);
   for (let [_key, value] of Object.entries(result)) {
     const wrapper: ObjectWithStringKey = value;
 
diff --git a/ui/src/helpers/utils.ts b/ui/src/helpers/utils.ts
index ecaf1500b..25b81e825 100644
--- a/ui/src/helpers/utils.ts
+++ b/ui/src/helpers/utils.ts
@@ -149,3 +149,12 @@ export function sanitizeObject(
 export function isEmptyObject(obj: Object) {
   return Object.keys(obj).length === 0;
 }
+
+/**
+ * Get a cloned version of the input.
+ *
+ * @param input:Object
+ */
+export function objectDeepCopy<T>(input:T):T {
+  return JSON.parse(JSON.stringify(input));
+}

From f1fdd5d7403976d078352db778b8716cf456d31f Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Mon, 26 Feb 2024 16:01:41 +0100
Subject: [PATCH 21/28] Add objectDeepCopy and use it

---
 ui/src/helpers/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/helpers/utils.ts b/ui/src/helpers/utils.ts
index 25b81e825..85f521803 100644
--- a/ui/src/helpers/utils.ts
+++ b/ui/src/helpers/utils.ts
@@ -155,6 +155,6 @@ export function isEmptyObject(obj: Object) {
  *
  * @param input:Object
  */
-export function objectDeepCopy<T>(input:T):T {
+export function objectDeepCopy<T>(input: T): T {
   return JSON.parse(JSON.stringify(input));
 }

From 2ad41a454720ef8e466fa218c431760ac6d26e3d Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Mon, 26 Feb 2024 16:02:14 +0100
Subject: [PATCH 22/28] Move template up

---
 ui/src/components/Actuator.vue | 135 +++++++++++++++++----------------
 1 file changed, 68 insertions(+), 67 deletions(-)

diff --git a/ui/src/components/Actuator.vue b/ui/src/components/Actuator.vue
index e88925d90..2e11d5263 100644
--- a/ui/src/components/Actuator.vue
+++ b/ui/src/components/Actuator.vue
@@ -1,3 +1,71 @@
+<template>
+  <div class="row">
+    <div class="col mt-3" v-if="isLoading">
+      <LoadingSpinner />
+    </div>
+    <div class="col" v-else>
+      <div class="row">
+        <div class="col-sm-3">
+          <SearchBar id="searchbox" v-model="filterValue" />
+        </div>
+        <div class="col">
+          <button
+            class="btn btn-primary float-end"
+            v-if="metrics"
+            @click="downloadMetrics"
+          >
+            <i class="bi bi-box-arrow-down"></i>
+            Download metrics
+          </button>
+        </div>
+      </div>
+      <table class="table">
+        <thead>
+          <tr>
+            <th scope="col">#</th>
+            <th>key</th>
+            <th>statistic</th>
+            <th>value</th>
+          </tr>
+        </thead>
+        <tbody>
+          <ActuatorItem
+            v-for="(metric, path, index) in metrics"
+            :key="index"
+            :data="metric"
+            :name="path"
+          />
+        </tbody>
+      </table>
+      <hr />
+      <summary>
+        <h3>Other Actuator links</h3>
+        <details>
+          <table>
+            <thead>
+              <tr>
+                <td>key</td>
+                <td>href</td>
+                <td>templated</td>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="item in actuator">
+                <td>{{ item.key }}</td>
+                <td v-if="item.templated">{{ item.href }}</td>
+                <td v-if="!item.templated">
+                  <a :href="item.href" target="_new">{{ item.href }}</a>
+                </td>
+                <td>{{ item.templated }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </details>
+      </summary>
+    </div>
+  </div>
+</template>
+
 <script setup lang="ts">
 import { getActuator, getMetricsAll } from "@/api/api";
 import { ref, watch } from "vue";
@@ -104,70 +172,3 @@ function removeFields(json: Metrics) {
   return result;
 }
 </script>
-<template>
-  <div class="row">
-    <div class="col mt-3" v-if="isLoading">
-      <LoadingSpinner />
-    </div>
-    <div class="col" v-else>
-      <div class="row">
-        <div class="col-sm-3">
-          <SearchBar id="searchbox" v-model="filterValue" />
-        </div>
-        <div class="col">
-          <button
-            class="btn btn-primary float-end"
-            v-if="metrics"
-            @click="downloadMetrics"
-          >
-            <i class="bi bi-box-arrow-down"></i>
-            Download metrics
-          </button>
-        </div>
-      </div>
-      <table class="table">
-        <thead>
-          <tr>
-            <th scope="col">#</th>
-            <th>key</th>
-            <th>statistic</th>
-            <th>value</th>
-          </tr>
-        </thead>
-        <tbody>
-          <ActuatorItem
-            v-for="(metric, path, index) in metrics"
-            :key="index"
-            :data="metric"
-            :name="path"
-          />
-        </tbody>
-      </table>
-      <hr />
-      <summary>
-        <h3>Other Actuator links</h3>
-        <details>
-          <table>
-            <thead>
-              <tr>
-                <td>key</td>
-                <td>href</td>
-                <td>templated</td>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="item in actuator">
-                <td>{{ item.key }}</td>
-                <td v-if="item.templated">{{ item.href }}</td>
-                <td v-if="!item.templated">
-                  <a :href="item.href" target="_new">{{ item.href }}</a>
-                </td>
-                <td>{{ item.templated }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </details>
-      </summary>
-    </div>
-  </div>
-</template>

From 66943f712479b8f58d9f8e6822523d0b80a62176 Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Mon, 26 Feb 2024 16:03:26 +0100
Subject: [PATCH 23/28] Move template up

---
 ui/src/components/ActuatorItem.vue | 55 +++++++++++++++---------------
 1 file changed, 28 insertions(+), 27 deletions(-)

diff --git a/ui/src/components/ActuatorItem.vue b/ui/src/components/ActuatorItem.vue
index ee85f08c4..1f83685fe 100644
--- a/ui/src/components/ActuatorItem.vue
+++ b/ui/src/components/ActuatorItem.vue
@@ -1,3 +1,31 @@
+<template>
+  <tr v-if="data._display" v-for="(v, k) in data.measurements">
+    <td scope="col">{{ k }}</td>
+    <td :title="data.description">
+      <span>
+        {{ data.name }}
+        <i v-if="data.description" class="bi bi-info-circle-fill"></i>
+      </span>
+    </td>
+    <td>{{ v.statistic }}</td>
+    <td v-if="data.baseUnit === 'bytes'">
+      {{ convertBytes(v.value) }}
+    </td>
+    <td v-else>{{ v.value }} {{ data.baseUnit }}</td>
+  </tr>
+  <tr v-if="data._display">
+    <td colspan="5">
+      <summary>
+        <details>
+          <pre>
+            {{ JSON.stringify(data, null, 3) }}
+          </pre>
+        </details>
+      </summary>
+    </td>
+  </tr>
+</template>
+
 <script setup lang="ts">
 const props = defineProps({
   name: {
@@ -48,30 +76,3 @@ function convertBytes(bytes: number): string {
 }
 */
 </script>
-<template>
-  <tr v-if="data._display" v-for="(v, k) in data.measurements">
-    <td scope="col">{{ k }}</td>
-    <td :title="data.description">
-      <span>
-        {{ data.name }}
-        <i v-if="data.description" class="bi bi-info-circle-fill"></i>
-      </span>
-    </td>
-    <td>{{ v.statistic }}</td>
-    <td v-if="data.baseUnit === 'bytes'">
-      {{ convertBytes(v.value) }}
-    </td>
-    <td v-else>{{ v.value }} {{ data.baseUnit }}</td>
-  </tr>
-  <tr v-if="data._display">
-    <td colspan="5">
-      <summary>
-        <details>
-          <pre>
-            {{ JSON.stringify(data, null, 3) }}
-          </pre>
-        </details>
-      </summary>
-    </td>
-  </tr>
-</template>

From 0c5914efc5047862c9e37de29578a9d67983f8df Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Mon, 26 Feb 2024 16:07:42 +0100
Subject: [PATCH 24/28] Use const

---
 ui/src/components/Actuator.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/Actuator.vue b/ui/src/components/Actuator.vue
index 2e11d5263..615225f5c 100644
--- a/ui/src/components/Actuator.vue
+++ b/ui/src/components/Actuator.vue
@@ -105,10 +105,10 @@ loadActuator();
 
 function downloadJSON(filename: string) {
   const cleanedUp = removeFields(metrics.value);
-  var dataStr =
+  const dataStr =
     "data:text/json;charset=utf-8," +
     encodeURIComponent(JSON.stringify(cleanedUp));
-  var downloadAnchorNode = document.createElement("a");
+  const downloadAnchorNode = document.createElement("a");
   downloadAnchorNode.setAttribute("href", dataStr);
   downloadAnchorNode.setAttribute("download", filename + ".json");
   document.body.appendChild(downloadAnchorNode); // required for firefox

From 37c6f102a47dc36164fcebf2702bc3324d2b1a75 Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Mon, 26 Feb 2024 16:11:35 +0100
Subject: [PATCH 25/28] Move metric doc up

---
 ui/src/components/ActuatorItem.vue | 44 +++++++++++++++---------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/ui/src/components/ActuatorItem.vue b/ui/src/components/ActuatorItem.vue
index 1f83685fe..c27ee7cee 100644
--- a/ui/src/components/ActuatorItem.vue
+++ b/ui/src/components/ActuatorItem.vue
@@ -27,6 +27,28 @@
 </template>
 
 <script setup lang="ts">
+/*
+{
+   "name": "application.ready.time",
+   "description": "Time taken for the application to be ready to service requests",
+   "baseUnit": "seconds",
+   "measurements": [
+      {
+         "statistic": "VALUE",
+         "value": 2.649
+      }
+   ],
+   "availableTags": [
+      {
+         "tag": "main.application.class",
+         "values": [
+            "org.molgenis.armadillo.ArmadilloServiceApplication"
+         ]
+      }
+   ]
+}
+*/
+
 const props = defineProps({
   name: {
     type: String,
@@ -53,26 +75,4 @@ function convertBytes(bytes: number): string {
 
   return `${bytes.toFixed(2)} ${units[unitIndex]}`;
 }
-
-/*
-{
-   "name": "application.ready.time",
-   "description": "Time taken for the application to be ready to service requests",
-   "baseUnit": "seconds",
-   "measurements": [
-      {
-         "statistic": "VALUE",
-         "value": 2.649
-      }
-   ],
-   "availableTags": [
-      {
-         "tag": "main.application.class",
-         "values": [
-            "org.molgenis.armadillo.ArmadilloServiceApplication"
-         ]
-      }
-   ]
-}
-*/
 </script>

From efa0d5cb3221e10dd2f837060717579e6e163bd5 Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Thu, 7 Mar 2024 13:49:00 +0100
Subject: [PATCH 26/28] Fix failing build and cleanup

---
 ui/src/types/api.d.ts    |  2 +-
 ui/src/types/types.d.ts  |  4 ++++
 ui/src/views/Insight.vue | 43 ++++++++++++++--------------------------
 3 files changed, 20 insertions(+), 29 deletions(-)

diff --git a/ui/src/types/api.d.ts b/ui/src/types/api.d.ts
index cec17c13d..75504f5ee 100644
--- a/ui/src/types/api.d.ts
+++ b/ui/src/types/api.d.ts
@@ -113,4 +113,4 @@ export type Metric = {
   _display?: boolean;
 };
 
-export type Metrics = Metric[];
+export type Metrics: Dictionary<Metric>
diff --git a/ui/src/types/types.d.ts b/ui/src/types/types.d.ts
index d6ebd7caf..bec052a6f 100644
--- a/ui/src/types/types.d.ts
+++ b/ui/src/types/types.d.ts
@@ -28,6 +28,10 @@ export type TypeString =
   | "object";
 export type StringArray = string[];
 
+interface Dictionary<T> {
+  [key: string]: T;
+}
+
 // Maybe later expand with float/int/enum/character
 export type TypeObject = Record<string, TypeString>;
 export type ProjectsExplorerData = {
diff --git a/ui/src/views/Insight.vue b/ui/src/views/Insight.vue
index 41f8de3e8..460ed486c 100644
--- a/ui/src/views/Insight.vue
+++ b/ui/src/views/Insight.vue
@@ -1,28 +1,22 @@
 <template>
   <h2>Insight</h2>
-  <!-- FIXME: Cannot use tabs as it
-    uses router views but we have sub views.
-    <Tabs :menu="tabs" :icons="tabIcons" />
-  -->
   <div class="row">
-    <div class="col">
-      <div class="btn-group" role="group" aria-label="Basic outlined example">
-        <button
-          v-for="(tab, index) in tabs"
-          :key="index"
-          class="btn"
-          :class="{
-            active: currentTab === index,
-            'btn-primary': currentTab === index,
-            'btn-secondary': currentTab !== index,
-          }"
-          @click="currentTab = index"
-        >
-          {{ tab }}
-        </button>
-      </div>
+    <div class="col-2">
+      <button
+        v-for="(tab, index) in tabs"
+        :key="index"
+        class="btn btn-sm"
+        :class="{
+          active: currentTab === index,
+          'btn-primary': currentTab === index,
+          'btn-secondary': currentTab !== index,
+        }"
+        @click="currentTab = index"
+      >
+        {{ tab }}
+      </button>
     </div>
-    <div>
+    <div class="col-10">
       <div v-show="currentTab === 0">
         <RemoteFiles />
       </div>
@@ -41,10 +35,3 @@ import { ref } from "vue";
 let currentTab = ref(0);
 const tabs = ["Files", "Server metrics"];
 </script>
-
-<style scoped>
-.active {
-  border: 2p solid red;
-  /* Styles for active tab */
-}
-</style>

From f4979d3cd053c3a644e55a3eade3353eeccb9e81 Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Thu, 7 Mar 2024 13:52:44 +0100
Subject: [PATCH 27/28] Fix failing build and cleanup

---
 ui/src/types/api.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/types/api.d.ts b/ui/src/types/api.d.ts
index 75504f5ee..6d3032059 100644
--- a/ui/src/types/api.d.ts
+++ b/ui/src/types/api.d.ts
@@ -113,4 +113,4 @@ export type Metric = {
   _display?: boolean;
 };
 
-export type Metrics: Dictionary<Metric>
+export type Metrics = Dictionary<Metric>;

From c992d6ab6e07321ee845e98009106833c8a6dbd7 Mon Sep 17 00:00:00 2001
From: Clemens Tolboom <c.g.w.m.tolboom@umcg.nl>
Date: Wed, 13 Mar 2024 15:53:05 +0100
Subject: [PATCH 28/28] Cleanup code from feedback

---
 ui/src/api/api.ts                  | 56 ++++++++++--------------------
 ui/src/components/Actuator.vue     |  7 ++--
 ui/src/components/ActuatorItem.vue | 26 ++------------
 ui/src/types/api.d.ts              |  2 +-
 4 files changed, 26 insertions(+), 65 deletions(-)

diff --git a/ui/src/api/api.ts b/ui/src/api/api.ts
index f5225e52d..012c2fecf 100644
--- a/ui/src/api/api.ts
+++ b/ui/src/api/api.ts
@@ -111,46 +111,33 @@ export async function getVersion() {
  * Fetch all metric values on one go using the list.
  */
 export async function getMetricsAll(): Promise<Metrics> {
-  try {
-    const metrics = await getMetrics();
-    const paths = Object.keys(metrics);
-
-    await Promise.all(
-      paths.map(async (path) => {
-        const response = await getMetric(path);
-        metrics[path] = response;
-        return { path: response };
-      })
-    );
-
-    return metrics;
-  } catch (error) {
-    console.error("Error:", error);
-    return [];
-  }
+  const paths = await getMetrics();
+  const metrics: Metrics = {};
+
+  await Promise.all(
+    paths.map(async (path) => {
+      const response = await getMetric(path);
+      metrics[path] = response;
+      return { path: response };
+    })
+  );
+
+  return metrics;
 }
 
 /**
  * Get list of metric IDs in as dictionary keys.
  */
-async function getMetrics(): Promise<Metrics | {}> {
+async function getMetrics(): Promise<string[]> {
   const path = "/actuator/metrics";
   return await get(path)
     .then((data) => {
       // Check if the data has 'names' property
       if (data.hasOwnProperty("names")) {
-        let result: { [name: string]: Metric | null } = {};
-
-        // Process each name
-        data.names.forEach((name: string) => {
-          result[name] = null;
-        });
-
-        // console.log(tree);
-        return JSON.parse(JSON.stringify(result));
+        return data.names;
       } else {
         console.log("No names found in the data");
-        return {};
+        return [];
       }
     })
     .catch((error) => {
@@ -166,16 +153,11 @@ async function getMetrics(): Promise<Metrics | {}> {
  *
  * Example: a.b.c
  */
-async function getMetric(id: string): Promise<Metric | {}> {
+async function getMetric(id: string): Promise<Metric> {
   const path = `/actuator/metrics/${id}`;
-  return await get(path)
-    .then((data) => {
-      return objectDeepCopy<Metric>(data);
-    })
-    .catch((error) => {
-      console.error(`Error fetching ${path}`, error);
-      return {};
-    });
+  return get(path).then((data) => {
+    return objectDeepCopy<Metric>(data);
+  });
 }
 
 export async function deleteUser(email: string) {
diff --git a/ui/src/components/Actuator.vue b/ui/src/components/Actuator.vue
index 615225f5c..66d3242f4 100644
--- a/ui/src/components/Actuator.vue
+++ b/ui/src/components/Actuator.vue
@@ -50,8 +50,8 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="item in actuator">
-                <td>{{ item.key }}</td>
+              <tr v-for="(item, key) in actuator" :key="key">
+                <td>{{ key }}</td>
                 <td v-if="item.templated">{{ item.href }}</td>
                 <td v-if="!item.templated">
                   <a :href="item.href" target="_new">{{ item.href }}</a>
@@ -71,11 +71,11 @@ import { getActuator, getMetricsAll } from "@/api/api";
 import { ref, watch } from "vue";
 import { Metrics, HalLinks } from "@/types/api";
 import { ObjectWithStringKey } from "@/types/types";
+import { objectDeepCopy } from "@/helpers/utils";
 
 import ActuatorItem from "./ActuatorItem.vue";
 import SearchBar from "@/components/SearchBar.vue";
 import LoadingSpinner from "./LoadingSpinner.vue";
-import { objectDeepCopy } from "@/helpers/utils";
 
 const actuator = ref<HalLinks>();
 const metrics = ref<Metrics>([]);
@@ -85,6 +85,7 @@ const loadActuator = async () => {
   let result = (await getActuator())["_links"];
   let list = [];
   for (let key in result) {
+    // Add key to each item for further usage
     const item = result[key];
     item["key"] = key;
     list.push(result[key]);
diff --git a/ui/src/components/ActuatorItem.vue b/ui/src/components/ActuatorItem.vue
index c27ee7cee..241817a21 100644
--- a/ui/src/components/ActuatorItem.vue
+++ b/ui/src/components/ActuatorItem.vue
@@ -1,6 +1,6 @@
 <template>
-  <tr v-if="data._display" v-for="(v, k) in data.measurements">
-    <td scope="col">{{ k }}</td>
+  <tr v-if="data._display" v-for="(v, key) in data.measurements" :key="key">
+    <td scope="col">{{ key }}</td>
     <td :title="data.description">
       <span>
         {{ data.name }}
@@ -27,28 +27,6 @@
 </template>
 
 <script setup lang="ts">
-/*
-{
-   "name": "application.ready.time",
-   "description": "Time taken for the application to be ready to service requests",
-   "baseUnit": "seconds",
-   "measurements": [
-      {
-         "statistic": "VALUE",
-         "value": 2.649
-      }
-   ],
-   "availableTags": [
-      {
-         "tag": "main.application.class",
-         "values": [
-            "org.molgenis.armadillo.ArmadilloServiceApplication"
-         ]
-      }
-   ]
-}
-*/
-
 const props = defineProps({
   name: {
     type: String,
diff --git a/ui/src/types/api.d.ts b/ui/src/types/api.d.ts
index 6d3032059..99568cca7 100644
--- a/ui/src/types/api.d.ts
+++ b/ui/src/types/api.d.ts
@@ -1,4 +1,4 @@
-import { StringArray } from "@/types/types";
+import { Dictionary, StringArray } from "@/types/types";
 
 export type Project = {
   name: string;