feat(new tool): SLA Computer

Fix #738

components.d.ts

@@ -166,6 +166,7 @@ declare module '@vue/runtime-core' {
     NProgress: typeof import('naive-ui')['NProgress']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSlider: typeof import('naive-ui')['NSlider']
+    NSpace: typeof import('naive-ui')['NSpace']
     NStatistic: typeof import('naive-ui')['NStatistic']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTable: typeof import('naive-ui')['NTable']
@@ -186,6 +187,7 @@ declare module '@vue/runtime-core' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default']
+    SlaCalculator: typeof import('./src/tools/sla-calculator/sla-calculator.vue')['default']
     SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']
     SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']
     SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']

package.json

@@ -41,12 +41,14 @@
     "@tiptap/pm": "2.1.6",
     "@tiptap/starter-kit": "2.1.6",
     "@tiptap/vue-3": "2.0.3",
+    "@types/big.js": "^6.2.2",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^10.3.0",
     "@vueuse/head": "^1.0.0",
     "@vueuse/router": "^10.0.0",
     "bcryptjs": "^2.4.3",
+    "big.js": "^6.2.2",
     "change-case": "^4.1.2",
     "colord": "^2.9.3",
     "composerize-ts": "^0.6.2",
@@ -74,9 +76,11 @@
     "netmask": "^2.0.2",
     "node-forge": "^1.3.1",
     "oui-data": "^1.0.10",
+    "parse-duration": "^1.1.0",
     "pdf-signature-reader": "^1.4.2",
     "pinia": "^2.0.34",
     "plausible-tracker": "^0.3.8",
+    "pretty-ms": "^9.1.0",
     "qrcode": "^1.5.1",
     "sql-formatter": "^13.0.0",
     "ua-parser-js": "^1.0.35",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ dependencies:
   '@tiptap/vue-3':
     specifier: 2.0.3
     version: 2.0.3(@tiptap/core@2.1.12)(@tiptap/pm@2.1.6)(vue@3.3.4)
+  '@types/big.js':
+    specifier: ^6.2.2
+    version: 6.2.2
   '@vicons/material':
     specifier: ^0.12.0
     version: 0.12.0
@@ -41,6 +44,9 @@ dependencies:
   bcryptjs:
     specifier: ^2.4.3
     version: 2.4.3
+  big.js:
+    specifier: ^6.2.2
+    version: 6.2.2
   change-case:
     specifier: ^4.1.2
     version: 4.1.2
@@ -122,6 +128,9 @@ dependencies:
   oui-data:
     specifier: ^1.0.10
     version: 1.0.10
+  parse-duration:
+    specifier: ^1.1.0
+    version: 1.1.0
   pdf-signature-reader:
     specifier: ^1.4.2
     version: 1.4.2
@@ -131,6 +140,9 @@ dependencies:
   plausible-tracker:
     specifier: ^0.3.8
     version: 0.3.8
+  pretty-ms:
+    specifier: ^9.1.0
+    version: 9.1.0
   qrcode:
     specifier: ^1.5.1
     version: 1.5.1
@@ -2908,6 +2920,10 @@ packages:
     resolution: {integrity: sha512-LiMQ6EOPob/4yUL66SZzu6Yh77cbzJFYll+ZfaPiPPFswtIlA/Fs1MzdKYA7JApHU49zQTbJGX3PDmCpIdDBRQ==}
     dev: true
 
+  /@types/big.js@6.2.2:
+    resolution: {integrity: sha512-e2cOW9YlVzFY2iScnGBBkplKsrn2CsObHQ2Hiw4V1sSyiGbgWL8IyqE3zFi1Pt5o1pdAtYkDAIsF3KKUPjdzaA==}
+    dev: false
+
   /@types/chai-subset@1.3.3:
     resolution: {integrity: sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==}
     dependencies:
@@ -3374,7 +3390,7 @@ packages:
     dependencies:
       '@unhead/dom': 0.5.1
       '@unhead/schema': 0.5.1
-      '@vueuse/shared': 10.6.1(vue@3.3.4)
+      '@vueuse/shared': 11.1.0(vue@3.3.4)
       unhead: 0.5.1
       vue: 3.3.4
     transitivePeerDependencies:
@@ -4016,10 +4032,10 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/shared@10.6.1(vue@3.3.4):
+  /@vueuse/shared@11.1.0(vue@3.3.4):
-    resolution: {integrity: sha512-TECVDTIedFlL0NUfHWncf3zF9Gc4VfdxfQc8JFwoVZQmxpONhLxFrlm0eHQeidHj4rdTPL3KXJa0TZCk1wnc5Q==}
+    resolution: {integrity: sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==}
     dependencies:
-      vue-demi: 0.14.6(vue@3.3.4)
+      vue-demi: 0.14.10(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -4240,6 +4256,10 @@ packages:
     resolution: {integrity: sha512-V/Hy/X9Vt7f3BbPJEi8BdVFMByHi+jNXrYkW3huaybV/kQ0KJg0Y6PkEMbn+zeT+i+SiKZ/HMqJGIIt4LZDqNQ==}
     dev: false
 
+  /big.js@6.2.2:
+    resolution: {integrity: sha512-y/ie+Faknx7sZA5MfGA2xKlu0GDv8RWrXGsmlteyJQ2lvoKv9GBK/fpRMc2qlSoBAgNxrixICFCBefIq8WCQpQ==}
+    dev: false
+
   /binary-extensions@2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
@@ -7302,6 +7322,10 @@ packages:
       callsites: 3.1.0
     dev: true
 
+  /parse-duration@1.1.0:
+    resolution: {integrity: sha512-z6t9dvSJYaPoQq7quMzdEagSFtpGu+utzHqqxmpVWNNZRIXnvqyCvn9XsTdh7c/w0Bqmdz3RB3YnRaKtpRtEXQ==}
+    dev: false
+
   /parse-entities@2.0.0:
     resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
     dependencies:
@@ -7323,6 +7347,11 @@ packages:
       lines-and-columns: 1.2.4
     dev: true
 
+  /parse-ms@4.0.0:
+    resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==}
+    engines: {node: '>=18'}
+    dev: false
+
   /parse-node-version@1.0.1:
     resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
     engines: {node: '>= 0.10'}
@@ -7535,6 +7564,13 @@ packages:
       react-is: 18.2.0
     dev: true
 
+  /pretty-ms@9.1.0:
+    resolution: {integrity: sha512-o1piW0n3tgKIKCwk2vpM/vOV13zjJzvP37Ioze54YlTHE06m4tjEbzg9WsKkvTuyYln2DHjo5pY4qrZGI0otpw==}
+    engines: {node: '>=18'}
+    dependencies:
+      parse-ms: 4.0.0
+    dev: false
+
   /prosemirror-changeset@2.2.1:
     resolution: {integrity: sha512-J7msc6wbxB4ekDFj+n9gTW/jav/p53kdlivvuppHsrZXCaQdVgRghoZbSS3kwrRyAstRVQ4/+u5k7YfLgkkQvQ==}
     dependencies:
@@ -9185,8 +9221,8 @@ packages:
       vue: 3.3.4
     dev: false
 
-  /vue-demi@0.14.5(vue@3.3.4):
+  /vue-demi@0.14.10(vue@3.3.4):
-    resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
@@ -9200,8 +9236,8 @@ packages:
       vue: 3.3.4
     dev: false
 
-  /vue-demi@0.14.6(vue@3.3.4):
+  /vue-demi@0.14.5(vue@3.3.4):
-    resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
+    resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
@@ -9497,6 +9533,7 @@ packages:
 
   /workbox-google-analytics@7.0.0:
     resolution: {integrity: sha512-MEYM1JTn/qiC3DbpvP2BVhyIH+dV/5BjHk756u9VbwuAhu0QHyKscTnisQuz21lfRpOwiS9z4XdqeVAKol0bzg==}
+    deprecated: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained
     dependencies:
       workbox-background-sync: 7.0.0
       workbox-core: 7.0.0

src/composable/queryParams.ts

@@ -1,7 +1,8 @@
 import { useRouteQuery } from '@vueuse/router';
 import { computed } from 'vue';
+import { useStorage } from '@vueuse/core';
 
-export { useQueryParam };
+export { useQueryParam, useQueryParamOrStorage };
 
 const transformers = {
   number: {
@@ -16,6 +17,12 @@ const transformers = {
     fromQuery: (value: string) => value.toLowerCase() === 'true',
     toQuery: (value: boolean) => (value ? 'true' : 'false'),
   },
+  object: {
+    fromQuery: (value: string) => {
+      return JSON.parse(value);
+    },
+    toQuery: (value: object) => JSON.stringify(value),
+  },
 };
 
 function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue: T }) {
@@ -33,3 +40,27 @@ function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue:
     },
   });
 }
+
+function useQueryParamOrStorage<T>({ name, storageName, defaultValue }: { name: string; storageName: string; defaultValue: T }) {
+  const type = typeof defaultValue;
+  const transformer = transformers[type as keyof typeof transformers] ?? transformers.string;
+
+  const storageRef = useStorage(storageName, defaultValue);
+  const proxyDefaultValue = transformer.toQuery(defaultValue as never);
+  const proxy = useRouteQuery(name, proxyDefaultValue);
+
+  const r = ref(defaultValue);
+
+  watch(r,
+    (value) => {
+      proxy.value = transformer.toQuery(value as never);
+      storageRef.value = value as never;
+    },
+    { deep: true });
+
+  r.value = (proxy.value && proxy.value !== proxyDefaultValue
+    ? transformer.fromQuery(proxy.value) as unknown as T
+    : storageRef.value as T) as never;
+
+  return r;
+}

src/tools/index.ts

@@ -1,6 +1,7 @@
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
+import { tool as slaCalculator } from './sla-calculator';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -151,7 +152,12 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Measurement',
-    components: [chronometer, temperatureConverter, benchmarkBuilder],
+    components: [
+      chronometer,
+      temperatureConverter,
+      benchmarkBuilder,
+      slaCalculator,
+    ],
   },
   {
     name: 'Text',

src/tools/sla-calculator/index.ts

@@ -0,0 +1,12 @@
+import { Clock } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'SLA calculator',
+  path: '/sla-calculator',
+  description: 'Service Level Agreement Calcultator',
+  keywords: ['sla', 'service', 'level', 'agreement', 'calculator'],
+  component: () => import('./sla-calculator.vue'),
+  icon: Clock,
+  createdAt: new Date('2024-05-11'),
+});

src/tools/sla-calculator/sla-calculator.service.test.ts

@@ -0,0 +1,81 @@
+import { describe, expect, it } from 'vitest';
+import { downTimeToSLA, slaToDowntimes } from './sla-calculator.service';
+
+describe('sla-calculator', () => {
+  describe('downTimeToSLA', () => {
+    it('compute correct values', () => {
+      expect(downTimeToSLA({
+        downTimeSeconds: 100,
+        mondayHours: 16,
+        tuesdayHours: 6,
+        wednesdayHours: 4,
+        thursdayHours: 24,
+        fridayHours: 21,
+        saturdayHours: 16,
+        sundayHours: 13,
+      })).to.deep.eq({
+        slaForDay: null,
+        slaForMonth: 99.99361155031703,
+        slaForQuarter: 99.99787051677234,
+        slaForWeek: 99.97222222222223,
+        slaForYear: 99.99946762919309,
+      });
+      expect(downTimeToSLA({
+        downTimeSeconds: 86400 / 10000,
+      })).to.deep.eq({
+        slaForDay: 99.99,
+        slaForMonth: 99.99967145115916,
+        slaForQuarter: 99.99989048371972,
+        slaForWeek: 99.99857142857142,
+        slaForYear: 99.99997262092992,
+      });
+      expect(downTimeToSLA({
+        downTimeSeconds: 86400 / 2,
+      })).to.deep.eq({
+        slaForDay: 50,
+        slaForMonth: 98.35725579580689,
+        slaForQuarter: 99.45241859860229,
+        slaForWeek: 92.85714285714286,
+        slaForYear: 99.86310464965058,
+      });
+    });
+  });
+  describe('slaToDowntimes', () => {
+    it('compute correct values', () => {
+      expect(slaToDowntimes({
+        targetSLA: 99,
+        mondayHours: 9,
+        tuesdayHours: 24,
+        wednesdayHours: 10,
+        thursdayHours: 8,
+        fridayHours: 3,
+        saturdayHours: 24,
+        sundayHours: 4,
+      })).to.deep.eq({
+        secondsPerDay: null,
+        secondsPerMonth: 12835.665,
+        secondsPerQuarter: 38506.995,
+        secondsPerWeek: 2952,
+        secondsPerYear: 154027.98,
+      });
+      expect(slaToDowntimes({
+        targetSLA: 99.99,
+      })).to.deep.eq({
+        secondsPerDay: 8.64,
+        secondsPerMonth: 262.9746,
+        secondsPerQuarter: 788.9238,
+        secondsPerWeek: 60.48,
+        secondsPerYear: 3155.6952,
+      });
+      expect(slaToDowntimes({
+        targetSLA: 99,
+      })).to.deep.eq({
+        secondsPerDay: 864,
+        secondsPerMonth: 26297.46,
+        secondsPerQuarter: 78892.38,
+        secondsPerWeek: 6048,
+        secondsPerYear: 315569.52,
+      });
+    });
+  });
+});

src/tools/sla-calculator/sla-calculator.service.ts

@@ -0,0 +1,126 @@
+import Big from 'big.js';
+
+const hoursDay = Big('24');
+const daysWeek = Big('7');
+const monthsYear = Big('12');
+const daysYear = Big('365.2425');
+const weeksYear = daysYear.div(daysWeek);
+const daysMonth = daysYear.div(monthsYear);
+const weeksMonth = daysMonth.div(daysWeek);
+
+interface DaysHours {
+  mondayHours?: number
+  tuesdayHours?: number
+  wednesdayHours?: number
+  thursdayHours?: number
+  fridayHours?: number
+  saturdayHours?: number
+  sundayHours?: number
+}
+
+function prepareDurations({
+  mondayHours = 24,
+  tuesdayHours = 24,
+  wednesdayHours = 24,
+  thursdayHours = 24,
+  fridayHours = 24,
+  saturdayHours = 24,
+  sundayHours = 24,
+}: DaysHours) {
+  const durHoursWeek = Big(mondayHours).plus(tuesdayHours).plus(wednesdayHours).plus(thursdayHours).plus(fridayHours).plus(saturdayHours).plus(sundayHours);
+  const durSecondsWeek = durHoursWeek.mul('3600');
+  const durSecondsDay = durSecondsWeek.div(daysWeek);
+  const durSecondsMonth = durSecondsWeek.mul(weeksMonth);
+  const durSecondsQuarter = durSecondsMonth.mul('3');
+  const durSecondsYear = durSecondsWeek.mul(weeksYear);
+  const fullWeekHours = daysWeek.mul(hoursDay);
+
+  return {
+    durHoursWeek,
+    durSecondsWeek,
+    durSecondsDay,
+    durSecondsMonth,
+    durSecondsQuarter,
+    durSecondsYear,
+    fullWeekHours,
+  };
+}
+
+export function downTimeToSLA({
+  downTimeSeconds,
+  mondayHours = 24,
+  tuesdayHours = 24,
+  wednesdayHours = 24,
+  thursdayHours = 24,
+  fridayHours = 24,
+  saturdayHours = 24,
+  sundayHours = 24,
+}: {
+  downTimeSeconds: number
+} & DaysHours) {
+  const {
+    durHoursWeek,
+    durSecondsWeek,
+    durSecondsDay,
+    durSecondsMonth,
+    durSecondsQuarter,
+    durSecondsYear,
+    fullWeekHours,
+  } = prepareDurations({
+    mondayHours, tuesdayHours, wednesdayHours, thursdayHours, fridayHours, saturdayHours, sundayHours,
+  });
+
+  const one = Big('1');
+  const hundred = Big('100');
+  const downTimeSecondsBig = Big(downTimeSeconds);
+
+  return {
+    slaForDay: fullWeekHours.eq(durHoursWeek) ? one.minus(downTimeSecondsBig.div(durSecondsDay)).mul(hundred).toNumber() : null,
+    slaForWeek: one.minus(downTimeSecondsBig.div(durSecondsWeek)).mul(hundred).toNumber(),
+    slaForMonth: one.minus(downTimeSecondsBig.div(durSecondsMonth)).mul(hundred).toNumber(),
+    slaForQuarter: one.minus(downTimeSecondsBig.div(durSecondsQuarter)).mul(hundred).toNumber(),
+    slaForYear: one.minus(downTimeSecondsBig.div(durSecondsYear)).mul(hundred).toNumber(),
+  };
+}
+
+export function slaToDowntimes({
+  targetSLA,
+  mondayHours = 24,
+  tuesdayHours = 24,
+  wednesdayHours = 24,
+  thursdayHours = 24,
+  fridayHours = 24,
+  saturdayHours = 24,
+  sundayHours = 24,
+}: {
+  targetSLA: number
+  mondayHours?: number
+  tuesdayHours?: number
+  wednesdayHours?: number
+  thursdayHours?: number
+  fridayHours?: number
+  saturdayHours?: number
+  sundayHours?: number
+}) {
+  const {
+    durHoursWeek,
+    durSecondsWeek,
+    durSecondsDay,
+    durSecondsMonth,
+    durSecondsQuarter,
+    durSecondsYear,
+    fullWeekHours,
+  } = prepareDurations({
+    mondayHours, tuesdayHours, wednesdayHours, thursdayHours, fridayHours, saturdayHours, sundayHours,
+  });
+
+  const allowedDowntime = Big('1').minus(Big(targetSLA).div('100'));
+
+  return {
+    secondsPerDay: fullWeekHours.eq(durHoursWeek) ? allowedDowntime.mul(durSecondsDay).toNumber() : null,
+    secondsPerWeek: allowedDowntime.mul(durSecondsWeek).toNumber(),
+    secondsPerMonth: allowedDowntime.mul(durSecondsMonth).toNumber(),
+    secondsPerQuarter: allowedDowntime.mul(durSecondsQuarter).toNumber(),
+    secondsPerYear: allowedDowntime.mul(durSecondsYear).toNumber(),
+  };
+}

src/tools/sla-calculator/sla-calculator.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import prettyMilliseconds from 'pretty-ms';
+import parse from 'parse-duration';
+import { downTimeToSLA, slaToDowntimes } from './sla-calculator.service';
+import { useQueryParam, useQueryParamOrStorage } from '@/composable/queryParams';
+import { useValidation } from '@/composable/validation';
+
+function prettySeconds(seconds: number | null) {
+  if (!seconds) {
+    return '';
+  }
+  return prettyMilliseconds(seconds * 1000);
+}
+
+const daysHours = useQueryParamOrStorage<{
+  mon?: number
+  tue?: number
+  wed?: number
+  thu?: number
+  fri?: number
+  sat?: number
+  sun?: number
+}>({
+  name: 'days',
+  storageName: 'sla:days',
+  defaultValue: {
+    mon: 24,
+    tue: 24,
+    wed: 24,
+    thu: 24,
+    fri: 24,
+    sat: 24,
+    sun: 24,
+  },
+});
+const inputSLA = useQueryParam({ name: 'sla', defaultValue: 99.99 });
+const outputDownTimes = computed(() => {
+  const weekdaysHours = daysHours.value;
+  const downtimesSeconds = slaToDowntimes({
+    targetSLA: inputSLA.value,
+    mondayHours: weekdaysHours.mon,
+    tuesdayHours: weekdaysHours.tue,
+    wednesdayHours: weekdaysHours.wed,
+    thursdayHours: weekdaysHours.thu,
+    fridayHours: weekdaysHours.fri,
+    saturdayHours: weekdaysHours.sat,
+    sundayHours: weekdaysHours.sun,
+  });
+  return {
+    durationPerDay: prettySeconds(downtimesSeconds.secondsPerDay),
+    durationPerMonth: prettySeconds(downtimesSeconds.secondsPerMonth),
+    durationPerQuarter: prettySeconds(downtimesSeconds.secondsPerQuarter),
+    durationPerWeek: prettySeconds(downtimesSeconds.secondsPerWeek),
+    durationPerYear: prettySeconds(downtimesSeconds.secondsPerYear),
+  };
+});
+
+const inputDuration = useQueryParam({ name: 'dur', defaultValue: '1s' });
+const inputDurationValidation = useValidation({
+  source: inputDuration,
+  rules: [
+    {
+      message: 'Invalid duration',
+      validator: value => parse(value),
+    },
+  ],
+});
+const inputDurationSeconds = computed(() => {
+  if (!inputDurationValidation.isValid) {
+    return 0;
+  }
+  return parse(inputDuration.value, 's') || 0;
+});
+const outputSLAs = computed(() => {
+  const weekdaysHours = daysHours.value;
+  const slas = downTimeToSLA({
+    downTimeSeconds: inputDurationSeconds.value,
+    mondayHours: weekdaysHours.mon,
+    tuesdayHours: weekdaysHours.tue,
+    wednesdayHours: weekdaysHours.wed,
+    thursdayHours: weekdaysHours.thu,
+    fridayHours: weekdaysHours.fri,
+    saturdayHours: weekdaysHours.sat,
+    sundayHours: weekdaysHours.sun,
+  });
+  return {
+    slaForDay: slas.slaForDay?.toPrecision(6),
+    slaForWeek: slas.slaForWeek.toPrecision(6),
+    slaForMonth: slas.slaForMonth.toPrecision(6),
+    slaForQuarter: slas.slaForQuarter.toPrecision(6),
+    slaForYear: slas.slaForYear.toPrecision(6),
+  };
+});
+</script>
+
+<template>
+  <div>
+    <c-card title="SLA to downtimes" mb-2>
+      <n-form-item label="Agreed SLA" label-placement="left">
+        <n-input-number v-model:value="inputSLA" :min="0" :max="100" />
+      </n-form-item>
+
+      <n-divider />
+
+      <n-form-item v-if="outputDownTimes.durationPerDay" label="Daily downtime" label-placement="left" label-width="100">
+        <input-copyable :value="outputDownTimes.durationPerDay" />
+      </n-form-item>
+      <n-form-item label="Weekly downtime" label-placement="left" label-width="100">
+        <input-copyable :value="outputDownTimes.durationPerWeek" />
+      </n-form-item>
+      <n-form-item label="Monthly downtime" label-placement="left" label-width="100">
+        <input-copyable :value="outputDownTimes.durationPerMonth" />
+      </n-form-item>
+      <n-form-item label="Quarterly downtime" label-placement="left" label-width="100">
+        <input-copyable :value="outputDownTimes.durationPerQuarter" />
+      </n-form-item>
+      <n-form-item label="Yearly downtime" label-placement="left" label-width="100">
+        <input-copyable :value="outputDownTimes.durationPerYear" />
+      </n-form-item>
+    </c-card>
+
+    <c-card title="Downtime to SLA" mb-2>
+      <c-input-text
+        v-model:value="inputDuration"
+        label="Downtime duration"
+        label-position="left"
+        placeholder="Put downtime duration here..."
+        :validation="inputDurationValidation"
+        mb-2
+      />
+
+      <n-divider />
+
+      <n-form-item v-if="outputSLAs.slaForDay" label="Daily SLA" label-placement="left" label-width="100">
+        <input-copyable :value="outputSLAs.slaForDay" />
+      </n-form-item>
+      <n-form-item label="Weekly SLA" label-placement="left" label-width="100">
+        <input-copyable :value="outputSLAs.slaForWeek" />
+      </n-form-item>
+      <n-form-item label="Monthly SLA" label-placement="left" label-width="100">
+        <input-copyable :value="outputSLAs.slaForMonth" />
+      </n-form-item>
+      <n-form-item label="Quarterly SLA" label-placement="left" label-width="100">
+        <input-copyable :value="outputSLAs.slaForQuarter" />
+      </n-form-item>
+      <n-form-item label="Yearly SLA" label-placement="left" label-width="100">
+        <input-copyable :value="outputSLAs.slaForYear" />
+      </n-form-item>
+    </c-card>
+
+    <c-card title="Weekdays hours">
+      <div flex flex-wrap gap-1>
+        <n-form-item label="Monday" flex-1>
+          <n-input-number v-model:value="daysHours.mon" :min="0" :max="24" />
+        </n-form-item>
+        <n-form-item label="Tuesday" flex-1>
+          <n-input-number v-model:value="daysHours.tue" :min="0" :max="24" />
+        </n-form-item>
+        <n-form-item label="Wednesday" flex-1>
+          <n-input-number v-model:value="daysHours.wed" :min="0" :max="24" />
+        </n-form-item>
+        <n-form-item label="Thursday" flex-1>
+          <n-input-number v-model:value="daysHours.thu" :min="0" :max="24" />
+        </n-form-item>
+        <n-form-item label="Friday" flex-1>
+          <n-input-number v-model:value="daysHours.fri" :min="0" :max="24" />
+        </n-form-item>
+      </div>
+      <div flex flex-wrap gap-1>
+        <n-form-item label="Saturday" flex-1>
+          <n-input-number v-model:value="daysHours.sat" :min="0" :max="24" />
+        </n-form-item>
+        <n-form-item label="Sunday" flex-1>
+          <n-input-number v-model:value="daysHours.sun" :min="0" :max="24" />
+        </n-form-item>
+      </div>
+    </c-card>
+  </div>
+</template>