Merge remote-tracking branch 'origin/main' into alert

src/App.vue

@@ -18,7 +18,6 @@ limitations under the License. -->
 
 <style>
 #app {
-  text-align: center;
   color: #2c3e50;
   height: 100%;
 }

src/assets/icons/search.svg

@@ -0,0 +1,18 @@
+<!-- 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. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<title>search</title>
+<path d="M9.516 14.016q1.875 0 3.188-1.313t1.313-3.188-1.313-3.188-3.188-1.313-3.188 1.313-1.313 3.188 1.313 3.188 3.188 1.313zM15.516 14.016l4.969 4.969-1.5 1.5-4.969-4.969v-0.797l-0.281-0.281q-1.781 1.547-4.219 1.547-2.719 0-4.617-1.875t-1.898-4.594 1.898-4.617 4.617-1.898 4.594 1.898 1.875 4.617q0 0.984-0.469 2.227t-1.078 1.992l0.281 0.281h0.797z"></path>
+</svg>

src/assets/img/icons.js

@@ -0,0 +1,31 @@
+/**
+ * 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.
+ */
+const requireComponent = require.context('../../assets', false, /\.png$/);
+
+const result = {};
+function capitalizeFirstLetter(str) {
+  return str.toUpperCase();
+}
+function validateFileName(str) {
+  return /^\S+\.png$/.test(str) && str.replace(/^\S+\/(\w+)\.png$/, (rs, $1) => capitalizeFirstLetter($1));
+}
+requireComponent.keys().forEach((filePath) => {
+  const componentConfig = requireComponent(filePath);
+  const fileName = validateFileName(filePath);
+  result[fileName] = componentConfig;
+});
+export default result;

src/graph/fragments/selector.ts

@@ -0,0 +1,32 @@
+/**
+ * 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.
+ */
+export const Services = {
+  variable: ["$layer: String!"],
+  query: `
+    services: listServices(layer: $layer) {
+      value: id
+      label: name
+      group
+      layer
+    }
+  `,
+};
+export const Layers = {
+  query: `
+    layers: listLayers
+  `,
+};

src/graph/index.ts

@@ -16,9 +16,10 @@
  */
 import axios, { AxiosPromise, AxiosResponse } from "axios";
 import { cancelToken } from "@/utils/cancelToken";
-import * as global from "./query/global";
+import * as app from "./query/app";
+import * as selector from "./query/selector";
 
-const query: { [key: string]: string } = { ...global };
+const query: { [key: string]: string } = { ...app, ...selector };
 class Graph {
   private queryData = "";
   public query(queryData: string) {

src/graph/query/app.ts

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { OAPTimeInfo, OAPVersion } from "../fragments/global";
+import { OAPTimeInfo, OAPVersion } from "../fragments/app";
 
 export const queryOAPTimeInfo = `query queryOAPTimeInfo {${OAPTimeInfo.query}}`;
 

src/graph/query/selector.ts

@@ -0,0 +1,20 @@
+/**
+ * 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 { Services, Layers } from "../fragments/selector";
+
+export const queryServices = `query queryServices(${Services.variable}) {${Services.query}}`;
+export const queryLayers = `query ${Layers.query}`;

src/layout/components/AppMain.vue

@@ -21,14 +21,7 @@ limitations under the License. -->
     </router-view>
   </section>
 </template>
-<script lang="ts" setup>
-import { useRoute } from "vue-router";
-
-const route = useRoute();
-const key = () => {
-  return route.path;
-};
-</script>
+<script lang="ts" setup></script>
 <style lang="scss" scoped>
 .app-main {
   height: calc(100% - 128px);

src/layout/components/NavBar.vue

@@ -57,7 +57,7 @@ const utcHour = isNaN(Number(utcArr[0])) ? 0 : Number(utcArr[0]);
 const utcMin = isNaN(Number(utcArr[1])) ? 0 : Number(utcArr[1]);
 
 appStore.setUTC(utcHour, utcMin);
-console.log(route);
+
 const setConfig = (value: string) => {
   pageName.value = value || "";
   theme.value = route.path.includes("/infrastructure/") ? "dark" : "light";
@@ -91,6 +91,7 @@ watch(
   background-color: #fafbfc;
   border-bottom: 1px solid #dfe4e8;
   color: #222;
+  font-size: 12px;
 }
 .nav-bar.dark {
   background-color: #333840;

src/locales/lang/en.ts

@@ -23,7 +23,7 @@ const msg = {
   infrastructure: "Infrastructure",
   virtualMachine: "Virtual Machine",
   kubernetes: "Kubernetes",
-  dashboardHome: "Dashboard Home",
+  dashboardNew: "New Dashboard",
   dashboardList: "Dashboard List",
   logs: "Logs",
   events: "Events",
@@ -43,6 +43,8 @@ const msg = {
   eventList: "Event List",
   databasePanel: "Database Panel",
   meshServicePanel: "Service Panel",
+  newDashboard: "New a dashboard",
+  dashboardEdit: "Edit the dashboard",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",

src/locales/lang/zh.ts

@@ -46,6 +46,8 @@ const msg = {
   eventList: "事件列表",
   databasePanel: "数据库面板",
   meshServicePanel: "服务面板",
+  newDashboard: "新增仪表盘",
+  dashboardEdit: "编辑仪表盘",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",

src/router/dashboard.ts

@@ -29,24 +29,54 @@ export const routesDashboard: Array<RouteRecordRaw> = [
       exact: true,
     },
     children: [
-      {
-        path: "/dashboard/home",
-        component: () => import("@/views/Service.vue"),
-        name: "Home",
-        meta: {
-          title: "dashboardHome",
-          exact: false,
-        },
-      },
       {
         path: "/dashboard/list",
-        component: () => import("@/views/Log.vue"),
+        component: () => import("@/views/dashboard/List.vue"),
         name: "List",
         meta: {
           title: "dashboardList",
           exact: false,
         },
       },
+      {
+        path: "/dashboard/new",
+        component: () => import("@/views/dashboard/New.vue"),
+        name: "New",
+        meta: {
+          title: "dashboardNew",
+          exact: false,
+        },
+      },
+      {
+        path: "/dashboard/edit/service/:serviceId",
+        component: () => import("@/views/dashboard/Edit.vue"),
+        name: "serviceEdit",
+        meta: {
+          title: "dashboardEdit",
+          exact: false,
+          notShow: true,
+        },
+      },
+      {
+        path: "/dashboard/edit/endpoint/:serviceId/:endpointId",
+        component: () => import("@/views/dashboard/Edit.vue"),
+        name: "endpointEdit",
+        meta: {
+          title: "dashboardEdit",
+          exact: false,
+          notShow: true,
+        },
+      },
+      {
+        path: "/dashboard/edit/instance/:serviceId/:instanceId",
+        component: () => import("@/views/dashboard/Edit.vue"),
+        name: "instanceEdit",
+        meta: {
+          title: "dashboardEdit",
+          exact: false,
+          notShow: true,
+        },
+      },
     ],
   },
 ];