adds icons

Author: amir20

.claude/settings.local.json

@@ -22,7 +22,8 @@
       "Bash(go build:*)",
       "Bash(gh issue view:*)",
       "Bash(xargs ls:*)",
-      "Bash(gh pr list:*)"
+      "Bash(gh pr list:*)",
+      "Bash(pnpm typecheck:*)"
     ]
   }
 }

assets/components.d.ts

@@ -93,6 +93,7 @@ declare module 'vue' {
     'Mdi:arrowUp': typeof import('~icons/mdi/arrow-up')['default']
     'Mdi:beer': typeof import('~icons/mdi/beer')['default']
     'Mdi:bell': typeof import('~icons/mdi/bell')['default']
+    'Mdi:chartBar': typeof import('~icons/mdi/chart-bar')['default']
     'Mdi:chartLine': typeof import('~icons/mdi/chart-line')['default']
     'Mdi:check': typeof import('~icons/mdi/check')['default']
     'Mdi:checkCircle': typeof import('~icons/mdi/check-circle')['default']
@@ -117,9 +118,11 @@ declare module 'vue' {
     'Mdi:magnify': typeof import('~icons/mdi/magnify')['default']
     'Mdi:pencilOutline': typeof import('~icons/mdi/pencil-outline')['default']
     'Mdi:plus': typeof import('~icons/mdi/plus')['default']
+    'Mdi:poll': typeof import('~icons/mdi/poll')['default']
     'Mdi:satelliteVariant': typeof import('~icons/mdi/satellite-variant')['default']
     'Mdi:textBoxOutline': typeof import('~icons/mdi/text-box-outline')['default']
     'Mdi:trashCanOutline': typeof import('~icons/mdi/trash-can-outline')['default']
+    'Mdi:viewSequential': typeof import('~icons/mdi/view-sequential')['default']
     'Mdi:webhook': typeof import('~icons/mdi/webhook')['default']
     MetricAlertFields: typeof import('./components/Notification/MetricAlertFields.vue')['default']
     MetricCard: typeof import('./components/MetricCard.vue')['default']

assets/components/ContainerStatCell.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="flex flex-row items-center gap-2">
-    <BarChart class="h-4 flex-1" :chart-data="chartData" :bar-class="barClass" />
+    <template v-if="mode === 'chart'">
+      <BarChart class="h-4 flex-1" :chart-data="chartData" :bar-class="barClass" />
+    </template>
+    <template v-else>
+      <progress class="progress flex-1" :class="progressClass" :value="averageValue" max="100"></progress>
+    </template>
     <span class="w-fit text-right text-sm">{{ displayValue }}</span>
   </div>
 </template>
@@ -9,10 +14,16 @@
 import type { Container } from "@/models/Container";
 import type { Host } from "@/stores/hosts";
 
-const { container, type, host } = defineProps<{
+const {
+  container,
+  type,
+  host,
+  mode = "chart",
+} = defineProps<{
   container: Container;
   type: "cpu" | "mem";
   host: Host;
+  mode?: "chart" | "progress";
 }>();
 
 function totalCores(): number {
@@ -52,4 +63,12 @@ const barClass = computed(() => {
   if (value <= 90) return "bg-warning";
   return "bg-error";
 });
+
+const progressClass = computed(() => {
+  const value = averageValue.value;
+  if (value <= 50) return "progress-success";
+  if (value <= 70) return "progress-secondary";
+  if (value <= 90) return "progress-warning";
+  return "progress-error";
+});
 </script>

assets/components/ContainerTable.vue

@@ -35,14 +35,32 @@
           v-else
         />
       </div>
-      <div class="flex-1 text-right" v-show="containers.length > pageSizes[0]">
-        {{ $t("label.per-page") }}
+      <div class="flex flex-1 items-center justify-end gap-2">
+        <div v-show="containers.length > pageSizes[0]">
+          {{ $t("label.per-page") }}
 
-        <DropdownMenu
-          class="dropdown-left btn-xs md:btn-sm"
-          v-model="perPage"
-          :options="pageSizes.map((i) => ({ label: i.toLocaleString(), value: i }))"
-        />
+          <DropdownMenu
+            class="dropdown-left btn-xs md:btn-sm"
+            v-model="perPage"
+            :options="pageSizes.map((i) => ({ label: i.toLocaleString(), value: i }))"
+          />
+        </div>
+        <div class="join">
+          <button
+            class="btn join-item btn-xs md:btn-sm"
+            :class="statMode === 'chart' ? 'btn-active' : 'btn-ghost'"
+            @click="statMode = 'chart'"
+          >
+            <mdi:chart-bar />
+          </button>
+          <button
+            class="btn join-item btn-xs md:btn-sm"
+            :class="statMode === 'progress' ? 'btn-active' : 'btn-ghost'"
+            @click="statMode = 'progress'"
+          >
+            <mdi:poll class="scale-x-[-1] rotate-90" />
+          </button>
+        </div>
       </div>
     </div>
     <div class="rounded-box border-base-content/10 overflow-x-auto border">
@@ -66,7 +84,12 @@
           </tr>
         </thead>
         <tbody class="bg-base-300/30">
-          <tr v-for="container in paginated" :key="container.id" v-memo="[container.id]" class="hover:bg-base-100/80!">
+          <tr
+            v-for="container in paginated"
+            :key="container.id"
+            v-memo="[container.id, statMode]"
+            class="hover:bg-base-100/80!"
+          >
             <td v-if="isVisible('name')" class="max-w-80 truncate">
               <router-link :to="{ name: '/container/[id]', params: { id: container.id } }" :title="container.name">
                 {{ container.name }}
@@ -78,10 +101,10 @@
               <RelativeTime :date="container.created" />
             </td>
             <td v-if="isVisible('cpu')">
-              <ContainerStatCell :container="container" type="cpu" :host="hosts[container.host]" />
+              <ContainerStatCell :container="container" type="cpu" :host="hosts[container.host]" :mode="statMode" />
             </td>
             <td v-if="isVisible('mem')">
-              <ContainerStatCell :container="container" type="mem" :host="hosts[container.host]" />
+              <ContainerStatCell :container="container" type="mem" :host="hosts[container.host]" :mode="statMode" />
             </td>
           </tr>
         </tbody>
@@ -167,6 +190,7 @@ const { containers } = defineProps<{
 }>();
 type keys = keyof typeof fields;
 
+const statMode = useStorage<"chart" | "progress">("DOZZLE_TABLE_STAT_MODE", "chart");
 const perPage = useStorage("DOZZLE_TABLE_PAGE_SIZE", 15);
 const pageSizes = [15, 30, 50, 100];