public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(new tool): SLA Computer

Browse Source 
Fix #738
This commit is contained in:
sharevb 2024-09-22 12:11:00 +02:00 committed by ShareVB
parent 80e46c9292
commit 0e73e5885c
9 changed files with 488 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components.d.ts vendored
View File

@ -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']

4
package.json
View File

@ -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",

53
pnpm-lock.yaml generated
View File

@ -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):
resolution: {integrity: sha512-TECVDTIedFlL0NUfHWncf3zF9Gc4VfdxfQc8JFwoVZQmxpONhLxFrlm0eHQeidHj4rdTPL3KXJa0TZCk1wnc5Q==}
/@vueuse/shared@11.1.0(vue@3.3.4):
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):
resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
/vue-demi@0.14.10(vue@3.3.4):
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):
resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
/vue-demi@0.14.5(vue@3.3.4):
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

33
src/composable/queryParams.ts
View File

@ -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;
}

8
src/tools/index.ts
View File

@ -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',

12
src/tools/sla-calculator/index.ts Normal file
View File

@ -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'),
});

81
src/tools/sla-calculator/sla-calculator.service.test.ts Normal file
View File

@ -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,
});
});
});
});

126
src/tools/sla-calculator/sla-calculator.service.ts Normal file
View File

@ -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(),
};
}

179
src/tools/sla-calculator/sla-calculator.vue Normal file
View File

@ -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>