mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-05-04 05:19:12 -04:00
Merge 2664b78bbb into b47d132839
This commit is contained in:
sharevb
GitHub
commit
2f17291d62
8 changed files with 453 additions and 6 deletions
7
components.d.ts
vendored
7
components.d.ts
vendored
|
|
@ -141,8 +141,11 @@ declare module '@vue/runtime-core' {
|
|||
NLayout: typeof import('naive-ui')['NLayout']
|
||||
NLayoutSider: typeof import('naive-ui')['NLayoutSider']
|
||||
NMenu: typeof import('naive-ui')['NMenu']
|
||||
NScrollbar: typeof import('naive-ui')['NScrollbar']
|
||||
NSlider: typeof import('naive-ui')['NSlider']
|
||||
NSpace: typeof import('naive-ui')['NSpace']
|
||||
NTable: typeof import('naive-ui')['NTable']
|
||||
NStatistic: typeof import('naive-ui')['NStatistic']
|
||||
NSwitch: typeof import('naive-ui')['NSwitch']
|
||||
NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
|
||||
OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
|
||||
PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']
|
||||
|
|
@ -160,7 +163,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']
|
||||
SafelinkDecoder: typeof import('./src/tools/safelink-decoder/safelink-decoder.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']
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@
|
|||
"@tiptap/pm": "2.1.6",
|
||||
"@tiptap/starter-kit": "2.1.6",
|
||||
"@tiptap/vue-3": "2.0.3",
|
||||
"@types/big.js": "^6.2.2",
|
||||
"@types/figlet": "^1.5.8",
|
||||
"@types/markdown-it": "^13.0.7",
|
||||
"@vicons/material": "^0.12.0",
|
||||
|
|
@ -52,6 +53,7 @@
|
|||
"@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",
|
||||
|
|
@ -83,9 +85,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",
|
||||
"randexp": "^0.5.3",
|
||||
"sql-formatter": "^13.0.0",
|
||||
|
|
|
|||
42
pnpm-lock.yaml
generated
42
pnpm-lock.yaml
generated
|
|
@ -29,6 +29,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
|
||||
'@types/figlet':
|
||||
specifier: ^1.5.8
|
||||
version: 1.5.8
|
||||
|
|
@ -53,6 +56,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
|
||||
|
|
@ -146,6 +152,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
|
||||
|
|
@ -155,6 +164,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
|
||||
|
|
@ -2937,6 +2949,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:
|
||||
|
|
@ -3412,7 +3428,7 @@ packages:
|
|||
dependencies:
|
||||
'@unhead/dom': 0.5.1
|
||||
'@unhead/schema': 0.5.1
|
||||
'@vueuse/shared': 11.0.3(vue@3.3.4)
|
||||
'@vueuse/shared': 11.1.0(vue@3.3.4)
|
||||
unhead: 0.5.1
|
||||
vue: 3.3.4
|
||||
transitivePeerDependencies:
|
||||
|
|
@ -4054,8 +4070,8 @@ packages:
|
|||
- vue
|
||||
dev: false
|
||||
|
||||
/@vueuse/shared@11.0.3(vue@3.3.4):
|
||||
resolution: {integrity: sha512-0rY2m6HS5t27n/Vp5cTDsKTlNnimCqsbh/fmT2LgE+aaU42EMfXo8+bNX91W9I7DDmxfuACXMmrd7d79JxkqWA==}
|
||||
/@vueuse/shared@11.1.0(vue@3.3.4):
|
||||
resolution: {integrity: sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==}
|
||||
dependencies:
|
||||
vue-demi: 0.14.10(vue@3.3.4)
|
||||
transitivePeerDependencies:
|
||||
|
|
@ -4278,6 +4294,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'}
|
||||
|
|
@ -7361,6 +7381,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:
|
||||
|
|
@ -7382,6 +7406,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'}
|
||||
|
|
@ -7589,6 +7618,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:
|
||||
|
|
|
|||
|
|
@ -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 emailNormalizer } from './email-normalizer';
|
||||
|
||||
import { tool as asciiTextDrawer } from './ascii-text-drawer';
|
||||
|
|
@ -172,7 +173,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
12
src/tools/sla-calculator/index.ts
Normal 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
81
src/tools/sla-calculator/sla-calculator.service.test.ts
Normal 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
126
src/tools/sla-calculator/sla-calculator.service.ts
Normal 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
179
src/tools/sla-calculator/sla-calculator.vue
Normal 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue