Updates index page to a dashboard

assets/components/ScrollProgress.vue

@@ -3,7 +3,7 @@
     <svg width="100" height="100" viewBox="0 0 100 100">
       <circle r="44" cx="50" cy="50" :style="{ '--progress': scrollProgress }" />
     </svg>
-    <div class="percent columns is-vcentered is-centered has-text-weight-light">
+    <div class="is-overlay columns is-vcentered is-centered has-text-weight-light">
       <span class="column is-narrow is-paddingless is-size-2">
         {{ Math.ceil(scrollProgress * 100) }}
       </span>
@@ -84,13 +84,5 @@ export default {
     stroke-width: 3;
     will-change: stroke-dashoffset;
   }
-
-  .percent {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-  }
 }
 </style>

assets/components/SideMenu.vue

@@ -2,9 +2,11 @@
   <aside>
     <div class="columns is-marginless">
       <div class="column is-paddingless">
-        <svg class="logo">
-          <use href="#logo"></use>
-        </svg>
+        <router-link :to="{ name: 'default' }">
+          <svg class="logo">
+            <use href="#logo"></use>
+          </svg>
+        </router-link>
       </div>
       <div class="column is-narrow has-text-right x">
         <router-link

assets/pages/Index.vue

@@ -1,19 +1,77 @@
 <template>
-  <div class="hero is-halfheight">
-    <div class="hero-body">
-      <div class="container has-text-centered">
-        <h1 class="title">
-          Hello,
-          <small class="subtitle">friend. I am here for you logging needs.</small>
-        </h1>
+  <div>
+    <section class="hero is-small mt-4">
+      <div class="hero-body">
+        <div class="container">
+          <h1 class="title">
+            Hello, friend.
+          </h1>
+          <h2 class="subtitle">
+            I hope you are having a great day!
+          </h2>
+        </div>
       </div>
-    </div>
+    </section>
+    <section class="level section">
+      <div class="level-item has-text-centered">
+        <div>
+          <p class="title">{{ containers.length }}</p>
+          <p class="heading">Containers</p>
+        </div>
+      </div>
+      <div class="level-item has-text-centered">
+        <div>
+          <p class="title">{{ visibleContainers.length }}</p>
+          <p class="heading">Running</p>
+        </div>
+      </div>
+      <div class="level-item has-text-centered">
+        <div>
+          <p class="title">1.24.1</p>
+          <p class="heading">Dozzle Version</p>
+        </div>
+      </div>
+    </section>
+
+    <section class="columns is-centered section">
+      <div class="column is-4">
+        <div class="panel">
+          <p class="panel-heading">
+            Recent Containers
+          </p>
+          <router-link
+            :to="{ name: 'container', params: { id: item.id, name: item.name } }"
+            v-for="item in topMostRecent"
+            :key="item.id"
+            class="panel-block"
+          >
+            {{ item.name }}
+          </router-link>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
 <script>
+import { mapActions, mapGetters, mapState } from "vuex";
 export default {
-  props: [],
-  name: "Default",
+  name: "Index",
+
+  computed: {
+    ...mapGetters(["visibleContainers"]),
+    ...mapState(["containers"]),
+    topMostRecent() {
+      return this.visibleContainers.sort((a, b) => b.created - a.created).slice(0, 10);
+    },
+  },
 };
 </script>
+<style lang="scss" scoped>
+.panel {
+  border: 1px solid var(--border-color);
+  .panel-block {
+    border-color: var(--border-color);
+  }
+}
+</style>

assets/styles.scss

@@ -19,7 +19,8 @@ $menu-item-hover-color: var(--menu-item-hover-color);
 $text-strong: var(--text-strong-color);
 $text: var(--text-color);
 
-
+$panel-heading-background-color: var(--panel-heading-background-color);
+$panel-heading-color: var(--panel-heading-color);
 
 @import "~bulma";
 @import "../node_modules/splitpanes/dist/splitpanes.css";
@@ -46,6 +47,9 @@ html {
   --menu-item-hover-background-color: #{$white-ter};
   --menu-item-hover-color: #{$black-ter};
 
+  --panel-heading-background-color: var(--secondary-color);
+  --panel-heading-color: var(--scheme-main-bis);
+
   --text-strong-color: #{$grey-lightest};
   --text-color: #{$grey-lighter};
 }
@@ -69,6 +73,9 @@ html {
   --menu-item-hover-background-color: #eee8e7;
   --menu-item-hover-color: #{black-ter};
 
+  --panel-heading-background-color: var(--secondary-color);
+  --panel-heading-color: var(--text-strong-color);
+
   --text-strong-color: #{$grey-dark};
   --text-color: #{$grey-darker};
 }

docker/client.go

@@ -115,10 +115,6 @@ func (d *dockerClient) ListContainers() ([]Container, error) {
 		return strings.ToLower(containers[i].Name) < strings.ToLower(containers[j].Name)
 	})
 
-	if containers == nil {
-		containers = []Container{}
-	}
-
 	return containers, nil
 }