feat: revamp application list with grouping support (#240)

README.md

@@ -4,7 +4,9 @@ This template should help get you started developing with Vue 3 in Vite.
 
 ## Recommended IDE Setup
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and
+disable
+Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
 
 ## Customize configuration
 
@@ -33,3 +35,9 @@ npm run build
 ```sh
 npm run lint
 ```
+
+### Terminology
+
+- **Application** : On the client side presented application is same as application in the backend.
+- **Project** : Project is a collection of applications. It's known as `Project` in the client side but it's
+  called `Application Group` in the backend.

src/main.js

@@ -19,6 +19,7 @@ import {
   faBed,
   faBook,
   faBox,
+  faBoxesStacked,
   faBug,
   faCalendarDays,
   faCaretDown,
@@ -53,6 +54,9 @@ import {
   faHammer,
   faHandshakeAngle,
   faHardDrive,
+  faHeartCircleCheck,
+  faHeartCircleExclamation,
+  faHeartCircleXmark,
   faKey,
   faLayerGroup,
   faLink,
@@ -61,6 +65,7 @@ import {
   faLocationArrow,
   faMagnifyingGlass,
   faNetworkWired,
+  faPause,
   faPeopleGroup,
   faPersonDigging,
   faPlay,
@@ -189,7 +194,12 @@ library.add(
   faPersonDigging,
   faShieldHalved,
   faUserShield,
-  faKey
+  faKey,
+  faHeartCircleCheck,
+  faHeartCircleExclamation,
+  faHeartCircleXmark,
+  faPause,
+  faBoxesStacked
 )
 
 // Environment variables
@@ -269,7 +279,7 @@ pinia.use(({ store }) => {
 app.use(router)
 app.use(pinia)
 app.use(Toast, {
-  position: 'top-right',
+  position: 'top-center',
   timeout: 5000,
   closeOnClick: true,
   pauseOnFocusLoss: true,

src/router/index.js

@@ -34,6 +34,7 @@ import ServerLogsPage from '@/views/pages/ServerLogs.vue'
 import ServerAnalyticsPage from '@/views/pages/ServerAnalytics.vue'
 import SystemLogsPage from '@/views/pages/SystemLogs.vue'
 import AppAuthBasicAccessControlList from '@/views/pages/AppAuthBasicAccessControlList.vue'
+import ApplicationGroupDetailsPage from '@/views/pages/ApplicationGroupDetails.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -160,6 +161,11 @@ const router = createRouter({
         }
       ]
     },
+    {
+      path: '/application_group/:id',
+      name: 'Application Group Details',
+      component: ApplicationGroupDetailsPage
+    },
     {
       path: '/app_auth',
       children: [

src/views/components/ComboBoxComponent.vue

@@ -79,7 +79,7 @@ watch(selectedOptionValue, (newValue) => {
         :display-value="(i) => getDisplayValue(i)"
         @change="query = $event.target.value"
         placeholder="Start typing to filter..."
-        class="w-full border-none focus:ring-0" />
+        class="w-full border-none text-sm focus:ring-0" />
       <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
         <font-awesome-icon icon="fa-solid fa-caret-down" class="h-5 w-5 text-gray-400" aria-hidden="true" />
       </ComboboxButton>

src/views/components/FilledButton.vue

@@ -49,13 +49,13 @@ const isDisabled = computed(() => {
       'cursor-not-allowed opacity-50': disabled,
       'hover:bg-[type]-600/80': !disabled,
       'cursor-progress': loading,
-      'py-2 text-sm': !slim,
-      'px-1.5 py-1 text-xs': slim,
+      'px-3 py-2 text-sm': !slim,
+      'px-2 py-1 text-xs': slim,
       'rounded-full': rounded,
       'rounded-md': !rounded
     }"
     :disabled="isDisabled"
-    class="flex items-center justify-center px-3 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+    class="flex items-center justify-center shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
     type="button"
     @click.stop="click">
     <!--    spinner -->

src/views/components/PageBar.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="flex w-full flex-col space-y-4 md:flex-row md:items-center md:justify-between md:space-y-0">
+  <div class="flex w-full flex-col space-y-2 md:flex-row md:items-center md:justify-between md:space-y-0">
     <div>
-      <h2 class="text-lg font-semibold">
+      <p class="text-base font-medium">
         <slot name="title"></slot>
-      </h2>
-      <p class="mt-1 text-sm text-gray-700">
+      </p>
+      <p class="text-sm text-gray-700">
         <slot name="subtitle"></slot>
       </p>
     </div>

src/views/components/StatusBadge.vue

@@ -6,14 +6,26 @@ defineProps({
     validator: (value) => {
       return ['primary', 'secondary', 'success', 'danger', 'warning'].includes(value)
     }
+  },
+  small: {
+    type: Boolean,
+    default: false
   }
 })
 </script>
 <template>
-  <div class="flex items-center gap-3 p-0">
+  <div
+    class="flex items-center p-0"
+    :class="{
+      'gap-3': !small,
+      'gap-2': small,
+      'text-sm': small
+    }">
     <div
-      class="h-3 w-3 rounded-full"
+      class="rounded-full"
       :class="{
+        'h-3 w-3': !small,
+        'h-2.5 w-2.5': small,
         'bg-primary-500': type === 'primary',
         'bg-secondary-500': type === 'secondary',
         'bg-success-500': type === 'success',

src/views/components/Table/Table.vue

@@ -1,3 +1,12 @@
+<script setup>
+defineProps({
+  dividerBetweenRows: {
+    type: Boolean,
+    required: false,
+    default: true
+  }
+})
+</script>
 <template>
   <div class="scrollbox max-h-[80vh] overflow-y-auto border border-gray-200 md:rounded-lg">
     <table class="min-w-full divide-y divide-gray-200">
@@ -6,7 +15,12 @@
           <slot name="header"></slot>
         </tr>
       </thead>
-      <tbody class="divide-y divide-gray-200 bg-white">
+      <tbody
+        class="bg-white"
+        :class="{
+          'divide-y-0': dividerBetweenRows,
+          'divide-y divide-gray-200': dividerBetweenRows
+        }">
         <slot name="body"></slot>
       </tbody>
     </table>

src/views/components/UptimeChart.vue

@@ -21,6 +21,11 @@ const props = defineProps({
   small: {
     type: Boolean,
     default: false
+  },
+  labelPosition: {
+    type: String,
+    default: 'bottom',
+    validator: (value) => ['top', 'bottom', 'left', 'right'].includes(value)
   }
 })
 
@@ -31,7 +36,14 @@ const noOfRedLines = computed(() => 10 - noOfGreenLines.value)
 
 <template>
   <div class="group relative w-max">
-    <div class="flex flex-col items-center">
+    <div
+      class="flex"
+      :class="{
+        'flex-col items-center': labelPosition === 'top' || labelPosition === 'bottom',
+        'flex-row items-center': labelPosition === 'left' || labelPosition === 'right'
+      }">
+      <p v-if="!hideLabel && labelPosition === 'top'" class="mb-0.5 text-sm text-secondary-600">{{ label }}</p>
+      <p v-if="!hideLabel && labelPosition === 'left'" class="mr-2 text-sm text-secondary-600">{{ label }}</p>
       <div class="flex flex-row gap-1">
         <div
           v-for="i in noOfGreenLines"
@@ -50,7 +62,8 @@ const noOfRedLines = computed(() => 10 - noOfGreenLines.value)
             'h-4 w-[0.25rem]': small
           }"></div>
       </div>
-      <p v-if="!hideLabel" class="mt-0.5 text-sm text-secondary-600">{{ label }}</p>
+      <p v-if="!hideLabel && labelPosition === 'bottom'" class="mt-0.5 text-sm text-secondary-600">{{ label }}</p>
+      <p v-if="!hideLabel && labelPosition === 'right'" class="ml-2 text-sm text-secondary-600">{{ label }}</p>
     </div>
     <span
       v-if="!hideHover"