fix: home ui

src/components/instance/InstanceHeader.vue

@@ -30,9 +30,19 @@
       <small>{{ instance.instance.profileStatus }}</small>
     </div>
     <v-spacer></v-spacer>
+    <v-btn
+      @click="restartInstance"
+      :disabled="disconnect.loading"
+      :loading="restart.loading"
+      variant="tonal"
+      color="info"
+      size="small"
+    >
+      <v-icon start>mdi-cellphone-arrow-down</v-icon>
+    </v-btn>
     <v-btn
       @click="disconnectInstance"
-      :disabled="instance.instance.status === 'close'"
+      :disabled="instance.instance.status === 'close' || restart.loading"
       :loading="disconnect.loading"
       variant="tonal"
       color="error"
@@ -52,15 +62,24 @@ import instanceController from "@/services/instanceController";
 export default {
   name: "InstanceHeader",
   data: () => ({
-    disconnect: {
+    disconnect: { confirm: false, loading: false },
-      confirm: false,
+    restart: { loading: false },
-      loading: false,
-    },
     statusMapper: statusMapper,
     AppStore: useAppStore(),
-
   }),
   methods: {
+    async restartInstance() {
+      this.restart.loading = true;
+      try {
+        await instanceController.restart(this.instance.instance.instanceName);
+        await this.AppStore.reconnect();
+      } catch (e) {
+        console.log(e);
+        alert(e.message || e.error || "Erro desconhecido");
+      } finally {
+        this.restart.loading = false;
+      }
+    },
     async disconnectInstance() {
       if (!this.disconnect.confirm) return (this.disconnect.confirm = true);
 

src/services/instanceController.js

@@ -45,6 +45,19 @@ const logout = async (instanceName) => {
     });
 }
 
+const restart = async (instanceName) => {
+  return await http
+    .post("/instance/restart/:instance", {
+      params: {
+        instance: instanceName
+      }
+    })
+    .then((r) => r.data)
+    .catch((error) => {
+      throw error.response?.data || error.response || error;
+    });
+}
+
 import settings from "./instanceSettingsController.js";
 
 
@@ -53,6 +66,7 @@ export default {
   create,
   connect,
   logout,
+  restart,
   ...settings
 
 };

src/views/Home.vue

@@ -24,22 +24,27 @@
       </v-btn>
     </div>
 
-    <v-card v-if="!loading && instances?.length === 0" variant="outlined">
-      <v-card-text>
-        <div class="text-center">
-          <v-icon size="70">mdi-server-network-off</v-icon>
-          <h3 class="mt-4">Nenhuma instância encontrada</h3>
-        </div>
-      </v-card-text>
-    </v-card>
 
     <v-data-table
-      v-if="!instances || instances?.length > 0"
       :headers="headers"
       :items="instances || []"
       :loading="loading"
       :items-per-page="10"
     >
+    <template v-slot:no-data>
+      <v-card v-if="!loading" variant="outlined">
+        <v-card-text>
+          <div class="text-center">
+            <v-icon size="70">mdi-server-network-off</v-icon>
+            <h3 class="mt-4">Nenhuma instância encontrada</h3>
+          </div>
+        </v-card-text>
+      </v-card>
+    </template>
+
+    <template v-slot:item.instance.instanceName="{ item }">
+      <b>{{ item.instance.instanceName }}</b>  
+    </template>
       <!-- eslint-disable-next-line vue/valid-v-slot -->
       <template v-slot:item.instance.status="{ item }">
         <v-chip