Merge pull request #2 from Fine0830/feat/dashboard

feat: implement a dashboard list

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/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";

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

src/router/dashboard.ts

@@ -29,24 +29,24 @@ 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,
+        },
+      },
     ],
   },
 ];

src/router/database.ts

@@ -36,7 +36,7 @@ export const routesDatabase: Array<RouteRecordRaw> = [
           headPath: "/database",
           exact: true,
         },
-        component: () => import("@/views/Service.vue"),
+        component: () => import("@/views/service/Service.vue"),
       },
       {
         path: "/database/:id/:type",

src/router/generalService.ts

@@ -38,7 +38,7 @@ export const routesGen: Array<RouteRecordRaw> = [
           headPath: "/generalService/service",
           exact: true,
         },
-        component: () => import("@/views/Service.vue"),
+        component: () => import("@/views/service/Service.vue"),
       },
       {
         path: "/generalService/service/:id/:type",

src/router/infrastructure.ts

@@ -35,7 +35,7 @@ export const routesInfra: Array<RouteRecordRaw> = [
         meta: {
           title: "virtualMachine",
         },
-        component: () => import("@/views/Infrastructure.vue"),
+        component: () => import("@/views/infrastructure/Infrastructure.vue"),
       },
       {
         path: "/infrastructure/k8s",
@@ -43,7 +43,7 @@ export const routesInfra: Array<RouteRecordRaw> = [
         meta: {
           title: "kubernetes",
         },
-        component: () => import("@/views/Infrastructure.vue"),
+        component: () => import("@/views/infrastructure/Infrastructure.vue"),
       },
     ],
   },

src/router/serviceMesh.ts

@@ -36,7 +36,7 @@ export const routesMesh: Array<RouteRecordRaw> = [
           title: "services",
           headPath: "/mesh/services",
         },
-        component: () => import("@/views/Service.vue"),
+        component: () => import("@/views/service/Service.vue"),
       },
       {
         path: "/mesh/controlPanel",
@@ -45,7 +45,7 @@ export const routesMesh: Array<RouteRecordRaw> = [
           title: "controlPanel",
           headPath: "/mesh/controlPanel",
         },
-        component: () => import("@/views/Service.vue"),
+        component: () => import("@/views/service/Service.vue"),
       },
       {
         path: "/mesh/dataPanel",
@@ -54,7 +54,7 @@ export const routesMesh: Array<RouteRecordRaw> = [
           title: "dataPanel",
           headPath: "/mesh/dataPanel",
         },
-        component: () => import("@/views/Service.vue"),
+        component: () => import("@/views/service/Service.vue"),
       },
       {
         path: "/mesh/services/:id/:type",

src/styles/lib.scss

@@ -55,6 +55,9 @@
 .grey {
   color: #a7aebb;
 }
+.white {
+  color: #fff;
+}
 .bg-green {
   background-color: #4caf50;
 }

src/views/dashboard/List.vue

@@ -0,0 +1,113 @@
+<!-- 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. -->
+<template>
+  <div class="dashboard-list">
+    <div class="flex-h header" style="margin: 10px 0">
+      <el-input
+        v-model="searchText"
+        placeholder="Please input"
+        class="input-with-search"
+        size="small"
+      >
+        <template #append>
+          <el-button size="small">
+            <Icon size="lg" iconName="search" />
+          </el-button>
+        </template>
+      </el-input>
+      <router-link to="/dashboard/new">
+        <el-button size="small" type="primary">+ New Dashboard</el-button>
+      </router-link>
+    </div>
+    <el-table :data="tableData" style="width: 100%" max-height="550">
+      <el-table-column fixed prop="name" label="Name" />
+      <el-table-column prop="type" label="Type" />
+      <el-table-column prop="date" label="Date" />
+      <el-table-column label="Operations">
+        <template #default="scope">
+          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
+            View
+          </el-button>
+          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
+            Edit
+          </el-button>
+          <el-button
+            size="mini"
+            type="danger"
+            @click="handleDelete(scope.$index, scope.row)"
+          >
+            Delete
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import { ElTable, ElTableColumn, ElButton, ElInput } from "element-plus";
+//  # - os-linux
+//  # - k8s
+//  # - general(agent-installed)
+//  # - faas
+//  # - mesh
+//  # - mesh-cp
+//  # - mesh-dp
+//  # - database
+//  # - cache
+//  # - browser
+//  # - skywalking
+const searchText = ref<string>("");
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "xxx",
+    type: "general",
+  },
+  {
+    date: "2016-05-02",
+    name: "xxx",
+    type: "k8s",
+  },
+  {
+    date: "2016-05-04",
+    name: "xxx",
+    type: "database",
+  },
+  {
+    date: "2016-05-01",
+    name: "xxx",
+    type: "mesh",
+  },
+];
+const handleEdit = (index: number, row: any) => {
+  console.log(index, row);
+};
+const handleDelete = (index: number, row: any) => {
+  console.log(index, row);
+};
+</script>
+<style lang="scss" scoped>
+.header {
+  flex-direction: row-reverse;
+}
+.dashboard-list {
+  padding: 20px;
+}
+.input-with-search {
+  width: 300px;
+  margin-left: 20px;
+}
+</style>

src/views/dashboard/New.vue

@@ -0,0 +1,23 @@
+<!-- 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. -->
+<template>
+  <div class="new-dashboard">{{ props.msg }}</div>
+</template>
+<script lang="ts" setup>
+import { defineProps } from "vue";
+const props = defineProps({
+  msg: String,
+});
+</script>