Merge pull request #10 from beclab/fix/dashboard-analytics

fix: fix dashboard analytics and controlhub ui
beclab · Jan 6, 2025 · e5a03e8 · e5a03e8
2 parents 2105cf3 + 8d831c0
commit e5a03e8
Show file tree

Hide file tree

Showing 13 changed files with 117 additions and 40 deletions.
diff --git a/apps/adminConsole/package.json b/apps/adminConsole/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@apps/admin_console",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "description": "Control Hub",
   "productName": "Control Hub",
   "private": true,

diff --git a/apps/adminConsole/src/css/quasar.variables.scss b/apps/adminConsole/src/css/quasar.variables.scss
@@ -35,3 +35,9 @@ $space-xl-base: 32px;
 $space-xxl-base: 44px;
 
 $separator-color: $separator !important;
+
+$tooltip-color: $ink-tooltip;
+$tooltip-background: $tooltip-bg;
+$tooltip-padding: 4px 8px;
+$tooltip-border-radius: 4px;
+$tooltip-fontsize: 12px;
diff --git a/apps/adminConsole/yarn.lock b/apps/adminConsole/yarn.lock
@@ -3295,7 +3295,7 @@ dot-prop@6.0.1:
   dependencies:
     is-obj "^2.0.0"
 
-dunder-proto@^1.0.0:
+dunder-proto@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
   integrity sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==
@@ -3966,20 +3966,28 @@ get-intrinsic@^1.1.3, get-intrinsic@^1.2.4:
     hasown "^2.0.0"
 
 get-intrinsic@^1.2.5, get-intrinsic@^1.2.6:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.6.tgz#43dd3dd0e7b49b82b2dfcad10dc824bf7fc265d5"
-  integrity sha512-qxsEs+9A+u85HhllWJJFicJfPDhRmjzoYdl64aMWW9yRIJmSyxdn8IEkuIM530/7T+lv0TIHd8L6Q/ra0tEoeA==
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.7.tgz#dcfcb33d3272e15f445d15124bc0a216189b9044"
+  integrity sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==
   dependencies:
     call-bind-apply-helpers "^1.0.1"
-    dunder-proto "^1.0.0"
     es-define-property "^1.0.1"
     es-errors "^1.3.0"
     es-object-atoms "^1.0.0"
     function-bind "^1.1.2"
+    get-proto "^1.0.0"
     gopd "^1.2.0"
     has-symbols "^1.1.0"
     hasown "^2.0.2"
-    math-intrinsics "^1.0.0"
+    math-intrinsics "^1.1.0"
+
+get-proto@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-proto/-/get-proto-1.0.1.tgz#150b3f2743869ef3e851ec0c49d15b1d14d00ee1"
+  integrity sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-object-atoms "^1.0.0"
 
 get-stream@^6.0.0:
   version "6.0.1"
@@ -4783,7 +4791,7 @@ magic-string@^0.30.7:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
 
-math-intrinsics@^1.0.0:
+math-intrinsics@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
   integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==

diff --git a/apps/common/src/components/Menu/MyTree.vue b/apps/common/src/components/Menu/MyTree.vue
@@ -135,7 +135,8 @@ import {
 	onUnmounted,
 	PropType,
 	ref,
-	watch
+	watch,
+	onUpdated
 } from 'vue';
 import { defaultMenuOptions, MenuItem, MenuOptions } from '../../types/menu';
 import { useRouter } from 'vue-router';
@@ -177,6 +178,9 @@ const props = withDefaults(defineProps<Props>(), {
 const options = ref({});
 const selected = ref(props.defaultActive);
 const expanded = ref(props.defaultOpeneds);
+const extraWidth = ref(32);
+
+const extraWidthPx = computed(() => extraWidth.value + 'px');
 
 watch(
 	() => props.defaultActive,
@@ -199,6 +203,11 @@ onMounted(() => {
 	};
 });
 
+onUpdated(() => {
+	extraWidth.value =
+		document.querySelector('.my-content-page-header-extra')?.clientWidth ?? 0;
+});
+
 const resetSelected = () => {
 	selected.value = [];
 };
@@ -321,12 +330,23 @@ defineExpose({ resetSelected, setExpanded, getExpandedNodes });
 	top: 0;
 	left: 0;
 	right: 0;
-	padding-right: 64px;
+	padding-right: v-bind(extraWidthPx);
 	height: $content-header-height;
 }
 </style>
-
 <style lang="scss" scoped>
+.my-tree-wrapper {
+	::v-deep(.q-tree__arrow) {
+		font-size: 14px;
+		border: 1px solid rbga(255, 255, 255, 0);
+		color: $ink-1;
+	}
+	::v-deep(.q-tree__spinner) {
+		font-size: 14px;
+		border: 1px solid rbga(255, 255, 255, 0);
+		color: $ink-1;
+	}
+}
 ::v-deep(.selected-node) {
 	position: relative;
 	&::after {

diff --git a/apps/monitoring/fonttools/MaterialSymbolsRounded3.woff2 b/apps/monitoring/fonttools/MaterialSymbolsRounded3.woff2
diff --git a/apps/monitoring/fonttools/unicodes.txt b/apps/monitoring/fonttools/unicodes.txt
@@ -16,9 +16,11 @@ f8b6
 e88e
 f0cc
 f20c
-e89d
+e89e
 e694
 eb8e
 e8e3
 e8e5
+e8f4
+e8f5
 f1c3
diff --git a/apps/monitoring/package.json b/apps/monitoring/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@apps/monitoring",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "description": "Dashboard",
   "productName": "Dashboard",
   "private": true,

diff --git a/apps/monitoring/src/assets/fonts/MaterialSymbolsRounded3.woff2 b/apps/monitoring/src/assets/fonts/MaterialSymbolsRounded3.woff2
diff --git a/apps/monitoring/src/css/quasar.variables.scss b/apps/monitoring/src/css/quasar.variables.scss
@@ -33,3 +33,9 @@ $space-md-base: 12px;
 $space-lg-base: 20px;
 $space-xl-base: 32px;
 $space-xxl-base: 44px;
+
+$tooltip-color: $ink-tooltip;
+$tooltip-background: $tooltip-bg;
+$tooltip-padding: 4px 8px;
+$tooltip-border-radius: 4px;
+$tooltip-fontsize: 12px;
diff --git a/apps/monitoring/src/i18n/en-US/index.ts b/apps/monitoring/src/i18n/en-US/index.ts
@@ -45,7 +45,9 @@ const options = {
 	RUNNING: 'Running',
 	SUSPEND: 'Suspend',
 	RESUMING: 'Resuming',
-	UNINSTALLING: 'Uninstalling'
+	UNINSTALLING: 'Uninstalling',
+	OPEN_APP: 'Open App',
+	VIEW_DETAIL: 'View Detail'
 };
 
 export default options;
diff --git a/apps/monitoring/src/i18n/zh-CN/index.ts b/apps/monitoring/src/i18n/zh-CN/index.ts
@@ -45,7 +45,9 @@ const options = {
 	RUNNING: '运行中',
 	SUSPEND: '暂停',
 	RESUMING: '恢复',
-	UNINSTALLING: '正在卸载'
+	UNINSTALLING: '正在卸载',
+	OPEN_APP: '打开应用',
+	VIEW_DETAIL: '查看详情'
 };
 
 export default options;
diff --git a/apps/monitoring/src/pages/Analytics/IndexPage.vue b/apps/monitoring/src/pages/Analytics/IndexPage.vue
@@ -47,30 +47,39 @@ const fetchData = () => {
 			let icon = '';
 			let title = '';
 			apps.value = resApps.data.data.items;
-			websites.value = res.data.map((item) => {
-				const app = apps.value.find((app: any) => app.name === item.name);
-				if (app) {
-					return {
-						...app,
-						...item,
-						title: app.title,
-						icon: app.icon,
-						url:
-							app.name === 'profile'
-								? `//${app.url.split('profile.')[1]}`
-								: `//${app.url}`
-					};
-				} else if (item.name === 'desktop') {
-					icon = desktopIcon;
-					title = 'Desktop';
+			const appNames = apps.value
+				.map((item: any) => item.name)
+				.concat(['desktop']);
 
-					const url = `//desktop.${appDetail.user.username}${
-						location.hostname.split(appDetail.user.username)[1]
-					}`;
-					return { ...app, ...item, title, icon, url };
-				}
-				return { ...app, ...item, url: `//${app.url}` };
-			});
+			websites.value = res.data
+				.filter((item) => appNames.includes(item.name))
+				.map((item) => {
+					const app = apps.value.find((app: any) => app.name === item.name);
+					if (app) {
+						const entrance = app.entrances.find(
+							(entrance) => !entrance.invisible
+						);
+						return {
+							...app,
+							...item,
+							title: entrance.title,
+							icon: entrance.icon,
+							url:
+								entrance.name === 'profile'
+									? `//${app.url.split('profile.')[1]}`
+									: `//${entrance.url}`
+						};
+					} else if (item.name === 'desktop') {
+						icon = desktopIcon;
+						title = 'Desktop';
+
+						const url = `//desktop.${appDetail.user.username}${
+							location.hostname.split(appDetail.user.username)[1]
+						}`;
+						return { ...app, ...item, title, icon, url };
+					}
+					return { ...app, ...item, url: `//${app.url}` };
+				});
 			setWebsiteDateDefault(websites.value);
 		})
 		.finally(() => {

diff --git a/apps/monitoring/src/pages/Analytics/WebsiteChart.vue b/apps/monitoring/src/pages/Analytics/WebsiteChart.vue
@@ -8,15 +8,37 @@
 			<MyImg :src="icon" :loading="loading" />
 		</template>
 		<template #extra>
+			<QButtonStyle>
+				<q-btn
+					icon="sym_r_open_in_new"
+					class="rounded-borders-sm q-mr-sm"
+					dense
+					outline
+					color="ink-2"
+					@click.stop="openUrl(url)"
+				>
+					<q-tooltip
+						><span class="text-body3 text-ink-tooltip">{{
+							$t('OPEN_APP')
+						}}</span></q-tooltip
+					>
+				</q-btn>
+			</QButtonStyle>
 			<QButtonStyle>
 				<q-btn
 					icon="sym_r_assignment"
 					class="rounded-borders-sm"
 					dense
 					outline
 					color="ink-2"
-					@click.stop="openUrl(url)"
-				></q-btn>
+					@click.stop="onClick"
+				>
+					<q-tooltip
+						><span class="text-body3 text-ink-tooltip">{{
+							$t('VIEW_DETAIL')
+						}}</span></q-tooltip
+					>
+				</q-btn>
 			</QButtonStyle>
 		</template>
 		<div class="q-gutter-y-xl">
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,9 +16,11 @@ f8b6 @@
     e88e
     f0cc
     f20c
-    e89d
+    e89e
     e694
     eb8e
     e8e3
     e8e5
+    e8f4
+    e8f5
     f1c3