From 07a810582e7053cdbdd7554393d431ec14063fc6 Mon Sep 17 00:00:00 2001 From: Bernd Storath <999999bst@gmail.com> Date: Thu, 14 Nov 2024 14:11:18 +0100 Subject: [PATCH] remove chart, statistics from server let user decide what he wants to display --- src/app/app.vue | 1 - .../ClientCard/{Address4.vue => Address.vue} | 2 +- src/app/components/ClientCard/Charts.vue | 18 +-- src/app/components/ClientCard/ClientCard.vue | 9 +- src/app/components/ClientCard/Config.vue | 17 +-- src/app/components/ClientCard/ExpireDate.vue | 1 - .../components/ClientCard/InlineTransfer.vue | 29 ----- src/app/components/ClientCard/LastSeen.vue | 5 +- src/app/components/ClientCard/OneTimeLink.vue | 7 +- .../components/ClientCard/OneTimeLinkBtn.vue | 17 +-- src/app/components/ClientCard/QRCode.vue | 10 +- src/app/components/ClientCard/Switch.vue | 53 ++++---- .../Clients/{Clients.vue => List.vue} | 0 src/app/components/Clients/Sort.vue | 8 +- src/app/components/base/Switch.vue | 2 +- src/app/components/form/ArrayField.vue | 2 +- src/app/layouts/default.vue | 1 - src/app/pages/admin.vue | 1 - src/app/pages/admin/metrics.vue | 3 + src/app/pages/admin/statistics.vue | 115 ------------------ src/app/pages/index.vue | 4 +- src/app/stores/global.ts | 23 +--- src/app/utils/api.ts | 38 ------ src/app/utils/chart.ts | 6 + src/app/utils/localStorage.ts | 1 + src/server/api/admin/statistics.post.ts | 8 -- src/server/api/statistics.get.ts | 4 - src/server/utils/WireGuard.ts | 1 - src/services/database/lowdb.ts | 20 +-- src/services/database/migrations/1.ts | 1 - src/services/database/repositories/system.ts | 8 -- src/tailwind.config.ts | 14 +-- 32 files changed, 70 insertions(+), 359 deletions(-) rename src/app/components/ClientCard/{Address4.vue => Address.vue} (74%) delete mode 100644 src/app/components/ClientCard/InlineTransfer.vue rename src/app/components/Clients/{Clients.vue => List.vue} (100%) create mode 100644 src/app/pages/admin/metrics.vue delete mode 100644 src/app/pages/admin/statistics.vue delete mode 100644 src/server/api/admin/statistics.post.ts delete mode 100644 src/server/api/statistics.get.ts diff --git a/src/app/app.vue b/src/app/app.vue index 58de9865..80a9978e 100644 --- a/src/app/app.vue +++ b/src/app/app.vue @@ -13,7 +13,6 @@ const globalStore = useGlobalStore(); globalStore.fetchRelease(); globalStore.setLanguage(); -globalStore.fetchStatistics(); useHead({ bodyAttrs: { class: 'bg-gray-50 dark:bg-neutral-800', diff --git a/src/app/components/ClientCard/Address4.vue b/src/app/components/ClientCard/Address.vue similarity index 74% rename from src/app/components/ClientCard/Address4.vue rename to src/app/components/ClientCard/Address.vue index 3865bf3d..e7957d30 100644 --- a/src/app/components/ClientCard/Address4.vue +++ b/src/app/components/ClientCard/Address.vue @@ -1,6 +1,6 @@ diff --git a/src/app/components/ClientCard/Charts.vue b/src/app/components/ClientCard/Charts.vue index a2ef6b6c..c78fbe12 100644 --- a/src/app/components/ClientCard/Charts.vue +++ b/src/app/components/ClientCard/Charts.vue @@ -1,13 +1,11 @@ @@ -13,8 +13,9 @@ const props = defineProps<{ client: LocalClient }>(); const path = computed(() => { if (import.meta.client) { - return `${document.location.protocol}//${document.location.host}/cnf/${props.client.oneTimeLink}`; + // TODO: show how long its still valid + return `${document.location.protocol}//${document.location.host}/cnf/${props.client.oneTimeLink?.oneTimeLink}`; } - return ''; + return 'Loading...'; }); diff --git a/src/app/components/ClientCard/OneTimeLinkBtn.vue b/src/app/components/ClientCard/OneTimeLinkBtn.vue index 2360f7d6..303559c6 100644 --- a/src/app/components/ClientCard/OneTimeLinkBtn.vue +++ b/src/app/components/ClientCard/OneTimeLinkBtn.vue @@ -1,18 +1,8 @@ diff --git a/src/app/components/Clients/Clients.vue b/src/app/components/Clients/List.vue similarity index 100% rename from src/app/components/Clients/Clients.vue rename to src/app/components/Clients/List.vue diff --git a/src/app/components/Clients/Sort.vue b/src/app/components/Clients/Sort.vue index fe88b589..027622df 100644 --- a/src/app/components/Clients/Sort.vue +++ b/src/app/components/Clients/Sort.vue @@ -1,7 +1,7 @@ diff --git a/src/app/components/form/ArrayField.vue b/src/app/components/form/ArrayField.vue index c82877bf..9481c262 100644 --- a/src/app/components/form/ArrayField.vue +++ b/src/app/components/form/ArrayField.vue @@ -14,7 +14,7 @@ diff --git a/src/app/pages/admin/statistics.vue b/src/app/pages/admin/statistics.vue deleted file mode 100644 index 453c1fa6..00000000 --- a/src/app/pages/admin/statistics.vue +++ /dev/null @@ -1,115 +0,0 @@ - - - diff --git a/src/app/pages/index.vue b/src/app/pages/index.vue index 47baa194..c18a2aff 100644 --- a/src/app/pages/index.vue +++ b/src/app/pages/index.vue @@ -10,7 +10,7 @@
-
@@ -48,7 +48,7 @@ onMounted(() => { intervalId.value = setInterval(() => { clientsStore .refresh({ - updateCharts: globalStore.updateCharts, + updateCharts: globalStore.uiShowCharts, }) .catch(console.error); }, 1000); diff --git a/src/app/stores/global.ts b/src/app/stores/global.ts index 8f4f8333..f92e60af 100644 --- a/src/app/stores/global.ts +++ b/src/app/stores/global.ts @@ -38,25 +38,8 @@ export const useGlobalStore = defineStore('Global', () => { updateAvailable.value = release.value.updateAvailable; } - const statistics = ref({ - enabled: false, - chartType: 0, - }); - - async function fetchStatistics() { - const { data: apiStatistics } = await useFetch('/api/statistics', { - method: 'get', - }); - if (apiStatistics.value) { - statistics.value = apiStatistics.value; - } - } - const uiShowCharts = ref(getItem('uiShowCharts') === '1'); - - const updateCharts = computed(() => { - return statistics.value.chartType > 0 && uiShowCharts.value; - }); + const uiChartType = ref(getItem('uiChartType') ?? 'area'); /** * @throws if unsuccessful @@ -76,10 +59,8 @@ export const useGlobalStore = defineStore('Global', () => { latestRelease, updateAvailable, fetchRelease, - statistics, - fetchStatistics, uiShowCharts, - updateCharts, + uiChartType, updateLang, }; }); diff --git a/src/app/utils/api.ts b/src/app/utils/api.ts index a27567a7..399c326e 100644 --- a/src/app/utils/api.ts +++ b/src/app/utils/api.ts @@ -57,44 +57,6 @@ class API { }); } - async enableClient({ clientId }: { clientId: string }) { - return $fetch(`/api/client/${clientId}/enable`, { - method: 'post', - }); - } - - async disableClient({ clientId }: { clientId: string }) { - return $fetch(`/api/client/${clientId}/disable`, { - method: 'post', - }); - } - - async updateClientName({ - clientId, - name, - }: { - clientId: string; - name: string; - }) { - return $fetch(`/api/client/${clientId}/name`, { - method: 'put', - body: { name }, - }); - } - - async updateClientAddress4({ - clientId, - address4, - }: { - clientId: string; - address4: string; - }) { - return $fetch(`/api/client/${clientId}/address4`, { - method: 'put', - body: { address4 }, - }); - } - async updateClientExpireDate({ clientId, expireDate, diff --git a/src/app/utils/chart.ts b/src/app/utils/chart.ts index 3dde92ae..aff5bb23 100644 --- a/src/app/utils/chart.ts +++ b/src/app/utils/chart.ts @@ -5,6 +5,12 @@ export const UI_CHART_TYPES = [ { type: 'bar', strokeWidth: 0 }, ] as const; +export const UI_CHART_PROPS = { + line: { strokeWidth: 3 }, + area: { strokeWidth: 0 }, + bar: { strokeWidth: 0 }, +} as const; + export const CHART_COLORS = { rx: { light: 'rgba(128,128,128,0.3)', dark: 'rgba(255,255,255,0.3)' }, tx: { light: 'rgba(128,128,128,0.4)', dark: 'rgba(255,255,255,0.3)' }, diff --git a/src/app/utils/localStorage.ts b/src/app/utils/localStorage.ts index bd1c498d..26d2b5cb 100644 --- a/src/app/utils/localStorage.ts +++ b/src/app/utils/localStorage.ts @@ -1,6 +1,7 @@ export type LocalStorage = { uiShowCharts: '1' | '0'; lang: string; + uiChartType: 'area' | 'bar' | 'line'; }; export function getItem( diff --git a/src/server/api/admin/statistics.post.ts b/src/server/api/admin/statistics.post.ts deleted file mode 100644 index 5865580e..00000000 --- a/src/server/api/admin/statistics.post.ts +++ /dev/null @@ -1,8 +0,0 @@ -export default defineEventHandler(async (event) => { - const { statistics } = await readValidatedBody( - event, - validateZod(statisticsType) - ); - await Database.system.updateStatistics(statistics); - return { success: true }; -}); diff --git a/src/server/api/statistics.get.ts b/src/server/api/statistics.get.ts deleted file mode 100644 index 487f5e6a..00000000 --- a/src/server/api/statistics.get.ts +++ /dev/null @@ -1,4 +0,0 @@ -export default defineEventHandler(async () => { - const system = await Database.system.get(); - return system.statistics; -}); diff --git a/src/server/utils/WireGuard.ts b/src/server/utils/WireGuard.ts index 0ea50a0c..c45a90c5 100644 --- a/src/server/utils/WireGuard.ts +++ b/src/server/utils/WireGuard.ts @@ -61,7 +61,6 @@ class WireGuard { expiresAt: client.expiresAt, allowedIPs: client.allowedIPs, oneTimeLink: client.oneTimeLink, - downloadableConfig: 'privateKey' in client, persistentKeepalive: null as string | null, latestHandshakeAt: null as Date | null, endpoint: null as string | null, diff --git a/src/services/database/lowdb.ts b/src/services/database/lowdb.ts index 0b638943..24294544 100644 --- a/src/services/database/lowdb.ts +++ b/src/services/database/lowdb.ts @@ -18,12 +18,7 @@ import { type NewClient, type OneTimeLink, } from './repositories/client'; -import { - ChartType, - SystemRepository, - type Lang, - type Statistics, -} from './repositories/system'; +import { SystemRepository, type Lang } from './repositories/system'; import { SetupRepository, type Steps } from './repositories/setup'; import type { DeepReadonly } from 'vue'; @@ -78,19 +73,6 @@ class LowDBSystem extends SystemRepository { return makeReadonly(system); } - async updateStatistics(statistics: Statistics) { - DEBUG('Update Statistics'); - this.#db.update((v) => { - v.system.statistics.enabled = statistics.enabled; - if ( - statistics.chartType >= ChartType.None && - statistics.chartType <= ChartType.Bar - ) { - v.system.statistics.chartType = statistics.chartType; - } - }); - } - async updateLang(lang: Lang): Promise { DEBUG('Update Language'); this.#db.update((v) => { diff --git a/src/services/database/migrations/1.ts b/src/services/database/migrations/1.ts index b410d076..a02886fb 100644 --- a/src/services/database/migrations/1.ts +++ b/src/services/database/migrations/1.ts @@ -1,6 +1,5 @@ import type { Low } from 'lowdb'; import type { Database } from '../repositories/database'; -import { ChartType } from '../repositories/system'; import { parseCidr } from 'cidr-tools'; import { stringifyIp } from 'ip-bigint'; diff --git a/src/services/database/repositories/system.ts b/src/services/database/repositories/system.ts index 8db1df41..a28cd0cf 100644 --- a/src/services/database/repositories/system.ts +++ b/src/services/database/repositories/system.ts @@ -39,11 +39,6 @@ export enum ChartType { Bar = 3, } -export type Statistics = { - enabled: boolean; - chartType: ChartType; -}; - export type Prometheus = { enabled: boolean; password: string | null; @@ -67,8 +62,6 @@ export type System = { iptables: IpTables; - statistics: Statistics; - metrics: Metrics; sessionConfig: SessionConfig; @@ -82,7 +75,6 @@ export type System = { export abstract class SystemRepository { abstract get(): Promise>; - abstract updateStatistics(statistics: Statistics): Promise; abstract updateLang(lang: Lang): Promise; abstract updateClientsHostPort(host: string, port: number): Promise; } diff --git a/src/tailwind.config.ts b/src/tailwind.config.ts index 3b41208f..cc863bd7 100644 --- a/src/tailwind.config.ts +++ b/src/tailwind.config.ts @@ -1,5 +1,4 @@ import type { Config } from 'tailwindcss'; -import type { PluginAPI } from 'tailwindcss/types/config'; import tailwindForms from '@tailwindcss/forms'; export default { @@ -16,16 +15,5 @@ export default { '2xl': '1536px', }, }, - plugins: [ - function addDisabledClass({ addUtilities }: PluginAPI) { - const newUtilities = { - '.is-disabled': { - opacity: '0.25', - cursor: 'default', - }, - }; - addUtilities(newUtilities); - }, - tailwindForms, - ], + plugins: [tailwindForms], } satisfies Config;