feat: add Kubernetes and Servers pages

Add Kubernetes and Servers pages and it's components, fix several bugs including bug with search Signed-off-by: evgeniybryzh<evgeniy@merge.rocks> Signed-off-by: Andrey Smirnov <andrey.smirnov@talos-systems.com>
siderolabs · Feb 3, 2022 · 2b7831f · 2b7831f
1 parent 4451a5b
commit 2b7831f
Show file tree

Hide file tree

Showing 48 changed files with 2,135 additions and 277 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -5,7 +5,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 <template>
   <div :class="{ dark: dark }" v-if="connected">
-    <t-modal />
+    <!-- <t-modal /> -->
     <t-header />
     <t-shell>
       <template v-slot:menu>
@@ -49,7 +49,6 @@ import { useRouter } from "vue-router";
 // import Shell from "./components/Shell.vue";
 // import SidebarChangeContext from "./views/SidebarChangeContext.vue";
 // import Sidebar from "./views/Sidebar.vue";
-import TModal from "./components/TModal.vue";
 // import TButton from "./components/TButton.vue";
 // import TSpinner from "./components/TSpinner.vue";
 import { context, changeContext, detectCapabilities } from "./context";
@@ -65,7 +64,6 @@ export default {
     // Shell,
     // SidebarChangeContext,
     // Sidebar,
-    TModal,
     // TButton,
     // TSpinner,
     THeader,

diff --git a/frontend/src/api/watch.ts b/frontend/src/api/watch.ts
@@ -110,6 +110,7 @@ export default class Watch {
       context,
       kubernetes,
       talos,
+      theila,
       compareFn,
     } = toRefs(props);
 
@@ -118,6 +119,7 @@ export default class Watch {
       context,
       kubernetes,
       talos,
+      theila,
       compareFn,
       ctx.current,
     ], (val, oldVal) => {
@@ -139,7 +141,10 @@ export default class Watch {
         source = Runtime.Kubernetes;
       } else if(talos.value) {
         source = Runtime.Talos;
-      } else {
+      }  else if(theila.value) {
+        source = Runtime.Theila;
+      }
+      else {
         throw new Error("unknown source specified");
       }
 

diff --git a/frontend/src/components/TChart.vue b/frontend/src/components/TChart.vue
@@ -5,24 +5,33 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 <template>
   <div class="flex flex-col">
-    <div v-if="title" class="w-full text-center">{{ title }}</div>
+    <div v-if="title" class="w-full text-center text-naturals-N13">
+      {{ title }}
+    </div>
     <div class="flex-1">
-      <div v-if="err || loading" class="flex flex-row justify-center items-center w-full h-full">
-        <div v-if="err" class="flex justify-center items-center w-1/2 gap-4 text-talos-gray-500 text-sm">
+      <div
+        v-if="err || loading"
+        class="flex flex-row justify-center items-center w-full h-full"
+      >
+        <div
+          v-if="err"
+          class="flex justify-center items-center w-1/2 gap-4 text-talos-gray-500 text-sm"
+        >
           <div class="flex-0">
-            <exclamation-icon class="w-6 h-6"/>
+            <exclamation-icon class="w-6 h-6" />
           </div>
           <div>{{ err }}</div>
         </div>
-        <t-spinner v-else/>
+        <t-spinner v-else />
       </div>
-      <apexchart v-else
+      <apexchart
+        v-else
         width="100%"
         height="100%"
         :type="type"
         :options="options"
         :series="series"
-        />
+      />
     </div>
   </div>
 </template>
@@ -213,7 +222,7 @@ export default {
             }
           },
         },
-        xaxis:{ 
+        xaxis:{
           type: "datetime",
           labels: {
             datetimeFormatter: {

diff --git a/frontend/src/components/THeader/THeader.vue b/frontend/src/components/THeader/THeader.vue
@@ -6,7 +6,8 @@
           <t-icon class="theHeader__icon" icon="header-logo" />
         </router-link>
       </div>
-      <nav class="theHeader__nav">
+      <!-- Todo -->
+      <!-- <nav class="theHeader__nav">
         <router-link class="theHeader__dashboard-wrapper" to="/dashboard">
           <t-button
             class="theHeader__nav-name"
@@ -16,7 +17,7 @@
             >Dashboard</t-button
           >
         </router-link>
-      </nav>
+      </nav> -->
     </div>
     <t-dropdown-notifications title="Ongoing Tasks" hasLoader>
       <t-header-task-item
@@ -31,13 +32,12 @@
 </template>
 
 <script lang="ts">
-import TButton from "@/components/common/Button/TButton.vue";
 import TIcon from "@/components/common/Icon/TIcon.vue";
 import THeaderTaskItem from "./THeaderTaskItem/THeaderTaskItem.vue";
 import TDropdownNotifications from "@/components/common/Dropdown/TDropdownNotifications.vue";
 
 export default {
-  components: { TIcon, TButton, THeaderTaskItem, TDropdownNotifications },
+  components: { TIcon, THeaderTaskItem, TDropdownNotifications },
   setup() {
     const tasksList = [
       {

diff --git a/frontend/src/components/TModal.vue b/frontend/src/components/TModal.vue
@@ -4,16 +4,16 @@ License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 <template>
-  <div class="container-modal" v-if="view" @click.self="close">
-    <component :is="view" v-bind="props"/>
+  <div class="container-modal" v-if="view">
+    <component :is="view" v-bind="props" />
   </div>
 </template>
 
 <script lang="ts">
-import { watch, ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { modals } from '../router';
-import { modal } from '../modal';
+import { watch, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { modals } from "../router";
+import { modal } from "../modal";
 
 export default {
   setup() {
@@ -23,23 +23,27 @@ export default {
     const props = ref({});
 
     const updateState = () => {
-      if(modal.value) {
+      if (modal.value) {
         view.value = modal.value.component;
         props.value = modal.value.props || {};
 
         return;
       }
 
       props.value = {};
-      view.value = route.query.modal ? modals[route.query.modal as string] : null;
-    }
+      view.value = route.query.modal
+        ? modals[route.query.modal as string]
+        : null;
+    };
 
-    watch(() => route.query.modal, () => {
-      if(route.query.modal)
-        modal.value = null;
+    watch(
+      () => route.query.modal,
+      () => {
+        if (route.query.modal) modal.value = null;
 
-      updateState();
-    });
+        updateState();
+      }
+    );
 
     // modals which do not need to be tied to the URI
     watch(modal, () => {
@@ -53,18 +57,22 @@ export default {
       props,
       close() {
         router.go(-1);
-      }
-    }
-  }
+      },
+    };
+  },
 };
 </script>
 
 <style scoped>
 .container-modal {
-  @apply fixed bg-talos-gray-200 dark:bg-black bg-opacity-50 dark:bg-opacity-50 w-screen h-screen flex items-center justify-center transition-all transition z-50;
+  @apply z-20 flex justify-center items-center;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
 }
 
 .container-modal > * {
-  @apply align-middle bg-white dark:bg-talos-gray-800 rounded-lg text-left shadow-xl transform;
+  @apply align-middle  rounded-lg text-left;
 }
 </style>
diff --git a/frontend/src/components/common/ActionsBox/TActionsBox.vue b/frontend/src/components/common/ActionsBox/TActionsBox.vue
@@ -34,7 +34,6 @@ export default {
   setup() {
     const isActionsDropdownOpened = ref(false);
     const settingsButton = ref(null);
-
     return {
       isActionsDropdownOpened,
       settingsButton,

diff --git a/frontend/src/components/common/Animation/TAnimation.vue b/frontend/src/components/common/Animation/TAnimation.vue
@@ -18,19 +18,19 @@ export default {
 <style scoped>
 .fade-enter-active,
 .fade-leave-active {
-  transition: all 0.3s linear;
+  transition: all 0.25s linear;
 }
 
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
 }
 .slide-fade-enter-active {
-  transition: all 0.3s ease-out;
+  transition: all 0.25s ease-out;
 }
 
 .slide-fade-leave-active {
-  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+  transition: all 0.25s cubic-bezier(1, 0.5, 0.8, 1);
 }
 
 .slide-fade-enter-from,

diff --git a/frontend/src/components/common/Button/TButton.vue b/frontend/src/components/common/Button/TButton.vue
@@ -10,14 +10,14 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     class="TButton"
     :class="[
       type,
+      isLightHover && 'lightHover',
       fluid && 'fluid',
       {
         _left: icon && iconPosition === 'left',
         _right: icon && iconPosition === 'right',
         _middle: icon && iconPosition === 'middle',
       },
     ]"
-    @click.self="() => $emit('click')"
   >
     <span class="TButton__text"><slot></slot></span>
     <t-icon
@@ -61,6 +61,10 @@ export default {
       },
       default: "right",
     },
+    isLightHover: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>
@@ -139,6 +143,19 @@ export default {
   disabled:text-naturals-N6
   disabled:cursor-not-allowed;
 }
+.TButton.subtle.lightHover {
+  @apply bg-transparent
+  p-0
+  border-none
+  text-naturals-N9 
+  hover:text-naturals-N12
+  focus:text-naturals-N13
+  focus:underline
+  active:text-naturals-N13
+  active:no-underline
+  disabled:text-naturals-N6
+  disabled:cursor-not-allowed;
+}
 
 .TButton__text {
   order: 0;

diff --git a/frontend/src/components/common/Icon/TIcon.vue b/frontend/src/components/common/Icon/TIcon.vue
@@ -226,6 +226,9 @@ export default {
     [getName("question")]: defineAsyncComponent(() =>
       import("../../icons/IconQuestion.vue")
     ),
+    [getName("upgrade-empty-state")]: defineAsyncComponent(() =>
+      import("../../icons/IconUpgradeEmptyState.vue")
+    ),
   },
   computed: {
     getIcon() {