diff --git a/.gitignore b/.gitignore index 126803ab..8b9483e0 100644 --- a/.gitignore +++ b/.gitignore @@ -6,7 +6,6 @@ static dozzle coverage .pnpm-debug.log -.vscode coverage.out .netlify /test-results/ diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..37db5132 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,6 @@ +{ + "i18n-ally.localesPaths": ["locales"], + "i18n-ally.keystyle": "nested", + "cSpell.words": ["healthcheck"], + "editor.formatOnSave": true +} diff --git a/assets/auto-imports.d.ts b/assets/auto-imports.d.ts index c74e3584..630293b0 100644 --- a/assets/auto-imports.d.ts +++ b/assets/auto-imports.d.ts @@ -204,6 +204,7 @@ declare global { const useEventBus: typeof import('@vueuse/core')['useEventBus'] const useEventListener: typeof import('@vueuse/core')['useEventListener'] const useEventSource: typeof import('@vueuse/core')['useEventSource'] + const useExponentialMovingAverage: typeof import('./utils/index')['useExponentialMovingAverage'] const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper'] const useFavicon: typeof import('@vueuse/core')['useFavicon'] const useFetch: typeof import('@vueuse/core')['useFetch'] @@ -540,6 +541,7 @@ declare module 'vue' { readonly useEventBus: UnwrapRef readonly useEventListener: UnwrapRef readonly useEventSource: UnwrapRef + readonly useExponentialMovingAverage: UnwrapRef readonly useEyeDropper: UnwrapRef readonly useFavicon: UnwrapRef readonly useFetch: UnwrapRef @@ -870,6 +872,7 @@ declare module '@vue/runtime-core' { readonly useEventBus: UnwrapRef readonly useEventListener: UnwrapRef readonly useEventSource: UnwrapRef + readonly useExponentialMovingAverage: UnwrapRef readonly useEyeDropper: UnwrapRef readonly useFavicon: UnwrapRef readonly useFetch: UnwrapRef diff --git a/assets/components.d.ts b/assets/components.d.ts index 3fbb52dc..0bc90117 100644 --- a/assets/components.d.ts +++ b/assets/components.d.ts @@ -7,6 +7,7 @@ export {} declare module 'vue' { export interface GlobalComponents { + BarChart: typeof import('./components/BarChart.vue')['default'] 'Carbon:caretDown': typeof import('~icons/carbon/caret-down')['default'] 'Carbon:circleSolid': typeof import('~icons/carbon/circle-solid')['default'] 'Cil:checkCircle': typeof import('~icons/cil/check-circle')['default'] @@ -34,6 +35,7 @@ declare module 'vue' { LogStd: typeof import('./components/LogViewer/LogStd.vue')['default'] LogViewer: typeof import('./components/LogViewer/LogViewer.vue')['default'] LogViewerWithSource: typeof import('./components/LogViewer/LogViewerWithSource.vue')['default'] + 'Mdi:arrowUp': typeof import('~icons/mdi/arrow-up')['default'] 'Mdi:dotsVertical': typeof import('~icons/mdi/dots-vertical')['default'] 'Mdi:lightChevronDoubleDown': typeof import('~icons/mdi-light/chevron-double-down')['default'] 'Mdi:lightChevronLeft': typeof import('~icons/mdi-light/chevron-left')['default'] @@ -45,6 +47,7 @@ declare module 'vue' { 'Octicon:container24': typeof import('~icons/octicon/container24')['default'] 'Octicon:download24': typeof import('~icons/octicon/download24')['default'] 'Octicon:trash24': typeof import('~icons/octicon/trash24')['default'] + OrugaIcon: typeof import('./components/OrugaIcon.vue')['default'] Popup: typeof import('./components/Popup.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] diff --git a/assets/components/BarChart.vue b/assets/components/BarChart.vue new file mode 100644 index 00000000..a8e74da3 --- /dev/null +++ b/assets/components/BarChart.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/assets/components/LogViewer/ContainerStat.vue b/assets/components/LogViewer/ContainerStat.vue index 1e0878c7..0fa9b0b1 100644 --- a/assets/components/LogViewer/ContainerStat.vue +++ b/assets/components/LogViewer/ContainerStat.vue @@ -44,7 +44,7 @@ const memoryData = computedWithControl( value: formatBytes(stat.snapshot.memoryUsage), })); return points; - }, + } ); diff --git a/assets/components/OrugaIcon.vue b/assets/components/OrugaIcon.vue new file mode 100644 index 00000000..270a05bd --- /dev/null +++ b/assets/components/OrugaIcon.vue @@ -0,0 +1,11 @@ + + + + + diff --git a/assets/components/SideMenu.vue b/assets/components/SideMenu.vue index e4088f1c..284f0d88 100644 --- a/assets/components/SideMenu.vue +++ b/assets/components/SideMenu.vue @@ -54,7 +54,7 @@ -
    +
    @@ -110,7 +110,7 @@ const activeContainersById = computed(() => opacity: 0.5; } -.loading { +.has-light-opacity { opacity: 0.5; } diff --git a/assets/components/common/DistanceTime.vue b/assets/components/common/DistanceTime.vue index 4bc49b7e..cf168ecd 100644 --- a/assets/components/common/DistanceTime.vue +++ b/assets/components/common/DistanceTime.vue @@ -17,6 +17,9 @@ const { }>(); const text = ref(); + +watch($$(date), updateFromNow, { immediate: true }); + function updateFromNow() { const fn = strict ? formatDistanceToNowStrict : formatDistanceToNow; text.value = fn(date, { diff --git a/assets/models/Container.ts b/assets/models/Container.ts index 3244d90f..1c36a681 100644 --- a/assets/models/Container.ts +++ b/assets/models/Container.ts @@ -1,5 +1,6 @@ import type { ContainerHealth, ContainerStat, ContainerState } from "@/types/Container"; import type { UseThrottledRefHistoryReturn } from "@vueuse/core"; +import { useExponentialMovingAverage } from "@/utils"; import { Ref } from "vue"; type Stat = Omit; @@ -11,6 +12,7 @@ export class Container { private readonly throttledStatHistory: UseThrottledRefHistoryReturn; public readonly swarmId: string | null = null; public readonly isSwarm: boolean = false; + public readonly movingAverageStat: Ref; constructor( public readonly id: string, @@ -25,6 +27,7 @@ export class Container { ) { this.stat = ref({ cpu: 0, memory: 0, memoryUsage: 0 }); this.throttledStatHistory = useThrottledRefHistory(this.stat, { capacity: 300, deep: true, throttle: 1000 }); + this.movingAverageStat = useExponentialMovingAverage(this.stat, 0.2); const match = name.match(SWARM_ID_REGEX); if (match) { diff --git a/assets/modules/bulma.ts b/assets/modules/oruga.ts similarity index 57% rename from assets/modules/bulma.ts rename to assets/modules/oruga.ts index 6653ea16..fdf7703c 100644 --- a/assets/modules/bulma.ts +++ b/assets/modules/oruga.ts @@ -1,7 +1,7 @@ import { type App } from "vue"; -import { Autocomplete, Button, Dropdown, Switch, Skeleton, Field, Modal, Config } from "@oruga-ui/oruga-next"; +import { Autocomplete, Button, Dropdown, Switch, Skeleton, Field, Table, Modal, Config } from "@oruga-ui/oruga-next"; import { bulmaConfig } from "@oruga-ui/theme-bulma"; - +import OrugaIcon from "@/components/OrugaIcon.vue"; export const install = (app: App) => { app .use(Autocomplete) @@ -11,5 +11,7 @@ export const install = (app: App) => { .use(Modal) .use(Field) .use(Skeleton) - .use(Config, bulmaConfig); + .use(Table) + .component("oruga-icon", OrugaIcon) + .use(Config, { ...bulmaConfig, iconComponent: "oruga-icon", iconPack: "" }); }; diff --git a/assets/pages/index.vue b/assets/pages/index.vue index 0ce044ed..e6d36c67 100644 --- a/assets/pages/index.vue +++ b/assets/pages/index.vue @@ -1,123 +1,88 @@ diff --git a/assets/styles.scss b/assets/styles.scss index 29573f49..2babca5c 100644 --- a/assets/styles.scss +++ b/assets/styles.scss @@ -28,14 +28,8 @@ $link-active: $grey-dark; $dark-toolbar-color: rgba($black-bis, 0.7); $light-toolbar-color: rgba($grey-darker, 0.7); -@import "bulma/bulma.sass"; -@import "@oruga-ui/theme-bulma/dist/scss/components/utils/all.scss"; -@import "@oruga-ui/theme-bulma/dist/scss/components/autocomplete.scss"; -@import "@oruga-ui/theme-bulma/dist/scss/components/button.scss"; -@import "@oruga-ui/theme-bulma/dist/scss/components/modal.scss"; -@import "@oruga-ui/theme-bulma/dist/scss/components/switch.scss"; -@import "@oruga-ui/theme-bulma/dist/scss/components/dropdown.scss"; -@import "@oruga-ui/theme-bulma/dist/scss/components/skeleton.scss"; +@import "bulma/bulma"; +@import "@oruga-ui/theme-bulma/dist/scss/bulma"; @import "splitpanes/dist/splitpanes.css"; @mixin dark { @@ -218,7 +212,9 @@ html.has-custom-scrollbars { } .has-boxshadow { - box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + box-shadow: + 0 1px 3px 0 rgb(0 0 0 / 0.1), + 0 1px 2px -1px rgb(0 0 0 / 0.1); } mark { diff --git a/assets/utils/index.ts b/assets/utils/index.ts index c7ef1ac2..90ef4cc1 100644 --- a/assets/utils/index.ts +++ b/assets/utils/index.ts @@ -37,3 +37,17 @@ export function stripVersion(label: string) { const [name, _] = label.split(":"); return name; } + +export function useExponentialMovingAverage>(source: Ref, alpha: number = 0.2) { + const ema = ref(source.value) as Ref; + + watch(source, (value) => { + const newValue = {} as Record; + for (const key in value) { + newValue[key] = alpha * value[key] + (1 - alpha) * ema.value[key]; + } + ema.value = newValue as T; + }); + + return ema; +} diff --git a/e2e/default.spec.ts b/e2e/default.spec.ts index 3307ae55..2ae9342b 100644 --- a/e2e/default.spec.ts +++ b/e2e/default.spec.ts @@ -8,6 +8,13 @@ test("has right title", async ({ page }) => { await expect(page).toHaveTitle(/.* - Dozzle/); }); +test("has dashboard text", async ({ page }) => { + await expect(page.getByText("Total Containers")).toBeVisible(); + await expect(page.getByText("Total CPU Usage")).toBeVisible(); + await expect(page.getByText("Total Mem Usage")).toBeVisible(); + await expect(page.getByText("Dozzle Version")).toBeVisible(); +}); + test("click on settings button", async ({ page }) => { await page.getByRole("link", { name: "Settings" }).click(); await expect(page.getByRole("heading", { name: "About" })).toBeVisible(); diff --git a/e2e/visual.spec.ts b/e2e/visual.spec.ts deleted file mode 100644 index baf47e1b..00000000 --- a/e2e/visual.spec.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { test, expect } from "@playwright/test"; - -test.beforeEach(async ({ page }) => { - await page.goto("http://dozzle:8080/"); -}); - -test.describe("default", () => { - test("homepage", async ({ page }) => { - await page.addStyleTag({ content: `[data-ci-skip] { visibility: hidden; }` }); - await expect(page).toHaveScreenshot({}); - }); -}); - -test.describe("dark", () => { - test.use({ colorScheme: "dark" }); - test("homepage", async ({ page }) => { - await page.addStyleTag({ content: `[data-ci-skip] { visibility: hidden; }` }); - await expect(page).toHaveScreenshot({}); - }); -}); diff --git a/e2e/visual.spec.ts-snapshots/dark-homepage-1-Mobile-Chrome-linux.png b/e2e/visual.spec.ts-snapshots/dark-homepage-1-Mobile-Chrome-linux.png deleted file mode 100644 index 939603f9..00000000 Binary files a/e2e/visual.spec.ts-snapshots/dark-homepage-1-Mobile-Chrome-linux.png and /dev/null differ diff --git a/e2e/visual.spec.ts-snapshots/dark-homepage-1-Mobile-Safari-linux.png b/e2e/visual.spec.ts-snapshots/dark-homepage-1-Mobile-Safari-linux.png deleted file mode 100644 index daa9a328..00000000 Binary files a/e2e/visual.spec.ts-snapshots/dark-homepage-1-Mobile-Safari-linux.png and /dev/null differ diff --git a/e2e/visual.spec.ts-snapshots/dark-homepage-1-chromium-linux.png b/e2e/visual.spec.ts-snapshots/dark-homepage-1-chromium-linux.png deleted file mode 100644 index 0ab40104..00000000 Binary files a/e2e/visual.spec.ts-snapshots/dark-homepage-1-chromium-linux.png and /dev/null differ diff --git a/e2e/visual.spec.ts-snapshots/dark-homepage-1-webkit-linux.png b/e2e/visual.spec.ts-snapshots/dark-homepage-1-webkit-linux.png deleted file mode 100644 index 9eca8a6f..00000000 Binary files a/e2e/visual.spec.ts-snapshots/dark-homepage-1-webkit-linux.png and /dev/null differ diff --git a/e2e/visual.spec.ts-snapshots/default-homepage-1-Mobile-Chrome-linux.png b/e2e/visual.spec.ts-snapshots/default-homepage-1-Mobile-Chrome-linux.png deleted file mode 100644 index f7407c0b..00000000 Binary files a/e2e/visual.spec.ts-snapshots/default-homepage-1-Mobile-Chrome-linux.png and /dev/null differ diff --git a/e2e/visual.spec.ts-snapshots/default-homepage-1-Mobile-Safari-linux.png b/e2e/visual.spec.ts-snapshots/default-homepage-1-Mobile-Safari-linux.png deleted file mode 100644 index 33590f20..00000000 Binary files a/e2e/visual.spec.ts-snapshots/default-homepage-1-Mobile-Safari-linux.png and /dev/null differ diff --git a/e2e/visual.spec.ts-snapshots/default-homepage-1-chromium-linux.png b/e2e/visual.spec.ts-snapshots/default-homepage-1-chromium-linux.png deleted file mode 100644 index 3fe554fe..00000000 Binary files a/e2e/visual.spec.ts-snapshots/default-homepage-1-chromium-linux.png and /dev/null differ diff --git a/e2e/visual.spec.ts-snapshots/default-homepage-1-webkit-linux.png b/e2e/visual.spec.ts-snapshots/default-homepage-1-webkit-linux.png deleted file mode 100644 index bb855d8a..00000000 Binary files a/e2e/visual.spec.ts-snapshots/default-homepage-1-webkit-linux.png and /dev/null differ