From 632867ea4a0561fb3a103254f1339c07ef41392b Mon Sep 17 00:00:00 2001
From: Nawo-pingu <64965495+Nawo-pingu@users.noreply.github.com>
Date: Fri, 18 Jul 2025 17:37:39 +0200
Subject: [PATCH 01/14] add a button froce delete (not functionnal)

---
 src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue b/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue
index 709ddf16..5e3ca894 100644
--- a/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue
+++ b/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue
@@ -101,6 +101,8 @@
         You are about to remove hypervisor <b>{{ JSON.parse(JSON.stringify(this.selectedHost)).hostname }}</b>.
         <br>Please confirm action.
       </div>
+      <va-button color="danger" @click="forceDeleteHost">Force Delete</va-button>
+
     </va-modal>
   </div>
 </template>

From ff732c7909337b7cd9dc40ce4d3bdd9709ee2c08 Mon Sep 17 00:00:00 2001
From: Nawo-pingu <64965495+Nawo-pingu@users.noreply.github.com>
Date: Tue, 22 Jul 2025 14:38:43 +0200
Subject: [PATCH 02/14] change button into checkbox

---
 .../resources/hypervisors/HypervisorForm.vue  |  54 ++-
 .../resources/hypervisors/HypervisorList.vue  | 307 ++++++++++++------
 2 files changed, 251 insertions(+), 110 deletions(-)

diff --git a/src/ui/src/pages/admin/resources/hypervisors/HypervisorForm.vue b/src/ui/src/pages/admin/resources/hypervisors/HypervisorForm.vue
index 05139af0..15d87a4b 100644
--- a/src/ui/src/pages/admin/resources/hypervisors/HypervisorForm.vue
+++ b/src/ui/src/pages/admin/resources/hypervisors/HypervisorForm.vue
@@ -2,26 +2,48 @@
   <va-card>
     <va-card-title>
       <FormHeader
-        :title="hypersivorId ? `Updating hypervisor ${stateHypervisor?.hostname ?? ''}` : 'Adding hypervisor'" />
+        :title="
+          hypersivorId
+            ? `Updating hypervisor ${stateHypervisor?.hostname ?? ''}`
+            : 'Adding hypervisor'
+        "
+      />
     </va-card-title>
     <va-card-content v-if="!hypervisorId || stateHypervisor">
       <va-form ref="form">
-        <va-input label="Hostname" v-model="formHypervisor.hostname"
-          :rules="[(value) => value?.length > 0 || 'Field is required']" />
+        <va-input
+          label="Hostname"
+          v-model="formHypervisor.hostname"
+          :rules="[(value) => value?.length > 0 || 'Field is required']"
+        />
         <br />
-        <va-input label="IP Address or Domain Name" v-model="formHypervisor.ipAddress" :rules="[
-          (value) =>
-            value?.match(/^[0-9a-zA-Z.-]+$/) ||
-            'Field is required and must be a valid IP address or domain name.',
-        ]" />
+        <va-input
+          label="IP Address or Domain Name"
+          v-model="formHypervisor.ipAddress"
+          :rules="[
+            (value) =>
+              value?.match(/^[0-9a-zA-Z.-]+$/) ||
+              'Field is required and must be a valid IP address or domain name.',
+          ]"
+        />
         <br />
-        <va-select label="Select Pool" v-model="selectedPool" :options="poolOptions"
-          :rules="[(value) => value || 'Field is required']" />
+        <va-select
+          label="Select Pool"
+          v-model="selectedPool"
+          :options="poolOptions"
+          :rules="[(value) => value || 'Field is required']"
+        />
         <br />
         <va-input label="Tag (optional)" v-model="formHypervisor.tags" />
       </va-form>
       <br />
-      <va-button class="mb-3" @click="$refs.form.validate() && (hypersivorId ? updateHypervisor() : addHypervisor())">
+      <va-button
+        class="mb-3"
+        @click="
+          $refs.form.validate() &&
+            (hypersivorId ? updateHypervisor() : addHypervisor())
+        "
+      >
         {{ hypervisorId ? "Update" : "Add" }}
       </va-button>
     </va-card-content>
@@ -40,7 +62,7 @@ import FormHeader from "@/components/forms/FormHeader.vue";
 export default {
   components: {
     ...spinners,
-    FormHeader
+    FormHeader,
   },
   data() {
     return {
@@ -122,7 +144,9 @@ export default {
           }
         )
         .then((response) => {
-          this.$store.dispatch("requestHost", { token: this.$store.state.token });
+          this.$store.dispatch("requestHost", {
+            token: this.$store.state.token,
+          });
           this.$router.push("/admin/resources/hypervisors");
           this.$vaToast.init({
             title: response.data.state,
@@ -130,8 +154,8 @@ export default {
             color: "success",
           });
         })
-        .catch(error => {
-          console.error(error)
+        .catch((error) => {
+          console.error(error);
           this.$vaToast.init({
             title: "Unable to add hypervisor",
             message: error?.response?.data?.detail ?? error,
diff --git a/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue b/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue
index 5e3ca894..fc06a405 100644
--- a/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue
+++ b/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue
@@ -2,16 +2,29 @@
   <div>
     <va-card>
       <va-card-title>
-        <ListHeader title="Hypervisors" plus-button-title="Add hypervisor"
-          plus-button-route="/admin/resources/hypervisors/new" :dependencies-resolved="areDependenciesResolved"
-          dependencies-message="You need to create a pool." go-button-title="Go to pools"
-          go-button-route="/admin/resources/pools" />
+        <ListHeader
+          title="Hypervisors"
+          plus-button-title="Add hypervisor"
+          plus-button-route="/admin/resources/hypervisors/new"
+          :dependencies-resolved="areDependenciesResolved"
+          dependencies-message="You need to create a pool."
+          go-button-title="Go to pools"
+          go-button-route="/admin/resources/pools"
+        />
       </va-card-title>
       <va-card-content>
-        <va-data-table :items="$store.state.resources.hostList" :columns="columns">
+        <va-data-table
+          :items="$store.state.resources.hostList"
+          :columns="columns"
+        >
           <template #cell(name)="{ value }">{{ value.toUpperCase() }}</template>
           <template #cell(pool_id)="{ value }">
-            <va-chip v-if="getPool(value)" size="small" square @click="this.$router.push('/admin/resources/pools')">
+            <va-chip
+              v-if="getPool(value)"
+              size="small"
+              square
+              @click="this.$router.push('/admin/resources/pools')"
+            >
               {{ getPool(value) }}
             </va-chip>
           </template>
@@ -21,9 +34,14 @@
             </va-chip>
           </template>
           <template #cell(ssh)="{ value }">
-            <va-chip size="small" square outline :color="value ? 'success' : 'warning'">
+            <va-chip
+              size="small"
+              square
+              outline
+              :color="value ? 'success' : 'warning'"
+            >
               <va-icon v-if="!value" name="warning" />
-              {{ JSON.parse(value) ? 'Configured' : 'Unconfigured' }}
+              {{ JSON.parse(value) ? "Configured" : "Unconfigured" }}
             </va-chip>
           </template>
           <template #cell(tags)="{ value }">
@@ -32,24 +50,48 @@
             </va-chip>
           </template>
           <template #cell(state)="{ value }">
-            <va-chip size="small" :color="value === 'Reachable' ? 'success' : 'danger'">
-              {{ value === 'Reachable' ? 'Reachable' : 'Unreachable' }}
+            <va-chip
+              size="small"
+              :color="value === 'Reachable' ? 'success' : 'danger'"
+            >
+              {{ value === "Reachable" ? "Reachable" : "Unreachable" }}
             </va-chip>
           </template>
           <template #cell(actions)="{ rowIndex }">
             <va-button-group gradient :rounded="false">
-              <va-button v-if="!$store.state.resources.hostList[rowIndex].ssh" icon="link"
+              <va-button
+                v-if="!$store.state.resources.hostList[rowIndex].ssh"
+                icon="link"
                 :disabled="sshKeys.length == 0"
-                @click="selectedHost = $store.state.resources.hostList[rowIndex], showConnectModal = true" />
-              <va-button icon="settings"
-                @click="this.$router.push(`/admin/resources/hypervisors/${$store.state.resources.hostList[rowIndex].id}`)" />
-              <va-button icon="delete"
-                @click="selectedHost = $store.state.resources.hostList[rowIndex], showDeleteModal = true" />
+                @click="
+                  (selectedHost = $store.state.resources.hostList[rowIndex]),
+                    (showConnectModal = true)
+                "
+              />
+              <va-button
+                icon="settings"
+                @click="
+                  this.$router.push(
+                    `/admin/resources/hypervisors/${$store.state.resources.hostList[rowIndex].id}`
+                  )
+                "
+              />
+              <va-button
+                icon="delete"
+                @click="
+                  (selectedHost = $store.state.resources.hostList[rowIndex]),
+                    (showDeleteModal = true)
+                "
+              />
             </va-button-group>
           </template>
         </va-data-table>
         <div v-if="!$store.state.isHostTableReady" class="flex-center ma-3">
-          <spring-spinner :animation-duration="2000" :size="30" color="#2c82e0" />
+          <spring-spinner
+            :animation-duration="2000"
+            :size="30"
+            color="#2c82e0"
+          />
         </div>
       </va-card-content>
     </va-card>
@@ -60,32 +102,51 @@
           Connecting to the hypervisor at {{ selectedHost.hostname }}
         </h2>
       </template>
-      <hr class="mb-4">
-      <va-form ref="form" @validation="validation = $event, connectHost()">
-        <va-input label="Specify the user on the server" messages="The user must have the access rights to KVM."
-          v-model="user" type="text" :rules="[value => value?.trim().length > 0 || 'Field is required']" class="mb-3" />
+      <hr class="mb-4" />
+      <va-form ref="form" @validation="(validation = $event), connectHost()">
+        <va-input
+          label="Specify the user on the server"
+          messages="The user must have the access rights to KVM."
+          v-model="user"
+          type="text"
+          :rules="[(value) => value?.trim().length > 0 || 'Field is required']"
+          class="mb-3"
+        />
         <va-tabs v-model="currentTabKey">
           <template #tabs>
             <va-tab v-for="{ name } in sshKeys" :key="name" :name="name">
               {{ name.toUpperCase() }}
             </va-tab>
           </template>
-          <div style="position: relative;">
-            <va-input label="BackROLL SSH key"
+          <div style="position: relative">
+            <va-input
+              label="BackROLL SSH key"
               messages="Copy-paste one of the keys into the ~/.ssh/authorized_keys file on the server."
-              v-model="currentSshKey" type="textarea" :autosize="true" :min-rows="2" readonly class="mb-4" />
-            <va-icon :name="isKeyCopied ? 'check' : 'content_copy'" :size="20" @click="copyToClipboard(currentSshKey)"
-              style="position: absolute; top: 0; right: 0; margin-top: 6px; margin-right: 4px;" />
+              v-model="currentSshKey"
+              type="textarea"
+              :autosize="true"
+              :min-rows="2"
+              readonly
+              class="mb-4"
+            />
+            <va-icon
+              :name="isKeyCopied ? 'check' : 'content_copy'"
+              :size="20"
+              @click="copyToClipboard(currentSshKey)"
+              style="
+                position: absolute;
+                top: 0;
+                right: 0;
+                margin-top: 6px;
+                margin-right: 4px;
+              "
+            />
           </div>
         </va-tabs>
         <div class="d-flex">
-          <va-button flat @click="showConnectModal = false">
-            Cancel
-          </va-button>
+          <va-button flat @click="showConnectModal = false"> Cancel </va-button>
           <va-spacer class="spacer" />
-          <va-button @click="$refs.form.validate()">
-            Done
-          </va-button>
+          <va-button @click="$refs.form.validate()"> Done </va-button>
         </div>
       </va-form>
     </va-modal>
@@ -96,26 +157,35 @@
           Removing hypervisor
         </h2>
       </template>
-      <hr>
+      <hr />
       <div>
-        You are about to remove hypervisor <b>{{ JSON.parse(JSON.stringify(this.selectedHost)).hostname }}</b>.
-        <br>Please confirm action.
+        You are about to remove hypervisor
+        <b>{{ JSON.parse(JSON.stringify(this.selectedHost)).hostname }}</b
+        >. <br />Please confirm action.
       </div>
-      <va-button color="danger" @click="forceDeleteHost">Force Delete</va-button>
 
+      <template #footer>
+        <div class="d-flex flex-column align-start w-100">
+          <va-checkbox
+            v-model="forceDelete"
+            label="Force Delete"
+            class="mt-2"
+          />
+        </div>
+      </template>
     </va-modal>
   </div>
 </template>
 
 <script>
-import axios from 'axios'
-import { defineComponent } from 'vue'
-import * as spinners from 'epic-spinners'
+import axios from "axios";
+import { defineComponent } from "vue";
+import * as spinners from "epic-spinners";
 
-import ListHeader from "@/components/lists/ListHeader.vue"
+import ListHeader from "@/components/lists/ListHeader.vue";
 
 export default defineComponent({
-  name: 'HypervisorsTable',
+  name: "HypervisorsTable",
   components: {
     ...spinners,
     ListHeader,
@@ -123,13 +193,13 @@ export default defineComponent({
   data() {
     return {
       columns: [
-        { key: 'hostname' },
-        { key: 'pool_id', label: "Pool", sortable: true },
-        { key: 'ipaddress' },
-        { key: 'ssh', label: "SSH Connection" },
-        { key: 'tags', sortable: true },
-        { key: 'state', sortable: true },
-        { key: 'actions' }
+        { key: "hostname" },
+        { key: "pool_id", label: "Pool", sortable: true },
+        { key: "ipaddress" },
+        { key: "ssh", label: "SSH Connection" },
+        { key: "tags", sortable: true },
+        { key: "state", sortable: true },
+        { key: "actions" },
       ],
       validation: false,
       user: null,
@@ -138,40 +208,45 @@ export default defineComponent({
       isKeyCopied: false,
       showConnectModal: false,
       showDeleteModal: false,
-      selectedHost: null
-    }
+      selectedHost: null,
+      forceDelete: false,
+    };
   },
   mounted() {
-    this.requestKeys()
+    this.requestKeys();
   },
   computed: {
     areDependenciesResolved() {
       // Prevent showing irrelevant alert by checking if the table is ready.
-      return !this.$store.state.isPoolTableReady || this.$store.state.resources.poolList.length > 0;
+      return (
+        !this.$store.state.isPoolTableReady ||
+        this.$store.state.resources.poolList.length > 0
+      );
     },
     currentSshKey() {
-      return this.sshKeys.find(({ name }) => name == this.currentTabKey)?.fullLine;
+      return this.sshKeys.find(({ name }) => name == this.currentTabKey)
+        ?.fullLine;
     },
   },
   watch: {
     sshKeys(newValue) {
-      this.currentTabKey = newValue[0]?.name
+      this.currentTabKey = newValue[0]?.name;
     },
     showConnectModal(newValue, oldValue) {
       if (newValue && !oldValue) {
-        this.isKeyCopied = false
+        this.isKeyCopied = false;
       }
     },
     currentTabKey() {
-      this.isKeyCopied = false
-    }
+      this.isKeyCopied = false;
+    },
   },
   methods: {
     copyToClipboard(text) {
       // Works in HTTP (unsafe context).
 
       // Crée un élément textarea temporaire
-      const textarea = document.createElement('textarea');
+      const textarea = document.createElement("textarea");
       textarea.value = text;
 
       // Ajoute le textarea au document
@@ -182,7 +257,7 @@ export default defineComponent({
       textarea.setSelectionRange(0, 99999); // Pour les appareils mobiles
 
       // Copie le texte sélectionné dans le presse-papier
-      document.execCommand('copy');
+      document.execCommand("copy");
 
       // Supprime le textarea du document
       document.body.removeChild(textarea);
@@ -190,62 +265,104 @@ export default defineComponent({
       this.isKeyCopied = true;
     },
     getPool(id) {
-      const result = this.$store.state.resources.poolList.find(item => item.id === id)
+      const result = this.$store.state.resources.poolList.find(
+        (item) => item.id === id
+      );
       if (result) {
-        return result.name.toUpperCase()
+        return result.name.toUpperCase();
       } else {
-        return null
+        return null;
       }
     },
     connectHost() {
       if (this.validation) {
-        axios.post(`${this.$store.state.endpoint.api}/api/v1/connect/${this.selectedHost.id}`, { ip_address: this.selectedHost.ipaddress, username: this.user }, { headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${this.$store.state.token}` } })
-          .then(response => {
-            this.$store.dispatch("requestHost", { token: this.$store.state.token })
-            this.$vaToast.init({ title: response.data.state, message: `Successfully connected to ${this.selectedHost.hostname}`, color: 'success' })
-            this.showConnectModal = false
+        axios
+          .post(
+            `${this.$store.state.endpoint.api}/api/v1/connect/${this.selectedHost.id}`,
+            { ip_address: this.selectedHost.ipaddress, username: this.user },
+            {
+              headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${this.$store.state.token}`,
+              },
+            }
+          )
+          .then((response) => {
+            this.$store.dispatch("requestHost", {
+              token: this.$store.state.token,
+            });
+            this.$vaToast.init({
+              title: response.data.state,
+              message: `Successfully connected to ${this.selectedHost.hostname}`,
+              color: "success",
+            });
+            this.showConnectModal = false;
           })
-          .catch(error => {
-            console.error(error)
+          .catch((error) => {
+            console.error(error);
             this.$vaToast.init({
-              title: 'Error',
+              title: "Error",
               message: error?.response?.data?.detail ?? error,
-              color: 'danger'
-            })
-          })
+              color: "danger",
+            });
+          });
       }
     },
     requestKeys() {
-      axios.get(`${this.$store.state.endpoint.api}/api/v1/publickeys`, { headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${this.$store.state.token}` } })
-        .then(response => {
-          this.sshKeys = response.data.info.map(({ name, full_line }) => ({ name, fullLine: full_line }))
+      axios
+        .get(`${this.$store.state.endpoint.api}/api/v1/publickeys`, {
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${this.$store.state.token}`,
+          },
+        })
+        .then((response) => {
+          this.sshKeys = response.data.info.map(({ name, full_line }) => ({
+            name,
+            fullLine: full_line,
+          }));
         })
-        .catch(error => {
-          console.error(error)
+        .catch((error) => {
+          console.error(error);
           this.$vaToast.init({
-            title: 'Unable to retrieve BackROLL SSH keys',
+            title: "Unable to retrieve BackROLL SSH keys",
             message: error?.response?.data?.detail ?? error,
-            color: 'danger'
-          })
-        })
+            color: "danger",
+          });
+        });
     },
     deleteHost() {
-      axios.delete(`${this.$store.state.endpoint.api}/api/v1/hosts/${this.selectedHost.id}`, { headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${this.$store.state.token}` } })
-        .then(response => {
-          this.$store.dispatch("requestHost", { token: this.$store.state.token })
-          this.$vaToast.init({ title: response.data.state, message: 'Hypervisor has been successfully deleted', color: 'success' })
+      axios
+        .delete(
+          `${this.$store.state.endpoint.api}/api/v1/hosts/${this.selectedHost.id}`,
+          {
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${this.$store.state.token}`,
+            },
+          }
+        )
+        .then((response) => {
+          this.$store.dispatch("requestHost", {
+            token: this.$store.state.token,
+          });
+          this.$vaToast.init({
+            title: response.data.state,
+            message: "Hypervisor has been successfully deleted",
+            color: "success",
+          });
         })
-        .catch(error => {
-          console.error(error)
+        .catch((error) => {
+          console.error(error);
           this.$vaToast.init({
-            title: 'Unable to delete Hypervisor',
+            title: "Unable to delete Hypervisor",
             message: error?.response?.data?.detail ?? error,
-            color: 'danger'
-          })
-        })
-    }
-  }
-})
+            color: "danger",
+          });
+        });
+    },
+  },
+});
 </script>
 <style scoped>
 .text-right {

From 226612b23670d85cdb53ad6c0b42a996e044818d Mon Sep 17 00:00:00 2001
From: Nawo-pingu <64965495+Nawo-pingu@users.noreply.github.com>
Date: Wed, 23 Jul 2025 18:14:49 +0200
Subject: [PATCH 03/14] Not really working bc it's neessary to delete host in
 server (backend)

---
 .../resources/hypervisors/HypervisorList.vue  | 75 ++++++++++++-------
 src/ui/src/store/index.ts                     | 50 ++++++++-----
 2 files changed, 80 insertions(+), 45 deletions(-)

diff --git a/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue b/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue
index fc06a405..300ba7d3 100644
--- a/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue
+++ b/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue
@@ -168,8 +168,9 @@
         <div class="d-flex flex-column align-start w-100">
           <va-checkbox
             v-model="forceDelete"
-            label="Force Delete"
+            label="Force delete"
             class="mt-2"
+            :style="{ color: forceDelete ? 'black' : 'gray' }"
           />
         </div>
       </template>
@@ -332,34 +333,52 @@ export default defineComponent({
         });
     },
     deleteHost() {
-      axios
-        .delete(
-          `${this.$store.state.endpoint.api}/api/v1/hosts/${this.selectedHost.id}`,
-          {
-            headers: {
-              "Content-Type": "application/json",
-              Authorization: `Bearer ${this.$store.state.token}`,
-            },
-          }
-        )
-        .then((response) => {
-          this.$store.dispatch("requestHost", {
-            token: this.$store.state.token,
-          });
-          this.$vaToast.init({
-            title: response.data.state,
-            message: "Hypervisor has been successfully deleted",
-            color: "success",
-          });
-        })
-        .catch((error) => {
-          console.error(error);
-          this.$vaToast.init({
-            title: "Unable to delete Hypervisor",
-            message: error?.response?.data?.detail ?? error,
-            color: "danger",
-          });
+      if (this.forceDelete) {
+        // local deletion
+        // const index = this.$store.state.resources.hostList.findIndex(
+        //   (h) => h.id === this.selectedHost.id
+        // );
+        // if (index !== -1) {
+        //   this.$store.state.resources.hostList.splice(index, 1);
+        // }
+
+        this.$store.commit("hostLocalDeletion", this.selectedHost.id);
+
+        this.$vaToast.init({
+          title: "Local deletion",
+          message: "Hypervisor removed from display (not deleted from server)",
+          color: "warning",
         });
+      } else {
+        axios
+          .delete(
+            `${this.$store.state.endpoint.api}/api/v1/hosts/${this.selectedHost.id}`,
+            {
+              headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${this.$store.state.token}`,
+              },
+            }
+          )
+          .then((response) => {
+            this.$store.dispatch("requestHost", {
+              token: this.$store.state.token,
+            });
+            this.$vaToast.init({
+              title: response.data.state,
+              message: "Hypervisor has been successfully deleted",
+              color: "success",
+            });
+          })
+          .catch((error) => {
+            console.error(error);
+            this.$vaToast.init({
+              title: "Unable to delete Hypervisor",
+              message: error?.response?.data?.detail ?? error,
+              color: "danger",
+            });
+          });
+      }
     },
   },
 });
diff --git a/src/ui/src/store/index.ts b/src/ui/src/store/index.ts
index a258d124..71153de6 100644
--- a/src/ui/src/store/index.ts
+++ b/src/ui/src/store/index.ts
@@ -2,6 +2,10 @@ import axios from "axios";
 import { createStore } from "vuex";
 import router from "../router";
 
+interface Host {
+  id: string | number;
+}
+
 export default createStore({
   strict: true, // process.env.NODE_ENV !== 'production',
   state: {
@@ -27,7 +31,7 @@ export default createStore({
     resources: {
       policyList: [],
       poolList: [],
-      hostList: [],
+      hostList: [] as Host[],
       vmList: [],
       externalHookList: [],
       connectorList: [],
@@ -545,23 +549,29 @@ export default createStore({
     },
     async parseConnectors(context, { location }) {
       const token = context.state.token;
-      const { data } = await axios.get(
-        `${this.state.endpoint.api}${location}`,
-        { headers: { Authorization: `Bearer ${token}` } }
-      );
-      if (data.state === "PENDING" || data.state == "STARTED") {
-        setTimeout(() => {
-          context.dispatch("parseConnectors", {
-            location: location,
-          });
-        }, 2000);
-      } else {
-        context.commit("loadingConnector", true);
-        if (data.state === "SUCCESS") {
-          context.dispatch("updateConnectorsList", data.info);
-        } else if (data.state === "FAILURE") {
-          console.error(data.status);
+      try {
+        const { data } = await axios.get(
+          `${this.state.endpoint.api}${location}`,
+          { headers: { Authorization: `Bearer ${token}` } }
+        );
+        if (data.state === "PENDING" || data.state == "STARTED") {
+          setTimeout(() => {
+            context.dispatch("parseConnectors", {
+              location: location,
+            });
+          }, 2000);
+        } else {
+          context.commit("loadingConnector", true);
+          if (data.state === "SUCCESS") {
+            context.dispatch("updateConnectorsList", data.info);
+          } else if (data.state === "FAILURE") {
+            console.error(data.status);
+          }
         }
+      } catch (error) {
+        console.error("Error fetching connectors:", error);
+        context.commit("loadingConnector", false);
+        context.dispatch("updateConnectorsList", []);
       }
     },
     async updateConnector(context, { vm, connectorValues }) {
@@ -634,6 +644,12 @@ export default createStore({
     loadingHost(state, loadingState) {
       state.isHostTableReady = loadingState;
     },
+    hostLocalDeletion(state, hostId) {
+      const index = state.resources.hostList.findIndex((h) => h.id === hostId);
+      if (index !== -1) {
+        state.resources.hostList.splice(index, 1);
+      }
+    },
     vmList(state, vmList) {
       state.resources.vmList = vmList;
     },

From bae5e72eccb81e13661ccda759bee76fcb131dd6 Mon Sep 17 00:00:00 2001
From: Nawo-pingu <64965495+Nawo-pingu@users.noreply.github.com>
Date: Mon, 28 Jul 2025 15:59:19 +0200
Subject: [PATCH 04/14] add unable to connect in ssh connection. and others
 things

---
 src/core/app/kvm/kvm_check.py                 |   2 +
 src/core/app/routes/host.py                   |  14 +-
 .../resources/hypervisors/HypervisorForm.vue  |   3 +-
 .../resources/hypervisors/HypervisorList.vue  | 201 ++++++++++--------
 4 files changed, 131 insertions(+), 89 deletions(-)

diff --git a/src/core/app/kvm/kvm_check.py b/src/core/app/kvm/kvm_check.py
index ef193a61..0810108e 100644
--- a/src/core/app/kvm/kvm_check.py
+++ b/src/core/app/kvm/kvm_check.py
@@ -15,6 +15,8 @@
 # specific language governing permissions and limitations
 # under the License.
 
+# THIS FILE DOESN'T SEEM TO BE USED ANYWHERE IN THE PROJECT
+
 from sqlmodel import Session, select
 from fastapi.encoders import jsonable_encoder
 from app.patch import ensure_uuid
diff --git a/src/core/app/routes/host.py b/src/core/app/routes/host.py
index 3989e087..07d46c50 100644
--- a/src/core/app/routes/host.py
+++ b/src/core/app/routes/host.py
@@ -44,6 +44,7 @@ class items_create_host(BaseModel):
     tags: Optional[str] = None
     ip_address: str
     pool_id: UUID
+    username: str
 
     class Config:
         schema_extra = {
@@ -52,6 +53,7 @@ class Config:
                 "tags": "production_server",
                 "ip_address": "192.168.1.200",
                 "pool_id": "679b3dd4-a39f-11ec-b909-0242ac120002",
+                "username": "root",
             }
         }
 
@@ -61,6 +63,7 @@ class items_update_host(BaseModel):
     tags: Optional[str] = None
     ip_address: Optional[str] = None
     pool_id: Optional[UUID] = None
+    username: str
 
     class Config:
         schema_extra = {
@@ -165,30 +168,31 @@ def api_update_host(host_id, hostname, tags, ipaddress, pool_id):
         print(e)
         raise ValueError(e)
 
+    
 
 @celery_app.task(name='List registered hosts')
 def retrieve_host():
     engine = database.init_db_connection()
 
     try:
-        records = []
         with Session(engine) as session:
             statement = select(Hosts)
             results = session.exec(statement)
-            for host in results:
-                records.append(host)
-        for host in records:
+            hosts = session.exec(statement).all()
+
+        for host in hosts:
             try:
                 shell.os_system(f"nc -z -w 1 {host.ipaddress} 22 > /dev/null")
                 host.state = 'Reachable'
             except shell.ShellException:
                 # TODO Be more precise than before and check the exit code ?
                 host.state = 'Unreachable'
-        return jsonable_encoder(records)
+        return jsonable_encoder(hosts)
     except Exception as e:
         raise ValueError(e)
 
 
+
 def api_delete_host(host_id):
     engine = database.init_db_connection()
 
diff --git a/src/ui/src/pages/admin/resources/hypervisors/HypervisorForm.vue b/src/ui/src/pages/admin/resources/hypervisors/HypervisorForm.vue
index 15d87a4b..f4323bd2 100644
--- a/src/ui/src/pages/admin/resources/hypervisors/HypervisorForm.vue
+++ b/src/ui/src/pages/admin/resources/hypervisors/HypervisorForm.vue
@@ -69,6 +69,7 @@ export default {
       hypersivorId: this.$route.params.id,
       formHypervisor: {
         hostname: null,
+        username: null,
         ipAddress: null,
         tags: null,
       },
@@ -121,7 +122,7 @@ export default {
       if (this.selectedPool) {
         hypervisor.pool_id = this.selectedPool.value;
       }
-
+      hypervisor.username = this.formHypervisor.username || "root";
       return hypervisor;
     },
     updateHypervisor() {
diff --git a/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue b/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue
index 300ba7d3..3d5114b5 100644
--- a/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue
+++ b/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue
@@ -33,20 +33,31 @@
               {{ value }}
             </va-chip>
           </template>
+          <template #cell(tags)="{ value }">
+            <va-chip v-if="value" size="small" square outline>
+              {{ value }}
+            </va-chip>
+          </template>
           <template #cell(ssh)="{ value }">
             <va-chip
               size="small"
               square
               outline
-              :color="value ? 'success' : 'warning'"
+              :color="
+                value == 1 ? 'success' : value == 0 ? 'danger' : 'warning'
+              "
             >
-              <va-icon v-if="!value" name="warning" />
-              {{ JSON.parse(value) ? "Configured" : "Unconfigured" }}
-            </va-chip>
-          </template>
-          <template #cell(tags)="{ value }">
-            <va-chip v-if="value" size="small" square outline>
-              {{ value }}
+              <!-- <va-icon
+                v-if="!value"
+                name="warning"
+              /> -->
+              {{
+                value == 1
+                  ? "Configured"
+                  : value == 0
+                  ? "Unconfigured"
+                  : "Unable to connect"
+              }}
             </va-chip>
           </template>
           <template #cell(state)="{ value }">
@@ -83,6 +94,15 @@
                     (showDeleteModal = true)
                 "
               />
+              <va-button
+                @click="
+                  refreshConnectHost(
+                    $store.state.resources.hostList[rowIndex],
+                    $store.state.resources.hostList[rowIndex].username
+                  )
+                "
+                icon="refresh"
+              />
             </va-button-group>
           </template>
         </va-data-table>
@@ -163,8 +183,8 @@
         <b>{{ JSON.parse(JSON.stringify(this.selectedHost)).hostname }}</b
         >. <br />Please confirm action.
       </div>
-
-      <template #footer>
+      <!-- // Currently not necessary-->
+      <!-- <template #footer>
         <div class="d-flex flex-column align-start w-100">
           <va-checkbox
             v-model="forceDelete"
@@ -173,7 +193,7 @@
             :style="{ color: forceDelete ? 'black' : 'gray' }"
           />
         </div>
-      </template>
+      </template> -->
     </va-modal>
   </div>
 </template>
@@ -197,8 +217,9 @@ export default defineComponent({
         { key: "hostname" },
         { key: "pool_id", label: "Pool", sortable: true },
         { key: "ipaddress" },
-        { key: "ssh", label: "SSH Connection" },
         { key: "tags", sortable: true },
+        { key: "ssh", label: "SSH Connection" },
+
         { key: "state", sortable: true },
         { key: "actions" },
       ],
@@ -277,38 +298,51 @@ export default defineComponent({
     },
     connectHost() {
       if (this.validation) {
-        axios
-          .post(
-            `${this.$store.state.endpoint.api}/api/v1/connect/${this.selectedHost.id}`,
-            { ip_address: this.selectedHost.ipaddress, username: this.user },
-            {
-              headers: {
-                "Content-Type": "application/json",
-                Authorization: `Bearer ${this.$store.state.token}`,
-              },
-            }
-          )
-          .then((response) => {
-            this.$store.dispatch("requestHost", {
-              token: this.$store.state.token,
-            });
-            this.$vaToast.init({
-              title: response.data.state,
-              message: `Successfully connected to ${this.selectedHost.hostname}`,
-              color: "success",
-            });
-            this.showConnectModal = false;
-          })
-          .catch((error) => {
-            console.error(error);
-            this.$vaToast.init({
-              title: "Error",
-              message: error?.response?.data?.detail ?? error,
-              color: "danger",
-            });
-          });
+        this.refreshConnectHost();
+      } else {
+        this.$vaToast.init({
+          title: "Validation Error",
+          message: "Please fill in the required fields.",
+          color: "warning",
+        });
       }
     },
+
+    refreshConnectHost(host = this.selectedHost, user = this.user) {
+      const username = this.user || this.selectedHost?.username;
+
+      axios
+        .post(
+          `${this.$store.state.endpoint.api}/api/v1/connect/${host.id}`,
+          { ip_address: host.ipaddress, username: user },
+          {
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${this.$store.state.token}`,
+            },
+          }
+        )
+        .then((response) => {
+          this.$store.dispatch("requestHost", {
+            token: this.$store.state.token,
+          });
+          this.$vaToast.init({
+            title: response.data.state,
+            message: `Successfully connected to ${host.hostname} with ${user} user.`,
+            color: "success",
+          });
+          this.showConnectModal = false;
+        })
+        .catch((error) => {
+          console.error(error);
+          this.$vaToast.init({
+            title: "Error",
+            message: `Unable to connect to ${host.hostname} with ${user} user.`,
+            color: "danger",
+          });
+        });
+    },
+
     requestKeys() {
       axios
         .get(`${this.$store.state.endpoint.api}/api/v1/publickeys`, {
@@ -333,52 +367,53 @@ export default defineComponent({
         });
     },
     deleteHost() {
-      if (this.forceDelete) {
-        // local deletion
-        // const index = this.$store.state.resources.hostList.findIndex(
-        //   (h) => h.id === this.selectedHost.id
-        // );
-        // if (index !== -1) {
-        //   this.$store.state.resources.hostList.splice(index, 1);
-        // }
+      // if (this.forceDelete) {
+      //   // this.$store.commit("hostLocalDeletion", this.selectedHost.id);
 
-        this.$store.commit("hostLocalDeletion", this.selectedHost.id);
+      //   this.$vaToast.init({
+      //     title: "Local deletion",
+      //     message: "Hypervisor removed from display (not deleted from server)",
+      //     color: "warning",
+      //   });
+      // } else {
+      axios
+        .delete(
+          `${this.$store.state.endpoint.api}/api/v1/hosts/${this.selectedHost.id}`,
+          {
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${this.$store.state.token}`,
+            },
+          }
+        )
+        .then((response) => {
+          this.$store.dispatch("requestHost", {
+            token: this.$store.state.token,
+          });
+          this.$vaToast.init({
+            title: response.data.state,
+            message: "Hypervisor has been successfully deleted",
+            color: "success",
+          });
 
-        this.$vaToast.init({
-          title: "Local deletion",
-          message: "Hypervisor removed from display (not deleted from server)",
-          color: "warning",
-        });
-      } else {
-        axios
-          .delete(
-            `${this.$store.state.endpoint.api}/api/v1/hosts/${this.selectedHost.id}`,
-            {
-              headers: {
-                "Content-Type": "application/json",
-                Authorization: `Bearer ${this.$store.state.token}`,
-              },
-            }
-          )
-          .then((response) => {
-            this.$store.dispatch("requestHost", {
-              token: this.$store.state.token,
-            });
-            this.$vaToast.init({
-              title: response.data.state,
-              message: "Hypervisor has been successfully deleted",
-              color: "success",
-            });
-          })
-          .catch((error) => {
-            console.error(error);
+          if (this.selectedHost.ssh === 2) {
             this.$vaToast.init({
-              title: "Unable to delete Hypervisor",
-              message: error?.response?.data?.detail ?? error,
-              color: "danger",
+              title: "Warning",
+              message:
+                "SSH keys may not have been removed from the hypervisor (SSH connection was in error state).",
+              color: "warning",
             });
+          }
+        })
+        .catch((error) => {
+          console.error(error);
+          this.$vaToast.init({
+            title: "Unable to delete Hypervisor",
+            message: error?.response?.data?.detail ?? error,
+            color: "danger",
           });
-      }
+        });
+      // }
     },
   },
 });

From 0fb5d2c72f78805ca1a1f9cf8bba8ae65700bef6 Mon Sep 17 00:00:00 2001
From: Nawo-pingu <64965495+Nawo-pingu@users.noreply.github.com>
Date: Mon, 28 Jul 2025 15:59:42 +0200
Subject: [PATCH 05/14] change ssh database bool to int for 3 states

---
 src/core/app/database.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/core/app/database.py b/src/core/app/database.py
index 7a5366e6..bb50cafb 100644
--- a/src/core/app/database.py
+++ b/src/core/app/database.py
@@ -66,7 +66,7 @@ class Hosts(SQLModel, table=True):
     hostname: str
     ipaddress: str
     username: Optional[str] = None
-    ssh: Optional[bool] = 0
+    ssh: Optional[int] = 0
     pool_id: Optional[UUID] = Field(default=None, foreign_key="pools.id")
     tags: Optional[str] = None
     state: Optional[bool] = 0
@@ -77,7 +77,7 @@ def to_json(self):
             "hostname": self.hostname,
             "ipaddress": self.ipaddress,
             "username": self.username,
-            "ssh": bool(self.ssh),
+            "ssh": int(self.ssh),
             "pool_id": str(self.pool_id),
             "tags": self.tags,
             "state": bool(self.state)

From ddd5e08b19fd70fbad54edf2bf62145cea866c6b Mon Sep 17 00:00:00 2001
From: Nawo-pingu <64965495+Nawo-pingu@users.noreply.github.com>
Date: Mon, 28 Jul 2025 15:59:48 +0200
Subject: [PATCH 06/14] same

---
 src/core/app/ssh.py | 47 +++++++++++++++++++++++++++------------------
 1 file changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/core/app/ssh.py b/src/core/app/ssh.py
index b5ae73ec..1839d285 100644
--- a/src/core/app/ssh.py
+++ b/src/core/app/ssh.py
@@ -114,31 +114,40 @@ def __init__(self, message):
 def init_ssh_connection(host_id, ip_address, username):
     shell.subprocess_run(f"ls -al {__get_local_ssh_directory().as_posix()}")
 
-    client = paramiko.SSHClient()
-    client.set_missing_host_key_policy(paramiko.AutoAddPolicy())
-
-    try:
-        client.connect(
-            hostname=ip_address,
-            username=username,
-        )
-        client.close()
-    except OSError:
-        raise ConnectionException(
-            "The hypervisor is unreachable.")
-    except paramiko.ssh_exception.AuthenticationException:
-        raise ConnectionException(
-            "Authentication to the hypervisor has failed.")
-
-    host.filter_host_by_id(host_id)
+    
     engine = database.init_db_connection()
-
     with Session(engine) as session:
         statement = select(Hosts).where(Hosts.id == ensure_uuid(host_id))
         results = session.exec(statement)
         data_host = results.one()
-        data_host.ssh = 1
         data_host.username = username
+     
+        client = paramiko.SSHClient()
+        client.set_missing_host_key_policy(paramiko.AutoAddPolicy())
+        try:
+            client.connect(
+                hostname=ip_address,
+                username=username,
+            )
+            client.close()
+            data_host.ssh = 1
+        except OSError:
+            data_host.ssh = 2
+            session.add(data_host)
+            session.commit()
+            session.refresh(data_host)
+            raise ConnectionException(
+                "The hypervisor is unreachable.")
+        except paramiko.ssh_exception.AuthenticationException:
+            data_host.ssh = 2
+            session.add(data_host)
+            session.commit()
+            session.refresh(data_host)
+            raise ConnectionException(
+                "Authentication to the hypervisor has failed.")
+
+        host.filter_host_by_id(host_id)
+        
         session.add(data_host)
         session.commit()
         session.refresh(data_host)

From 09b49401713fa832fbe7c9e000ead80951519e4b Mon Sep 17 00:00:00 2001
From: Nawo-pingu <64965495+Nawo-pingu@users.noreply.github.com>
Date: Mon, 28 Jul 2025 16:28:36 +0200
Subject: [PATCH 07/14] missclick

---
 src/core/app/routes/host.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/core/app/routes/host.py b/src/core/app/routes/host.py
index 07d46c50..108d75a2 100644
--- a/src/core/app/routes/host.py
+++ b/src/core/app/routes/host.py
@@ -44,7 +44,7 @@ class items_create_host(BaseModel):
     tags: Optional[str] = None
     ip_address: str
     pool_id: UUID
-    username: str
+    # username: str
 
     class Config:
         schema_extra = {
@@ -53,7 +53,7 @@ class Config:
                 "tags": "production_server",
                 "ip_address": "192.168.1.200",
                 "pool_id": "679b3dd4-a39f-11ec-b909-0242ac120002",
-                "username": "root",
+                # "username": "root",
             }
         }
 
@@ -63,7 +63,7 @@ class items_update_host(BaseModel):
     tags: Optional[str] = None
     ip_address: Optional[str] = None
     pool_id: Optional[UUID] = None
-    username: str
+    # username: str
 
     class Config:
         schema_extra = {

From 378722208e925af639132c4a440c5caee927e3cc Mon Sep 17 00:00:00 2001
From: Nawo-pingu <64965495+Nawo-pingu@users.noreply.github.com>
Date: Mon, 28 Jul 2025 16:35:47 +0200
Subject: [PATCH 08/14] final version

---
 src/core/app/routes/host.py | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/core/app/routes/host.py b/src/core/app/routes/host.py
index 108d75a2..37ba8775 100644
--- a/src/core/app/routes/host.py
+++ b/src/core/app/routes/host.py
@@ -44,7 +44,6 @@ class items_create_host(BaseModel):
     tags: Optional[str] = None
     ip_address: str
     pool_id: UUID
-    # username: str
 
     class Config:
         schema_extra = {
@@ -53,7 +52,6 @@ class Config:
                 "tags": "production_server",
                 "ip_address": "192.168.1.200",
                 "pool_id": "679b3dd4-a39f-11ec-b909-0242ac120002",
-                # "username": "root",
             }
         }
 
@@ -168,7 +166,6 @@ def api_update_host(host_id, hostname, tags, ipaddress, pool_id):
         print(e)
         raise ValueError(e)
 
-    
 
 @celery_app.task(name='List registered hosts')
 def retrieve_host():

From a327b187ff6914bea7e2b697ba63d538273f6e50 Mon Sep 17 00:00:00 2001
From: Nawo-pingu <64965495+Nawo-pingu@users.noreply.github.com>
Date: Mon, 28 Jul 2025 16:37:09 +0200
Subject: [PATCH 09/14] no username required at host creation

---
 src/ui/src/pages/admin/resources/hypervisors/HypervisorForm.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/ui/src/pages/admin/resources/hypervisors/HypervisorForm.vue b/src/ui/src/pages/admin/resources/hypervisors/HypervisorForm.vue
index f4323bd2..fd832fe9 100644
--- a/src/ui/src/pages/admin/resources/hypervisors/HypervisorForm.vue
+++ b/src/ui/src/pages/admin/resources/hypervisors/HypervisorForm.vue
@@ -69,7 +69,6 @@ export default {
       hypersivorId: this.$route.params.id,
       formHypervisor: {
         hostname: null,
-        username: null,
         ipAddress: null,
         tags: null,
       },
@@ -122,7 +121,6 @@ export default {
       if (this.selectedPool) {
         hypervisor.pool_id = this.selectedPool.value;
       }
-      hypervisor.username = this.formHypervisor.username || "root";
       return hypervisor;
     },
     updateHypervisor() {

From ce5957f6b30381fd9284aac504ebf54c48995f81 Mon Sep 17 00:00:00 2001
From: Nawo-pingu <64965495+Nawo-pingu@users.noreply.github.com>
Date: Mon, 28 Jul 2025 16:49:29 +0200
Subject: [PATCH 10/14] link button for ssh connection is showed when state is
 unreachable

---
 .../resources/hypervisors/HypervisorList.vue   | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue b/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue
index 3d5114b5..44b42d33 100644
--- a/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue
+++ b/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue
@@ -71,7 +71,11 @@
           <template #cell(actions)="{ rowIndex }">
             <va-button-group gradient :rounded="false">
               <va-button
-                v-if="!$store.state.resources.hostList[rowIndex].ssh"
+                v-if="
+                  $store.state.resources.hostList[rowIndex].state !==
+                    'Reachable' ||
+                  !$store.state.resources.hostList[rowIndex].ssh
+                "
                 icon="link"
                 :disabled="sshKeys.length == 0"
                 @click="
@@ -335,9 +339,19 @@ export default defineComponent({
         })
         .catch((error) => {
           console.error(error);
+
+          let message;
+          if (host.ssh === 0) {
+            message = `SSH connection is not configured for ${host.hostname}. Please link the SSH connection.`;
+          } else if (host.ssh === 2) {
+            message = `Unable to connect to ${host.hostname} with ${user} user.`;
+          } else {
+            message = `Connection error for ${host.hostname}.`;
+          }
+
           this.$vaToast.init({
             title: "Error",
-            message: `Unable to connect to ${host.hostname} with ${user} user.`,
+            message,
             color: "danger",
           });
         });

From e5319d3a735d720bfcceb9821306a7ab406a0ee5 Mon Sep 17 00:00:00 2001
From: Nawo-pingu <64965495+Nawo-pingu@users.noreply.github.com>
Date: Mon, 28 Jul 2025 16:50:09 +0200
Subject: [PATCH 11/14] better

---
 src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue b/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue
index 44b42d33..9c51417c 100644
--- a/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue
+++ b/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue
@@ -339,7 +339,6 @@ export default defineComponent({
         })
         .catch((error) => {
           console.error(error);
-
           let message;
           if (host.ssh === 0) {
             message = `SSH connection is not configured for ${host.hostname}. Please link the SSH connection.`;

From 9473aba1165a03628ba86f3af02abf15c92dd22a Mon Sep 17 00:00:00 2001
From: Nawo-pingu <64965495+Nawo-pingu@users.noreply.github.com>
Date: Mon, 28 Jul 2025 17:43:20 +0200
Subject: [PATCH 12/14] add refresh before delete

---
 .../resources/hypervisors/HypervisorList.vue  | 92 ++++++++++---------
 1 file changed, 49 insertions(+), 43 deletions(-)

diff --git a/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue b/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue
index 9c51417c..9047a7a8 100644
--- a/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue
+++ b/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue
@@ -74,7 +74,7 @@
                 v-if="
                   $store.state.resources.hostList[rowIndex].state !==
                     'Reachable' ||
-                  !$store.state.resources.hostList[rowIndex].ssh
+                  $store.state.resources.hostList[rowIndex].ssh != 1
                 "
                 icon="link"
                 :disabled="sshKeys.length == 0"
@@ -261,6 +261,7 @@ export default defineComponent({
     showConnectModal(newValue, oldValue) {
       if (newValue && !oldValue) {
         this.isKeyCopied = false;
+        this.user = this.selectedHost?.username || null;
       }
     },
     currentTabKey() {
@@ -312,10 +313,14 @@ export default defineComponent({
       }
     },
 
-    refreshConnectHost(host = this.selectedHost, user = this.user) {
-      const username = this.user || this.selectedHost?.username;
-
-      axios
+    refreshConnectHost(
+      host = this.selectedHost,
+      user = this.user,
+      silent = false
+    ) {
+      // const username = this.user || this.selectedHost?.username;
+      const username = this.user;
+      return axios
         .post(
           `${this.$store.state.endpoint.api}/api/v1/connect/${host.id}`,
           { ip_address: host.ipaddress, username: user },
@@ -330,29 +335,33 @@ export default defineComponent({
           this.$store.dispatch("requestHost", {
             token: this.$store.state.token,
           });
-          this.$vaToast.init({
-            title: response.data.state,
-            message: `Successfully connected to ${host.hostname} with ${user} user.`,
-            color: "success",
-          });
+          if (!silent) {
+            this.$vaToast.init({
+              title: response.data.state,
+              message: `Successfully connected to ${host.hostname} with ${user} user.`,
+              color: "success",
+            });
+          }
           this.showConnectModal = false;
         })
         .catch((error) => {
           console.error(error);
-          let message;
-          if (host.ssh === 0) {
-            message = `SSH connection is not configured for ${host.hostname}. Please link the SSH connection.`;
-          } else if (host.ssh === 2) {
-            message = `Unable to connect to ${host.hostname} with ${user} user.`;
-          } else {
-            message = `Connection error for ${host.hostname}.`;
-          }
+          if (!silent) {
+            let message;
+            if (host.ssh === 0) {
+              message = `SSH connection is not configured for ${host.hostname}. Please link the SSH connection.`;
+            } else if (host.ssh === 2) {
+              message = `Unable to connect to ${host.hostname} with ${user} user.`;
+            } else {
+              message = `Connection error for ${host.hostname}.`;
+            }
 
-          this.$vaToast.init({
-            title: "Error",
-            message,
-            color: "danger",
-          });
+            this.$vaToast.init({
+              title: "Error",
+              message,
+              color: "danger",
+            });
+          }
         });
     },
 
@@ -380,25 +389,23 @@ export default defineComponent({
         });
     },
     deleteHost() {
-      // if (this.forceDelete) {
-      //   // this.$store.commit("hostLocalDeletion", this.selectedHost.id);
-
-      //   this.$vaToast.init({
-      //     title: "Local deletion",
-      //     message: "Hypervisor removed from display (not deleted from server)",
-      //     color: "warning",
-      //   });
-      // } else {
-      axios
-        .delete(
-          `${this.$store.state.endpoint.api}/api/v1/hosts/${this.selectedHost.id}`,
-          {
-            headers: {
-              "Content-Type": "application/json",
-              Authorization: `Bearer ${this.$store.state.token}`,
-            },
-          }
-        )
+      this.refreshConnectHost(
+        this.selectedHost,
+        this.selectedHost.username,
+        true
+      )
+        .catch(() => {})
+        .then(() => {
+          return axios.delete(
+            `${this.$store.state.endpoint.api}/api/v1/hosts/${this.selectedHost.id}`,
+            {
+              headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${this.$store.state.token}`,
+              },
+            }
+          );
+        })
         .then((response) => {
           this.$store.dispatch("requestHost", {
             token: this.$store.state.token,
@@ -426,7 +433,6 @@ export default defineComponent({
             color: "danger",
           });
         });
-      // }
     },
   },
 });

From eff2747638b2dde24a2fcb0a7cd903e91c097585 Mon Sep 17 00:00:00 2001
From: Nawo-pingu <64965495+Nawo-pingu@users.noreply.github.com>
Date: Mon, 28 Jul 2025 18:01:56 +0200
Subject: [PATCH 13/14] prettier

---
 src/core/app/routes/host.py                                     | 2 --
 src/core/app/ssh.py                                             | 1 -
 src/ui/src/pages/admin/resources/hypervisors/HypervisorForm.vue | 1 +
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/core/app/routes/host.py b/src/core/app/routes/host.py
index 37ba8775..0f9ac8d1 100644
--- a/src/core/app/routes/host.py
+++ b/src/core/app/routes/host.py
@@ -61,7 +61,6 @@ class items_update_host(BaseModel):
     tags: Optional[str] = None
     ip_address: Optional[str] = None
     pool_id: Optional[UUID] = None
-    # username: str
 
     class Config:
         schema_extra = {
@@ -189,7 +188,6 @@ def retrieve_host():
         raise ValueError(e)
 
 
-
 def api_delete_host(host_id):
     engine = database.init_db_connection()
 
diff --git a/src/core/app/ssh.py b/src/core/app/ssh.py
index 1839d285..875f855e 100644
--- a/src/core/app/ssh.py
+++ b/src/core/app/ssh.py
@@ -114,7 +114,6 @@ def __init__(self, message):
 def init_ssh_connection(host_id, ip_address, username):
     shell.subprocess_run(f"ls -al {__get_local_ssh_directory().as_posix()}")
 
-    
     engine = database.init_db_connection()
     with Session(engine) as session:
         statement = select(Hosts).where(Hosts.id == ensure_uuid(host_id))
diff --git a/src/ui/src/pages/admin/resources/hypervisors/HypervisorForm.vue b/src/ui/src/pages/admin/resources/hypervisors/HypervisorForm.vue
index fd832fe9..15d87a4b 100644
--- a/src/ui/src/pages/admin/resources/hypervisors/HypervisorForm.vue
+++ b/src/ui/src/pages/admin/resources/hypervisors/HypervisorForm.vue
@@ -121,6 +121,7 @@ export default {
       if (this.selectedPool) {
         hypervisor.pool_id = this.selectedPool.value;
       }
+
       return hypervisor;
     },
     updateHypervisor() {

From c5b16e6b7fccf4a8b5477b7238c7922754b0b0da Mon Sep 17 00:00:00 2001
From: Nawo-pingu <64965495+Nawo-pingu@users.noreply.github.com>
Date: Wed, 30 Jul 2025 12:27:41 +0200
Subject: [PATCH 14/14] automatic refresh every 5s

---
 .../resources/hypervisors/HypervisorList.vue  | 173 +++++++++++++-----
 1 file changed, 125 insertions(+), 48 deletions(-)

diff --git a/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue b/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue
index 2c8ad87b..68993334 100644
--- a/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue
+++ b/src/ui/src/pages/admin/resources/hypervisors/HypervisorList.vue
@@ -2,16 +2,29 @@
   <div>
     <va-card>
       <va-card-title>
-        <ListHeader title="Hypervisors" plus-button-title="Add hypervisor"
-          plus-button-route="/admin/resources/hypervisors/new" :dependencies-resolved="areDependenciesResolved"
-          dependencies-message="You need to create a pool." go-button-title="Go to pools"
-          go-button-route="/admin/resources/pools" />
+        <ListHeader
+          title="Hypervisors"
+          plus-button-title="Add hypervisor"
+          plus-button-route="/admin/resources/hypervisors/new"
+          :dependencies-resolved="areDependenciesResolved"
+          dependencies-message="You need to create a pool."
+          go-button-title="Go to pools"
+          go-button-route="/admin/resources/pools"
+        />
       </va-card-title>
       <va-card-content>
-        <va-data-table :items="$store.state.resources.hostList" :columns="columns">
+        <va-data-table
+          :items="$store.state.resources.hostList"
+          :columns="columns"
+        >
           <template #cell(name)="{ value }">{{ value.toUpperCase() }}</template>
           <template #cell(pool_id)="{ value }">
-            <va-chip v-if="getPool(value)" size="small" square @click="this.$router.push('/admin/resources/pools')">
+            <va-chip
+              v-if="getPool(value)"
+              size="small"
+              square
+              @click="this.$router.push('/admin/resources/pools')"
+            >
               {{ getPool(value) }}
             </va-chip>
           </template>
@@ -26,8 +39,12 @@
             </va-chip>
           </template>
           <template #cell(ssh)="{ value }">
-            <va-chip size="small" square outline :color="value == 1 ? 'success' : value == 0 ? 'danger' : 'warning'
-              ">
+            <va-chip
+              size="small"
+              square
+              outline
+              :color="value == 1 ? 'success' : 'danger'"
+            >
               <!-- <va-icon
                 v-if="!value"
                 name="warning"
@@ -36,46 +53,67 @@
                 value == 1
                   ? "Configured"
                   : value == 0
-                    ? "Unconfigured"
-                    : "Unable to connect"
+                  ? "Unconfigured"
+                  : "Configured but disconnected"
               }}
             </va-chip>
           </template>
           <template #cell(state)="{ value }">
-            <va-chip size="small" :color="value === 'Reachable' ? 'success' : 'danger'">
+            <va-chip
+              size="small"
+              :color="value === 'Reachable' ? 'success' : 'danger'"
+            >
               {{ value === "Reachable" ? "Reachable" : "Unreachable" }}
             </va-chip>
           </template>
           <template #cell(actions)="{ rowIndex }">
             <va-button-group gradient :rounded="false">
-              <va-button v-if="
-                $store.state.resources.hostList[rowIndex].state !==
-                'Reachable' ||
-                $store.state.resources.hostList[rowIndex].ssh != 1
-              " icon="link" :disabled="sshKeys.length == 0" @click="
-                (selectedHost = $store.state.resources.hostList[rowIndex]),
-                (showConnectModal = true)
-                " />
-              <va-button icon="settings" @click="
-                this.$router.push(
-                  `/admin/resources/hypervisors/${$store.state.resources.hostList[rowIndex].id}`
-                )
-                " />
-              <va-button icon="delete" @click="
-                (selectedHost = $store.state.resources.hostList[rowIndex]),
-                (showDeleteModal = true)
-                " />
-              <va-button @click="
-                refreshConnectHost(
-                  $store.state.resources.hostList[rowIndex],
-                  $store.state.resources.hostList[rowIndex].username
-                )
-                " icon="refresh" />
+              <va-button
+                v-if="
+                  $store.state.resources.hostList[rowIndex].state !==
+                    'Reachable' ||
+                  $store.state.resources.hostList[rowIndex].ssh != 1
+                "
+                icon="link"
+                :disabled="sshKeys.length == 0"
+                @click="
+                  (selectedHost = $store.state.resources.hostList[rowIndex]),
+                    (showConnectModal = true)
+                "
+              />
+              <va-button
+                icon="settings"
+                @click="
+                  this.$router.push(
+                    `/admin/resources/hypervisors/${$store.state.resources.hostList[rowIndex].id}`
+                  )
+                "
+              />
+              <va-button
+                icon="delete"
+                @click="
+                  (selectedHost = $store.state.resources.hostList[rowIndex]),
+                    (showDeleteModal = true)
+                "
+              />
+              <!-- <va-button
+                @click="
+                  refreshConnectHost(
+                    $store.state.resources.hostList[rowIndex],
+                    $store.state.resources.hostList[rowIndex].username
+                  )
+                "
+                icon="refresh"
+              /> -->
             </va-button-group>
           </template>
         </va-data-table>
         <div v-if="!$store.state.isHostTableReady" class="flex-center ma-3">
-          <spring-spinner :animation-duration="2000" :size="30" color="#2c82e0" />
+          <spring-spinner
+            :animation-duration="2000"
+            :size="30"
+            color="#2c82e0"
+          />
         </div>
       </va-card-content>
     </va-card>
@@ -88,9 +126,14 @@
       </template>
       <hr class="mb-4" />
       <va-form ref="form" @validation="(validation = $event), connectHost()">
-        <va-input label="Specify the user on the server" messages="The user must have the access rights to KVM."
-          v-model="user" type="text" :rules="[(value) => value?.trim().length > 0 || 'Field is required']"
-          class="mb-3" />
+        <va-input
+          label="Specify the user on the server"
+          messages="The user must have the access rights to KVM."
+          v-model="user"
+          type="text"
+          :rules="[(value) => value?.trim().length > 0 || 'Field is required']"
+          class="mb-3"
+        />
         <va-tabs v-model="currentTabKey">
           <template #tabs>
             <va-tab v-for="{ name } in sshKeys" :key="name" :name="name">
@@ -98,17 +141,28 @@
             </va-tab>
           </template>
           <div style="position: relative">
-            <va-input label="BackROLL SSH key"
+            <va-input
+              label="BackROLL SSH key"
               messages="Copy-paste one of the keys into the ~/.ssh/authorized_keys file on the server."
-              v-model="currentSshKey" type="textarea" :autosize="true" :min-rows="2" readonly class="mb-4" />
-            <va-icon :name="isKeyCopied ? 'check' : 'content_copy'" :size="20" @click="copyToClipboard(currentSshKey)"
+              v-model="currentSshKey"
+              type="textarea"
+              :autosize="true"
+              :min-rows="2"
+              readonly
+              class="mb-4"
+            />
+            <va-icon
+              :name="isKeyCopied ? 'check' : 'content_copy'"
+              :size="20"
+              @click="copyToClipboard(currentSshKey)"
               style="
                 position: absolute;
                 top: 0;
                 right: 0;
                 margin-top: 6px;
                 margin-right: 4px;
-              " />
+              "
+            />
           </div>
         </va-tabs>
         <div class="d-flex">
@@ -128,7 +182,8 @@
       <hr />
       <div>
         You are about to remove hypervisor
-        <b>{{ JSON.parse(JSON.stringify(this.selectedHost)).hostname }}</b>. <br />Please confirm action.
+        <b>{{ JSON.parse(JSON.stringify(this.selectedHost)).hostname }}</b
+        >. <br />Please confirm action.
       </div>
       <!-- // Currently not necessary-->
       <!-- <template #footer>
@@ -179,10 +234,16 @@ export default defineComponent({
       showDeleteModal: false,
       selectedHost: null,
       forceDelete: false,
+      refreshInterval: null,
     };
   },
   mounted() {
     this.requestKeys();
+    this.$store.dispatch("requestHost");
+    this.startRefreshing();
+  },
+  beforeUnmount() {
+    this.stopRefreshing();
   },
   computed: {
     areDependenciesResolved() {
@@ -337,7 +398,7 @@ export default defineComponent({
         this.selectedHost.username,
         true
       )
-        .catch(() => { })
+        .catch(() => {})
         .then(() => {
           return axios.delete(
             `${this.$store.state.endpoint.api}/api/v1/hosts/${this.selectedHost.id}`,
@@ -375,10 +436,26 @@ export default defineComponent({
           });
         });
     },
-  },
-  mounted() {
-    this.requestKeys();
-    this.$store.dispatch("requestHost");
+    startRefreshing() {
+      this.refreshInterval = setInterval(() => {
+        this.refreshAllHosts();
+      }, 5000);
+    },
+    stopRefreshing() {
+      if (this.refreshInterval) {
+        clearInterval(this.refreshInterval);
+        this.refreshInterval = null;
+      }
+    },
+    refreshAllHosts() {
+      const hosts = this.$store.state.resources.hostList;
+      if (!hosts || hosts.length === 0) return;
+
+      hosts.forEach((host) => {
+        const username = host.username;
+        this.refreshConnectHost(host, username, true);
+      });
+    },
   },
 });
 </script>