-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
25 changed files
with
753 additions
and
169 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .nuxt/ | ||
| node_modules/ | ||
| server/data/uptime.db |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -13,5 +13,6 @@ dist | |
|
|
||
| # app | ||
| .idea | ||
| !.gitkeep | ||
| server/data/ | ||
| server/data/migrations | ||
| server/data/*.db | ||
| server/data/*.db-journal | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| <template> | ||
| <NuxtLink :to="`/monitoring/${monitoring.id}`" class="flex gap-6 items-center"> | ||
| <span class="grow py-5 pl-5 font-medium">{{ monitoring.host }}</span> | ||
|
|
||
| <div class="w-1/2 h-14"> | ||
| <canvas ref="chartTotalDuration" /> | ||
| </div> | ||
|
|
||
| <div class="flex items-center pr-5"> | ||
| <span | ||
| class="p-1 text-white rounded-full" | ||
| :class="[isRequestOk ? 'bg-lime-600' : 'bg-orange-600 animate-pulse']" | ||
| > | ||
| <IconOK v-if="isRequestOk" class="w-6 h-auto" /> | ||
| <IconError v-else class="w-6 h-auto" /> | ||
| </span> | ||
| </div> | ||
| </NuxtLink> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import { | ||
| Chart as ChartJS, | ||
| Tooltip, | ||
| LineController, | ||
| LineElement, | ||
| LinearScale, | ||
| PointElement, | ||
| CategoryScale | ||
| } from 'chart.js' | ||
| import { computed, onMounted, toRefs, ref, watch } from 'vue' | ||
| import { useNuxtApp } from '#app' | ||
| import IconOK from '~icons/material-symbols/done' | ||
| import IconError from '~icons/material-symbols/close' | ||
| const properties = defineProps({ | ||
| monitoring: { | ||
| type: Object, | ||
| required: true | ||
| } | ||
| }) | ||
| const { monitoring } = toRefs(properties) | ||
| const { $colorMode } = useNuxtApp() | ||
| const chartTotalDuration = ref() | ||
| const lastRequest = computed(() => monitoring.value.requests[0]) | ||
| const isRequestOk = computed(() => lastRequest.value?.statusCode >= 200 && lastRequest.value?.statusCode < 300) | ||
| const chartTotalDurationData = computed(() => { | ||
| const items = [...monitoring.value.requests].reverse().slice(0, 75) | ||
| return { | ||
| labels: items.map(request => request.id), | ||
| datasets: [{ | ||
| data: items.map(request => request.totalDuration), | ||
| borderWidth: 1, | ||
| pointBorderWidth: 0, | ||
| tension: 0.2, | ||
| borderColor: $colorMode.value === 'light' ? 'rgb(148 163 184)' : 'rgb(148 163 184)' | ||
| }] | ||
| } | ||
| }) | ||
| let chartJSInstance | ||
| onMounted(() => { | ||
| ChartJS.register( | ||
| Tooltip, | ||
| LineController, | ||
| LineElement, | ||
| LinearScale, | ||
| PointElement, | ||
| CategoryScale | ||
| ) | ||
| chartJSInstance = new ChartJS(chartTotalDuration.value, { | ||
| type: 'line', | ||
| data: chartTotalDurationData.value, | ||
| options: { | ||
| responsive: true, | ||
| maintainAspectRatio: false, | ||
| scales: { | ||
| y: { | ||
| display: false | ||
| }, | ||
| x: { | ||
| display: false | ||
| } | ||
| }, | ||
| elements: { | ||
| point: { | ||
| borderWidth: 0, | ||
| backgroundColor: 'rgba(0,0,0,0)' | ||
| } | ||
| }, | ||
| plugins: { | ||
| legend: { | ||
| display: false | ||
| }, | ||
| tooltip: { | ||
| yAlign: 'center', | ||
| displayColors: false, | ||
| callbacks: { | ||
| title: () => '', | ||
| label: (context: any) => { | ||
| return `Total duration ${Math.round(context.raw)} ms` | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }) | ||
| }) | ||
| watch(chartTotalDurationData, (value) => { | ||
| if (value.labels.length === chartJSInstance.data.labels.length) { | ||
| return | ||
| } | ||
| chartJSInstance.data = chartTotalDurationData.value | ||
| chartJSInstance.update() | ||
| }) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { en } from '@formkit/i18n' | ||
| import { DefaultConfigOptions } from '@formkit/vue' | ||
| import { generateClasses } from '@formkit/themes' | ||
|
|
||
| const config: DefaultConfigOptions = { | ||
| locales: { en }, | ||
| locale: 'en', | ||
| config: { | ||
| classes: generateClasses({ | ||
| text: { | ||
| outer: 'flex flex-col gap-1', | ||
| wrapper: 'flex flex-col gap-1', | ||
| label: 'font-bold ', | ||
| input: 'input w-full', | ||
| help: 'text-slate-400 text-sm', | ||
| message: 'py-1 px-2 rounded text-white bg-orange-600 inline-block' | ||
| } | ||
| }) | ||
| } | ||
| } | ||
|
|
||
| export default config |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| <template> | ||
| <div> | ||
| <FormKit | ||
| v-slot="{ state: { valid } }" | ||
| v-model="formData" | ||
| type="form" | ||
| form-class="flex flex-col gap-3 p-3 bg-slate-100 dark:bg-slate-800 rounded-md" | ||
| :actions="false" | ||
| @submit="handleFormSubmit" | ||
| > | ||
| <FormKit | ||
| name="host" | ||
| label="Host" | ||
| placeholder="www.google.com" | ||
| validation="required" | ||
| help="Specify a valid host for the server you want to monitor." | ||
| /> | ||
|
|
||
| <div class="flex justify-between"> | ||
| <button class="btn" type="button" @click="handleRemoveMonitoring"> | ||
| <IconDelete /> | ||
| <span>Delete</span> | ||
| </button> | ||
|
|
||
| <button class="btn" type="submit" :disabled="!valid"> | ||
| <IconOK /> | ||
| <span>Save</span> | ||
| </button> | ||
| </div> | ||
| </formkit> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import { ref } from 'vue' | ||
| import { useFetch, useRouter, useRoute } from '#imports' | ||
| import IconOK from '~icons/material-symbols/done' | ||
| import IconDelete from '~icons/material-symbols/delete' | ||
| const route = useRoute() | ||
| const router = useRouter() | ||
| const { data: monitoring } = await useFetch(`/api/monitoring/${route.params.id}`, { | ||
| method: 'GET' | ||
| }) | ||
| const formData = ref<any>({ | ||
| host: monitoring.value.host | ||
| }) | ||
| async function handleFormSubmit () { | ||
| await useFetch(`/api/monitoring/${route.params.id}`, { | ||
| method: 'PUT', | ||
| body: { | ||
| host: formData.value.host | ||
| } | ||
| }) | ||
| await router.push('/') | ||
| } | ||
| async function handleRemoveMonitoring () { | ||
| await useFetch(`/api/monitoring/${route.params.id}`, { | ||
| method: 'DELETE' | ||
| }) | ||
| await router.push('/') | ||
| } | ||
| </script> |
Oops, something went wrong.