feat: enhance the marketplace page (#298)

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;

src/router/alarm.ts

@@ -25,6 +25,7 @@ export const routesAlarm: Array<RouteRecordRaw> = [
       title: "Alerting",
       icon: "spam",
       hasGroup: false,
+      activate: true,
     },
     component: Layout,
     children: [

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,
         },
       },
       {

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();

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"),
         },

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"),
-      },
     ],
   },
 ];

src/router/settings.ts

@@ -0,0 +1,39 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { RouteRecordRaw } from "vue-router";
+import Layout from "@/layout/Index.vue";
+
+export const routesSettings: Array<RouteRecordRaw> = [
+  {
+    path: "",
+    name: "Settings",
+    meta: {
+      title: "Settings",
+      icon: "settings",
+      hasGroup: false,
+      activate: true,
+    },
+    component: Layout,
+    children: [
+      {
+        path: "/settings",
+        name: "Settings",
+        component: () => import("@/views/marketplace/Settings.vue"),
+      },
+    ],
+  },
+];

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({});

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;