From 0c2496e79fc2c9afccff01fd9746d9794ab088ee Mon Sep 17 00:00:00 2001 From: sharevb Date: Sun, 22 Sep 2024 12:11:00 +0200 Subject: [PATCH] feat(new tool): SLA Computer Fix #738 --- components.d.ts | 2 + package.json | 4 + pnpm-lock.yaml | 53 +++++- src/composable/queryParams.ts | 33 +++- src/tools/index.ts | 8 +- src/tools/sla-calculator/index.ts | 12 ++ .../sla-calculator.service.test.ts | 81 ++++++++ .../sla-calculator/sla-calculator.service.ts | 87 +++++++++ src/tools/sla-calculator/sla-calculator.vue | 179 ++++++++++++++++++ 9 files changed, 449 insertions(+), 10 deletions(-) create mode 100644 src/tools/sla-calculator/index.ts create mode 100644 src/tools/sla-calculator/sla-calculator.service.test.ts create mode 100644 src/tools/sla-calculator/sla-calculator.service.ts create mode 100644 src/tools/sla-calculator/sla-calculator.vue diff --git a/components.d.ts b/components.d.ts index d034fc780..d9e0cc551 100644 --- a/components.d.ts +++ b/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'] diff --git a/package.json b/package.json index ffa7bd4e2..cfc06c746 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dfacabd43..8b99d3f7f 100644 --- a/pnpm-lock.yaml +++ b/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): - 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 diff --git a/src/composable/queryParams.ts b/src/composable/queryParams.ts index 9699abbc1..7cc8cc0dd 100644 --- a/src/composable/queryParams.ts +++ b/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({ name, defaultValue }: { name: string; defaultValue: T }) { @@ -33,3 +40,27 @@ function useQueryParam({ name, defaultValue }: { name: string; defaultValue: }, }); } + +function useQueryParamOrStorage({ 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; +} diff --git a/src/tools/index.ts b/src/tools/index.ts index 52bdf8e37..0aff38be6 100644 --- a/src/tools/index.ts +++ b/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', diff --git a/src/tools/sla-calculator/index.ts b/src/tools/sla-calculator/index.ts new file mode 100644 index 000000000..da347ff56 --- /dev/null +++ b/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'), +}); diff --git a/src/tools/sla-calculator/sla-calculator.service.test.ts b/src/tools/sla-calculator/sla-calculator.service.test.ts new file mode 100644 index 000000000..f681bff17 --- /dev/null +++ b/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, + }); + }); + }); +}); diff --git a/src/tools/sla-calculator/sla-calculator.service.ts b/src/tools/sla-calculator/sla-calculator.service.ts new file mode 100644 index 000000000..fe31bb429 --- /dev/null +++ b/src/tools/sla-calculator/sla-calculator.service.ts @@ -0,0 +1,87 @@ +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); + +export function downTimeToSLA({ + downTimeSeconds, + mondayHours = 24, + tuesdayHours = 24, + wednesdayHours = 24, + thursdayHours = 24, + fridayHours = 24, + saturdayHours = 24, + sundayHours = 24, +}: { + downTimeSeconds: number + mondayHours?: number + tuesdayHours?: number + wednesdayHours?: number + thursdayHours?: number + fridayHours?: number + saturdayHours?: number + sundayHours?: number +}) { + 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); + + 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 = 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); + + 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(), + }; +} diff --git a/src/tools/sla-calculator/sla-calculator.vue b/src/tools/sla-calculator/sla-calculator.vue new file mode 100644 index 000000000..cb46bf581 --- /dev/null +++ b/src/tools/sla-calculator/sla-calculator.vue @@ -0,0 +1,179 @@ + + +