SLAMetrics.vue

app/javascript/dashboard/i18n/locale/en/report.json

@@ -507,6 +507,16 @@
     "SATURDAY": "Saturday"
   },
   "SLA_REPORTS": {
-    "HEADER": "SLA Reports"
+    "HEADER": "SLA Reports",
+    "METRICS":{
+      "HIT_RATE": {
+        "LABEL": "Hit Rate",
+        "TOOLTIP": "Percentage of SLAs created were completed successfully"
+      },
+      "NO_OF_BREACHES": {
+        "LABEL": "Number of Breaches",
+        "TOOLTIP": "The total SLA breaches in a certain period."
+      }
+    }
   }
 }

app/javascript/dashboard/routes/dashboard/settings/reports/SLAMetrics.vue

@@ -1,54 +0,0 @@
-<script setup>
-// defineProps({
-//   keepAlive: {
-//     type: Boolean,
-//     default: true,
-//   },
-// });
-</script>
-
-<template>
-  <div
-    class="flex w-full gap-14 bg-white dark:bg-slate-900 rounded-xl border border-slate-75 dark:border-slate-700/50 px-6 py-4 max-h-[92px] h-full"
-  >
-    <div class="flex flex-col items-start justify-center min-w-[160px] gap-2">
-      <span
-        class="inline-flex items-center gap-1 tracking-[-0.6%] text-sm text-slate-700 dark:text-slate-200 font-medium"
-      >
-        Hit rate
-        <fluent-icon
-          v-tooltip.right="`Hit rate`"
-          size="14"
-          icon="information"
-          type="outline"
-          class="flex-shrink-0 hidden text-sm font-normal sm:flex sm:font-medium text-slate-500 dark:text-slate-500"
-        />
-      </span>
-      <span
-        class="text-2xl font-medium text-slate-900 dark:text-slate-25 tracking-[-1.5%]"
-      >
-        12%
-      </span>
-    </div>
-    <div class="border border-slate-75 dark:border-slate-700/50 h-full w-px" />
-    <div class="flex flex-col gap-2 items-start justify-center min-w-[160px]">
-      <span
-        class="inline-flex items-center gap-1 tracking-[-0.6%] text-sm text-slate-700 dark:text-slate-200 font-medium"
-      >
-        No. of breaches
-        <fluent-icon
-          v-tooltip.right="`No of breaches`"
-          size="14"
-          icon="information"
-          type="outline"
-          class="flex-shrink-0 hidden text-sm font-normal sm:flex sm:font-medium text-slate-500 dark:text-slate-500"
-        />
-      </span>
-      <span
-        class="text-2xl font-medium text-slate-900 dark:text-slate-25 tracking-[-1.5%]"
-      >
-        5
-      </span>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="flex flex-col flex-1 overflow-auto p-4 font-inter gap-6">
-    <SLAMetrics />
+  <div class="flex flex-col flex-1 gap-6 p-4 overflow-auto font-inter">
+    <SLAMetrics :hit-rate="`12%`" :no-of-breaches="5" />
     <SLATable />
   </div>
 </template>
 <script>
-import SLAMetrics from './SLAMetrics.vue';
-import SLATable from './SLATable.vue';
+import SLAMetrics from './components/SLA/SLAMetrics.vue';
+import SLATable from './components/SLA/SLATable.vue';
 export default {
   name: 'SLAReports',
   components: {

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue

@@ -0,0 +1,38 @@
+<script setup>
+defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  value: {
+    type: [String, Number],
+    required: true,
+  },
+  toolTip: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 items-start justify-center min-w-[160px]">
+    <span
+      class="inline-flex items-center gap-1 tracking-[-0.6%] text-sm text-slate-700 dark:text-slate-200 font-medium"
+    >
+      {{ label }}
+      <fluent-icon
+        v-tooltip.right="toolTip"
+        size="14"
+        icon="information"
+        type="outline"
+        class="flex-shrink-0 hidden text-sm font-normal sm:flex sm:font-medium text-slate-500 dark:text-slate-500"
+      />
+    </span>
+    <span
+      class="text-2xl font-medium text-slate-900 dark:text-slate-25 tracking-[-1.5%]"
+    >
+      {{ value }}
+    </span>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue

@@ -0,0 +1,31 @@
+<script setup>
+import SLAMetricCard from './SLAMetricCard.vue';
+defineProps({
+  hitRate: {
+    type: String,
+    required: true,
+  },
+  noOfBreaches: {
+    type: Number,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="flex w-full gap-14 bg-white dark:bg-slate-900 rounded-xl border border-slate-75 dark:border-slate-700/50 px-6 py-4 max-h-[92px] h-full"
+  >
+    <SLA-metric-card
+      :label="$t('SLA_REPORTS.METRICS.HIT_RATE.LABEL')"
+      :value="hitRate"
+      :tool-tip="$t('SLA_REPORTS.METRICS.HIT_RATE.TOOLTIP')"
+    />
+    <div class="w-px h-full border border-slate-75 dark:border-slate-700/50" />
+    <SLAMetricCard
+      label="No of Breaches"
+      :value="noOfBreaches"
+      :tool-tip="$t('SLA_REPORTS.METRICS.NO_OF_BREACHES.TOOLTIP')"
+    />
+  </div>
+</template>