feat: rework the node overview page

Show detailed node information instead of charts. That comes in scope of global adjustment of styles to properly handle different screen size, as it has become clear that it's impossible to show long values in the table view right now. Merge overview page and services page. Move charts and processes to the Monitoring page. Additionally remove wrong `md:` definitions in many places and properly handle breakpoints on the ultra-wide screens. Signed-off-by: Artem Chernyshev <[email protected]>
siderolabs · Aug 9, 2021 · 1d18557 · 1d18557
1 parent 4ee481b
commit 1d18557
Show file tree

Hide file tree

Showing 18 changed files with 659 additions and 460 deletions.
diff --git a/frontend/src/components/ClusterListItem.vue b/frontend/src/components/ClusterListItem.vue
@@ -8,9 +8,9 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     :to="{name: 'Nodes', query: { cluster: item.metadata.name, namespace: item.metadata.namespace, uid: item.metadata.uid }}"
     class="block hover:bg-talos-gray-50 dark:hover:bg-talos-gray-800 overflow-visible"
     >
-    <div class="flex items-center px-4 py-4 sm:px-6">
+    <div class="flex items-center px-4 py-4">
       <div class="flex items-center flex-1 min-w-0">
-        <div class="flex-1 min-w-0 md:grid md:grid-cols-2 md:gap-4">
+        <div class="flex-1 grid grid-cols-2 gap-4">
           <div>
             <p
               class="text-sm font-medium truncate text-talos-gray-900 dark:text-talos-gray-100"

diff --git a/frontend/src/components/NodeListItem.vue b/frontend/src/components/NodeListItem.vue
@@ -8,32 +8,20 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     :to="{name: 'Overview', params: { node: ip }, query: getQuery() }"
     class="block hover:bg-talos-gray-50 dark:hover:bg-talos-gray-800 flex"
     >
-    <div class="flex-1 flex items-center px-4 py-3 sm:px-6 min-w-0 md:grid md:grid-cols-7 md:gap-4">
-      <div class="block justify-self-left">
-        <p
-          class="text-sm font-medium truncate text-talos-gray-900 dark:text-talos-gray-100"
-          >
-          {{ item.metadata.name }}
-        </p>
+    <div class="flex-1 flex items-center px-4 py-3 min-w-0 grid grid-cols-4 md:grid-cols-7 lg:grid-cols-7 gap-4">
+      <div class="truncate">
+        {{ item.metadata.name }}
       </div>
-      <div class="block justify-self-left">
-        <p
-          class="text-sm font-medium truncate text-talos-gray-900 dark:text-talos-gray-100"
-          >
-          {{ ip }}
-        </p>
+      <div class="truncate">
+        {{ ip }}
       </div>
-      <div class="justify-self-center">
+      <div class="truncate">
         {{ os }}
       </div>
-      <div class="col-span-2 block justify-self-center">
-        <p
-          class="text-sm font-medium truncate text-talos-gray-900 dark:text-talos-gray-100 space-x-1 space-y-1"
-          >
-          <t-label v-for="role in roles" v-bind:key="role">{{ role }}</t-label>
-        </p>
+      <div class="col-span-2 block justify-self-center hidden md:flex lg:flex flex flex-wrap gap-2">
+        <t-label v-for="role in roles" v-bind:key="role" class="inline text-sm">{{ role }}</t-label>
       </div>
-      <div class="justify-self-center">
+      <div class="justify-self-center hidden md:block lg:block">
         <t-label :col="status === 'ready' ? 'green' : 'red'" class="uppercase">
           <template v-slot:icon>
             <check-circle-icon class="w-5 h-5" v-if="status === 'ready'"/>

diff --git a/frontend/src/components/ServerListItem.vue b/frontend/src/components/ServerListItem.vue
@@ -6,7 +6,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 <template>
   <div class="flex flex-col px-6 py-3">
     <div class="flex items-center">
-      <div class="flex flex-1 items-center min-w-0 md:grid md:grid-cols-5 md:gap-4">
+      <div class="flex flex-1 items-center grid grid-cols-5 gap-4">
         <div class="col-span-2 block flex items-center gap-3">
           <button type="button" @click="expand" class="relative inline-flex items-center px-1 py-1 text-sm font-medium leading-5 transition-colors duration-200 rounded-full select-none text-talos-gray-700 dark:text-talos-gray-400 bg-talos-gray-200 dark:bg-talos-gray-800 hover:bg-talos-gray-200 dark:hover:bg-talos-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-60">
             <div :class="{ 'w-5': true, 'h-5': true, transform: expanded, 'rotate-180': expanded }">
@@ -50,7 +50,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
             </span>
           </p>
         </div>
-        <div class="block">
+        <div class="hidden md:block">
           <span :class="{
               tag: true,
               uppercase: true,
@@ -85,7 +85,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     </div>
 
     <div v-if="expanded" class="block col-span-5">
-      <div class="flex items-center min-w-0 md:grid md:grid-cols-3 md:gap-4 gap-1">
+      <div class="flex items-center grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-1 lg:gap-4">
         <div class="flex-1">
           <div class="label">Labels</div>
           <template v-if="item.metadata.labels">

diff --git a/frontend/src/components/Shell.vue b/frontend/src/components/Shell.vue
@@ -5,19 +5,23 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 <template>
   <div :class="shellClasses">
-    <div :class="sidebarClasses" :style="style">
+    <div :class="sidebarClasses">
       <slot name="menu"></slot>
     </div>
-    <div :class="contentClasses">
-      <slot name="content"></slot>
+    <div class="flex items-center justify-center w-full overflow-y-auto overflow-x-hidden">
+      <div class="flex-1 max-w-screen-xl h-full">
+        <div :class="contentClasses">
+          <slot name="content"></slot>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script type="ts">
-import { Options, Vue } from 'vue-class-component';
+import { computed, toRefs } from 'vue';
 
-@Options({
+export default {
   props: {
     colorStyle: {
       type: String,
@@ -26,42 +30,39 @@ import { Options, Vue } from 'vue-class-component';
 
     sidebarWidth: {
       type: String,
-      default: "18rem",
+      default: "w-60 lg:w-72",
     }
   },
 
-  computed: {
-    sidebarClasses() {
-      return `sidebar sidebar-${this.colorStyle}`;
-    },
-
-    contentClasses() {
-      return `content-${this.colorStyle}`;
-    },
-
-    shellClasses() {
-      return `shell-${this.colorStyle}`;
-    },
+  setup(props) {
+    const {colorStyle, sidebarWidth} = toRefs(props);
 
-    style() {
-      return `width: ${this.sidebarWidth};`;
+    return {
+      sidebarClasses: computed(() => {
+        return `sidebar sidebar-${colorStyle.value} ${sidebarWidth.value}`;
+      }),
+      contentClasses: computed(() => {
+        return `content-${colorStyle.value}`;
+      }),
+      shellClasses: computed(() => {
+        return `shell-${colorStyle.value}`;
+      }),
     }
   }
-})
-export default class Shell extends Vue {}
+};
 </script>
 
 <style>
 .sidebar-inverted {
-  @apply flex flex-col justify-between flex-none h-full py-2 select-none px-3 overflow-y-auto gap-2;
+  @apply flex flex-col justify-between flex-none h-full py-2 select-none sm:px-3 overflow-y-auto gap-2;
 }
 
 .sidebar-normal {
   @apply sidebar-inverted bg-talos-gray-200 dark:bg-talos-gray-800;
 }
 
 .content-inverted {
-  @apply flex flex-col w-full h-full overflow-x-hidden overflow-y-auto py-2 px-4;
+  @apply flex-1 flex flex-col py-2 px-4 h-full;
 }
 
 .content-normal {

diff --git a/frontend/src/components/StackedList.vue b/frontend/src/components/StackedList.vue
@@ -5,8 +5,8 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 <template>
   <div>
-    <div class="flex gap-2">
-      <t-input v-if="search" :placeholder="search" v-model="filter" class="mb-4 w-full flex-1">
+    <div class="lg:flex gap-2 grid grid-col-1 mb-4">
+      <t-input v-if="search" :placeholder="search" v-model="filter" class="w-full flex-1">
         <template v-slot:icon>
           <search-icon class="w-5 h-5"/>
         </template>
@@ -27,16 +27,16 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     <div class="stacked-list">
       <ul>
         <li v-if="showCount && itemName">
-          <div class="px-4 py-4 sm:px-6">
+          <div class="px-4 py-4">
             {{ items.length }} {{ pluralize(itemName, items.length) }}
           </div>
         </li>
         <li v-if="$slots.header" class="table-header">
           <slot name="header"></slot>
         </li>
         <li
-          v-for="item in filteredItems"
-          :key="idFn(item)"
+          v-for="item, index in filteredItems"
+          :key="idFn ? idFn(item) : index"
           >
           <slot :item="item"></slot>
         </li>
@@ -138,6 +138,6 @@ export default {
 }
 
 .stacked-list .table-header > * {
-  @apply font-medium flex items-center px-4 py-3 sm:px-6 min-w-0 md:grid md:gap-4 uppercase bg-talos-gray-100 dark:bg-talos-gray-700 text-talos-gray-500 dark:text-talos-gray-300;
+  @apply font-medium flex items-center px-4 py-3 min-w-0 grid gap-4 uppercase bg-talos-gray-100 dark:bg-talos-gray-700 text-talos-gray-500 dark:text-talos-gray-300;
 }
 </style>
diff --git a/frontend/src/components/TDropdown.vue b/frontend/src/components/TDropdown.vue
@@ -8,7 +8,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     <Menu as="div" class="relative w-full">
       <menu-button as="template" :disabled="disabled">
         <t-button :xs="xs" :small="small" :disabled="disabled" class="w-full">
-          <div class="flex-1" v-if="title">{{ title }}</div>
+          <div class="flex-1 truncate" v-if="title">{{ title }}</div>
           <slot name="icon" v-if="$slots.icon"></slot>
           <chevron-down-icon v-else class="w-5 h-5 ml-2 -mr-1" aria-hidden="true"/>
         </t-button>

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
@@ -8,8 +8,8 @@ import Servers from "../views/Servers.vue";
 import Nodes from "../views/cluster/Nodes.vue";
 import Pods from "../views/cluster/Pods.vue";
 import Overview from "../views/node/Overview.vue";
+import Monitor from "../views/node/Monitor.vue";
 import Logs from "../views/node/Logs.vue";
-import Services from "../views/node/Services.vue";
 import SidebarRoot from "../views/SidebarRoot.vue";
 import SidebarCluster from "../views/SidebarCluster.vue";
 import SidebarNode from "../views/SidebarNode.vue";
@@ -92,17 +92,17 @@ const routes = [
   },
   ...withPrefix("/node/:node", [
     {
-      path: "/services",
-      name: "Services",
+      path: "/overview",
+      name: "Overview",
       components: {
-        default: Services,
+        default: Overview,
       },
     },
     {
-      path: "/overview",
-      name: "Overview",
+      path: "/monitor",
+      name: "Monitor",
       components: {
-        default: Overview,
+        default: Monitor,
       },
     },
     {

diff --git a/frontend/src/views/Servers.vue b/frontend/src/views/Servers.vue
@@ -8,7 +8,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     <div class="px-3 py-2">
       <div class="text-lg tracking-tight text-talos-gray-900 dark:text-white font-bold">Servers</div>
     </div>
-    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
+    <div class="grid grid-cols-1 gap-5 md:grid-cols-3">
       <t-stat name="Total Servers" :value="items.length" :loading="loading">
         <template v-slot:icon>
           <server-icon class="w-6 h-6"/>
@@ -27,7 +27,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     </div>
     <watch class="flex-1" :watch="servers" search="Search server" :filterFn="search" :categories="categories" :sortOptions="sortOptions">
       <template v-slot:header>
-        <div class="flex items-center md:grid md:grid-cols-5">
+        <div class="flex items-center grid grid-cols-5">
           <div class="col-span-2 block">
             Name
           </div>
@@ -37,7 +37,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
           <div class="block">
             Power
           </div>
-          <div class="block">
+          <div class="hidden md:block">
             Status
           </div>
         </div>

diff --git a/frontend/src/views/Settings.vue b/frontend/src/views/Settings.vue
@@ -8,7 +8,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     <div class="px-5">
       <h3 class="mb-2 text-lg leading-6 font-medium text-talos-gray-900 dark:text-talos-gray-100" id="modal-title">Settings</h3>
     </div>
-    <shell color-style="inverted" sidebar-width="12rem" class="px-2">
+    <shell color-style="inverted" sidebar-width="w-60" class="px-2">
       <template v-slot:menu>
         <shell-menu-item name="Appearance" active="true">
           <template v-slot:icon>

diff --git a/frontend/src/views/SidebarNode.vue b/frontend/src/views/SidebarNode.vue
@@ -12,12 +12,12 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     </shell-menu-item>
     <shell-menu-item :link="{name: 'Overview', query: { cluster: $route.query.cluster, namespace: $route.query.namespace, uid: $route.query.uid }, params: { node: $route.params.node } }" name="Overview">
       <template v-slot:icon>
-        <presentation-chart-line-icon class="w-6 h-6"/>
+        <home-icon class="w-6 h-6"/>
       </template>
     </shell-menu-item>
-    <shell-menu-item :link="{name: 'Services', query: { cluster: $route.query.cluster, namespace: $route.query.namespace, uid: $route.query.uid }, params: { node: $route.params.node } }" name="Services">
+    <shell-menu-item :link="{name: 'Monitor', query: { cluster: $route.query.cluster, namespace: $route.query.namespace, uid: $route.query.uid }, params: { node: $route.params.node } }" name="Monitor">
       <template v-slot:icon>
-        <cube-transparent-icon class="w-6 h-6"/>
+        <presentation-chart-line-icon class="w-6 h-6"/>
       </template>
     </shell-menu-item>
     <shell-menu-item name="Dmesg" :link="{name: 'Logs', query: { cluster: $route.query.cluster, namespace: $route.query.namespace, uid: $route.query.uid }, params: { node: $route.params.node, service: 'dmesg' } }">
@@ -47,11 +47,11 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 import { ref, onMounted, Ref } from 'vue';
 import ShellMenuItem from '../components/ShellMenuItem.vue';
 import {
-  CubeTransparentIcon,
   ArrowSmLeftIcon,
   ChevronUpIcon,
   PresentationChartLineIcon,
   DocumentTextIcon,
+  HomeIcon,
 } from '@heroicons/vue/outline';
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue';
 import { ResourceService } from '../api/grpc';
@@ -61,14 +61,14 @@ import { getContext } from '../context';
 export default {
   components: {
     ShellMenuItem,
-    CubeTransparentIcon,
     ArrowSmLeftIcon,
     Disclosure,
     DisclosureButton,
     DisclosurePanel,
     ChevronUpIcon,
     PresentationChartLineIcon,
     DocumentTextIcon,
+    HomeIcon,
   },
 
   setup() {

diff --git a/frontend/src/views/cluster/Nodes.vue b/frontend/src/views/cluster/Nodes.vue
@@ -20,7 +20,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
         search="Search node by name"
         :context="getContext()">
       <template v-slot:header>
-        <div class="flex items-center md:grid md:grid-cols-7">
+        <div class="flex items-center grid-cols-4 md:grid-cols-7 lg:grid-cols-7">
           <div class="block justify-self-left">
             Name
           </div>
@@ -30,10 +30,10 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
           <div class="justify-self-center">
             OS
           </div>
-          <div class="col-span-2 block justify-self-center">
+          <div class="col-span-2 block justify-self-center hidden md:block lg:block">
             Roles
           </div>
-          <div class="justify-self-center">
+          <div class="justify-self-center hidden md:block lg:block">
             Status
           </div>
         </div>

diff --git a/frontend/src/views/cluster/Pods.vue b/frontend/src/views/cluster/Pods.vue
@@ -20,7 +20,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
       search="Search pod by name"
       :context="getContext()">
       <template v-slot:header>
-        <div class="flex items-center md:grid md:grid-cols-6">
+        <div class="items-center grid grid-cols-6">
           <div class="block">
             Namespace
           </div>
@@ -39,31 +39,31 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
         <a
           class="block hover:bg-talos-gray-50 dark:hover:bg-talos-gray-800"
           >
-          <div class="flex items-center min-w-0 px-4 py-4 sm:px-6 md:grid md:grid-cols-6 md:gap-4">
+          <div class="flex items-center px-4 py-4 grid grid-cols-6 gap-4">
             <div class="block">
               <p
-                class="text-sm font-medium truncate text-talos-gray-900 dark:text-talos-gray-100"
+                class="text-sm truncate text-talos-gray-900 dark:text-talos-gray-100"
                 >
                 {{ slot.item.metadata.namespace }}
               </p>
             </div>
             <div class="col-span-2 block">
               <p
-                class="text-sm font-medium truncate text-talos-gray-900 dark:text-talos-gray-100"
+                class="text-sm truncate text-talos-gray-900 dark:text-talos-gray-100"
                 >
                 {{ slot.item.metadata.name }}
               </p>
             </div>
             <div class="block">
               <p
-                class="text-sm font-medium truncate text-talos-gray-900 dark:text-talos-gray-100"
+                class="text-sm truncate text-talos-gray-900 dark:text-talos-gray-100"
                 >
                 {{ slot.item.status.phase }}
               </p>
             </div>
             <div class="col-span-2 block">
               <p
-                class="text-sm font-medium truncate text-talos-gray-900 dark:text-talos-gray-100"
+                class="text-sm truncate text-talos-gray-900 dark:text-talos-gray-100"
                 >
                 {{ slot.item.spec.nodeName }}
               </p>