This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
The following commit(s) were added to refs/heads/main by this push:
new 5367af47 feat: enhance the marketplace page (#298)
5367af47 is described below
commit 5367af47c4c8fe584f3f829dc30c8e105a0cc201
Author: Fine0830 <[email protected]>
AuthorDate: Tue Jul 11 22:32:36 2023 +0800
feat: enhance the marketplace page (#298)
---
src/layout/components/SideBar.vue | 9 ++++++---
src/router/alarm.ts | 1 +
src/router/dashboard.ts | 3 +++
src/router/index.ts | 12 +++++++++---
src/router/layer.ts | 5 ++++-
src/router/marketplace.ts | 16 +++-------------
src/router/{alarm.ts => settings.ts} | 15 ++++++++-------
src/store/modules/app.ts | 17 ++++-------------
src/views/marketplace/Menus.vue | 16 +++++++++++-----
9 files changed, 49 insertions(+), 45 deletions(-)
diff --git a/src/layout/components/SideBar.vue
b/src/layout/components/SideBar.vue
index 17e4344a..69658e9e 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -75,9 +75,12 @@ limitations under the License. -->
/*global Recordable*/
const appStore = useAppStoreWithOut();
- const name = ref<string>(String(useRouter().currentRoute.value.name));
+ const router = useRouter();
+ const name = ref<string>(String(router.currentRoute.value.name));
const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "") ?
ref("light") : ref("black");
- const routes = ref<RouteRecordRaw[] | any>(useRouter().options.routes);
+ const routes = ref<RouteRecordRaw[] | any>(
+ (router.options.routes || []).filter((d: any) => d.meta &&
d.meta.activate),
+ );
const route = useRoute();
const isCollapse = ref(true);
const showMenu = ref(true);
@@ -95,7 +98,7 @@ limitations under the License. -->
theme.value = ["VirtualMachine", "Kubernetes"].includes(String(menu.name))
? "light" : "black";
};
const filterMenus = (menus: Recordable[]) => {
- return menus.filter((d) => d.meta && !d.meta.notShow);
+ return menus.filter((d) => d.meta && !d.meta.notShow && d.meta.activate);
};
function setCollapse() {
open.value = true;
diff --git a/src/router/alarm.ts b/src/router/alarm.ts
index f9e6b92f..950101e4 100644
--- a/src/router/alarm.ts
+++ b/src/router/alarm.ts
@@ -25,6 +25,7 @@ export const routesAlarm: Array<RouteRecordRaw> = [
title: "Alerting",
icon: "spam",
hasGroup: false,
+ activate: true,
},
component: Layout,
children: [
diff --git a/src/router/dashboard.ts b/src/router/dashboard.ts
index ab7ade75..f0a46812 100644
--- a/src/router/dashboard.ts
+++ b/src/router/dashboard.ts
@@ -26,6 +26,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
title: "Dashboards",
icon: "dashboard_customize",
hasGroup: true,
+ activate: true,
},
children: [
{
@@ -34,6 +35,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
name: "List",
meta: {
title: "Dashboard List",
+ activate: true,
},
},
{
@@ -42,6 +44,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
name: "New",
meta: {
title: "New Dashboard",
+ activate: true,
},
},
{
diff --git a/src/router/index.ts b/src/router/index.ts
index 4fb334a8..bf8fe555 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -20,8 +20,15 @@ import { routesDashboard } from "./dashboard";
import { routesMarketplace } from "./marketplace";
import { routesAlarm } from "./alarm";
import routesLayers from "./layer";
+import { routesSettings } from "./settings";
-const routes: Array<RouteRecordRaw> = [...routesMarketplace, ...routesLayers,
...routesDashboard, ...routesAlarm];
+const routes: Array<RouteRecordRaw> = [
+ ...routesMarketplace,
+ ...routesLayers,
+ ...routesAlarm,
+ ...routesDashboard,
+ ...routesSettings,
+];
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@@ -30,8 +37,6 @@ const router = createRouter({
(window as any).axiosCancel = [];
-const defaultPath = (routesLayers[0] && routesLayers[0].children[0].path) ||
"";
-
router.beforeEach((to, from, next) => {
// const token = window.localStorage.getItem("skywalking-authority");
if ((window as any).axiosCancel.length !== 0) {
@@ -42,6 +47,7 @@ router.beforeEach((to, from, next) => {
}
if (to.path === "/") {
+ const defaultPath = (routesLayers[0] && routesLayers[0].children[0].path)
|| "";
next({ path: defaultPath });
} else {
next();
diff --git a/src/router/layer.ts b/src/router/layer.ts
index 02646d0b..e453ea73 100644
--- a/src/router/layer.ts
+++ b/src/router/layer.ts
@@ -21,7 +21,7 @@ import type { MenuOptions } from "@/types/app";
async function layerDashboards() {
const appStore = useAppStoreWithOut();
await appStore.getActivateMenus();
- const routes = appStore.activateMenus.map((item: MenuOptions) => {
+ const routes = appStore.allMenus.map((item: MenuOptions) => {
const route: any = {
path: "",
name: item.name,
@@ -30,6 +30,7 @@ async function layerDashboards() {
icon: item.icon || "cloud_queue",
title: item.title,
hasGroup: item.hasGroup,
+ activate: item.activate,
},
children: item.subItems && item.subItems.length ? [] : undefined,
};
@@ -41,6 +42,7 @@ async function layerDashboards() {
title: child.title,
layer: child.layer,
icon: child.icon || "cloud_queue",
+ activate: child.activate,
},
component: () => import("@/views/Layer.vue"),
};
@@ -65,6 +67,7 @@ async function layerDashboards() {
title: item.title,
layer: item.layer,
icon: item.icon,
+ activate: item.activate,
},
component: () => import("@/views/Layer.vue"),
},
diff --git a/src/router/marketplace.ts b/src/router/marketplace.ts
index 32f7d745..88fcc7ac 100644
--- a/src/router/marketplace.ts
+++ b/src/router/marketplace.ts
@@ -24,26 +24,16 @@ export const routesMarketplace: Array<RouteRecordRaw> = [
meta: {
title: "Marketplace",
icon: "marketplace",
- hasGroup: true,
+ hasGroup: false,
+ activate: true,
},
component: Layout,
children: [
{
- path: "/marketplace/menus",
+ path: "/marketplace",
name: "MenusManagement",
- meta: {
- title: "Categories",
- },
component: () => import("@/views/marketplace/Menus.vue"),
},
- {
- path: "/marketplace/settings",
- name: "Settings",
- meta: {
- title: "Settings",
- },
- component: () => import("@/views/marketplace/Settings.vue"),
- },
],
},
];
diff --git a/src/router/alarm.ts b/src/router/settings.ts
similarity index 79%
copy from src/router/alarm.ts
copy to src/router/settings.ts
index f9e6b92f..f40baf21 100644
--- a/src/router/alarm.ts
+++ b/src/router/settings.ts
@@ -17,21 +17,22 @@
import type { RouteRecordRaw } from "vue-router";
import Layout from "@/layout/Index.vue";
-export const routesAlarm: Array<RouteRecordRaw> = [
+export const routesSettings: Array<RouteRecordRaw> = [
{
path: "",
- name: "Alarm",
+ name: "Settings",
meta: {
- title: "Alerting",
- icon: "spam",
+ title: "Settings",
+ icon: "settings",
hasGroup: false,
+ activate: true,
},
component: Layout,
children: [
{
- path: "/alerting",
- name: "Alarm",
- component: () => import("@/views/Alarm.vue"),
+ path: "/settings",
+ name: "Settings",
+ component: () => import("@/views/marketplace/Settings.vue"),
},
],
},
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 05761182..3dac4191 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -36,7 +36,7 @@ interface AppState {
version: string;
isMobile: boolean;
reloadTimer: Nullable<IntervalHandle>;
- activateMenus: MenuOptions[];
+ allMenus: MenuOptions[];
}
export const appStore = defineStore({
@@ -57,7 +57,7 @@ export const appStore = defineStore({
version: "",
isMobile: false,
reloadTimer: null,
- activateMenus: [],
+ allMenus: [],
}),
getters: {
duration(): Duration {
@@ -163,7 +163,8 @@ export const appStore = defineStore({
},
async getActivateMenus() {
const resp = (await this.queryMenuItems()) || {};
- const menus = (resp.getMenuItems || []).map((d: MenuOptions, index:
number) => {
+
+ this.allMenus = (resp.getMenuItems || []).map((d: MenuOptions, index:
number) => {
const t = `${d.title.replace(/\s+/g, "-")}`;
d.name = `${t}-${index}`;
d.path = `/${t}`;
@@ -179,16 +180,6 @@ export const appStore = defineStore({
return d;
});
- this.activateMenus = menus.filter((d: MenuOptions) => {
- if (d.activate) {
- d.subItems = d.subItems.filter((item: SubItem) => {
- if (item.activate) {
- return item;
- }
- });
- return d;
- }
- });
},
async queryOAPTimeInfo() {
const res: AxiosResponse = await
graphql.query("queryOAPTimeInfo").params({});
diff --git a/src/views/marketplace/Menus.vue b/src/views/marketplace/Menus.vue
index 941918c6..27114a4d 100644
--- a/src/views/marketplace/Menus.vue
+++ b/src/views/marketplace/Menus.vue
@@ -18,13 +18,15 @@ limitations under the License. -->
<div class="mr-20 mt-10 flex-h category">
<el-card
class="item"
- v-for="(menu, index) in appStore.activateMenus"
+ v-for="(menu, index) in appStore.allMenus"
:key="index"
@click="handleItems(menu)"
:class="currentItems.name === menu.name ? 'active' : ''"
>
<router-link :to="menu.hasGroup ? '' : menu.path || ''">
- <div class="title" :class="menu.hasGroup ? '' : 'actived-font'">
{{ menu.title }}</div>
+ <div class="title" :class="menu.activate ? (menu.hasGroup ? '' :
'actived-font') : 'disabled'">
+ {{ menu.title }}</div
+ >
</router-link>
<div class="mt-10"> {{ menu.description }} </div>
<el-link :href="menu.documentLink" target="_blank" class="link"
v-show="menu.documentLink">
@@ -35,7 +37,7 @@ limitations under the License. -->
<div class="mt-10 cards">
<el-card shadow="hover" v-for="(item, index) in currentItems.subItems
|| []" :key="index" class="card">
<router-link :to="item.path || ''">
- <div class="title actived-font"> {{ item.title }}</div>
+ <div class="title" :class="item.activate ? 'actived-font' :
'disabled'"> {{ item.title }}</div>
</router-link>
<div class="mt-10"> {{ item.description }} </div>
<el-link :href="item.documentLink" target="_blank" class="link"
v-show="item.documentLink">
@@ -54,13 +56,13 @@ limitations under the License. -->
const { t } = useI18n();
const appStore = useAppStoreWithOut();
- const currentItems = ref<MenuOptions>(appStore.activateMenus[0] || {});
+ const currentItems = ref<MenuOptions>(appStore.allMenus[0] || {});
function handleItems(item: MenuOptions) {
currentItems.value = item;
}
- appStore.setPageTitle("Categories");
+ appStore.setPageTitle("Marketplace");
</script>
<style lang="scss" scoped>
.menus {
@@ -86,6 +88,10 @@ limitations under the License. -->
color: $active-color;
}
+ .disabled {
+ color: #aaa;
+ }
+
.card {
margin-bottom: 30px;
cursor: pointer;
