Better navigation.

components/Cards/ChannelChatCard.vue

@@ -47,7 +47,6 @@ const submit = async (event: FormSubmitEvent<Schema>) => {
     })
 
     toast.add({title: t('forms.event', { name: "Published"}), color: 'success'})
-    console.log("Published ⤑ Response", response)
   } catch (error) {
     toast.add({title: t('forms.event', { name: "Published ⤑ Exception"}), color: 'error'})
     console.error("Published ⤑ Exception", error)

components/Cards/InstanceMetricsCard.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+// Copyright (C) 2025 Ian Torres
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import type {InfoResponse} from "@throttr/sdk";
+
+const props = defineProps(['service'])
+
+const route = useRoute()
+const services = useServices()
+const toast = useToast()
+const {t} = useI18n()
+
+const historic : Ref<InfoResponse[]> = ref([]);
+
+const data : Ref<InfoResponse> = ref({
+  success: false
+} as InfoResponse);
+
+const intervalId = ref()
+
+const fetch = async (silence: boolean = false) => {
+  data.value = await services.info(props.service.id) as InfoResponse;
+  historic.value.push({
+    ...data.value
+  })
+  if (!silence)
+    toast.add({title: t('forms.event', { name: "Metrics Retrieved ⤑ Success"}), color: 'success'})
+
+  if (historic.value.length > 10) {
+    historic.value.shift();
+  }
+}
+
+onMounted(async () => {
+  await fetch()
+  intervalId.value = setInterval(async () => {
+    await fetch(true);
+  }, 1000)
+})
+
+onUnmounted(() => {
+  clearInterval(intervalId.value);
+})
+</script>
+
+<template>
+  <div>
+
+    <div class="grid grid-cols-4 gap-10 mb-10">
+      <div>
+        <UCard>
+          <ChartsStorageChart :historic="historic"/>
+        </UCard>
+      </div>
+
+      <div>
+        <UCard>
+          <ChartsMemoryChart :historic="historic" />
+        </UCard>
+      </div>
+
+      <div class="col-span-2">
+        <div class="grid grid-cols-2 gap-10">
+          <UCard>
+            <ChartsNetworkChart :historic="historic"/>
+          </UCard>
+          <UCard>
+            <ChartsNetworkPerMinuteChart :historic="historic"/>
+          </UCard>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+
+</style>

components/Forms/InsertForm.vue

@@ -82,8 +82,6 @@ const submit = async (event: FormSubmitEvent<Schema>) => {
     })
 
     toast.add({title: t('forms.event', { name: "Counter Created"}), color: 'success'})
-    console.log("Counter Created ⤑ Response", response)
-
     emit('success');
 
   } catch (error) {

components/Forms/PublishForm.vue

@@ -48,7 +48,6 @@ const submit = async (event: FormSubmitEvent<Schema>) => {
     })
 
     toast.add({title: t('forms.event', { name: "Published"}), color: 'success'})
-    console.log("Published ⤑ Response", response)
 
     emit('success');
 

components/Forms/SetForm.vue

@@ -82,8 +82,6 @@ const submit = async (event: FormSubmitEvent<Schema>) => {
     })
 
     toast.add({title: t('forms.event', { name: "Buffer Created"}), color: 'success'})
-    console.log("Buffer Created ⤑ Response", response)
-
     emit('success');
 
   } catch (error) {

components/Forms/SubscribeForm.vue

@@ -52,7 +52,6 @@ const submit = async (event: FormSubmitEvent<Schema>) => {
 }
 
 watch(open_chat, (next, old) => {
-  console.log(old, next);
   if (old == true && next == false) {
     emit("chat_closed");
   }

components/Forms/UpdateForm.vue

@@ -96,11 +96,6 @@ onMounted(async () => {
     state.attribute_type = AttributeType.Quota.valueOf();
     state.change_type = ChangeType.Decrease.valueOf();
   }
-  console.log(props.stored_key);
-  // state.ttl_type = props.stored_key.ttl_type;
-  // const response = await services.query(route.params.id, state.key!);
-  // state.ttl = response.ttl as number;
-  // state.quota = response.quota as number;
 });
 
 const submit = async (event: FormSubmitEvent<Schema>) => {
@@ -115,14 +110,10 @@ const submit = async (event: FormSubmitEvent<Schema>) => {
       }
     })
 
-    console.log(response);
-
     if (response.success) {
       toast.add({title: t('forms.event', { name: "Key Update ⤑ Success"}), color: 'success'})
-      console.log("Key Updated ⤑ Accepted", response)
     } else {
       toast.add({title: t('forms.event', { name: "Key Update ⤑ Rejected"}), color: 'error'})
-      console.log("Key Updated ⤑ Rejected", response)
     }
 
 

components/Items/ServicesItem.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+const props = defineProps(['service', 'type'])
+
+const services = useServices();
+</script>
+
+<template>
+  <div>
+    <UCard>
+      <div :class="[props.type !== 'xs' ? 'flex justify-between' : 'grid grid-cols-1']">
+        <h4>ID</h4>
+        <div>{{ props.service.id }}</div>
+      </div>
+      <hr class="border-gray-800 mt-2 mb-5">
+
+      <div>
+        <div class="mb-4">
+          <div class="grid gap-8" :class="[props.type == 'xs' ? 'grid-cols-2' : 'grid-cols-4']">
+            <div>
+              <h4 class="mb-2">Status</h4>
+              <div><UBadge :color="props.service.instance.connected ? 'success' : 'error'" variant="outline">Connected</UBadge></div>
+            </div>
+
+            <div>
+              <h4 class="mb-2">Host</h4>
+              <div>{{ props.service.instance.config.host }}:{{ props.service.instance.config.port }}</div>
+            </div>
+
+            <div>
+              <h4 class="mb-2">Connections</h4>
+              <div>{{ props.service.instance.connections.length }}</div>
+            </div>
+
+
+            <div>
+              <h4 class="mb-2">Value Size</h4>
+              <div>{{ services.attributes.value_sizes[props.service.instance.config.value_size - 1] }}</div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="props.type !== 'xs'">
+          <CardsInstanceMetricsCard :service="props.service" />
+        </div>
+
+      </div>
+
+    </UCard>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

components/Lists/ServicesList.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+// Copyright (C) 2025 Ian Torres
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+const {t} = useI18n()
+const services = useServices();
+
+const props = defineProps(['type'])
+
+onMounted(async () => {
+  await services.setup();
+})
+</script>
+
+<template>
+  <UModal v-model:open="services.attributes.formOpen"
+          :title="t('welcome.modal.title')"
+          :description="t('welcome.modal.description')"
+          :dismissible="true"
+          :close="true">
+    <template #body>
+      <FormsServicesForm/>
+    </template>
+  </UModal>
+
+  <div class="mb-4">
+    <UButton :label="t('forms.add_server')" type="button" variant="outline" @click="services.attributes.formOpen = true"/>
+  </div>
+
+  <div class="grid grid-cols-1 gap-y-5">
+    <ItemsServicesItem v-for="service in services.services" :service="service" :type="props.type" class="cursor-pointer" @click="navigateTo(`/services/${service.id}`)"/>
+  </div>
+</template>

components/Lists/SubscriptionsList.vue

@@ -36,13 +36,14 @@ const subscriptions = useSubscriptions();
       <FormsSubscribeForm v-on:chat_closed="open_subscribe = false" />
     </template>
   </UModal>
+  <div v-if="subscriptions.subscriptions.length > 0" class="text-xs/6 font-semibold text-gray-400">Subscriptions</div>
   <ul role="list" class="-mx-2 mt-2 space-y-1">
     <li v-for="subscription in subscriptions.subscriptions" :key="subscription.name">
       <UButton variant="link" @click="open(subscription.name)"># {{subscription.name }}</UButton>
     </li>
   </ul>
-  <div class="mt-5">
-    <UButton type="button" variant="outline" @click="open_subscribe = true">Add</UButton>
+  <div class="mt-2">
+    <UButton type="button" variant="outline" size="xs" @click="open_subscribe = true">Add Subscription</UButton>
   </div>
 </template>
 

components/Resources/Services/Channels.vue

@@ -38,7 +38,6 @@ const fetch = async () => {
   loading.value = true;
   data.value = await services.channels(route.params.id) as ChannelsResponse;
   toast.add({title: t('forms.event', {name: "Channels Retrieved ⤑ Success"}), color: 'success'})
-  console.log("Stats Retrieved ⤑ Success", data.value)
   loading.value = false;
 }
 

components/Resources/Services/Connections.vue

@@ -34,7 +34,6 @@ const fetch = async () => {
   loading.value = true;
   data.value = await services.connections(route.params.id) as ConnectionsResponse;
   toast.add({title: t('forms.event', { name: "Connections Retrieved ⤑ Success"}), color: 'success'})
-  console.log("Connections Retrieved ⤑ Success", data.value)
   loading.value = false;
 }
 

components/Resources/Services/Overview.vue

@@ -29,28 +29,6 @@ const data : Ref<InfoResponse> = ref({
   success: false
 } as InfoResponse);
 
-const sections = [
-  { name: 'ALL', totalKey: 'total_requests', perMinuteKey: 'total_requests_per_minute' },
-  { name: 'INSERT', totalKey: 'total_insert_requests', perMinuteKey: 'total_insert_requests_per_minute' },
-  { name: 'QUERY', totalKey: 'total_query_requests', perMinuteKey: 'total_query_requests_per_minute' },
-  { name: 'UPDATE', totalKey: 'total_update_requests', perMinuteKey: 'total_update_requests_per_minute' },
-  { name: 'PURGE', totalKey: 'total_purge_requests', perMinuteKey: 'total_purge_requests_per_minute' },
-  { name: 'SET', totalKey: 'total_set_requests', perMinuteKey: 'total_set_requests_per_minute' },
-  { name: 'GET', totalKey: 'total_get_requests', perMinuteKey: 'total_get_requests_per_minute' },
-  { name: 'LIST', totalKey: 'total_list_requests', perMinuteKey: 'total_list_requests_per_minute' },
-  { name: 'INFO', totalKey: 'total_info_requests', perMinuteKey: 'total_info_requests_per_minute' },
-  { name: 'STAT', totalKey: 'total_stat_requests', perMinuteKey: 'total_stat_requests_per_minute' },
-  { name: 'STATS', totalKey: 'total_stats_requests', perMinuteKey: 'total_stats_requests_per_minute' },
-  { name: 'SUBSCRIBE', totalKey: 'total_subscribe_requests', perMinuteKey: 'total_subscribe_requests_per_minute' },
-  { name: 'UNSUBSCRIBE', totalKey: 'total_unsubscribe_requests', perMinuteKey: 'total_unsubscribe_requests_per_minute' },
-  { name: 'PUBLISH', totalKey: 'total_publish_requests', perMinuteKey: 'total_publish_requests_per_minute' },
-  { name: 'CONNECTIONS', totalKey: 'total_connections_requests', perMinuteKey: 'total_connections_requests_per_minute' },
-  { name: 'CONNECTION', totalKey: 'total_connection_requests', perMinuteKey: 'total_connection_requests_per_minute' },
-  { name: 'CHANNELS', totalKey: 'total_channels_requests', perMinuteKey: 'total_channels_requests_per_minute' },
-  { name: 'CHANNEL', totalKey: 'total_channel_requests', perMinuteKey: 'total_channel_requests_per_minute' },
-  { name: 'WHOAMI', totalKey: 'total_whoami_requests', perMinuteKey: 'total_whoami_requests_per_minute' },
-];
-
 const intervalId = ref()
 
 const fetch = async (silence: boolean = false) => {
@@ -64,20 +42,17 @@ const fetch = async (silence: boolean = false) => {
   if (historic.value.length > 10) {
     historic.value.shift();
   }
-  console.log("Metrics Retrieved ⤑ Success", data.value)
 }
 
 onMounted(async () => {
   await fetch()
   intervalId.value = setInterval(async () => {
     await fetch(true);
-    console.log("OVERVIEW INFO INTERVAL ASSIGNED")
   }, 1000)
 })
 
 onUnmounted(() => {
   clearInterval(intervalId.value);
-  console.log("OVERVIEW INFO INTERVAL REMOVED")
 })
 </script>
 

components/Resources/Services/Stats.vue

@@ -33,7 +33,6 @@ const fetch = async () => {
   loading.value = true;
   data.value = await services.stats(route.params.id) as StatsResponse;
   toast.add({title: t('forms.event', { name: "Stats Retrieved ⤑ Success"}), color: 'success'})
-  console.log("Stats Retrieved ⤑ Success", data.value)
   loading.value = false;
 }
 

components/Resources/Services/Storage.vue

@@ -35,7 +35,6 @@ const fetch = async () => {
   loading.value = true;
   data.value = await services.list(route.params.id) as ListResponse;
   toast.add({title: t('forms.event', { name: "Keys Retrieved ⤑ Success"}), color: 'success'})
-  console.log("Keys Retrieved ⤑ Success", data.value)
   loading.value = false;
 }
 

components/Tables/ChannelsTable.vue

@@ -61,9 +61,7 @@ const columns: TableColumn<ChannelItem>[] = [
         label: 'View',
         async onSelect() {
           channel.value = await services.channel(route.params.id, row.original.channel);
-          console.log(channel.value);
           toast.add({title: t('forms.event', {name: "Channel Details Retrieved ⤑ Success"}), color: 'success'})
-          console.log("Channel Details Retrieved ⤑ Success", row.original.channel)
           open_channel.value = true;
         }
       }, {