dev
This commit is contained in:
@@ -9,6 +9,29 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import TheApplicationHeader from "~/components/Header/TheApplicationHeader.vue";
|
||||
import moment from "moment";
|
||||
|
||||
moment.updateLocale('en', {
|
||||
relativeTime : {
|
||||
future: "in %s",
|
||||
past: "%s ago",
|
||||
s : 'a few seconds',
|
||||
ss : '%ds',
|
||||
m: "m",
|
||||
mm: "%dm",
|
||||
h: "h",
|
||||
hh: "%dh",
|
||||
d: "d",
|
||||
dd: "%dd",
|
||||
w: "w",
|
||||
ww: "%dw",
|
||||
M: "a month",
|
||||
MM: "%d months",
|
||||
y: "a year",
|
||||
yy: "%d years"
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@@ -12,3 +12,11 @@
|
||||
html {
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
.container {
|
||||
&-center {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
25
status-web/components/Badge/index.vue
Normal file
25
status-web/components/Badge/index.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div class="badge">
|
||||
<slot/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
interface ComponentProps {
|
||||
}
|
||||
|
||||
defineProps<ComponentProps>()
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.badge {
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #27272a;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,128 @@
|
||||
// @ts-check
|
||||
import withNuxt from './.nuxt/eslint.config.mjs'
|
||||
import stylistic from '@stylistic/eslint-plugin'
|
||||
import parser from 'vue-eslint-parser'
|
||||
import eslintParser from '@typescript-eslint/parser'
|
||||
|
||||
export default withNuxt(
|
||||
// Your custom configs here
|
||||
{
|
||||
plugins: {
|
||||
'@stylistic': stylistic,
|
||||
},
|
||||
files: ['**/*.{ts,js,vue}'],
|
||||
languageOptions: {
|
||||
parser: parser,
|
||||
ecmaVersion: 2018,
|
||||
sourceType: 'module',
|
||||
parserOptions: {
|
||||
parser: eslintParser,
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
'vue/multi-word-component-names': 'off',
|
||||
'nuxt/no-cjs-in-config': 'off',
|
||||
'vue/no-unused-components': 'off',
|
||||
'import/named': 'off',
|
||||
'vue/max-attributes-per-line': [
|
||||
'error',
|
||||
{
|
||||
singleline: {
|
||||
max: 1,
|
||||
},
|
||||
multiline: {
|
||||
max: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
'vue/html-self-closing': [
|
||||
'error',
|
||||
{
|
||||
html: {
|
||||
void: 'any',
|
||||
normal: 'always',
|
||||
component: 'always',
|
||||
},
|
||||
svg: 'always',
|
||||
math: 'always',
|
||||
},
|
||||
],
|
||||
'camelcase': ['off', { properties: 'never' }],
|
||||
'no-console': ['error', { allow: ['warn', 'error'] }],
|
||||
'no-unused-expressions': 'error',
|
||||
'no-dupe-else-if': 1,
|
||||
'no-duplicate-case': 2,
|
||||
'no-duplicate-imports': 2,
|
||||
'no-fallthrough': 2,
|
||||
'no-unreachable': 2,
|
||||
'no-unsafe-optional-chaining': 2,
|
||||
'no-unsafe-negation': 2,
|
||||
'valid-typeof': 2,
|
||||
'max-depth': ['error', 3],
|
||||
'eqeqeq': 2,
|
||||
'no-var': 2,
|
||||
'prefer-const': 2,
|
||||
'consistent-return': 2,
|
||||
'no-useless-return': 2,
|
||||
'@stylistic/indent': ['error', 4],
|
||||
'@stylistic/operator-linebreak': [
|
||||
'error',
|
||||
'after',
|
||||
{
|
||||
overrides: {
|
||||
'?': 'before',
|
||||
':': 'before',
|
||||
},
|
||||
},
|
||||
],
|
||||
'@stylistic/comma-dangle': [
|
||||
'error',
|
||||
{
|
||||
arrays: 'always-multiline',
|
||||
objects: 'always-multiline',
|
||||
imports: 'always-multiline',
|
||||
exports: 'always-multiline',
|
||||
functions: 'always-multiline',
|
||||
},
|
||||
],
|
||||
'@stylistic/max-len': [
|
||||
'error',
|
||||
{
|
||||
code: 120,
|
||||
tabWidth: 5,
|
||||
ignoreUrls: true,
|
||||
ignoreStrings: true,
|
||||
ignoreTemplateLiterals: true,
|
||||
ignoreRegExpLiterals: true,
|
||||
},
|
||||
],
|
||||
'@stylistic/array-element-newline': ['error', 'consistent'],
|
||||
'@stylistic/function-call-argument-newline': ['error', 'consistent'],
|
||||
'@stylistic/function-paren-newline': ['error', 'multiline-arguments'],
|
||||
'@stylistic/newline-per-chained-call': ['error', { ignoreChainWithDepth: 2 }],
|
||||
'@stylistic/no-multiple-empty-lines': 'error',
|
||||
'@stylistic/object-curly-spacing': ['error', 'always'],
|
||||
'@stylistic/block-spacing': ['error', 'always'],
|
||||
'@stylistic/brace-style': ['error', '1tbs'],
|
||||
'@stylistic/key-spacing': 'error',
|
||||
'@stylistic/linebreak-style': 'error',
|
||||
'@stylistic/member-delimiter-style': 'error',
|
||||
'@stylistic/no-whitespace-before-property': 'error',
|
||||
'@stylistic/quotes': ['error', 'single'],
|
||||
'@stylistic/space-before-blocks': 'error',
|
||||
'@stylistic/eol-last': ['error', 'always'],
|
||||
'@stylistic/padding-line-between-statements': [
|
||||
'error',
|
||||
{
|
||||
blankLine: 'always',
|
||||
prev: '*',
|
||||
next: 'return',
|
||||
},
|
||||
{
|
||||
blankLine: 'always',
|
||||
prev: 'block-like',
|
||||
next: '*',
|
||||
},
|
||||
],
|
||||
'@stylistic/semi': ['error', 'never'],
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
|
||||
import Aura from '@primeuix/themes/aura';
|
||||
|
||||
export default defineNuxtConfig({
|
||||
compatibilityDate: '2025-07-15',
|
||||
devtools: {enabled: true},
|
||||
@@ -8,12 +11,30 @@ export default defineNuxtConfig({
|
||||
'@nuxt/fonts',
|
||||
'@primevue/nuxt-module',
|
||||
],
|
||||
eslint: {
|
||||
checker: true,
|
||||
|
||||
vite:{
|
||||
config: {
|
||||
stylistic: true
|
||||
}
|
||||
},
|
||||
|
||||
primevue: {
|
||||
autoImport: false,
|
||||
options: {
|
||||
ripple: false,
|
||||
inputVariant: 'filled',
|
||||
theme: {
|
||||
preset: Aura,
|
||||
}
|
||||
}
|
||||
},
|
||||
vite: {
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
additionalData: `@use '~/assets/variables.scss' as *;`
|
||||
additionalData: `@forward '~/assets/global';
|
||||
@use '~/assets/variables' as *;`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,14 +18,23 @@
|
||||
"@nuxt/image": "1.11.0",
|
||||
"@primeuix/themes": "^1.2.3",
|
||||
"eslint": "^9.0.0",
|
||||
"moment": "^2.30.1",
|
||||
"nuxt": "^3.18.1",
|
||||
"primevue": "^4.3.7",
|
||||
"vue": "^3.5.18",
|
||||
"vue-router": "^4.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxtjs/eslint-config-typescript": "^12.1.0",
|
||||
"@primevue/nuxt-module": "^4.3.7",
|
||||
"sass-embedded": "^1.90.0"
|
||||
"@stylistic/eslint-plugin": "^5.2.3",
|
||||
"@typescript-eslint/parser": "^8.39.1",
|
||||
"eslint-plugin-vue": "^10.4.0",
|
||||
"sass-embedded": "^1.90.0",
|
||||
"typescript": "^5.9.2",
|
||||
"typescript-eslint": "^8.39.1",
|
||||
"vite-plugin-eslint2": "^5.0.4",
|
||||
"vue-eslint-parser": "^10.2.0"
|
||||
},
|
||||
"packageManager": "yarn@4.9.2"
|
||||
}
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import ServicesView from "~/view/public/ServicesView.vue";
|
||||
|
||||
import ServicesView from '~/view/public/ServicesView.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ServicesView/>
|
||||
<ServicesView />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -1,13 +1,388 @@
|
||||
<template>
|
||||
<div class="container-center">
|
||||
<div class="services-view">
|
||||
|
||||
<div class="services-view__summary">
|
||||
<div class="services-view__summary-text">
|
||||
<span>
|
||||
All services is alive
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="services-view__items">
|
||||
<div class="services-view__items-item" v-for="(service, index) in services" :key="index">
|
||||
<div class="service-sla">
|
||||
<Badge>313</Badge>
|
||||
</div>
|
||||
<div class="service-describe">
|
||||
<div class="service-name">
|
||||
<span>{{ service.name }}</span>
|
||||
</div>
|
||||
<div class="service-beats">
|
||||
<div class="service-beats__items">
|
||||
<template v-for="(status, statusIndex) in service.statuses">
|
||||
<div class="service-beats__beat" :class="[status.status !== 'ok' && status.status]"/>
|
||||
</template>
|
||||
</div>
|
||||
<div class="service-beats__time-marks">
|
||||
<div class="service-beats__time-mark">
|
||||
<template v-if="service.statuses[service.statuses.length-1].created_at">
|
||||
{{ moment(service.statuses[service.statuses.length - 1].created_at).fromNow() }}
|
||||
</template>
|
||||
</div>
|
||||
<div class="service-beats__time-mark">
|
||||
<span>Now</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import moment from "moment";
|
||||
|
||||
const data = () => [{
|
||||
"name": "Google",
|
||||
"description": "",
|
||||
"statuses": [{"status": "ok", "description": null, "created_at": "2025-08-12T16:20:57.827967+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T16:20:27.469495+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T16:19:57.056752+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T16:19:26.685218+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T16:18:56.288006+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T16:18:25.911632+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T16:17:55.542015+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T16:17:25.156155+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T16:16:54.782756+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T16:16:24.415752+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T16:15:54.058146+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T16:15:23.69088+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T16:14:53.301829+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T16:14:22.773984+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T16:13:52.381666+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T16:13:22.009573+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T16:12:51.635888+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T16:12:21.226743+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T16:11:50.880814+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T16:11:20.505245+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T16:10:50.120006+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T16:10:19.578127+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T16:09:49.194372+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T16:09:18.827373+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T16:08:47.957157+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T16:08:17.580707+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T16:07:47.099859+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T16:07:16.729821+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T16:06:46.089596+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T16:06:15.724605+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T16:05:45.356776+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T16:05:14.966495+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T16:04:44.460982+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T16:04:14.083432+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T16:03:43.696022+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T16:03:13.331751+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T16:02:42.823081+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T16:02:12.431862+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T16:01:42.050791+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T16:01:11.681196+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T16:00:41.314134+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T16:00:10.935194+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:59:40.42464+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:59:10.067174+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:58:39.675942+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:58:09.314926+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:57:38.78441+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:57:08.414356+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:56:38.039887+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:56:07.621565+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:55:37.242952+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:55:06.865871+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:54:36.375438+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:54:05.922671+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:53:35.402821+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:53:05.038109+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:52:34.638959+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:52:04.247639+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:51:33.587371+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:51:03.207446+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:50:32.830169+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:50:02.458094+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:49:31.95123+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:49:01.496173+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:48:30.963678+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:48:00.44558+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:47:30.032314+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:46:59.519354+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:46:29.015325+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:45:58.654194+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:45:28.294263+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:44:57.789613+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:44:27.429592+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:43:57.017725+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:43:26.502239+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:42:55.962958+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:42:25.465646+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:41:55.086065+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:41:24.717618+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:40:54.132739+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:40:23.589956+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:39:53.027987+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:39:22.518751+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:38:52.144198+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:38:21.55561+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:37:50.930806+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:37:20.577347+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:36:50.246637+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:36:19.865257+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:35:49.448105+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:35:18.942123+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:34:48.595249+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:34:18.101417+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:33:47.596529+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:33:17.223596+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:32:46.722809+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:32:16.229815+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:31:45.556247+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:31:15.178402+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:30:44.681529+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:30:14.129416+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:29:43.627282+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:29:13.102839+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:28:42.596997+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:28:12.078199+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:27:41.44849+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:27:11.090738+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:26:40.588221+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:26:09.548993+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:25:39.181242+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:25:00.067772+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:24:29.56396+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:23:58.493895+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:23:28.126585+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:22:57.172504+03:00"}, {
|
||||
"status": "ok",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:22:26.810091+03:00"
|
||||
}, {"status": "ok", "description": null, "created_at": "2025-08-12T15:21:56.310724+03:00"}, {
|
||||
"status": "warn",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:19:38.739323+03:00"
|
||||
}, {"status": "warn", "description": null, "created_at": "2025-08-12T15:17:08.002109+03:00"}, {
|
||||
"status": "warn",
|
||||
"description": null,
|
||||
"created_at": "2025-08-12T15:16:38.496063+03:00"
|
||||
}]
|
||||
}]
|
||||
|
||||
const TARGET_COUNT_STATUSES = 60
|
||||
|
||||
const services = computed(() => {
|
||||
const items = data()
|
||||
|
||||
const resultItems = []
|
||||
|
||||
items.forEach(item => {
|
||||
const arrayOfStatuses = Array.from(item.statuses)
|
||||
arrayOfStatuses.length = TARGET_COUNT_STATUSES
|
||||
arrayOfStatuses.fill({created_at: null, description: null, status: 'unchecked'}, item.statuses.length)
|
||||
|
||||
item.statuses = arrayOfStatuses.reverse()
|
||||
|
||||
resultItems.push(item)
|
||||
})
|
||||
|
||||
return resultItems
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="services-view">
|
||||
sas
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.services {
|
||||
&-view {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 48px;
|
||||
|
||||
&__items {
|
||||
background-color: #0d1117;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.service {
|
||||
&-beats {
|
||||
&__time {
|
||||
&-mark {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&-marks {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
&__items {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__beat {
|
||||
background-color: color-mix(in srgb, #22c55e, transparent 0%);
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
border-radius: 10em;
|
||||
margin: 2px;
|
||||
transition: scale .2s;
|
||||
|
||||
&:hover {
|
||||
scale: 1.5;
|
||||
}
|
||||
|
||||
&.warn {
|
||||
background-color: color-mix(in srgb, #f97316, transparent 0%);
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: color-mix(in srgb, #ef4444, transparent 0%);
|
||||
}
|
||||
|
||||
&.unchecked {
|
||||
background-color: #27272a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
1873
status-web/yarn.lock
1873
status-web/yarn.lock
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user