ostiwe-com/status-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Working on main page

Browse Source
This commit is contained in:
Nikolay Anoshin
2025-08-21 13:06:27 +03:00
parent ced8dc905a
commit 5146532db6
7 changed files with 204 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
status-web/app.vue
View File

@@ -8,30 +8,29 @@
</template>
<script setup lang="ts">
import TheApplicationHeader from "~/components/Header/TheApplicationHeader.vue";
import moment from "moment";
import TheApplicationHeader from '~/components/Header/TheApplicationHeader.vue'
import moment from 'moment'
moment.updateLocale('en', {
relativeTime: {
future: "in %s",
past: "%s ago",
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"
}
});
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">

17
status-web/assets/global.scss
View File

@@ -20,3 +20,20 @@ html {
width: 80%;
}
}
.user-select {
&__none {
user-select: none;
}
}
.cursor {
&-pointer {
cursor: pointer;
}
&-default {
cursor: default;
}
}

41
status-web/components/Badge/index.vue
View File

@@ -1,16 +1,34 @@
<template>
<div class="badge">
<div
class="badge"
:class="[severity]"
>
<slot />
</div>
</template>
<script setup lang="ts">
interface ComponentProps {
uptime?: number
}
defineProps<ComponentProps>()
const props = defineProps<ComponentProps>()
const severity = computed<string | null>(() => {
if (props.uptime === undefined) {
return null
}
if (props.uptime < 50) {
return 'danger'
}
if (props.uptime < 98) {
return 'warning'
}
return 'success'
})
</script>
<style scoped lang="scss">
@@ -21,5 +39,22 @@ defineProps<ComponentProps>()
align-items: center;
background-color: #27272a;
border-radius: 8px;
width: fit-content;
&.success {
background-color: color-mix(in srgb, #22c55e, transparent 0%);
color: white;
}
&.warning {
background-color: color-mix(in srgb, #f97316, transparent 0%);
color: white;
}
&.danger {
background-color: color-mix(in srgb, #ef4444, transparent 0%);
color: white;
}
}
</style>

57
status-web/nuxt.config.ts
View File

@@ -1,42 +1,55 @@
// https://nuxt.com/docs/api/configuration/nuxt-config
import Aura from '@primeuix/themes/aura';
import Aura from '@primeuix/themes/aura'
export default defineNuxtConfig({
compatibilityDate: '2025-07-15',
devtools: {enabled: true},
modules: [
'@nuxt/eslint',
'@nuxt/image',
'@nuxt/fonts',
'@primevue/nuxt-module',
],
eslint: {
checker: true,
ssr: true,
devtools: { enabled: true },
config: {
stylistic: true
}
runtimeConfig: {
apiHost: '',
},
primevue: {
autoImport: false,
options: {
ripple: false,
inputVariant: 'filled',
theme: {
preset: Aura,
}
}
routeRules: {
'/api/**': {
proxy: {
to: process.env.NUXT_API_HOST + '/api/**',
},
},
},
compatibilityDate: '2025-07-15',
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: `@forward '~/assets/global';
@use '~/assets/variables' as *;`
}
}
}
}
@use '~/assets/variables' as *;`,
},
},
},
},
eslint: {
checker: true,
config: {
stylistic: true,
},
},
primevue: {
autoImport: true,
options: {
ripple: false,
inputVariant: 'filled',
theme: {
preset: Aura,
},
},
},
})

8
status-web/types/response/publicServices.ts Normal file
View File

@@ -0,0 +1,8 @@
import type { ServiceStatus } from '~/types/response/services'
export interface PublicService {
name: string
description: string | null
statuses: ServiceStatus[]
uptime: number
}

11
status-web/types/response/services.ts Normal file
View File

@@ -0,0 +1,11 @@
export interface ServiceStatus {
id: number
status: 'ok' | 'warn' | 'failed' | 'unchecked'
description: string | null
createdAt: string
}
// todo
export interface Service {
}

336
status-web/view/public/ServicesView.vue
View File

@@ -12,7 +12,13 @@
<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>
<Badge
v-tooltip.bottom="'Uptime based on 24h data'"
class="user-select__none cursor-default"
:uptime="service.uptime"
>
{{ service.uptime }}
</Badge>
</div>
<div class="service-describe">
<div class="service-name">
@@ -20,14 +26,14 @@
</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 v-for="(status, index) in service.statuses" :key="status.id !== 0 ? status.id : index">
<div v-tooltip.bottom="`${moment(status.createdAt).format('MMMM Do YYYY on HH:mm:ss')}`" 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 v-if="service.statuses[0].id !== 0 && service.statuses[0].createdAt">
{{ moment(service.statuses[0].createdAt).fromNow() }}
</template>
</div>
<div class="service-beats__time-mark">
@@ -44,273 +50,36 @@
</template>
<script setup lang="ts">
import moment from "moment";
import type {PublicService} from "~/types/response/publicServices";
import Badge from "~/components/Badge/index.vue";
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 {data, refresh} = useFetch<PublicService[]>('/api/public/service')
const TARGET_COUNT_STATUSES = 60
const updateInterval = ref<NodeJS.Timeout | null>(null);
const services = computed(() => {
const items = data()
// onMounted(() => {
// updateInterval.value = setInterval(async () => {
// await refresh()
// }, 5 * 60 * 1000)
// })
//
// onBeforeUnmount(() => {
// if (updateInterval.value == null) {
// return
// }
//
// updateInterval.value.close()
//
// })
const resultItems = []
const services = computed<PublicService[]>(() => {
const items = data.value
if (!items) {
return []
}
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
return items
})
@@ -326,21 +95,56 @@ const services = computed(() => {
flex-direction: column;
gap: 48px;
&__summary {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 26px;
border-radius: 6px;
background-color: color-mix(in srgb, #22c55e, transparent 0%);
&-text {
& > span {
color: white;
}
}
}
&__items {
background-color: #0d1117;
padding: 10px;
border-radius: 8px;
display: flex;
gap: 20px;
flex-direction: column;
&-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
}
}
}
.service {
&-sla {
flex-basis: 60px;
}
&-describe {
display: flex;
align-items: baseline;
gap: 20px;
width: 100%;
justify-content: space-between;
}
&-beats {
&__time {
&-mark {