From 5146532db680d427d569fbd400149fd769fd063b Mon Sep 17 00:00:00 2001
From: ostiwe <ostiwe@icloud.com>
Date: Thu, 21 Aug 2025 13:06:27 +0300
Subject: [PATCH] feat: Working on main page

---
 status-web/app.vue                          |  47 ++-
 status-web/assets/global.scss               |  17 +
 status-web/components/Badge/index.vue       |  45 ++-
 status-web/nuxt.config.ts                   |  57 ++--
 status-web/types/response/publicServices.ts |   8 +
 status-web/types/response/services.ts       |  11 +
 status-web/view/public/ServicesView.vue     | 336 ++++----------------
 7 files changed, 204 insertions(+), 317 deletions(-)
 create mode 100644 status-web/types/response/publicServices.ts
 create mode 100644 status-web/types/response/services.ts

diff --git a/status-web/app.vue b/status-web/app.vue
index a925194..833658e 100644
--- a/status-web/app.vue
+++ b/status-web/app.vue
@@ -1,37 +1,36 @@
 <template>
   <div class="app-wrapper">
-    <TheApplicationHeader/>
+    <TheApplicationHeader />
     <div class="app-content">
-      <NuxtPage/>
+      <NuxtPage />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import TheApplicationHeader from "~/components/Header/TheApplicationHeader.vue";
-import moment from "moment";
+import TheApplicationHeader from '~/components/Header/TheApplicationHeader.vue'
+import moment from 'moment'
 
 moment.updateLocale('en', {
-  relativeTime : {
-    future: "in %s",
-    past:   "%s ago",
-    s  : 'a few seconds',
-    ss : '%ds',
-    m:  "m",
-    mm: "%dm",
-    h:  "h",
-    hh: "%dh",
-    d:  "d",
-    dd: "%dd",
-    w:  "w",
-    ww: "%dw",
-    M:  "a month",
-    MM: "%d months",
-    y:  "a year",
-    yy: "%d years"
-  }
-});
-
+    relativeTime: {
+        future: 'in %s',
+        past: '%s ago',
+        s: 'a few seconds',
+        ss: '%ds',
+        m: 'm',
+        mm: '%dm',
+        h: 'h',
+        hh: '%dh',
+        d: 'd',
+        dd: '%dd',
+        w: 'w',
+        ww: '%dw',
+        M: 'a month',
+        MM: '%d months',
+        y: 'a year',
+        yy: '%d years',
+    },
+})
 </script>
 
 <style lang="scss">
diff --git a/status-web/assets/global.scss b/status-web/assets/global.scss
index 3c17839..142e6b0 100644
--- a/status-web/assets/global.scss
+++ b/status-web/assets/global.scss
@@ -20,3 +20,20 @@ html {
     width: 80%;
   }
 }
+
+
+.user-select {
+  &__none {
+    user-select: none;
+  }
+}
+
+.cursor {
+  &-pointer {
+    cursor: pointer;
+  }
+
+  &-default {
+    cursor: default;
+  }
+}
\ No newline at end of file
diff --git a/status-web/components/Badge/index.vue b/status-web/components/Badge/index.vue
index 05e7e97..9152417 100644
--- a/status-web/components/Badge/index.vue
+++ b/status-web/components/Badge/index.vue
@@ -1,16 +1,34 @@
 <template>
-<div class="badge">
-  <slot/>
-</div>
+  <div
+    class="badge"
+    :class="[severity]"
+  >
+    <slot />
+  </div>
 </template>
 
 <script setup lang="ts">
-
 interface ComponentProps {
+    uptime?: number
 }
 
-defineProps<ComponentProps>()
+const props = defineProps<ComponentProps>()
 
+const severity = computed<string | null>(() => {
+    if (props.uptime === undefined) {
+        return null
+    }
+
+    if (props.uptime < 50) {
+        return 'danger'
+    }
+
+    if (props.uptime < 98) {
+        return 'warning'
+    }
+
+    return 'success'
+})
 </script>
 
 <style scoped lang="scss">
@@ -21,5 +39,22 @@ defineProps<ComponentProps>()
   align-items: center;
   background-color: #27272a;
   border-radius: 8px;
+  width: fit-content;
+
+  &.success {
+    background-color: color-mix(in srgb, #22c55e, transparent 0%);
+    color: white;
+  }
+
+  &.warning {
+    background-color: color-mix(in srgb, #f97316, transparent 0%);
+    color: white;
+  }
+
+  &.danger {
+    background-color: color-mix(in srgb, #ef4444, transparent 0%);
+    color: white;
+  }
+
 }
 </style>
diff --git a/status-web/nuxt.config.ts b/status-web/nuxt.config.ts
index 3578723..18c57c9 100644
--- a/status-web/nuxt.config.ts
+++ b/status-web/nuxt.config.ts
@@ -1,42 +1,55 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 
-import Aura from '@primeuix/themes/aura';
+import Aura from '@primeuix/themes/aura'
 
 export default defineNuxtConfig({
-    compatibilityDate: '2025-07-15',
-    devtools: {enabled: true},
     modules: [
         '@nuxt/eslint',
         '@nuxt/image',
         '@nuxt/fonts',
         '@primevue/nuxt-module',
     ],
-    eslint: {
-        checker: true,
+    ssr: true,
+    devtools: { enabled: true },
 
-        config: {
-            stylistic: true
-        }
+    runtimeConfig: {
+        apiHost: '',
     },
 
-    primevue: {
-        autoImport: false,
-        options: {
-            ripple: false,
-            inputVariant: 'filled',
-            theme: {
-                preset: Aura,
-            }
-        }
+    routeRules: {
+        '/api/**': {
+            proxy: {
+                to: process.env.NUXT_API_HOST + '/api/**',
+            },
+        },
     },
+    compatibilityDate: '2025-07-15',
     vite: {
         css: {
             preprocessorOptions: {
                 scss: {
                     additionalData: `@forward '~/assets/global';
-                    @use '~/assets/variables' as *;`
-                }
-            }
-        }
-    }
+                    @use '~/assets/variables' as *;`,
+                },
+            },
+        },
+    },
+    eslint: {
+        checker: true,
+
+        config: {
+            stylistic: true,
+        },
+    },
+
+    primevue: {
+        autoImport: true,
+        options: {
+            ripple: false,
+            inputVariant: 'filled',
+            theme: {
+                preset: Aura,
+            },
+        },
+    },
 })
diff --git a/status-web/types/response/publicServices.ts b/status-web/types/response/publicServices.ts
new file mode 100644
index 0000000..42541a8
--- /dev/null
+++ b/status-web/types/response/publicServices.ts
@@ -0,0 +1,8 @@
+import type { ServiceStatus } from '~/types/response/services'
+
+export interface PublicService {
+    name: string
+    description: string | null
+    statuses: ServiceStatus[]
+    uptime: number
+}
diff --git a/status-web/types/response/services.ts b/status-web/types/response/services.ts
new file mode 100644
index 0000000..b0711b2
--- /dev/null
+++ b/status-web/types/response/services.ts
@@ -0,0 +1,11 @@
+export interface ServiceStatus {
+    id: number
+    status: 'ok' | 'warn' | 'failed' | 'unchecked'
+    description: string | null
+    createdAt: string
+}
+
+// todo
+export interface Service {
+
+}
diff --git a/status-web/view/public/ServicesView.vue b/status-web/view/public/ServicesView.vue
index 8aebe45..1f22396 100644
--- a/status-web/view/public/ServicesView.vue
+++ b/status-web/view/public/ServicesView.vue
@@ -12,7 +12,13 @@
       <div class="services-view__items">
         <div class="services-view__items-item" v-for="(service, index) in services" :key="index">
           <div class="service-sla">
-            <Badge>313</Badge>
+            <Badge
+                v-tooltip.bottom="'Uptime based on 24h data'"
+                class="user-select__none cursor-default"
+                :uptime="service.uptime"
+            >
+              {{ service.uptime }}
+            </Badge>
           </div>
           <div class="service-describe">
             <div class="service-name">
@@ -20,14 +26,14 @@
             </div>
             <div class="service-beats">
               <div class="service-beats__items">
-                <template v-for="(status, statusIndex) in service.statuses">
-                  <div class="service-beats__beat" :class="[status.status !== 'ok' && status.status]"/>
+                <template v-for="(status, index) in service.statuses" :key="status.id !== 0 ? status.id : index">
+                  <div v-tooltip.bottom="`${moment(status.createdAt).format('MMMM Do YYYY on HH:mm:ss')}`" class="service-beats__beat" :class="[status.status !== 'ok' && status.status]"/>
                 </template>
               </div>
               <div class="service-beats__time-marks">
                 <div class="service-beats__time-mark">
-                  <template v-if="service.statuses[service.statuses.length-1].created_at">
-                    {{ moment(service.statuses[service.statuses.length - 1].created_at).fromNow() }}
+                  <template v-if="service.statuses[0].id !== 0 && service.statuses[0].createdAt">
+                    {{ moment(service.statuses[0].createdAt).fromNow() }}
                   </template>
                 </div>
                 <div class="service-beats__time-mark">
@@ -44,273 +50,36 @@
 </template>
 
 <script setup lang="ts">
-
 import moment from "moment";
+import type {PublicService} from "~/types/response/publicServices";
+import Badge from "~/components/Badge/index.vue";
 
-const data = () => [{
-  "name": "Google",
-  "description": "",
-  "statuses": [{"status": "ok", "description": null, "created_at": "2025-08-12T16:20:57.827967+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T16:20:27.469495+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T16:19:57.056752+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T16:19:26.685218+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T16:18:56.288006+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T16:18:25.911632+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T16:17:55.542015+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T16:17:25.156155+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T16:16:54.782756+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T16:16:24.415752+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T16:15:54.058146+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T16:15:23.69088+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T16:14:53.301829+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T16:14:22.773984+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T16:13:52.381666+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T16:13:22.009573+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T16:12:51.635888+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T16:12:21.226743+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T16:11:50.880814+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T16:11:20.505245+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T16:10:50.120006+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T16:10:19.578127+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T16:09:49.194372+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T16:09:18.827373+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T16:08:47.957157+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T16:08:17.580707+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T16:07:47.099859+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T16:07:16.729821+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T16:06:46.089596+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T16:06:15.724605+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T16:05:45.356776+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T16:05:14.966495+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T16:04:44.460982+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T16:04:14.083432+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T16:03:43.696022+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T16:03:13.331751+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T16:02:42.823081+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T16:02:12.431862+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T16:01:42.050791+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T16:01:11.681196+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T16:00:41.314134+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T16:00:10.935194+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:59:40.42464+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:59:10.067174+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:58:39.675942+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:58:09.314926+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:57:38.78441+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:57:08.414356+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:56:38.039887+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:56:07.621565+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:55:37.242952+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:55:06.865871+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:54:36.375438+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:54:05.922671+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:53:35.402821+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:53:05.038109+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:52:34.638959+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:52:04.247639+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:51:33.587371+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:51:03.207446+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:50:32.830169+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:50:02.458094+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:49:31.95123+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:49:01.496173+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:48:30.963678+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:48:00.44558+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:47:30.032314+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:46:59.519354+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:46:29.015325+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:45:58.654194+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:45:28.294263+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:44:57.789613+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:44:27.429592+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:43:57.017725+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:43:26.502239+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:42:55.962958+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:42:25.465646+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:41:55.086065+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:41:24.717618+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:40:54.132739+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:40:23.589956+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:39:53.027987+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:39:22.518751+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:38:52.144198+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:38:21.55561+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:37:50.930806+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:37:20.577347+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:36:50.246637+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:36:19.865257+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:35:49.448105+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:35:18.942123+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:34:48.595249+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:34:18.101417+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:33:47.596529+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:33:17.223596+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:32:46.722809+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:32:16.229815+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:31:45.556247+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:31:15.178402+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:30:44.681529+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:30:14.129416+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:29:43.627282+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:29:13.102839+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:28:42.596997+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:28:12.078199+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:27:41.44849+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:27:11.090738+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:26:40.588221+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:26:09.548993+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:25:39.181242+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:25:00.067772+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:24:29.56396+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:23:58.493895+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:23:28.126585+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:22:57.172504+03:00"}, {
-    "status": "ok",
-    "description": null,
-    "created_at": "2025-08-12T15:22:26.810091+03:00"
-  }, {"status": "ok", "description": null, "created_at": "2025-08-12T15:21:56.310724+03:00"}, {
-    "status": "warn",
-    "description": null,
-    "created_at": "2025-08-12T15:19:38.739323+03:00"
-  }, {"status": "warn", "description": null, "created_at": "2025-08-12T15:17:08.002109+03:00"}, {
-    "status": "warn",
-    "description": null,
-    "created_at": "2025-08-12T15:16:38.496063+03:00"
-  }]
-}]
+const {data, refresh} = useFetch<PublicService[]>('/api/public/service')
 
-const TARGET_COUNT_STATUSES = 60
+const updateInterval = ref<NodeJS.Timeout | null>(null);
 
-const services = computed(() => {
-  const items = data()
+// onMounted(() => {
+//   updateInterval.value = setInterval(async () => {
+//     await refresh()
+//   }, 5 * 60 * 1000)
+// })
+//
+// onBeforeUnmount(() => {
+//   if (updateInterval.value == null) {
+//     return
+//   }
+//
+//   updateInterval.value.close()
+//
+// })
 
-  const resultItems = []
+const services = computed<PublicService[]>(() => {
+  const items = data.value
+  if (!items) {
+    return []
+  }
 
-  items.forEach(item => {
-    const arrayOfStatuses = Array.from(item.statuses)
-    arrayOfStatuses.length = TARGET_COUNT_STATUSES
-    arrayOfStatuses.fill({created_at: null, description: null, status: 'unchecked'}, item.statuses.length)
-
-    item.statuses = arrayOfStatuses.reverse()
-
-    resultItems.push(item)
-  })
-
-  return resultItems
+  return items
 })
 
 
@@ -326,21 +95,56 @@ const services = computed(() => {
     flex-direction: column;
     gap: 48px;
 
+    &__summary {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 26px;
+      border-radius: 6px;
+
+      background-color: color-mix(in srgb, #22c55e, transparent 0%);
+
+      &-text {
+        & > span {
+          color: white;
+        }
+
+      }
+    }
+
     &__items {
       background-color: #0d1117;
       padding: 10px;
       border-radius: 8px;
 
+      display: flex;
+      gap: 20px;
+      flex-direction: column;
+
       &-item {
         display: flex;
         align-items: center;
         justify-content: space-between;
+        gap: 20px;
       }
     }
   }
 }
 
 .service {
+  &-sla {
+    flex-basis: 60px;
+  }
+
+  &-describe {
+    display: flex;
+    align-items: baseline;
+    gap: 20px;
+    width: 100%;
+    justify-content: space-between;
+  }
+
   &-beats {
     &__time {
       &-mark {