feat: implement Topology on the dashboard (#14)

src/graphql/fetch.ts

@@ -0,0 +1,37 @@
+/**
+ * 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 axios, { AxiosResponse } from "axios";
+import { cancelToken } from "@/utils/cancelToken";
+
+async function query(param: {
+  queryStr: string;
+  conditions: { [key: string]: unknown };
+}) {
+  const res: AxiosResponse = await axios.post(
+    "/graphql",
+    { query: param.queryStr, variables: { ...param.conditions } },
+    { cancelToken: cancelToken() }
+  );
+  if (res.data.errors) {
+    res.data.errors = res.data.errors
+      .map((e: { message: string }) => e.message)
+      .join(" ");
+  }
+  return res;
+}
+
+export default query;

src/graphql/fragments/app.ts

@@ -0,0 +1,28 @@
+/**
+ * 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 OAPTimeInfo = {
+  query: `
+    getTimeInfo {
+      timezone
+      currentTimestamp
+    }
+  `,
+};
+
+export const OAPVersion = {
+  query: `version { version }`,
+};

src/graphql/fragments/dashboard.ts

@@ -0,0 +1,46 @@
+/**
+ * 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 TypeOfMetrics = {
+  variable: "$name: String!",
+  query: `typeOfMetrics(name: $name)`,
+};
+export const listMetrics = {
+  variable: "$regex: String",
+  query: `
+  metrics: listMetrics(regex: $regex) {
+    value: name
+    label: name
+    type
+    catalog
+  }
+  `,
+};
+
+export const queryHeatMap = {
+  variable: ["$condition: MetricsCondition!, $duration: Duration!"],
+  query: `
+  readHeatMap: readHeatMap(condition: $condition, duration: $duration) {
+    values {
+      id
+      values
+    }
+    buckets {
+      min
+      max
+    }
+  }`,
+};

src/graphql/fragments/selector.ts

@@ -0,0 +1,106 @@
+/**
+ * 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) {
+    id
+    value: name
+      label: name
+      group
+      layers
+      normal
+  }
+  `,
+};
+export const Layers = {
+  query: `
+    layers: listLayers
+  `,
+};
+export const Instances = {
+  variable: "$serviceId: ID!, $duration: Duration!",
+  query: `
+  pods: listInstances(duration: $duration, serviceId: $serviceId) {
+     id
+     value: name
+      label: name
+      language
+      instanceUUID
+      layer
+      attributes {
+        name
+        value
+      }
+    }
+  `,
+};
+export const Endpoints = {
+  variable: "$serviceId: ID!, $keyword: String!",
+  query: `
+  pods: findEndpoint(serviceId: $serviceId, keyword: $keyword, limit: 100) {
+    id
+    value: name
+     label: name
+    }
+`,
+};
+
+export const getService = {
+  variable: "$serviceId: String!",
+  query: `
+  service: getService(serviceId: $serviceId) {
+    id
+    value: name
+      label: name
+      group
+      layers
+      normal
+  }
+  `,
+};
+
+export const getInstance = {
+  variable: "$instanceId: String!",
+  query: `
+  instance: getInstance(instanceId: $instanceId) {
+    id
+     value: name
+      label: name
+      language
+      instanceUUID
+      layer
+      attributes {
+        name
+        value
+      }
+    }
+  `,
+};
+
+export const getEndpoint = {
+  variable: "$endpointId: ID!",
+  query: `
+  endpoint: getEndpointInfo(endpointId: $endpointId) {
+    id
+     value: name
+      label: name
+      serviceId
+      serviceName
+  }
+  `,
+};

src/graphql/fragments/topology.ts

@@ -0,0 +1,77 @@
+/**
+ * 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 ServicesTopology = {
+  variable: "$duration: Duration!, $serviceIds: [ID!]!",
+  query: `
+  topology: getServicesTopology(duration: $duration, serviceIds: $serviceIds) {
+    nodes {
+      id
+      name
+      type
+      isReal
+    }
+    calls {
+      id
+      source
+      detectPoints
+      target
+    }
+  }`,
+};
+export const EndpointTopology = {
+  variable: ["$endpointId: ID!", "$duration: Duration!"],
+  query: `
+  topology: getEndpointDependencies(endpointId: $endpointId, duration: $duration) {
+    nodes {
+      id
+      name
+      serviceId
+      serviceName
+      type
+      isReal
+    }
+    calls {
+      id
+      source
+      target
+      detectPoints
+    }
+  }`,
+};
+export const InstanceTopology = {
+  variable:
+    "$clientServiceId: ID!, $serverServiceId: ID!, $duration: Duration!",
+  query: `
+  topology: getServiceInstanceTopology(clientServiceId: $clientServiceId,
+    serverServiceId: $serverServiceId, duration: $duration) {
+    nodes {
+      id
+      name
+      type
+      isReal
+      serviceName
+      serviceId
+    }
+    calls {
+      id
+      source
+      detectPoints
+      target
+    }
+  }
+`,
+};

src/graphql/index.ts

@@ -0,0 +1,60 @@
+/**
+ * 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 axios, { AxiosPromise, AxiosResponse } from "axios";
+import { cancelToken } from "@/utils/cancelToken";
+import * as app from "./query/app";
+import * as selector from "./query/selector";
+import * as dashboard from "./query/dashboard";
+import * as topology from "./query/topology";
+
+const query: { [key: string]: string } = {
+  ...app,
+  ...selector,
+  ...dashboard,
+  ...topology,
+};
+class Graphql {
+  private queryData = "";
+  public query(queryData: string) {
+    this.queryData = queryData;
+    return this;
+  }
+  public params(variablesData: unknown): AxiosPromise<void> {
+    return axios
+      .post(
+        "/graphql",
+        {
+          query: query[this.queryData],
+          variables: variablesData,
+        },
+        { cancelToken: cancelToken() }
+      )
+      .then((res: AxiosResponse) => {
+        if (res.data.errors) {
+          res.data.errors = res.data.errors
+            .map((e: { message: string }) => e.message)
+            .join(" ");
+        }
+        return res;
+      })
+      .catch((err: Error) => {
+        throw err;
+      });
+  }
+}
+
+export default new Graphql();

src/graphql/query/app.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 { OAPTimeInfo, OAPVersion } from "../fragments/app";
+
+export const queryOAPTimeInfo = `query queryOAPTimeInfo {${OAPTimeInfo.query}}`;
+
+export const queryOAPVersion = `query ${OAPVersion.query}`;

src/graphql/query/dashboard.ts

@@ -0,0 +1,27 @@
+/**
+ * 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 {
+  TypeOfMetrics,
+  queryHeatMap,
+  listMetrics,
+} from "../fragments/dashboard";
+
+export const queryTypeOfMetrics = `query typeOfMetrics(${TypeOfMetrics.variable}) {${TypeOfMetrics.query}}`;
+
+export const readHeatMap = `query queryData(${queryHeatMap.variable}) {${queryHeatMap.query}}`;
+
+export const queryMetrics = `query queryData(${listMetrics.variable}) {${listMetrics.query}}`;

src/graphql/query/selector.ts

@@ -0,0 +1,33 @@
+/**
+ * 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,
+  Endpoints,
+  Instances,
+  getService,
+  getInstance,
+  getEndpoint,
+} from "../fragments/selector";
+
+export const queryServices = `query queryServices(${Services.variable}) {${Services.query}}`;
+export const queryEndpoints = `query queryEndpoints(${Endpoints.variable}) {${Endpoints.query}}`;
+export const queryInstances = `query queryInstances(${Instances.variable}) {${Instances.query}}`;
+export const queryLayers = `query listLayer {${Layers.query}}`;
+export const queryService = `query queryService(${getService.variable}) {${getService.query}}`;
+export const queryInstance = `query queryInstance(${getInstance.variable}) {${getInstance.query}}`;
+export const queryEndpoint = `query queryInstance(${getEndpoint.variable}) {${getEndpoint.query}}`;

src/graphql/query/topology.ts

@@ -0,0 +1,25 @@
+/**
+ * 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 {
+  InstanceTopology,
+  EndpointTopology,
+  ServicesTopology,
+} from "../fragments/topology";
+
+export const getInstanceTopology = `query queryData(${InstanceTopology.variable}) {${InstanceTopology.query}}`;
+export const getEndpointTopology = `query queryData(${EndpointTopology.variable}) {${EndpointTopology.query}}`;
+export const getServicesTopology = `query queryData(${ServicesTopology.variable}) {${ServicesTopology.query}}`;