feat: create image, intstance list, endpoint list

package.json

@@ -76,9 +76,15 @@
       "ecmaVersion": 2020
     },
     "rules": {
-      "@typescript-eslint/no-explicit-any": [
-        "off"
-      ]
+      "@typescript-eslint/no-explicit-any": "off",
+      "vue/attributes-order": "off",
+      "vue/one-component-per-file": "off",
+      "vue/html-closing-bracket-newline": "off",
+      "vue/max-attributes-per-line": "off",
+      "vue/multiline-html-element-content-newline": "off",
+      "vue/singleline-html-element-content-newline": "off",
+      "vue/attribute-hyphenation": "off",
+      "vue/require-default-prop": "off"
     },
     "overrides": [
       {

src/components/Graph.vue

@@ -26,7 +26,7 @@ import {
 } from "vue";
 import type { PropType } from "vue";
 import * as echarts from "echarts";
-// eslint-disable-next-line no-undef
+/*global Nullable*/
 const dom = ref<Nullable<HTMLElement>>(null);
 const state = reactive<{ instanceChart: any }>({
   instanceChart: null,

src/graph/fragments/selector.ts

@@ -30,3 +30,26 @@ export const Layers = {
     layers: listLayers
   `,
 };
+export const Instances = {
+  variable: "$serviceId: ID!, $duration: Duration!",
+  query: `
+    getServiceInstances(duration: $duration, serviceId: $serviceId) {
+      key: id
+      label: name
+      language
+      attributes {
+        name
+        value
+      }
+    }
+  `,
+};
+export const Endpoints = {
+  variable: "$serviceId: ID!, $keyword: String!",
+  query: `
+    getEndpoints: searchEndpoint(serviceId: $serviceId, keyword: $keyword, limit: 100) {
+      key: id
+      label: name
+    }
+`,
+};

src/graph/query/selector.ts

@@ -14,7 +14,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Services, Layers } from "../fragments/selector";
+import { Services, Layers, Endpoints, Instances } from "../fragments/selector";
 
 export const queryServices = `query queryServices(${Services.variable}) {${Services.query}}`;
 export const queryLayers = `query ${Layers.query}`;
+export const queryEndpoints = `query queryEndpoints(${Endpoints.variable}) {${Endpoints.query}}`;
+
+export const queryInstances = `query queryInstances(${Instances.variable}) {${Instances.query}}`;

src/store/modules/app.ts

@@ -20,7 +20,7 @@ import { Duration, DurationTime } from "@/types/app";
 import getLocalTime from "@/utils/localtime";
 import getDurationRow from "@/utils/dateTime";
 import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat";
-
+/*global Nullable*/
 interface AppState {
   durationRow: any;
   utc: string;

src/store/modules/selectors.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import { defineStore } from "pinia";
-import { Option } from "@/types/app";
+import { Option, Duration } from "@/types/app";
 import { store } from "@/store";
 import graph from "@/graph";
 import { AxiosResponse } from "axios";
@@ -45,6 +45,27 @@ export const selectorStore = defineStore({
       }
       return res;
     },
+    async getServiceInstances(params: {
+      serviceId: string;
+      duration: Duration;
+    }): Promise<AxiosResponse> {
+      const res: AxiosResponse = await graph
+        .query("queryInstances")
+        .params(params);
+      return res;
+    },
+    async getEndpoints(params: {
+      keyword: string;
+      serviceId: string;
+    }): Promise<AxiosResponse> {
+      if (!params.keyword) {
+        params.keyword = "";
+      }
+      const res: AxiosResponse = await graph
+        .query("queryEndpoints")
+        .params(params);
+      return res;
+    },
   },
 });
 

src/views/dashboard/controls/Image.vue

@@ -0,0 +1,35 @@
+<!-- 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>
+  <input v-show="!imgUrl" type="file" @change="fileChange" accept="image/*" />
+  <img v-if="imgUrl" :src="imgUrl" alt="" />
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+const imgUrl = ref<string>("");
+const fileChange = (e: any) => {
+  const fileList = e.target.files;
+  if (fileList.length === 0) {
+    imgUrl.value = "";
+    return;
+  }
+  const file = fileList[0];
+  const reader = new FileReader();
+  reader.onload = (event: any) => {
+    imgUrl.value = event.target.result;
+  };
+  reader.readAsDataURL(file);
+};
+</script>

src/views/dashboard/controls/Tab.vue

@@ -0,0 +1,14 @@
+<!-- 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. -->

src/views/dashboard/data.ts

@@ -23,9 +23,9 @@ export const ChartTypes = [
   { label: "Card", value: "card" },
   { label: "Progress Bar", value: "progressBar" },
   { label: "Table", value: "table" },
-  { label: "Image", value: "image" },
   { label: "Endpoint List", value: "endpointList" },
   { label: "Instance List", value: "instanceList" },
+  { label: "Image", value: "image" },
   { label: "Tab", value: "tab" },
 ];
 export enum MetricQueryTypes {

src/views/dashboard/graphs/EndpointList.vue

@@ -0,0 +1,55 @@
+<!-- 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>
+  <el-table :data="tableData" style="width: 100%">
+    <el-table-column prop="date" label="Date" width="180" />
+    <el-table-column prop="name" label="Name" width="180" />
+  </el-table>
+</template>
+<script setup lang="ts">
+import { ElTable, ElTableColumn } from "element-plus";
+import { defineProps } from "vue";
+import type { PropType } from "vue";
+
+defineProps({
+  data: {
+    type: Array as PropType<{ label: string; value: string }[]>,
+    default: () => [],
+  },
+  theme: { type: String, default: "" },
+});
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+];
+</script>

src/views/dashboard/graphs/InstanceList.vue

@@ -0,0 +1,55 @@
+<!-- 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>
+  <el-table :data="tableData" style="width: 100%">
+    <el-table-column prop="date" label="Date" width="180" />
+    <el-table-column prop="name" label="Name" width="180" />
+  </el-table>
+</template>
+<script setup lang="ts">
+import { ElTable, ElTableColumn } from "element-plus";
+import { defineProps } from "vue";
+import type { PropType } from "vue";
+
+defineProps({
+  data: {
+    type: Array as PropType<{ label: string; value: string }[]>,
+    default: () => [],
+  },
+  theme: { type: String, default: "" },
+});
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+];
+</script>

src/views/dashboard/graphs/Table.vue

@@ -60,10 +60,11 @@ const props = defineProps({
     default: () => ({}),
   },
 });
-const chartTable = ref<any>(null);
+/*global Nullable*/
+const chartTable = ref<Nullable<HTMLElement>>(null);
 const initWidth = ref<number>(0);
 const nameWidth = ref<number>(0);
-const draggerName = ref<any>(0);
+const draggerName = ref<Nullable<HTMLElement>>(null);
 onMounted(() => {
   if (!chartTable.value) {
     return;

src/views/dashboard/graphs/index.ts

@@ -0,0 +1,36 @@
+/**
+ * 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 ChartArea from "./Area.vue";
+import ChartLine from "./Line.vue";
+import ChartBar from "./Bar.vue";
+import ChartHeatmap from "./Heatmap.vue";
+import ProgressBar from "./ProgressBar.vue";
+import ChartTable from "./Table.vue";
+import ChartPie from "./Pie.vue";
+import ChartCard from "./Card.vue";
+
+export default {
+  ChartLine,
+  ChartBar,
+  ChartHeatmap,
+  ProgressBar,
+  ChartArea,
+  ChartTable,
+  ChartPie,
+  ChartCard,
+};