├── .asf.yaml
├── .config
    ├── .eslintrc
    ├── .prettierrc.js
    ├── Dockerfile
    ├── README.md
    ├── jest-setup.js
    ├── jest.config.js
    ├── jest
    │   ├── mocks
    │   │   └── react-inlinesvg.tsx
    │   └── utils.js
    ├── tsconfig.json
    ├── types
    │   └── custom.d.ts
    └── webpack
    │   ├── constants.ts
    │   ├── utils.ts
    │   └── webpack.config.ts
├── .eslintrc
├── .github
    └── workflows
    │   └── nodejs.yml
├── .gitignore
├── .licenserc.yaml
├── .prettierrc.js
├── CHANGELOG.md
├── DEVELOPMENT.md
├── LICENSE
├── Makefile
├── README.md
├── cypress
    └── integration
    │   └── 01-smoke.spec.ts
├── docker-compose.yaml
├── jest-setup.js
├── jest.config.js
├── package.json
├── release.md
├── src
    ├── components
    │   ├── ConfigEditor.tsx
    │   └── QueryEditor.tsx
    ├── constant.ts
    ├── datasource.ts
    ├── img
    │   ├── config.png
    │   ├── logo-sw.svg
    │   ├── logo.svg
    │   ├── query.png
    │   └── view.png
    ├── module.ts
    ├── plugin.json
    └── types.ts
├── tsconfig.json
└── yarn.lock


/.asf.yaml:
--------------------------------------------------------------------------------
 1 | #
 2 | # Licensed to the Apache Software Foundation (ASF) under one or more
 3 | # contributor license agreements.  See the NOTICE file distributed with
 4 | # this work for additional information regarding copyright ownership.
 5 | # The ASF licenses this file to You under the Apache License, Version 2.0
 6 | # (the "License"); you may not use this file except in compliance with
 7 | # the License.  You may obtain a copy of the License at
 8 | #
 9 | #     http://www.apache.org/licenses/LICENSE-2.0
10 | #
11 | # Unless required by applicable law or agreed to in writing, software
12 | # distributed under the License is distributed on an "AS IS" BASIS,
13 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 | # See the License for the specific language governing permissions and
15 | # limitations under the License.
16 | #
17 | 
18 | github:
19 |   description: SkyWalking Grafana Plugins provide extensions for Apache SkyWalking to visualize telemetry data on Grafana.
20 |   homepage: https://skywalking.apache.org/
21 |   labels:
22 |     - skywalking
23 |     - observability
24 |     - apm
25 |     - visualization
26 |     - grafana
27 |   enabled_merge_buttons:
28 |     squash:  true
29 |     merge:   false
30 |     rebase:  false
31 |   protected_branches:
32 |     main:
33 |       required_status_checks:
34 |         strict: true
35 |         contexts:
36 |           - build
37 |       required_pull_request_reviews:
38 |         dismiss_stale_reviews: true
39 |         required_approving_review_count: 1
40 | 


--------------------------------------------------------------------------------
/.config/.eslintrc:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
 3 |  *
 4 |  * In order to extend the configuration follow the steps in
 5 |  * https://grafana.github.io/plugin-tools/docs/advanced-configuration#extending-the-eslint-config
 6 |  */
 7 |  {
 8 |   "extends": ["@grafana/eslint-config"],
 9 |   "root": true,
10 |   "rules": {
11 |     "react/prop-types": "off"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/.config/.prettierrc.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
 3 |  *
 4 |  * In order to extend the configuration follow the steps in .config/README.md
 5 |  */
 6 | 
 7 | module.exports = {
 8 |   "endOfLine": "auto",
 9 |   "printWidth": 120,
10 |   "trailingComma": "es5",
11 |   "semi": true,
12 |   "jsxSingleQuote": false,
13 |   "singleQuote": true,
14 |   "useTabs": false,
15 |   "tabWidth": 2
16 | };


--------------------------------------------------------------------------------
/.config/Dockerfile:
--------------------------------------------------------------------------------
 1 | ARG grafana_version=latest
 2 | ARG grafana_image=grafana-oss
 3 | 
 4 | FROM grafana/${grafana_image}:${grafana_version}
 5 | 
 6 | # Make it as simple as possible to access the grafana instance for development purposes
 7 | # Do NOT enable these settings in a public facing / production grafana instance
 8 | ENV GF_AUTH_ANONYMOUS_ORG_ROLE "Admin"
 9 | ENV GF_AUTH_ANONYMOUS_ENABLED "true"
10 | ENV GF_AUTH_BASIC_ENABLED "false"
11 | # Set development mode so plugins can be loaded without the need to sign
12 | ENV GF_DEFAULT_APP_MODE "development"
13 | 
14 | # Inject livereload script into grafana index.html
15 | USER root
16 | RUN sed -i 's/<\/body><\/html>/<script src=\"http:\/\/localhost:35729\/livereload.js\"><\/script><\/body><\/html>/g' /usr/share/grafana/public/views/index.html
17 | 


--------------------------------------------------------------------------------
/.config/README.md:
--------------------------------------------------------------------------------
  1 | # Default build configuration by Grafana
  2 | 
  3 | **This is an auto-generated directory and is not intended to be changed! ⚠️**
  4 | 
  5 | The `.config/` directory holds basic configuration for the different tools
  6 | that are used to develop, test and build the project. In order to make it updates easier we ask you to
  7 | not edit files in this folder to extend configuration.
  8 | 
  9 | ## How to extend the basic configs?
 10 | 
 11 | Bear in mind that you are doing it at your own risk, and that extending any of the basic configuration can lead
 12 | to issues around working with the project.
 13 | 
 14 | ### Extending the ESLint config
 15 | 
 16 | Edit the `.eslintrc` file in the project root in order to extend the ESLint configuration.
 17 | 
 18 | **Example:**
 19 | 
 20 | ```json
 21 | {
 22 |   "extends": "./.config/.eslintrc",
 23 |   "rules": {
 24 |     "react/prop-types": "off"
 25 |   }
 26 | }
 27 | ```
 28 | 
 29 | ---
 30 | 
 31 | ### Extending the Prettier config
 32 | 
 33 | Edit the `.prettierrc.js` file in the project root in order to extend the Prettier configuration.
 34 | 
 35 | **Example:**
 36 | 
 37 | ```javascript
 38 | module.exports = {
 39 |   // Prettier configuration provided by Grafana scaffolding
 40 |   ...require('./.config/.prettierrc.js'),
 41 | 
 42 |   semi: false,
 43 | };
 44 | ```
 45 | 
 46 | ---
 47 | 
 48 | ### Extending the Jest config
 49 | 
 50 | There are two configuration in the project root that belong to Jest: `jest-setup.js` and `jest.config.js`.
 51 | 
 52 | **`jest-setup.js`:** A file that is run before each test file in the suite is executed. We are using it to
 53 | set up the Jest DOM for the testing library and to apply some polyfills. ([link to Jest docs](https://jestjs.io/docs/configuration#setupfilesafterenv-array))
 54 | 
 55 | **`jest.config.js`:** The main Jest configuration file that extends the Grafana recommended setup. ([link to Jest docs](https://jestjs.io/docs/configuration))
 56 | 
 57 | #### ESM errors with Jest
 58 | 
 59 | A common issue found with the current jest config involves importing an npm package which only offers an ESM build. These packages cause jest to error with `SyntaxError: Cannot use import statement outside a module`. To work around this we provide a list of known packages to pass to the `[transformIgnorePatterns](https://jestjs.io/docs/configuration#transformignorepatterns-arraystring)` jest configuration property. If need be this can be extended in the following way:
 60 | 
 61 | ```javascript
 62 | process.env.TZ = 'UTC';
 63 | const { grafanaESModules, nodeModulesToTransform } = require('./jest/utils');
 64 | 
 65 | module.exports = {
 66 |   // Jest configuration provided by Grafana
 67 |   ...require('./.config/jest.config'),
 68 |   // Inform jest to only transform specific node_module packages.
 69 |   transformIgnorePatterns: [nodeModulesToTransform([...grafanaESModules, 'packageName'])],
 70 | };
 71 | ```
 72 | 
 73 | ---
 74 | 
 75 | ### Extending the TypeScript config
 76 | 
 77 | Edit the `tsconfig.json` file in the project root in order to extend the TypeScript configuration.
 78 | 
 79 | **Example:**
 80 | 
 81 | ```json
 82 | {
 83 |   "extends": "./.config/tsconfig.json",
 84 |   "compilerOptions": {
 85 |     "preserveConstEnums": true
 86 |   }
 87 | }
 88 | ```
 89 | 
 90 | ---
 91 | 
 92 | ### Extending the Webpack config
 93 | 
 94 | Follow these steps to extend the basic Webpack configuration that lives under `.config/`:
 95 | 
 96 | #### 1. Create a new Webpack configuration file
 97 | 
 98 | Create a new config file that is going to extend the basic one provided by Grafana.
 99 | It can live in the project root, e.g. `webpack.config.ts`.
100 | 
101 | #### 2. Merge the basic config provided by Grafana and your custom setup
102 | 
103 | We are going to use [`webpack-merge`](https://github.com/survivejs/webpack-merge) for this.
104 | 
105 | ```typescript
106 | // webpack.config.ts
107 | import type { Configuration } from 'webpack';
108 | import { merge } from 'webpack-merge';
109 | import grafanaConfig from './.config/webpack/webpack.config';
110 | 
111 | const config = async (env): Promise<Configuration> => {
112 |   const baseConfig = await grafanaConfig(env);
113 | 
114 |   return merge(baseConfig, {
115 |     // Add custom config here...
116 |     output: {
117 |       asyncChunks: true,
118 |     },
119 |   });
120 | };
121 | 
122 | export default config;
123 | ```
124 | 
125 | #### 3. Update the `package.json` to use the new Webpack config
126 | 
127 | We need to update the `scripts` in the `package.json` to use the extended Webpack configuration.
128 | 
129 | **Update for `build`:**
130 | 
131 | ```diff
132 | -"build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
133 | +"build": "webpack -c ./webpack.config.ts --env production",
134 | ```
135 | 
136 | **Update for `dev`:**
137 | 
138 | ```diff
139 | -"dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",
140 | +"dev": "webpack -w -c ./webpack.config.ts --env development",
141 | ```
142 | 
143 | ### Configure grafana image to use when running docker
144 | 
145 | By default `grafana-enterprise` will be used as the docker image for all docker related commands. If you want to override this behaviour simply alter the `docker-compose.yaml` by adding the following build arg `grafana_image`. 
146 | 
147 | **Example:**
148 | 
149 | ```yaml
150 | version: '3.7'
151 | 
152 | services:
153 |   grafana:
154 |     container_name: 'myorg-basic-app'
155 |     build:
156 |       context: ./.config
157 |       args:
158 |         grafana_version: ${GRAFANA_VERSION:-9.1.2}
159 |         grafana_image: ${GRAFANA_IMAGE:-grafana}
160 | ```
161 | 
162 | In this example we are assigning the environment variable `GRAFANA_IMAGE` to the build arg `grafana_image` with a default value of `grafana`. This will give you the possibility to set the value while running the docker-compose commands which might be convinent in some scenarios.
163 | 
164 | ---


--------------------------------------------------------------------------------
/.config/jest-setup.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
 3 |  *
 4 |  * In order to extend the configuration follow the steps in
 5 |  * https://grafana.github.io/plugin-tools/docs/advanced-configuration#extending-the-jest-config
 6 |  */
 7 | 
 8 | import '@testing-library/jest-dom';
 9 | 
10 | // https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
11 | Object.defineProperty(global, 'matchMedia', {
12 |   writable: true,
13 |   value: jest.fn().mockImplementation((query) => ({
14 |     matches: false,
15 |     media: query,
16 |     onchange: null,
17 |     addListener: jest.fn(), // deprecated
18 |     removeListener: jest.fn(), // deprecated
19 |     addEventListener: jest.fn(),
20 |     removeEventListener: jest.fn(),
21 |     dispatchEvent: jest.fn(),
22 |   })),
23 | });
24 | 
25 | HTMLCanvasElement.prototype.getContext = () => {};
26 | 


--------------------------------------------------------------------------------
/.config/jest.config.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
 3 |  *
 4 |  * In order to extend the configuration follow the steps in
 5 |  * https://grafana.github.io/plugin-tools/docs/advanced-configuration#extending-the-jest-config
 6 |  */
 7 | 
 8 | const path = require('path');
 9 | const { grafanaESModules, nodeModulesToTransform } = require('./jest/utils');
10 | 
11 | module.exports = {
12 |   moduleNameMapper: {
13 |     '\\.(css|scss|sass)$': 'identity-obj-proxy',
14 |     'react-inlinesvg': path.resolve(__dirname, 'jest', 'mocks', 'react-inlinesvg.tsx'),
15 |   },
16 |   modulePaths: ['<rootDir>/src'],
17 |   setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
18 |   testEnvironment: 'jest-environment-jsdom',
19 |   testMatch: [
20 |     '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
21 |     '<rootDir>/src/**/*.{spec,test,jest}.{js,jsx,ts,tsx}',
22 |     '<rootDir>/src/**/*.{spec,test,jest}.{js,jsx,ts,tsx}',
23 |   ],
24 |   transform: {
25 |     '^.+\\.(t|j)sx?$': [
26 |       '@swc/jest',
27 |       {
28 |         sourceMaps: true,
29 |         jsc: {
30 |           parser: {
31 |             syntax: 'typescript',
32 |             tsx: true,
33 |             decorators: false,
34 |             dynamicImport: true,
35 |           },
36 |         },
37 |       },
38 |     ],
39 |   },
40 |   // Jest will throw `Cannot use import statement outside module` if it tries to load an
41 |   // ES module without it being transformed first. ./config/README.md#esm-errors-with-jest
42 |   transformIgnorePatterns: [nodeModulesToTransform(grafanaESModules)],
43 | };
44 | 


--------------------------------------------------------------------------------
/.config/jest/mocks/react-inlinesvg.tsx:
--------------------------------------------------------------------------------
 1 | // Due to the grafana/ui Icon component making fetch requests to
 2 | // `/public/img/icon/<icon_name>.svg` we need to mock react-inlinesvg to prevent
 3 | // the failed fetch requests from displaying errors in console.
 4 | 
 5 | import React from 'react';
 6 | 
 7 | type Callback = (...args: any[]) => void;
 8 | 
 9 | export interface StorageItem {
10 |   content: string;
11 |   queue: Callback[];
12 |   status: string;
13 | }
14 | 
15 | export const cacheStore: { [key: string]: StorageItem } = Object.create(null);
16 | 
17 | const SVG_FILE_NAME_REGEX = /(.+)\/(.+)\.svg$/;
18 | 
19 | const InlineSVG = ({ src }: { src: string }) => {
20 |   // testId will be the file name without extension (e.g. `public/img/icons/angle-double-down.svg` -> `angle-double-down`)
21 |   const testId = src.replace(SVG_FILE_NAME_REGEX, '$2');
22 |   return <svg xmlns="http://www.w3.org/2000/svg" data-testid={testId} viewBox="0 0 24 24" />;
23 | };
24 | 
25 | export default InlineSVG;
26 | 


--------------------------------------------------------------------------------
/.config/jest/utils.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
 3 |  *
 4 |  * In order to extend the configuration follow the steps in .config/README.md
 5 |  */
 6 | 
 7 | /*
 8 |  * This utility function is useful in combination with jest `transformIgnorePatterns` config
 9 |  * to transform specific packages (e.g.ES modules) in a projects node_modules folder.
10 |  */
11 | const nodeModulesToTransform = (moduleNames) => `node_modules\/(?!(${moduleNames.join('|')})\/)`;
12 | 
13 | // Array of known nested grafana package dependencies that only bundle an ESM version
14 | const grafanaESModules = [
15 |   'd3',
16 |   'd3-color',
17 |   'd3-force',
18 |   'd3-interpolate',
19 |   'd3-scale-chromatic',
20 |   'ol',
21 |   'react-colorful',
22 |   'uuid',
23 | ];
24 | 
25 | module.exports = {
26 |   nodeModulesToTransform,
27 |   grafanaESModules
28 | }


--------------------------------------------------------------------------------
/.config/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
 3 |  *
 4 |  * In order to extend the configuration follow the steps in
 5 |  * https://grafana.github.io/plugin-tools/docs/advanced-configuration#extending-the-typescript-config
 6 |  */
 7 |  {
 8 |   "compilerOptions": {
 9 |     "alwaysStrict": true,
10 |     "declaration": false,
11 |     "rootDir": "../src",
12 |     "baseUrl": "../src",
13 |     "typeRoots": ["../node_modules/@types"],
14 |     "resolveJsonModule": true
15 |   },
16 |   "ts-node": {
17 |     "compilerOptions": {
18 |       "module": "commonjs",
19 |       "target": "es5",
20 |       "esModuleInterop": true
21 |     },
22 |     "transpileOnly": true
23 |   },
24 |   "include": ["../src", "./types"],
25 |   "extends": "@grafana/tsconfig"
26 | }
27 | 


--------------------------------------------------------------------------------
/.config/types/custom.d.ts:
--------------------------------------------------------------------------------
 1 | // Image declarations
 2 | declare module '*.gif' {
 3 |   const src: string;
 4 |   export default src;
 5 | }
 6 | 
 7 | declare module '*.jpg' {
 8 |   const src: string;
 9 |   export default src;
10 | }
11 | 
12 | declare module '*.jpeg' {
13 |   const src: string;
14 |   export default src;
15 | }
16 | 
17 | declare module '*.png' {
18 |   const src: string;
19 |   export default src;
20 | }
21 | 
22 | declare module '*.webp' {
23 |   const src: string;
24 |   export default src;
25 | }
26 | 
27 | declare module '*.svg' {
28 |   const content: string;
29 |   export default content;
30 | }
31 | 
32 | // Font declarations
33 | declare module '*.woff';
34 | declare module '*.woff2';
35 | declare module '*.eot';
36 | declare module '*.ttf';
37 | declare module '*.otf';
38 | 


--------------------------------------------------------------------------------
/.config/webpack/constants.ts:
--------------------------------------------------------------------------------
1 | export const SOURCE_DIR = 'src';
2 | export const DIST_DIR = 'dist';
3 | 


--------------------------------------------------------------------------------
/.config/webpack/utils.ts:
--------------------------------------------------------------------------------
 1 | import fs from 'fs';
 2 | import path from 'path';
 3 | import util from 'util';
 4 | import glob from 'glob';
 5 | import { SOURCE_DIR } from './constants';
 6 | 
 7 | const globAsync = util.promisify(glob);
 8 | 
 9 | export function getPackageJson() {
10 |   return require(path.resolve(process.cwd(), 'package.json'));
11 | }
12 | 
13 | export function getPluginJson() {
14 |   return require(path.resolve(process.cwd(), `${SOURCE_DIR}/plugin.json`));
15 | }
16 | 
17 | export function hasReadme() {
18 |   return fs.existsSync(path.resolve(process.cwd(), SOURCE_DIR, 'README.md'));
19 | }
20 | 
21 | // Support bundling nested plugins by finding all plugin.json files in src directory
22 | // then checking for a sibling module.[jt]sx? file.
23 | export async function getEntries(): Promise<Record<string, string>> {
24 |   const pluginsJson = await globAsync('**/src/**/plugin.json', { absolute: true });
25 | 
26 |   const plugins = await Promise.all(pluginsJson.map((pluginJson) => {
27 |       const folder = path.dirname(pluginJson);
28 |       return globAsync(`${folder}/module.{ts,tsx,js,jsx}`, { absolute: true });
29 |     })
30 |   );
31 | 
32 |   return plugins.reduce((result, modules) => {
33 |     return modules.reduce((result, module) => {
34 |       const pluginPath = path.dirname(module);
35 |       const pluginName = path.relative(process.cwd(), pluginPath).replace(/src\/?/i, '');
36 |       const entryName = pluginName === '' ? 'module' : `${pluginName}/module`;
37 | 
38 |       result[entryName] = module;
39 |       return result;
40 |     }, result);
41 |   }, {});
42 | }
43 | 


--------------------------------------------------------------------------------
/.config/webpack/webpack.config.ts:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
  3 |  *
  4 |  * In order to extend the configuration follow the steps in
  5 |  * https://grafana.github.io/plugin-tools/docs/advanced-configuration#extending-the-webpack-config
  6 |  */
  7 | 
  8 | import CopyWebpackPlugin from 'copy-webpack-plugin';
  9 | import ESLintPlugin from 'eslint-webpack-plugin';
 10 | import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 11 | import LiveReloadPlugin from 'webpack-livereload-plugin';
 12 | import path from 'path';
 13 | import ReplaceInFileWebpackPlugin from 'replace-in-file-webpack-plugin';
 14 | import { Configuration } from 'webpack';
 15 | 
 16 | import { getPackageJson, getPluginJson, hasReadme, getEntries } from './utils';
 17 | import { SOURCE_DIR, DIST_DIR } from './constants';
 18 | 
 19 | const pluginJson = getPluginJson();
 20 | 
 21 | const config = async (env): Promise<Configuration> => ({
 22 |   cache: {
 23 |     type: 'filesystem',
 24 |     buildDependencies: {
 25 |       config: [__filename],
 26 |     },
 27 |   },
 28 | 
 29 |   context: path.join(process.cwd(), SOURCE_DIR),
 30 | 
 31 |   devtool: env.production ? 'source-map' : 'eval-source-map',
 32 | 
 33 |   entry: await getEntries(),
 34 | 
 35 |   externals: [
 36 |     'lodash',
 37 |     'jquery',
 38 |     'moment',
 39 |     'slate',
 40 |     'emotion',
 41 |     '@emotion/react',
 42 |     '@emotion/css',
 43 |     'prismjs',
 44 |     'slate-plain-serializer',
 45 |     '@grafana/slate-react',
 46 |     'react',
 47 |     'react-dom',
 48 |     'react-redux',
 49 |     'redux',
 50 |     'rxjs',
 51 |     'react-router',
 52 |     'react-router-dom',
 53 |     'd3',
 54 |     'angular',
 55 |     '@grafana/ui',
 56 |     '@grafana/runtime',
 57 |     '@grafana/data',
 58 | 
 59 |     // Mark legacy SDK imports as external if their name starts with the "grafana/" prefix
 60 |     ({ request }, callback) => {
 61 |       const prefix = 'grafana/';
 62 |       const hasPrefix = (request) => request.indexOf(prefix) === 0;
 63 |       const stripPrefix = (request) => request.substr(prefix.length);
 64 | 
 65 |       if (hasPrefix(request)) {
 66 |         return callback(undefined, stripPrefix(request));
 67 |       }
 68 | 
 69 |       callback();
 70 |     },
 71 |   ],
 72 | 
 73 |   mode: env.production ? 'production' : 'development',
 74 | 
 75 |   module: {
 76 |     rules: [
 77 |       {
 78 |         exclude: /(node_modules)/,
 79 |         test: /\.[tj]sx?$/,
 80 |         use: {
 81 |           loader: 'swc-loader',
 82 |           options: {
 83 |             jsc: {
 84 |               baseUrl: './src',
 85 |               target: 'es2015',
 86 |               loose: false,
 87 |               parser: {
 88 |                 syntax: 'typescript',
 89 |                 tsx: true,
 90 |                 decorators: false,
 91 |                 dynamicImport: true,
 92 |               },
 93 |             },
 94 |           },
 95 |         },
 96 |       },
 97 |       {
 98 |         test: /\.css$/,
 99 |         use: ["style-loader", "css-loader"]
100 |       },
101 |       {
102 |         test: /\.s[ac]ss$/,
103 |         use: ['style-loader', 'css-loader', 'sass-loader'],
104 |       },
105 |       {
106 |         test: /\.(png|jpe?g|gif|svg)$/,
107 |         type: 'asset/resource',
108 |         generator: {
109 |           // Keep publicPath relative for host.com/grafana/ deployments
110 |           publicPath: `public/plugins/${pluginJson.id}/img/`,
111 |           outputPath: 'img/',
112 |           filename: Boolean(env.production) ? '[hash][ext]' : '[name][ext]',
113 |         },
114 |       },
115 |       {
116 |         test: /\.(woff|woff2|eot|ttf|otf)(\?v=\d+\.\d+\.\d+)?$/,
117 |         type: 'asset/resource',
118 |         generator: {
119 |           // Keep publicPath relative for host.com/grafana/ deployments
120 |           publicPath: `public/plugins/${pluginJson.id}/fonts`,
121 |           outputPath: 'fonts/',
122 |           filename: Boolean(env.production) ? '[hash][ext]' : '[name][ext]',
123 |         },
124 |       },
125 |     ],
126 |   },
127 | 
128 |   output: {
129 |     clean: {
130 |       keep: new RegExp(`.*?_(amd64|arm(64)?)(.exe)?`),
131 |     },
132 |     filename: '[name].js',
133 |     library: {
134 |       type: 'amd',
135 |     },
136 |     path: path.resolve(process.cwd(), DIST_DIR),
137 |     publicPath: '/',
138 |   },
139 | 
140 |   plugins: [
141 |     new CopyWebpackPlugin({
142 |       patterns: [
143 |         // If src/README.md exists use it; otherwise the root README
144 |         // To `compiler.options.output`
145 |         { from: hasReadme() ? 'README.md' : '../README.md', to: '.', force: true },
146 |         { from: 'plugin.json', to: '.' },
147 |         { from: '../LICENSE', to: '.' },
148 |         { from: '../CHANGELOG.md', to: '.', force: true },
149 |         { from: '**/*.json', to: '.' }, // TODO<Add an error for checking the basic structure of the repo>
150 |         { from: '**/*.svg', to: '.', noErrorOnMissing: true }, // Optional
151 |         { from: '**/*.png', to: '.', noErrorOnMissing: true }, // Optional
152 |         { from: '**/*.html', to: '.', noErrorOnMissing: true }, // Optional
153 |         { from: 'img/**/*', to: '.', noErrorOnMissing: true }, // Optional
154 |         { from: 'libs/**/*', to: '.', noErrorOnMissing: true }, // Optional
155 |         { from: 'static/**/*', to: '.', noErrorOnMissing: true }, // Optional
156 |       ],
157 |     }),
158 |     // Replace certain template-variables in the README and plugin.json
159 |     new ReplaceInFileWebpackPlugin([
160 |       {
161 |         dir: DIST_DIR,
162 |         files: ['plugin.json', 'README.md'],
163 |         rules: [
164 |           {
165 |             search: /\%VERSION\%/g,
166 |             replace: getPackageJson().version,
167 |           },
168 |           {
169 |             search: /\%TODAY\%/g,
170 |             replace: new Date().toISOString().substring(0, 10),
171 |           },
172 |           {
173 |             search: /\%PLUGIN_ID\%/g,
174 |             replace: pluginJson.id,
175 |           },
176 |         ],
177 |       },
178 |     ]),
179 |     new ForkTsCheckerWebpackPlugin({
180 |       async: Boolean(env.development),
181 |       issue: {
182 |         include: [{ file: '**/*.{ts,tsx}' }],
183 |       },
184 |       typescript: { configFile: path.join(process.cwd(), 'tsconfig.json') },
185 |     }),
186 |     new ESLintPlugin({
187 |       extensions: ['.ts', '.tsx'],
188 |       lintDirtyModulesOnly: Boolean(env.development), // don't lint on start, only lint changed files
189 |     }),
190 |     ...(env.development ? [new LiveReloadPlugin()] : []),
191 |   ],
192 | 
193 |   resolve: {
194 |     extensions: ['.js', '.jsx', '.ts', '.tsx'],
195 |     // handle resolving "rootDir" paths
196 |     modules: [path.resolve(process.cwd(), 'src'), 'node_modules'],
197 |     unsafeCache: true,
198 |   },
199 | });
200 | 
201 | export default config;
202 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Licensed to the Apache Software Foundation (ASF) under one or more
 3 |  * contributor license agreements.  See the NOTICE file distributed with
 4 |  * this work for additional information regarding copyright ownership.
 5 |  * The ASF licenses this file to You under the Apache License, Version 2.0
 6 |  * (the "License"); you may not use this file except in compliance with
 7 |  * the License.  You may obtain a copy of the License at
 8 |  *
 9 |  *      http://www.apache.org/licenses/LICENSE-2.0
10 |  *
11 |  * Unless required by applicable law or agreed to in writing, software
12 |  * distributed under the License is distributed on an "AS IS" BASIS,
13 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 |  * See the License for the specific language governing permissions and
15 |  * limitations under the License.
16 |  */
17 | {
18 |   "extends": "./.config/.eslintrc"
19 | }


--------------------------------------------------------------------------------
/.github/workflows/nodejs.yml:
--------------------------------------------------------------------------------
 1 | #
 2 | # Licensed to the Apache Software Foundation (ASF) under one or more
 3 | # contributor license agreements.  See the NOTICE file distributed with
 4 | # this work for additional information regarding copyright ownership.
 5 | # The ASF licenses this file to You under the Apache License, Version 2.0
 6 | # (the "License"); you may not use this file except in compliance with
 7 | # the License.  You may obtain a copy of the License at
 8 | #
 9 | #     http://www.apache.org/licenses/LICENSE-2.0
10 | #
11 | # Unless required by applicable law or agreed to in writing, software
12 | # distributed under the License is distributed on an "AS IS" BASIS,
13 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 | # See the License for the specific language governing permissions and
15 | # limitations under the License.
16 | #
17 | name: CI
18 | 
19 | on:
20 |   push:
21 |     branches:
22 |       - master
23 |       - main
24 |   pull_request:
25 |     branches:
26 |       - master
27 |       - main
28 | 
29 | jobs:
30 |   check-license:
31 |     runs-on: ubuntu-latest
32 |     steps:
33 |       - uses: actions/checkout@v2
34 |       - name: Check License
35 |         uses: apache/skywalking-eyes@9bd5feb86b5817aa6072b008f9866a2c3bbc8587
36 |         env:
37 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
38 |   yarn:
39 |     runs-on: ubuntu-latest
40 |     strategy:
41 |       matrix:
42 |         node-version: [16.x, 18.x]
43 |     steps:
44 |       - uses: actions/checkout@v3
45 | 
46 |       - name: Setup Node.js environment
47 |         uses: actions/setup-node@v3
48 |         with:
49 |           node-version: ${{ matrix.node-version }}
50 |           cache: 'yarn'
51 |       - name: Install dependencies
52 |         run: yarn install --immutable --prefer-offline
53 | 
54 |       - name: Check types
55 |         run: yarn typecheck
56 |       - name: Lint
57 |         run: yarn lint
58 |       - name: Unit tests
59 |         run: yarn test:ci
60 |       - name: Build frontend
61 |         run: yarn build
62 |         env:
63 |           CI: true
64 |   build:
65 |     runs-on: ubuntu-latest
66 |     timeout-minutes: 90
67 |     needs: [yarn, check-license]
68 |     steps:
69 |       - name: To pass or not pass
70 |         run: echo "Just to make the GitHub merge button green"
71 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | #
 2 | # Licensed to the Apache Software Foundation (ASF) under one
 3 | # or more contributor license agreements.  See the NOTICE file
 4 | # distributed with this work for additional information
 5 | # regarding copyright ownership.  The ASF licenses this file
 6 | # to you under the Apache License, Version 2.0 (the
 7 | # "License"); you may not use this file except in compliance
 8 | # with the License.  You may obtain a copy of the License at
 9 | #
10 | #   http://www.apache.org/licenses/LICENSE-2.0
11 | #
12 | # Unless required by applicable law or agreed to in writing,
13 | # software distributed under the License is distributed on an
14 | # "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15 | # KIND, either express or implied.  See the License for the
16 | # specific language governing permissions and limitations
17 | # under the License.
18 | #
19 | # Logs
20 | logs
21 | *.log
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | 
26 | node_modules/
27 | 
28 | # Runtime data
29 | pids
30 | *.pid
31 | *.seed
32 | *.pid.lock
33 | 
34 | # Directory for instrumented libs generated by jscoverage/JSCover
35 | lib-cov
36 | 
37 | # Coverage directory used by tools like istanbul
38 | coverage
39 | 
40 | # Compiled binary addons (https://nodejs.org/api/addons.html)
41 | dist/
42 | release/
43 | release-dist/
44 | artifacts/
45 | work/
46 | ci/
47 | e2e-results/
48 | **/cypress/videos
49 | **/cypress/report.json 
50 | 
51 | # Editor
52 | .idea
53 | .DS_Store
54 | 
55 | .eslintcache


--------------------------------------------------------------------------------
/.licenserc.yaml:
--------------------------------------------------------------------------------
 1 | #
 2 | # Licensed to the Apache Software Foundation (ASF) under one
 3 | # or more contributor license agreements.  See the NOTICE file
 4 | # distributed with this work for additional information
 5 | # regarding copyright ownership.  The ASF licenses this file
 6 | # to you under the Apache License, Version 2.0 (the
 7 | # "License"); you may not use this file except in compliance
 8 | # with the License.  You may obtain a copy of the License at
 9 | #
10 | #   http://www.apache.org/licenses/LICENSE-2.0
11 | #
12 | # Unless required by applicable law or agreed to in writing,
13 | # software distributed under the License is distributed on an
14 | # "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15 | # KIND, either express or implied.  See the License for the
16 | # specific language governing permissions and limitations
17 | # under the License.
18 | #
19 | header:
20 |   license:
21 |     spdx-id: Apache-2.0
22 |     copyright-owner: Apache Software Foundation
23 | 
24 |   paths-ignore:
25 |     - 'lib'
26 |     - 'dist'
27 |     - 'LICENSE'
28 |     - '.gitignore'
29 |     - 'yarn.lock'
30 |     - '.nvmrc'
31 |     - '.browserslistrc'
32 |     - '.config/**/*'
33 |     - '**/*.md'
34 |     - '**/*.json'
35 | 
36 |   comment: on-failure
37 | 


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Licensed to the Apache Software Foundation (ASF) under one or more
 3 |  * contributor license agreements.  See the NOTICE file distributed with
 4 |  * this work for additional information regarding copyright ownership.
 5 |  * The ASF licenses this file to You under the Apache License, Version 2.0
 6 |  * (the "License"); you may not use this file except in compliance with
 7 |  * the License.  You may obtain a copy of the License at
 8 |  *
 9 |  *      http://www.apache.org/licenses/LICENSE-2.0
10 |  *
11 |  * Unless required by applicable law or agreed to in writing, software
12 |  * distributed under the License is distributed on an "AS IS" BASIS,
13 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 |  * See the License for the specific language governing permissions and
15 |  * limitations under the License.
16 |  */
17 | module.exports = {
18 |   // Prettier configuration provided by Grafana scaffolding
19 |   ...require("./.config/.prettierrc.js")
20 | };


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 | 
3 | All notable changes to this project will be documented in this file.
4 | 
5 | ## 0.1.0
6 | 
7 | Implement the data source of service Topology.
8 | 


--------------------------------------------------------------------------------
/DEVELOPMENT.md:
--------------------------------------------------------------------------------
 1 | ## Build the plugin from the source codes and run locally
 2 | 
 3 | 1. Install dependencies
 4 | 
 5 |    ```bash
 6 |    yarn install
 7 |    ```
 8 | 
 9 | 2. Build plugin in development mode and run in watch mode
10 | 
11 |    ```bash
12 |    yarn dev
13 |    ```
14 | 
15 | 3. Build plugin in production mode
16 | 
17 |    ```bash
18 |    yarn build
19 |    ```
20 | 
21 | 4. Run the tests (using Jest)
22 | 
23 |    ```bash
24 |    # Runs the tests and watches for changes, requires git init first
25 |    yarn test
26 |    
27 |    # Exits after running all the tests
28 |    yarn test:ci
29 |    ```
30 | 
31 | 5. Spin up a Grafana instance and run the plugin inside it (using Docker)
32 | 
33 |    ```bash
34 |    yarn server
35 |    ```
36 | 
37 | 6. Run the E2E tests (using Cypress)
38 | 
39 |    ```bash
40 |    # Spins up a Grafana instance first that we tests against 
41 |    yarn server
42 |    
43 |    # Starts the tests
44 |    yarn e2e
45 |    ```
46 | 
47 | 7. Run the linter
48 | 
49 |    ```bash
50 |    yarn lint
51 |    
52 |    # or
53 | 
54 |    yarn lint:fix
55 |    ```
56 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "{}"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright {yyyy} {name of copyright owner}
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
 1 | # Licensed to the Apache Software Foundation (ASF) under one or more
 2 | # contributor license agreements.  See the NOTICE file distributed with
 3 | # this work for additional information regarding copyright ownership.
 4 | # The ASF licenses this file to You under the Apache License, Version 2.0
 5 | # (the "License"); you may not use this file except in compliance with
 6 | # the License.  You may obtain a copy of the License at
 7 | #
 8 | #     http://www.apache.org/licenses/LICENSE-2.0
 9 | #
10 | # Unless required by applicable law or agreed to in writing, software
11 | # distributed under the License is distributed on an "AS IS" BASIS,
12 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | # See the License for the specific language governing permissions and
14 | # limitations under the License.
15 | 
16 | SHELL := /bin/bash -o pipefail
17 | 
18 | VERSION ?= latest
19 | RELEASE_SRC = skywalking-grafana-plugins-${VERSION}-src
20 | RELEASE_DIST = apache-skywalking-datasource-${VERSION}
21 | 
22 | GPG_UID :=
23 | 
24 | # set gpg user id
25 | ifdef GPG_UID
26 | 	GPG_UID_FLAG := -u $(GPG_UID)
27 | endif
28 | 
29 | .PHONY: release-src
30 | release-src:
31 | 	tar -zcvf $(RELEASE_SRC).tgz \
32 | 	--exclude .git/ \
33 | 	--exclude .idea/ \
34 | 	--exclude .gitignore \
35 | 	--exclude .DS_Store \
36 | 	--exclude .github \
37 | 	--exclude lib \
38 | 	--exclude node_modules \
39 | 	--exclude release \
40 | 	--exclude $(RELEASE_SRC).tgz \
41 | 	.
42 | 
43 | 	gpg $(GPG_UID_FLAG) --batch --yes --armor --detach-sig $(RELEASE_SRC).tgz
44 | 	shasum -a 512 $(RELEASE_SRC).tgz > $(RELEASE_SRC).tgz.sha512
45 | 
46 | 	mkdir -p release
47 | 	mv $(RELEASE_SRC).tgz release/$(RELEASE_SRC).tgz
48 | 	mv $(RELEASE_SRC).tgz.asc release/$(RELEASE_SRC).tgz.asc
49 | 	mv $(RELEASE_SRC).tgz.sha512 release/$(RELEASE_SRC).tgz.sha512
50 | 
51 | .PHONY: release-dist
52 | release-dist:
53 | 	mv dist/ apache-skywalking-datasource
54 | 	zip $(RELEASE_DIST).zip apache-skywalking-datasource -r
55 | 	rm -rf apache-skywalking-datasource
56 | 
57 | 	gpg $(GPG_UID_FLAG) --batch --yes --armor --detach-sig $(RELEASE_DIST).zip
58 | 	shasum -a 1 $(RELEASE_DIST).zip > $(RELEASE_DIST).zip.sha1
59 | 
60 | 	mkdir -p release-dist
61 | 	mv $(RELEASE_DIST).zip release-dist/$(RELEASE_DIST).zip
62 | 	mv $(RELEASE_DIST).zip.asc release-dist/$(RELEASE_DIST).zip.asc
63 | 	mv $(RELEASE_DIST).zip.sha1 release-dist/$(RELEASE_DIST).zip.sha1
64 | 
65 | .PHONY: install
66 | install:
67 | 	yarn install
68 | 
69 | .PHONY: clean
70 | clean:
71 | 	rm -rf ./node_modules && \
72 | 	rm -rf ./lib
73 | 
74 | .PHONY: build
75 | build:
76 | 	yarn build
77 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Skywalking Grafana Plugins
 2 | 
 3 | <img src="https://skywalking.apache.org/assets/logo.svg" alt="Sky Walking logo" height="90px" align="right" />
 4 | 
 5 | SkyWalking Grafana Plugins provide extensions for [Apache SkyWalking](https://skywalking.apache.org/) to visualize telemetry data on Grafana.
 6 | 
 7 | Currently, SkyWalking supports [PromQL](https://skywalking.apache.org/docs/main/next/en/api/promql-service/) to establish [Grafana metrics dashboard](https://skywalking.apache.org/docs/main/next/en/setup/backend/ui-grafana/). 
 8 | 
 9 | The plugins are focusing on visualizing more telemetry data, e.g. Service Map Topology, as a new Grafana data source implementation.
10 | 
11 | ## Install the latest version of SkyWalking data source in your Grafana application
12 | 
13 | * Require Grafana 9.5.1+
14 | 
15 | ```bash
16 | > grafana-cli plugins install apache-skywalking-datasource
17 | ```
18 | 
19 | ## Configure the data source
20 | 
21 | To configure basic settings for the data source, complete the following steps:
22 | 
23 | 1. Click Connections in the left-side menu.
24 | 
25 | 2. Under Your connections, click Data sources.
26 | 
27 | 3. Enter SkyWalking in the search bar.
28 | 
29 | 4. Select SkyWalking.
30 | 
31 | The Settings tab of the data source is displayed.
32 | 
33 | 5. Set the data source’s basic configuration options:
34 | 
35 | |Name|Description|
36 | |----|----|
37 | |Name|Sets the name you use to refer to the data source in panels and queries.|
38 | |URL|Sets the URL of the SkyWalking instance, such as https://skywalking.example.com/graphql.|
39 | 
40 | ## Add Service Topology Graph
41 | 
42 | 1. Select the Dashboards tab.
43 | 
44 | 2. Select the Node Graph in the dashboard.
45 | 
46 | 5. Set the data source’s basic configuration options on the query tab:
47 | 
48 | |Name|Example(Value)|Description|
49 | |----|----|----|
50 | |Layer|[$layer](https://skywalking.apache.org/docs/main/next/en/setup/backend/ui-grafana/#dashboards-settings)|Current layer of services|
51 | |Service|[$service](https://skywalking.apache.org/docs/main/next/en/setup/backend/ui-grafana/#dashboards-settings)|Current service|
52 | |Node Metrics|`[{"name":"service_sla","calculation":"percentage","label":"Success Rate","unit":"%"}]`|Supports multiple metrics|
53 | |Edge Metrics|`[{"name":"service_relation_server_cpm","label":"Client Load","unit":"cpm","type":"SERVER"}]`|Only supports maximum two metrics|
54 | 
55 | # Contact Us
56 | * Mail list: **dev@skywalking.apache.org**. Mail to `dev-subscribe@skywalking.apache.org`, follow the reply to subscribe the mail list.
57 | * Send `Request to join SkyWalking slack` mail to the mail list(`dev@skywalking.apache.org`), we will invite you in.
58 | * For Chinese speaker, send `[CN] Request to join SkyWalking slack` mail to the mail list(`dev@skywalking.apache.org`), we will invite you in.
59 | * Twitter, [ASFSkyWalking](https://twitter.com/AsfSkyWalking)
60 | * [bilibili B站 视频](https://space.bilibili.com/390683219)
61 | 
62 | # License
63 | [Apache 2.0 License.](https://github.com/apache/skywalking-grafana-plugins/blob/main/LICENSE)
64 | 
65 | **NOTICE, Grafana itself is licensed in [GNU Affero General Public License v3.0](https://github.com/grafana/grafana/blob/v9.5.1/LICENSE).**
66 | 


--------------------------------------------------------------------------------
/cypress/integration/01-smoke.spec.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Licensed to the Apache Software Foundation (ASF) under one or more
 3 |  * contributor license agreements.  See the NOTICE file distributed with
 4 |  * this work for additional information regarding copyright ownership.
 5 |  * The ASF licenses this file to You under the Apache License, Version 2.0
 6 |  * (the "License"); you may not use this file except in compliance with
 7 |  * the License.  You may obtain a copy of the License at
 8 |  *
 9 |  *      http://www.apache.org/licenses/LICENSE-2.0
10 |  *
11 |  * Unless required by applicable law or agreed to in writing, software
12 |  * distributed under the License is distributed on an "AS IS" BASIS,
13 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 |  * See the License for the specific language governing permissions and
15 |  * limitations under the License.
16 |  */
17 | import { e2e } from '@grafana/e2e';
18 | 
19 | e2e.scenario({
20 |   describeName: 'Smoke test',
21 |   itName: 'Smoke test',
22 |   scenario: () => {
23 |     e2e.pages.Home.visit();
24 |     e2e().contains('Welcome to Grafana').should('be.visible');
25 |   },
26 | });
27 | 


--------------------------------------------------------------------------------
/docker-compose.yaml:
--------------------------------------------------------------------------------
 1 | #
 2 | # Licensed to the Apache Software Foundation (ASF) under one or more
 3 | # contributor license agreements.  See the NOTICE file distributed with
 4 | # this work for additional information regarding copyright ownership.
 5 | # The ASF licenses this file to You under the Apache License, Version 2.0
 6 | # (the "License"); you may not use this file except in compliance with
 7 | # the License.  You may obtain a copy of the License at
 8 | #
 9 | #     http://www.apache.org/licenses/LICENSE-2.0
10 | #
11 | # Unless required by applicable law or agreed to in writing, software
12 | # distributed under the License is distributed on an "AS IS" BASIS,
13 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 | # See the License for the specific language governing permissions and
15 | # limitations under the License.
16 | #
17 | 
18 | version: '3.0'
19 | 
20 | services:
21 |   grafana:
22 |     container_name: 'apache-skywalking-datasource'
23 |     build:
24 |       context: ./.config
25 |       args:
26 |         grafana_version: ${GRAFANA_VERSION:-9.5.1}
27 |     ports:
28 |       - 3000:3000/tcp
29 |     volumes:
30 |       - ./dist:/var/lib/grafana/plugins/apache-skywalking-datasource
31 |       - ./provisioning:/etc/grafana/provisioning
32 | 


--------------------------------------------------------------------------------
/jest-setup.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Licensed to the Apache Software Foundation (ASF) under one or more
 3 |  * contributor license agreements.  See the NOTICE file distributed with
 4 |  * this work for additional information regarding copyright ownership.
 5 |  * The ASF licenses this file to You under the Apache License, Version 2.0
 6 |  * (the "License"); you may not use this file except in compliance with
 7 |  * the License.  You may obtain a copy of the License at
 8 |  *
 9 |  *      http://www.apache.org/licenses/LICENSE-2.0
10 |  *
11 |  * Unless required by applicable law or agreed to in writing, software
12 |  * distributed under the License is distributed on an "AS IS" BASIS,
13 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 |  * See the License for the specific language governing permissions and
15 |  * limitations under the License.
16 |  */
17 | import './.config/jest-setup';
18 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Licensed to the Apache Software Foundation (ASF) under one or more
 3 |  * contributor license agreements.  See the NOTICE file distributed with
 4 |  * this work for additional information regarding copyright ownership.
 5 |  * The ASF licenses this file to You under the Apache License, Version 2.0
 6 |  * (the "License"); you may not use this file except in compliance with
 7 |  * the License.  You may obtain a copy of the License at
 8 |  *
 9 |  *      http://www.apache.org/licenses/LICENSE-2.0
10 |  *
11 |  * Unless required by applicable law or agreed to in writing, software
12 |  * distributed under the License is distributed on an "AS IS" BASIS,
13 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 |  * See the License for the specific language governing permissions and
15 |  * limitations under the License.
16 |  */
17 | // force timezone to UTC to allow tests to work regardless of local timezone
18 | // generally used by snapshots, but can affect specific tests
19 | process.env.TZ = 'UTC';
20 | 
21 | module.exports = {
22 |   // Jest configuration provided by Grafana scaffolding
23 |   ...require('./.config/jest.config'),
24 | };
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "skywalking-grafana-plugins",
 3 |   "version": "0.1.0",
 4 |   "description": "Apache SkyWalking",
 5 |   "scripts": {
 6 |     "build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
 7 |     "dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",
 8 |     "test": "jest --watch --onlyChanged",
 9 |     "test:ci": "jest --passWithNoTests --maxWorkers 4",
10 |     "typecheck": "tsc --noEmit",
11 |     "lint": "eslint --cache --ignore-path ./.gitignore --ext .js,.jsx,.ts,.tsx .",
12 |     "lint:fix": "yarn lint --fix",
13 |     "e2e": "yarn cypress install && yarn grafana-e2e run",
14 |     "e2e:update": "yarn cypress install && yarn grafana-e2e run --update-screenshots",
15 |     "server": "docker-compose up --build",
16 |     "sign": "npx --yes @grafana/sign-plugin@latest"
17 |   },
18 |   "author": "Apache SkyWalking",
19 |   "license": "Apache-2.0",
20 |   "devDependencies": {
21 |     "@babel/core": "^7.16.7",
22 |     "@grafana/e2e": "9.5.1",
23 |     "@grafana/e2e-selectors": "9.5.1",
24 |     "@grafana/eslint-config": "^5.1.0",
25 |     "@grafana/tsconfig": "^1.2.0-rc1",
26 |     "@swc/core": "^1.2.144",
27 |     "@swc/helpers": "^0.4.12",
28 |     "@swc/jest": "^0.2.23",
29 |     "@testing-library/jest-dom": "^5.16.2",
30 |     "@testing-library/react": "^12.1.4",
31 |     "@types/glob": "^8.0.0",
32 |     "@types/jest": "^29.2.2",
33 |     "@types/lodash": "^4.14.188",
34 |     "@types/node": "^18.11.9",
35 |     "copy-webpack-plugin": "^11.0.0",
36 |     "css-loader": "^6.7.1",
37 |     "eslint-webpack-plugin": "^3.1.1",
38 |     "fork-ts-checker-webpack-plugin": "^7.2.0",
39 |     "glob": "^8.0.3",
40 |     "identity-obj-proxy": "3.0.0",
41 |     "jest": "^29.3.1",
42 |     "jest-environment-jsdom": "^29.3.1",
43 |     "prettier": "^2.5.0",
44 |     "replace-in-file-webpack-plugin": "^1.0.6",
45 |     "sass": "1.56.1",
46 |     "sass-loader": "13.2.0",
47 |     "style-loader": "3.3.1",
48 |     "swc-loader": "^0.2.3",
49 |     "tsconfig-paths": "^4.1.0",
50 |     "ts-node": "^10.5.0",
51 |     "typescript": "^4.4.0",
52 |     "webpack": "^5.94.0",
53 |     "webpack-cli": "^4.9.2",
54 |     "webpack-livereload-plugin": "^3.0.2"
55 |   },
56 |   "engines": {
57 |     "node": ">=16"
58 |   },
59 |   "dependencies": {
60 |     "@emotion/css": "^11.1.3",
61 |     "@grafana/data": "9.5.1",
62 |     "@grafana/runtime": "9.5.1",
63 |     "@grafana/ui": "9.5.1",
64 |     "react": "17.0.2",
65 |     "react-dom": "17.0.2"
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/release.md:
--------------------------------------------------------------------------------
  1 | # Release Guide
  2 | All committer should follow these steps to do release for this repo.
  3 | 
  4 | 1. Update the [package version](package.json) and [CHANGES.md](CHANGES.md) to prepare the official release.
  5 | 
  6 | 2. Package the source release.
  7 | 
  8 | ```shell
  9 | > export VERSION=x.y.z
 10 | > make release-src
 11 | ```
 12 | 
 13 | Use SVN to upload the files(tgz, asc and sha512) in the `release` folder to `https://dist.apache.org/repos/dist/dev/skywalking/grafana-plugins/x.y.z`.
 14 | 
 15 | 3. Make the internal announcements. Send an announcement mail in dev mail list.
 16 | 
 17 | ```
 18 | [ANNOUNCE] SkyWalking Grafana Plugins x.y.z test build available
 19 | 
 20 | The test build of x.y.z is available.
 21 | 
 22 | We welcome any comments you may have, and will take all feedback into
 23 | account if a quality vote is called for this build.
 24 | 
 25 | Release notes:
 26 | 
 27 |  * https://github.com/apache/skywalking-grafana-plugins/blob/vx.y.z/CHANGES.md
 28 | 
 29 | Release Candidate:
 30 | 
 31 |  * https://dist.apache.org/repos/dist/dev/skywalking/grafana-plugins/x.y.z/
 32 |  * sha512 checksums
 33 |    - xxxxxxx  skywalking-grafana-plugins-x.y.z-src.tgz
 34 | 
 35 | Release Tag :
 36 | 
 37 |  * vx.y.z
 38 | 
 39 | Release CommitID :
 40 | 
 41 |  * https://github.com/apache/skywalking-grafana-plugins/tree/xxxxxxxxxx
 42 | 
 43 | Keys to verify the Release Candidate :
 44 | 
 45 |  * https://dist.apache.org/repos/dist/release/skywalking/KEYS
 46 | 
 47 | 
 48 | A vote regarding the quality of this test build will be initiated
 49 | within the next couple of days.
 50 | ```
 51 | 
 52 | 4. Wait at least 48 hours for test responses. If there is a critical issue found and confirmed by the PMC, this release should be cancelled.
 53 | 
 54 | 5. Call for a vote. Call a vote in dev@skywalking.apache.org
 55 | 
 56 | ```
 57 | [VOTE] Release skywalking Grafana Plugins x.y.z
 58 | 
 59 | This is a call for vote to release Apache SkyWalking Grafana Plugins version x.y.z.
 60 | 
 61 | Release notes:
 62 | 
 63 |  * https://github.com/apache/skywalking-grafana-plugins/blob/vx.y.z/CHANGES.md
 64 | 
 65 | Release Candidate:
 66 | 
 67 |  * https://dist.apache.org/repos/dist/dev/skywalking/grafana-plugins/x.y.z/
 68 |  * sha512 checksums
 69 |    - xxxxxxx  skywalking-grafana-plugins-x.y.z-src.tgz
 70 | 
 71 | Release Tag :
 72 | 
 73 |  * vx.y.z
 74 | 
 75 | Release CommitID :
 76 | 
 77 |  * https://github.com/apache/skywalking-grafana-plugins/tree/xxxxxxxxxx
 78 | 
 79 | Keys to verify the Release Candidate :
 80 | 
 81 |  * https://dist.apache.org/repos/dist/release/skywalking/KEYS
 82 | 
 83 | 
 84 | Voting will start now (xxxx date) and will remain open for at least 72 hours, Request all PMC members to give their vote.
 85 | [ ] +1 Release this package.
 86 | [ ] +0 No opinion.
 87 | [ ] -1 Do not release this package because....
 88 | 
 89 | ```
 90 | 
 91 | 5. Publish release, if vote passed.
 92 | 
 93 | Move the release from RC folder to the dist folder. This will begin the file sync across the global Apache mirrors.
 94 | ```
 95 | > export SVN_EDITOR=vim
 96 | > svn mv https://dist.apache.org/repos/dist/dev/skywalking/grafana-plugins/x.y.z https://dist.apache.org/repos/dist/release/skywalking/grafana-plugins
 97 | ....
 98 | enter your apache password
 99 | ....
100 | ```
101 | 
102 | Send ANNOUNCE email to `dev@skywalking.apache.org`, `announce@apache.org`, the sender should use Apache email account.
103 | ```
104 | Mail title: [ANNOUNCE] Release Apache SkyWalking Grafana Plugins version x.y.z
105 | 
106 | Mail content:
107 | Hi all,
108 | 
109 | Apache SkyWalking  Team is glad to announce the first release of Apache SkyWalking Grafana Plugins x.y.z
110 | 
111 | SkyWalking: APM (application performance monitor) tool for distributed systems,
112 | especially designed for microservices, cloud native and container-based (Docker, Kubernetes, Mesos) architectures.
113 | 
114 | SkyWalking Grafana Plugins provide browser metrics and error collection to SkyWalking backend.
115 | 
116 | This release contains a number of new features, bug fixes and improvements compared to
117 | version a.b.c(last release). The notable changes since x.y.z include:
118 | 
119 | (Highlight key changes)
120 | 1. ...
121 | 2. ...
122 | 3. ...
123 | 
124 | Please refer to the change log for the complete list of changes:
125 | https://github.com/apache/skywalking-grafana-plugins/blob/x.y.z/CHANGES.md
126 | 
127 | Apache SkyWalking website:
128 | http://skywalking.apache.org/
129 | 
130 | Downloads:
131 | http://skywalking.apache.org/downloads/
132 | 
133 | Twitter:
134 | https://twitter.com/ASFSkyWalking
135 | 
136 | SkyWalking Resources:
137 | - GitHub: https://github.com/apache/skywalking
138 | - Issue: https://github.com/apache/skywalking/issues
139 | - Mailing list: dev@skywalkiing.apache.org
140 | 
141 | 
142 | - Apache SkyWalking Team
143 | ```
144 | 
145 | 6. publish package to Grafana Cloud
146 | 
147 |   1. Build the plugin
148 | 
149 |   ```bash
150 |   > yarn install --pure-lockfile
151 |   > yarn build
152 |   > export VERSION=x.y.z
153 |   > make release-dist
154 |   ```
155 | 
156 |   2. [Sign in](https://grafana.com/auth/sign-in) to Grafana Cloud account,the username is `wusheng@apache.org` and the password has been sent to `private@skwalking.apache.org`.
157 | 
158 |     * In the left menu, under Org settings, click My Plugins.
159 | 
160 |     * Click Submit Update for the plugin you want to update.
161 | 
162 |     * Enter the information requested by the form.
163 | 
164 |       OS & Architecture:
165 | 
166 |         Select Single if your plugin archive contains binaries for multiple architectures.
167 | 
168 |         Select Multiple if you’d like to submit separate plugin archives for each architecture. This can lead to faster downloads since users can select the specific architecture they want to install the plugin on.
169 | 
170 |       URL: A URL that points to a ZIP archive of your packaged plugin.
171 | 
172 |       Source Code URL: A URL that points to a public git repository or ZIP archive of your complete plugin source code.
173 | 
174 |       MD5: The MD5 hash of the plugin specified by the URL.
175 | 
176 |     * Click Submit.
177 | 


--------------------------------------------------------------------------------
/src/components/ConfigEditor.tsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Licensed to the Apache Software Foundation (ASF) under one or more
  3 |  * contributor license agreements.  See the NOTICE file distributed with
  4 |  * this work for additional information regarding copyright ownership.
  5 |  * The ASF licenses this file to You under the Apache License, Version 2.0
  6 |  * (the "License"); you may not use this file except in compliance with
  7 |  * the License.  You may obtain a copy of the License at
  8 |  *
  9 |  *      http://www.apache.org/licenses/LICENSE-2.0
 10 |  *
 11 |  * Unless required by applicable law or agreed to in writing, software
 12 |  * distributed under the License is distributed on an "AS IS" BASIS,
 13 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 14 |  * See the License for the specific language governing permissions and
 15 |  * limitations under the License.
 16 |  */
 17 | import React, { ChangeEvent } from 'react';
 18 | import { InlineField, SecretInput, Select, Input } from '@grafana/ui';
 19 | import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
 20 | import { MyDataSourceOptions, MySecureJsonData } from '../types';
 21 | import { AuthenticationType } from "../constant";
 22 | 
 23 | interface Props extends DataSourcePluginOptionsEditorProps<MyDataSourceOptions> {}
 24 | 
 25 | export function ConfigEditor(props: Props) {
 26 |   const { options, onOptionsChange } = props;
 27 | 
 28 |   const onURLChange = (event: ChangeEvent<HTMLInputElement>) => {
 29 |     const jsonData = {
 30 |       ...options.jsonData,
 31 |       URL: event.target.value,
 32 |     };
 33 |     onOptionsChange({ ...options, jsonData });
 34 |   };
 35 | 
 36 |   const onTypeChange = (v: any) => {
 37 |     if (v.value === AuthenticationType[0].value) {
 38 |       options.basicAuth = true;
 39 |     } else {
 40 |       options.basicAuth = false;
 41 |     }
 42 |     onOptionsChange({...options});
 43 |   };
 44 | 
 45 |   const onUserChange = (event: ChangeEvent<HTMLInputElement>) => {
 46 | 
 47 |     onOptionsChange({
 48 |       ...options,
 49 |       basicAuthUser: event.target.value,
 50 |     });
 51 |   };
 52 | 
 53 |   const onPasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
 54 | 
 55 |     onOptionsChange({
 56 |       ...options,
 57 |       secureJsonData: {
 58 |         basicAuthPassword: event.target.value,
 59 |       }
 60 |     });
 61 |   };
 62 | 
 63 |   const onResetPassword = () => {
 64 |     onOptionsChange({
 65 |       ...options,
 66 |       secureJsonFields: {
 67 |         ...options.secureJsonFields,
 68 |         basicAuthPassword: false,
 69 |       },
 70 |       secureJsonData: {
 71 |         ...options.secureJsonData,
 72 |         basicAuthPassword: '',
 73 |       },
 74 |     });
 75 |   };
 76 | 
 77 |   const secureJsonData = (options.secureJsonData || {}) as MySecureJsonData;
 78 |   const { secureJsonFields, jsonData, basicAuth, basicAuthUser } = options;
 79 | 
 80 |   return (
 81 |     <div className="gf-form-group">
 82 |       <InlineField label="URL" labelWidth={18}>
 83 |         <Input
 84 |           onChange={onURLChange}
 85 |           value={jsonData.URL || ''}
 86 |           placeholder="http://skywalking.example.com/graphql"
 87 |           width={40}
 88 |         />
 89 |       </InlineField>
 90 |       <InlineField label="Authentication Type" labelWidth={18} >
 91 |         <Select
 92 |           options={AuthenticationType}
 93 |           value={basicAuth ? AuthenticationType[0].value : AuthenticationType[1].value}
 94 |           onChange={onTypeChange}
 95 |           width={40}
 96 |           placeholder="Choose an authentication type"
 97 |           menuPlacement="bottom"
 98 |         />
 99 |       </InlineField>
100 |       {basicAuth &&
101 |       <div>
102 |         <InlineField label="User Name" labelWidth={18}>
103 |         <Input
104 |           onChange={onUserChange}
105 |           value={basicAuthUser || ''}
106 |           placeholder="Please input username"
107 |           width={40}
108 |         />
109 |       </InlineField>
110 |       <InlineField label="Password" labelWidth={18}>
111 |         <SecretInput
112 |           isConfigured={(secureJsonFields && secureJsonFields.basicAuthPassword) as boolean}
113 |           type="password"
114 |           value={secureJsonData.basicAuthPassword || ''}
115 |           placeholder="secure password field (backend only)"
116 |           width={40}
117 |           onReset={onResetPassword}
118 |           onChange={onPasswordChange}
119 |         />
120 |       </InlineField>
121 |     </div>}
122 |     </div>
123 |   );
124 | }
125 | 


--------------------------------------------------------------------------------
/src/components/QueryEditor.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Licensed to the Apache Software Foundation (ASF) under one or more
 3 |  * contributor license agreements.  See the NOTICE file distributed with
 4 |  * this work for additional information regarding copyright ownership.
 5 |  * The ASF licenses this file to You under the Apache License, Version 2.0
 6 |  * (the "License"); you may not use this file except in compliance with
 7 |  * the License.  You may obtain a copy of the License at
 8 |  *
 9 |  *      http://www.apache.org/licenses/LICENSE-2.0
10 |  *
11 |  * Unless required by applicable law or agreed to in writing, software
12 |  * distributed under the License is distributed on an "AS IS" BASIS,
13 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 |  * See the License for the specific language governing permissions and
15 |  * limitations under the License.
16 |  */
17 | import React, { ChangeEvent } from 'react';
18 | import { InlineField, Input } from '@grafana/ui';
19 | import { QueryEditorProps } from '@grafana/data';
20 | import { DataSource } from '../datasource';
21 | import { MyDataSourceOptions, MyQuery } from '../types';
22 | import {EdgeMetrics, NodeMetrics} from "../constant";
23 | 
24 | type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
25 | 
26 | export function QueryEditor({ query, onChange, onRunQuery }: Props) {
27 |   const onLayerChange = (event: ChangeEvent<HTMLInputElement>) => {
28 |     onChange({ ...query, layer: event.target.value });
29 |   };
30 |   const onServiceChange = (event: ChangeEvent<HTMLInputElement>) => {
31 |     onChange({ ...query, service: event.target.value });
32 |   };
33 |   const onNodeMetricsChange = (event: ChangeEvent<HTMLInputElement>) => {
34 |     onChange({ ...query, nodeMetrics: event.target.value });
35 |   };
36 |   const onEdgeMetricsChange = (event: ChangeEvent<HTMLInputElement>) => {
37 |     onChange({ ...query, edgeMetrics: event.target.value });
38 |   };
39 |   const onRunQueryText = () => {
40 |     try {
41 |       const nodeMetrics = query.nodeMetrics && parseData(query.nodeMetrics) || [];
42 |       const edgeMetrics = query.edgeMetrics && parseData(query.edgeMetrics) || [];
43 | 
44 |       const n = nodeMetrics.find((d: {name: string}) => !d.name);
45 |       const e = edgeMetrics.find((d: {name: string, type: string}) => !(d.name && d.type));
46 |       if (e || n) {
47 |         throw new Error('Bad data');
48 |       }
49 |       onRunQuery();
50 |     } catch(e) {
51 |       throw new Error('Bad data');
52 |     }
53 |   };
54 |   const parseData = (params: string) => {
55 |     const regex = /{[^}]+}/g;
56 |     const arr = params.match(regex);
57 |     const metrics = arr?.map((d: string) => JSON.parse(d)) || [];
58 | 
59 |     return metrics;
60 |   };
61 |   const { service, nodeMetrics, edgeMetrics, layer } = query;
62 | 
63 |   return (
64 |     <div className="gf-form-group">
65 |       <InlineField label="Layer"  tooltip="Not used yet" labelWidth={20}>
66 |         <Input onBlur={onRunQueryText} onChange={onLayerChange} value={layer || ''} width={40} />
67 |       </InlineField>
68 |       <InlineField label="Service"  tooltip="Not used yet" labelWidth={20}>
69 |         <Input onBlur={onRunQueryText} onChange={onServiceChange} value={service || ''} width={40} />
70 |       </InlineField>
71 |       <InlineField label="Node Metrics"  tooltip={NodeMetrics} labelWidth={20}>
72 |         <Input onBlur={onRunQueryText} onChange={onNodeMetricsChange} value={nodeMetrics || ''} width={60} />
73 |       </InlineField>
74 |       <InlineField label="Edge Metrics"  tooltip={EdgeMetrics} labelWidth={20}>
75 |         <Input onBlur={onRunQueryText} onChange={onEdgeMetricsChange} value={edgeMetrics || ''} width={60} />
76 |       </InlineField>
77 |     </div> 
78 |   );
79 | }
80 | 


--------------------------------------------------------------------------------
/src/constant.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Licensed to the Apache Software Foundation (ASF) under one or more
 3 |  * contributor license agreements.  See the NOTICE file distributed with
 4 |  * this work for additional information regarding copyright ownership.
 5 |  * The ASF licenses this file to You under the Apache License, Version 2.0
 6 |  * (the "License"); you may not use this file except in compliance with
 7 |  * the License.  You may obtain a copy of the License at
 8 |  *
 9 |  *      http://www.apache.org/licenses/LICENSE-2.0
10 |  *
11 |  * Unless required by applicable law or agreed to in writing, software
12 |  * distributed under the License is distributed on an "AS IS" BASIS,
13 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 |  * See the License for the specific language governing permissions and
15 |  * limitations under the License.
16 |  */
17 | 
18 | export const Fragments = {
19 |   servicesTopolgy: "query queryData($serviceIds: [ID!]!, $duration: Duration!) {\n  topology: getServicesTopology(serviceIds: $serviceIds, duration: $duration) {\n    nodes {\n      id\n      name\n      type\n      isReal\n    }\n    calls {\n      id\n      source\n      detectPoints\n      target\n    }\n  }}",
20 |   services: "query queryServices($duration: Duration!,$keyword: String!) {\n    services: getAllServices(duration: $duration, group: $keyword) {\n      id\n      name\n      group\n      layers\n    }\n  }",
21 |   version: "query version { version }",
22 |   utc: "query queryOAPTimeInfo {\n    getTimeInfo {\n      timezone\n      currentTimestamp\n    }\n  }",
23 | };
24 | 
25 | // proxy route
26 | export const RoutePath = '/graphql';
27 | 
28 | export enum TimeType {
29 |   MINUTE_TIME = "MINUTE",
30 |   HOUR_TIME = "HOUR",
31 |   DAY_TIME = "DAY",
32 | }
33 | export enum Calculations {
34 |   Percentage = "percentage",
35 |   ByteToKB = "byteToKB",
36 |   ByteToMB = "byteToMB",
37 |   ByteToGB = "byteToGB",
38 |   Apdex = "apdex",
39 |   ConvertSeconds = "convertSeconds",
40 |   ConvertMilliseconds = "convertMilliseconds",
41 |   MsToS = "msTos",
42 |   Average = "average",
43 |   PercentageAvg = "percentageAvg",
44 |   ApdexAvg = "apdexAvg",
45 |   SecondToDay = "secondToDay",
46 |   NanosecondToMillisecond = "nanosecondToMillisecond",
47 | }
48 | export const NodeMetrics = `{
49 |   "name": "service_cpm",
50 |   "label": "Load",
51 |   "unit": "cpm"
52 | },
53 | {
54 |   "name": "service_sla",
55 |   "calculation": "percentage",
56 |   "label": "Success Rate",
57 |   "unit": "%"
58 | }`
59 | 
60 | export const EdgeMetrics = `{
61 |   "name": "service_relation_server_resp_time",
62 |   "label": "Client Latency",
63 |   "unit": "ms",
64 |   "type": "SERVER"
65 | },{
66 |   "name": "service_relation_client_cpm",
67 |   "label": "Client Load",
68 |   "unit": "cpm",
69 |   "type": "CLINET"
70 | }`
71 | export const AuthenticationType = [
72 |   {label: 'BASIC', value: 'BASIC', text: 'BASIC'},
73 |   {label: 'None', value: 'NONE', text: 'None'},
74 | ]
75 | 


--------------------------------------------------------------------------------
/src/datasource.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Licensed to the Apache Software Foundation (ASF) under one or more
  3 |  * contributor license agreements.  See the NOTICE file distributed with
  4 |  * this work for additional information regarding copyright ownership.
  5 |  * The ASF licenses this file to You under the Apache License, Version 2.0
  6 |  * (the "License"); you may not use this file except in compliance with
  7 |  * the License.  You may obtain a copy of the License at
  8 |  *
  9 |  *      http://www.apache.org/licenses/LICENSE-2.0
 10 |  *
 11 |  * Unless required by applicable law or agreed to in writing, software
 12 |  * distributed under the License is distributed on an "AS IS" BASIS,
 13 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 14 |  * See the License for the specific language governing permissions and
 15 |  * limitations under the License.
 16 |  */
 17 | 
 18 | import defaults from 'lodash/defaults';
 19 | import {
 20 |   DataQueryRequest,
 21 |   DataQueryResponse,
 22 |   DataSourceApi,
 23 |   DataSourceInstanceSettings,
 24 |   MutableDataFrame,
 25 |   FieldType,
 26 |   ArrayVector,
 27 |   NodeGraphDataFrameFieldNames,
 28 | } from '@grafana/data';
 29 | import { getBackendSrv, getTemplateSrv } from '@grafana/runtime';
 30 | import dayjs from 'dayjs';
 31 | import timezone from 'dayjs/plugin/timezone';
 32 | import utc from 'dayjs/plugin/utc';
 33 | 
 34 | import {
 35 |   MyQuery,
 36 |   MyDataSourceOptions,
 37 |   DEFAULT_QUERY,
 38 |   DurationTime,
 39 |   MetricData,
 40 |   Call,
 41 |   Node,
 42 |   Recordable
 43 | } from './types';
 44 | import { Fragments, RoutePath, TimeType, Calculations } from './constant';
 45 | 
 46 | export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
 47 |   URL: string;
 48 |   constructor(instanceSettings: DataSourceInstanceSettings<MyDataSourceOptions>) {
 49 |     super(instanceSettings);
 50 |     // proxy url
 51 |     this.URL = instanceSettings.url || '';
 52 |     dayjs.extend(utc)
 53 |     dayjs.extend(timezone)
 54 |   }
 55 | 
 56 |   async query(options: DataQueryRequest<MyQuery>): Promise<DataQueryResponse> {
 57 |     const { range } = options;
 58 |     const from = range!.from.valueOf();
 59 |     const to = range!.to.valueOf();
 60 |     const  v =  {
 61 |       query: Fragments.utc,
 62 |       variables: {},
 63 |     };
 64 |     const resp = await this.doRequest(v);
 65 |     const utc = resp.data.getTimeInfo.timezone / 100;
 66 |     const dates = this.timeFormat([this.getLocalTime(utc, new Date(from)), this.getLocalTime(utc, new Date(to))]);
 67 |     const duration = {
 68 |       start: this.dateFormatStep(dates.start, dates.step),
 69 |       end: this.dateFormatStep(dates.end, dates.step),
 70 |       step: dates.step,
 71 |     };
 72 |     const promises = options.targets.map(async (target) => {
 73 |       const query = defaults(target, DEFAULT_QUERY);
 74 |       const layer = getTemplateSrv().replace(query.layer, options.scopedVars);
 75 |       const serviceName = getTemplateSrv().replace(query.service, options.scopedVars);
 76 |       if (!layer && !serviceName) {
 77 |         return [];
 78 |       }
 79 |       const nodeMetricsStr = getTemplateSrv().replace(query.nodeMetrics, options.scopedVars);
 80 |       const nodeMetrics = nodeMetricsStr ? this.parseMetrics(nodeMetricsStr) : [];
 81 |       const edgeMetricsStr = getTemplateSrv().replace(query.edgeMetrics, options.scopedVars);
 82 |       const edgeMetrics = edgeMetricsStr ? this.parseMetrics(edgeMetricsStr) : [];
 83 |       let services = [];
 84 |       // fetch services from api
 85 |       const  s =  {
 86 |         query: Fragments.services,
 87 |         variables: {duration, keyword: ''},
 88 |       };
 89 |       const resp = await this.doRequest(s);
 90 |       services = resp.data.services || [];
 91 | 
 92 |       const t: {
 93 |         query: string;
 94 |         variables: Recordable;
 95 |       } = {
 96 |         query: Fragments.servicesTopolgy,
 97 |         variables: { duration },
 98 |       };
 99 |       let serviceObj;
100 |       if (serviceName) {
101 |         serviceObj = services.filter((d: {name: string, id: string}) => d.name === serviceName);
102 |       } else {
103 |         serviceObj = services.filter((d: {layers: string[], id: string}) => d.layers.includes(layer));
104 |       }
105 |       t.variables.serviceIds = serviceObj.map((d: {layers: string[], id: string}) => d.id);
106 |       // fetch topology data from api
107 |       const res = await this.doRequest(t);
108 |       if (!res.data.topology) {
109 |         throw new Error('Layer or service is not found');
110 |       }
111 |       const {nodes, calls} = this.setTopologyData({nodes: res.data.topology.nodes || [],  calls: res.data.topology.calls || []});
112 |       const idsS = calls.filter((i: Call) => i.detectPoints.includes('SERVER')).map((b: Call) => b.id);
113 |       const idsC = calls.filter((i: Call) => i.detectPoints.includes('CLIENT')).map((b: Call) => b.id);
114 |       const serverMetrics = [];
115 |       const clientMetrics = [];
116 |       for (const m of edgeMetrics) {
117 |         if (m.type === 'SERVER') {
118 |           serverMetrics.push(m);
119 |         } else {
120 |           clientMetrics.push(m);
121 |         }
122 |       }
123 |       const ids = nodes.map((d: Node) => d.id);
124 |       // fetch topology metrics from api
125 |       const nodeMetricsResp = nodeMetrics.length ? await this.queryMetrics(nodeMetrics, ids, duration) : null;
126 |       const edgeServerMetricsResp = serverMetrics.length && idsS.length ? await this.queryMetrics(serverMetrics, idsS, duration) : null;
127 |       const edgeClientMetricsResp = clientMetrics.length && idsC.length ? await this.queryMetrics(clientMetrics, idsC, duration) : null;
128 |       const edgeMetricsResp: any = (edgeServerMetricsResp || edgeClientMetricsResp) ? {
129 |         data: {...(edgeServerMetricsResp && edgeServerMetricsResp.data || {}), ...(edgeClientMetricsResp && edgeClientMetricsResp.data || {})}
130 |       } : null;
131 |       const fieldTypes = this.setFieldTypes({
132 |         nodes,
133 |         calls,
134 |         nodeMetrics: nodeMetricsResp ? {...nodeMetricsResp, config: nodeMetrics} : undefined,
135 |         edgeMetrics: edgeMetricsResp ? {...edgeMetricsResp, config: edgeMetrics} : undefined,
136 |       });
137 |       const nodeFrame =  new MutableDataFrame({
138 |         name: 'Nodes',
139 |         refId: target.refId,
140 |         fields: fieldTypes.nodeFieldTypes,
141 |         meta: {
142 |           preferredVisualisationType: 'nodeGraph',
143 |         }
144 |       });
145 |       const edgeFrame =  new MutableDataFrame({
146 |         name: 'Edges',
147 |         refId: target.refId,
148 |         fields: fieldTypes.edgeFieldTypes,
149 |         meta: {
150 |           preferredVisualisationType: 'nodeGraph',
151 |         }
152 |       });
153 | 
154 |       return [nodeFrame, edgeFrame];
155 |     });
156 | 
157 |     return Promise.all(promises).then(data => ({ data: data[0] }));
158 |   }
159 | 
160 |   async doRequest(params?: Recordable) {
161 |     // Do the request on proxy; the server will replace url + routePath with the url
162 |     // defined in plugin.json
163 |     const result = getBackendSrv().post(`${this.URL}${RoutePath}`, params);
164 | 
165 |     return result;
166 |   }
167 | 
168 |   parseMetrics(params: string) {
169 |     const regex = /{[^}]+}/g;
170 |     const arr = params.match(regex);
171 |     const metrics = arr?.map((d: string) => JSON.parse(d)) || [];
172 | 
173 |     return metrics;
174 |   }
175 | 
176 |   async queryMetrics(params: MetricData[], ids: string[], duration: DurationTime) {
177 |     const names = params.map((d: MetricData) => d.name);
178 |     const m = this.queryTopologyMetrics(names, ids, duration);
179 |     const metricJson = await this.doRequest(m);
180 | 
181 |     return metricJson;
182 |   }
183 | 
184 |   setTopologyData(params: {nodes: Node[], calls: Call[]}) {
185 |     if (!(params.nodes.length && params.calls.length)) {
186 |       return {nodes: [], calls: []}
187 |     }
188 |     const obj = {} as Recordable;
189 |       const nodes = (params.nodes || []).reduce((prev: Node[], next: Node) => {
190 |         if (!obj[next.id]) {
191 |           obj[next.id] = true;
192 |           prev.push(next);
193 |         }
194 |         return prev;
195 |       }, []);
196 |       const calls = (params.calls || []).reduce((prev: Call[], next: Call) => {
197 |         if (!obj[next.id]) {
198 |           obj[next.id] = true;
199 |           prev.push(next);
200 |         }
201 |         return prev;
202 |       }, []);
203 |       return {nodes, calls}
204 |   }
205 | 
206 |   setFieldTypes(params: {nodes: Node[], calls: Call[], nodeMetrics: Recordable, edgeMetrics: Recordable}) {
207 |     const nodeMetrics = params.nodeMetrics || {config: [], data: {}};
208 |     const edgeMetrics = params.edgeMetrics || {config: [], data: {}};
209 |     if (!(params.nodes && params.calls)) {
210 |       return {nodeFieldTypes: [], edgeFieldTypes: []};;
211 |     }
212 |     const nodeFieldTypes = this.getNodeTypes(params.nodes || [], nodeMetrics);
213 |     const edgeFieldTypes = this.getEdgeTypes(params.calls || [], edgeMetrics);
214 | 
215 |     return {nodeFieldTypes, edgeFieldTypes};
216 |   }
217 | 
218 |   getNodeTypes(nodes: Node[], metrics: Recordable) {
219 |     const idField = { name: NodeGraphDataFrameFieldNames.id, type: FieldType.string, values: new ArrayVector(), config: {}};
220 |     const titleField = { name: NodeGraphDataFrameFieldNames.title, type: FieldType.string, values: new ArrayVector(), config: {}};
221 |     const mainStatField = { name: NodeGraphDataFrameFieldNames.mainStat, type: FieldType.number, values: new ArrayVector(), config: {}};
222 |     const secondaryStatField = { name: NodeGraphDataFrameFieldNames.secondaryStat, type: FieldType.number, values: new ArrayVector(), config: {}};
223 |     const detailsFields: any = [];
224 |     for (let i = 0; i < metrics.config.length; i++) {
225 |       const c = metrics.config[i];
226 |       const config = {displayName: c.label, unit: c.unit};
227 |       if (i === 0) {
228 |         mainStatField.config = config;
229 |       } else if (i === 1) {
230 |         secondaryStatField.config = config;
231 |       } else {
232 |         detailsFields.push({
233 |           name: `${NodeGraphDataFrameFieldNames.detail}${c.name}`,
234 |           type: FieldType.number,
235 |           values: new ArrayVector(),
236 |           config: {displayName: `${c.label || c.name } ${c.unit || ''}`}
237 |         });
238 |       }
239 |     }
240 |     for (const node of nodes) {
241 |       idField.values.add(node.id || '');
242 |       titleField.values.add(node.name);
243 |       for (let i = 0; i < metrics.config.length; i++) {
244 |         const item = metrics.config[i];
245 |         const m = (metrics.data[item.name].values).find((v: {id: string}) => v.id === node.id) || {isEmptyValue: true};
246 |         const value = m.isEmptyValue ? NaN : this.expression(Number(m.value), item.calculation);
247 |         if(i > 1) {
248 |           detailsFields[i - 2]?.values.add(Number(value));
249 |         } else {
250 |           if (i === 0) {
251 |             mainStatField.values.add(Number(value));
252 |           }
253 |           if (i === 1) {
254 |             secondaryStatField.values.add(Number(value));
255 |           }
256 |         }
257 |       }
258 |     }
259 | 
260 |     return [idField, titleField, mainStatField, secondaryStatField, ...detailsFields];
261 |   }
262 | 
263 |   getEdgeTypes(calls: Call[], metrics: Recordable) {
264 |     const idField = { name: NodeGraphDataFrameFieldNames.id, type: FieldType.string, values: new ArrayVector(), config: {}};
265 |     const targetField = { name: NodeGraphDataFrameFieldNames.target, type: FieldType.string, values: new ArrayVector(), config: {}};
266 |     const sourceField = { name: NodeGraphDataFrameFieldNames.source, type: FieldType.string, values: new ArrayVector(), config: {}};
267 |     const mainStatField = { name: NodeGraphDataFrameFieldNames.mainStat, type: FieldType.number, values: new ArrayVector(), config: {}};
268 |     const secondaryStatField = { name: NodeGraphDataFrameFieldNames.secondaryStat, type: FieldType.number, values: new ArrayVector(), config: {}};
269 |     const detailsFields: any = [];
270 | 
271 |     for (let i = 0; i < metrics.config.length; i++) {
272 |       const k = metrics.config[i];
273 |       const config = {displayName: k.label, unit: k.unit};
274 |       if (i === 0) {
275 |         mainStatField.config = config;
276 |       }
277 |       else if (i === 1) {
278 |         secondaryStatField.config = config;
279 |       } else {
280 |         detailsFields.push({
281 |           name: `${NodeGraphDataFrameFieldNames.detail}${k.name}`,
282 |           type: FieldType.number,
283 |           values: new ArrayVector(),
284 |           config: {displayName: `${k.label || k.name } ${k.unit || ''}`}
285 |         });
286 |       }
287 |     }
288 |     for (const call of calls) {
289 |       idField.values.add(call.id);
290 |       targetField.values.add(call.target);
291 |       sourceField.values.add(call.source);
292 |       for (let i = 0; i < metrics.config.length; i++) {
293 |         const item = metrics.config[i];
294 |         const m = (metrics.data[item.name].values).find((v: {id: string}) => v.id === call.id) || {isEmptyValue: true};
295 |         const value = m.isEmptyValue ? NaN : this.expression(Number(m.value), item.calculation);
296 | 
297 |         if (i === 0) {
298 |           mainStatField.values.add(Number(value));
299 |         } else if (i === 1) {
300 |           secondaryStatField.values.add(Number(value));
301 |         } else {
302 |           detailsFields[i - 2]?.values.add(Number(value));
303 |         }
304 |       }
305 |     }
306 | 
307 |     return [idField, targetField, sourceField, mainStatField, secondaryStatField, ...detailsFields];
308 |   }
309 | 
310 |   expression(val: number, calculation: string): number | string {
311 |     let data: number | string = Number(val);
312 |   
313 |     switch (calculation) {
314 |       case Calculations.Percentage:
315 |         data = (val / 100).toFixed(2);
316 |         break;
317 |       case Calculations.PercentageAvg:
318 |         data = (val / 100).toFixed(2);
319 |         break;
320 |       case Calculations.ByteToKB:
321 |         data = (val / 1024).toFixed(2);
322 |         break;
323 |       case Calculations.ByteToMB:
324 |         data = (val / 1024 / 1024).toFixed(2);
325 |         break;
326 |       case Calculations.ByteToGB:
327 |         data = (val / 1024 / 1024 / 1024).toFixed(2);
328 |         break;
329 |       case Calculations.Apdex:
330 |         data = (val / 10000).toFixed(2);
331 |         break;
332 |       case Calculations.ConvertSeconds:
333 |         data = dayjs(val * 1000).format('YYYY-MM-DD HH:mm:ss');
334 |         break;
335 |       case Calculations.ConvertMilliseconds:
336 |         data = dayjs(val).format('YYYY-MM-DD HH:mm:ss');
337 |         break;
338 |       case Calculations.MsToS:
339 |         data = (val / 1000).toFixed(2);
340 |         break;
341 |       case Calculations.SecondToDay:
342 |         data = (val / 86400).toFixed(2);
343 |         break;
344 |       case Calculations.NanosecondToMillisecond:
345 |         data = (val / 1000 / 1000).toFixed(2);
346 |         break;
347 |       case Calculations.ApdexAvg:
348 |         data = (val / 10000).toFixed(2);
349 |         break;
350 |       default:
351 |         data = data;
352 |         break;
353 |     }
354 |   
355 |     return data;
356 |   }
357 | 
358 |   queryTopologyMetrics(metrics: string[], ids: string[], duration: DurationTime) {
359 |     const conditions: { [key: string]: unknown } = {
360 |       duration,
361 |       ids,
362 |     };
363 |     const variables: string[] = [`$duration: Duration!`, `$ids: [ID!]!`];
364 |     const fragmentList = metrics.map((d: string, index: number) => {
365 |       conditions[`m${index}`] = d;
366 |       variables.push(`$m${index}: String!`);
367 | 
368 |       return `${d}: getValues(metric: {
369 |         name: $m${index}
370 |         ids: $ids
371 |       }, duration: $duration) {
372 |         values {
373 |           id
374 |           value
375 |         }
376 |       }`;
377 |     });
378 |     const query = `query queryData(${variables}) {${fragmentList.join(" ")}}`;
379 | 
380 |     return { query, variables: conditions };
381 |   }
382 | 
383 |   timeFormat(time: Date[]) {
384 |     let step: TimeType;
385 |     const unix = Math.round(time[1].getTime()) - Math.round(time[0].getTime());
386 |     if (unix <= 60 * 60 * 1000) {
387 |       step = TimeType.MINUTE_TIME;
388 |     } else if (unix <= 24 * 60 * 60 * 1000) {
389 |       step = TimeType.HOUR_TIME;
390 |     } else {
391 |       step = TimeType.DAY_TIME;
392 |     }
393 |     return { start: time[0], end: time[1], step };
394 |   }
395 | 
396 |   dateFormatStep(date: Date, step: string, monthDayDiff?: boolean): string {
397 |     const year = date.getFullYear();
398 |     const monthTemp = date.getMonth() + 1;
399 |     let month = `${monthTemp}`;
400 |     if (monthTemp < 10) {
401 |       month = `0${monthTemp}`;
402 |     }
403 |     if (step === 'MONTH' && monthDayDiff) {
404 |       return `${year}-${month}`;
405 |     }
406 |     const dayTemp = date.getDate();
407 |     let day = `${dayTemp}`;
408 |     if (dayTemp < 10) {
409 |       day = `0${dayTemp}`;
410 |     }
411 |     if (step === 'DAY' || step === 'MONTH') {
412 |       return `${year}-${month}-${day}`;
413 |     }
414 |     const hourTemp = date.getHours();
415 |     let hour = `${hourTemp}`;
416 |     if (hourTemp < 10) {
417 |       hour = `0${hourTemp}`;
418 |     }
419 |     if (step === 'HOUR') {
420 |       return `${year}-${month}-${day} ${hour}`;
421 |     }
422 |     const minuteTemp = date.getMinutes();
423 |     let minute = `${minuteTemp}`;
424 |     if (minuteTemp < 10) {
425 |       minute = `0${minuteTemp}`;
426 |     }
427 |     if (step === 'MINUTE') {
428 |       return `${year}-${month}-${day} ${hour}${minute}`;
429 |     }
430 |     const secondTemp = date.getSeconds();
431 |     let second = `${secondTemp}`;
432 |     if (secondTemp < 10) {
433 |       second = `0${secondTemp}`;
434 |     }
435 |     if (step === 'SECOND') {
436 |       return `${year}-${month}-${day} ${hour}${minute}${second}`;
437 |     }
438 |     return '';
439 |   }
440 |   getLocalTime(utc: number, time: Date): Date {
441 |     const d = new Date(time);
442 |     const len = d.getTime();
443 |     const offset = d.getTimezoneOffset() * 60000;
444 |     const utcTime = len + offset;
445 | 
446 |     return new Date(utcTime + 3600000 * utc);
447 |   }
448 |   async testDatasource() {
449 |     // Implement a health check for your data source.
450 |     const defaultErrorMessage = 'Cannot connect to API';
451 |     try {
452 |       const  v =  {
453 |         query: Fragments.version,
454 |         variables: {},
455 |       };
456 |       const resp = await this.doRequest(v);
457 |     
458 |       if (resp.data && resp.data.version !== undefined) {
459 |         return {
460 |           status: 'success',
461 |           message: 'Success',
462 |         };
463 |       } else {
464 |         return {
465 |           status: 'error',
466 |           message: resp.statusText ? resp.statusText : defaultErrorMessage,
467 |         };
468 |       }
469 |     } catch(err: any) {
470 |       const toString = Object.prototype.toString;
471 |       if (toString.call(err) === `[object String]`) {
472 |         return {
473 |           status: 'error',
474 |           message: err,
475 |         };
476 |       } else {
477 |         let message = '';
478 |         message += err.statusText ? err.statusText : defaultErrorMessage;
479 |         if (err.data && err.data.error && err.data.error.code) {
480 |           message += ': ' + err.data.error.code + '. ' + err.data.error.message;
481 |         }
482 | 
483 |         return {
484 |           status: 'error',
485 |           message,
486 |         };
487 |       }
488 |     }
489 |   }
490 | }
491 | 


--------------------------------------------------------------------------------
/src/img/config.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apache/skywalking-grafana-plugins/6b220fe3201abaf73ceb919821db536c1a2d75ba/src/img/config.png


--------------------------------------------------------------------------------
/src/img/logo-sw.svg:
--------------------------------------------------------------------------------
 1 | <!-- Licensed to the Apache Software Foundation (ASF) under one or more
 2 | contributor license agreements.  See the NOTICE file distributed with
 3 | this work for additional information regarding copyright ownership.
 4 | The ASF licenses this file to You under the Apache License, Version 2.0
 5 | (the "License"); you may not use this file except in compliance with
 6 | the License.  You may obtain a copy of the License at
 7 | 
 8 |      http://www.apache.org/licenses/LICENSE-2.0
 9 | 
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and
14 | limitations under the License. -->
15 | <svg width="3450px" height="1823px" viewBox="0 0 3450 1823" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
16 |     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
17 |         <g id="Group" transform="translate(0.000000, -29.000000)">
18 |             <path d="M1050.01772,1394.31899 C1050.01772,1615.24051 912.21519,1851.47342 474.746835,1851.47342 C310.696203,1851.47342 192.579747,1836.16203 87.5873418,1812.10127 C65.7139241,1807.72658 46.0278481,1792.41519 46.0278481,1768.35443 L46.0278481,1610.86582 C46.0278481,1586.80506 65.7139241,1569.30633 87.5873418,1569.30633 L91.9620253,1569.30633 C179.455696,1580.24304 398.189873,1591.17975 479.121519,1591.17975 C673.794937,1591.17975 732.853165,1521.18481 732.853165,1394.31899 C732.853165,1309.01266 691.293671,1265.26582 546.929114,1179.95949 L258.2,1007.15949 C54.7772152,886.855696 0.0936708861,759.989873 0.0936708861,606.875949 C0.0936708861,366.268354 140.083544,191.281013 546.929114,191.281013 C691.293671,191.281013 892.529114,213.15443 966.898734,230.653165 C988.772152,235.027848 1006.27089,250.339241 1006.27089,272.212658 L1006.27089,434.075949 C1006.27089,455.949367 990.959494,473.448101 969.086076,473.448101 L964.711392,473.448101 C820.346835,460.324051 675.982278,451.574684 533.805063,451.574684 C371.941772,451.574684 304.134177,508.44557 304.134177,606.875949 C304.134177,679.058228 341.318987,722.805063 483.496203,801.549367 L745.977215,948.101266 C986.58481,1081.52911 1050.01772,1221.51899 1050.01772,1394.31899 Z M2852.63038,644.060759 C2852.63038,646.248101 2852.63038,648.435443 2852.63038,650.622785 L2653.58228,1656.8 C2627.33418,1788.04051 2592.33671,1840.53671 2458.90886,1840.53671 L2399.85063,1840.53671 C2281.73418,1840.53671 2220.48861,1783.66582 2192.05316,1669.92405 L2019.25316,1000.59747 C2017.06582,991.848101 2017.06582,989.660759 2012.69114,989.660759 C2008.31646,989.660759 2008.31646,991.848101 2006.12911,1000.59747 L1833.32911,1669.92405 C1804.89367,1783.66582 1743.6481,1840.53671 1625.53165,1840.53671 L1566.47342,1840.53671 C1433.04557,1840.53671 1398.0481,1788.04051 1371.8,1656.8 L1172.7519,650.622785 C1172.7519,648.435443 1172.7519,646.248101 1172.7519,644.060759 C1172.7519,620 1192.43797,600.313924 1216.49873,600.313924 L1428.67089,600.313924 C1450.5443,600.313924 1465.8557,620 1468.04304,639.686076 L1605.84557,1564.93165 C1608.03291,1584.61772 1612.40759,1595.55443 1616.78228,1595.55443 C1621.15696,1595.55443 1627.71899,1586.80506 1632.09367,1564.93165 L1813.64304,829.98481 C1835.51646,744.678481 1861.76456,735.929114 1936.13418,735.929114 L2089.2481,735.929114 C2163.61772,735.929114 2189.86582,744.678481 2211.73924,829.98481 L2393.28861,1564.93165 C2397.66329,1586.80506 2404.22532,1595.55443 2408.6,1595.55443 C2412.97468,1595.55443 2417.34937,1584.61772 2419.53671,1564.93165 L2557.33924,639.686076 C2559.52658,620 2574.83797,600.313924 2596.71139,600.313924 L2808.88354,600.313924 C2832.9443,600.313924 2852.63038,620 2852.63038,644.060759 Z" id="Sw" fill="#1368B3"></path>
19 |             <g id="moon-o" transform="translate(2932.164557, 596.000000) rotate(-183.000000) translate(-2932.164557, -596.000000) translate(2415.708861, 26.379747)" fill="#D8D8D8" fill-rule="nonzero">
20 |                 <path d="M1025.31646,927.371333 C992.796119,932.841177 959.292071,935.576099 925.845888,935.576099 C590.40035,935.576099 318.259524,661.909325 318.259524,324.582876 C318.259524,209.134252 351.705707,96.3623597 412.290747,0 C171.802278,71.8062511 0,293.684076 0,557.342199 C0,878.317305 259.46831,1139.24051 578.65368,1139.24051 C753.17563,1139.24051 916.818891,1059.22949 1025.31646,927.371333 Z" id="Shape"></path>
21 |             </g>
22 |         </g>
23 |     </g>
24 | </svg>


--------------------------------------------------------------------------------
/src/img/logo.svg:
--------------------------------------------------------------------------------
 1 | <!-- Licensed to the Apache Software Foundation (ASF) under one or more
 2 | contributor license agreements.  See the NOTICE file distributed with
 3 | this work for additional information regarding copyright ownership.
 4 | The ASF licenses this file to You under the Apache License, Version 2.0
 5 | (the "License"); you may not use this file except in compliance with
 6 | the License.  You may obtain a copy of the License at
 7 | 
 8 |      http://www.apache.org/licenses/LICENSE-2.0
 9 | 
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and
14 | limitations under the License. -->
15 | 
16 | <svg t="1645353544631" class="icon" viewBox="0 0 4327 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1115" xmlns:xlink="http://www.w3.org/1999/xlink" width="845.1171875" height="200">
17 |   <path d="M1739.616604 441.967094v2.334189l-70.798491 357.875925c-9.33434 46.678943-21.782943 65.351245-69.240755 65.351245h-21.005283c-42.010566 0-63.794717-20.227623-73.909132-60.682868l-61.461735-238.06551c-0.77766-3.111849-0.77766-3.889509-2.332982-3.889509-1.556528 0-1.556528 0.77766-2.334188 3.888302l-61.461736 238.066717c-10.113208 40.455245-31.897358 60.682868-73.909132 60.682868h-21.005283c-47.456604 0-59.906415-18.672302-69.240755-65.352453L1192.718491 695.233208c-1.195472 5.047547 0.798189-1.735245 5.984603-20.34717l7.780227-27.918491 35.907622-128.876679h17.354868l36.416 251.411321c0.77766 7.001358 2.334189 10.892075 3.88951 10.892075 1.556528 0 3.890717-3.113057 5.446037-10.892075l64.573585-261.404981c7.779019-30.342038 17.115774-33.453887 43.568302-33.453887h54.457963c26.451321 0 35.788075 3.111849 43.568301 33.453887l64.572378 261.403773c1.556528 7.780226 3.890717 10.892075 5.446038 10.892076 1.556528 0 3.111849-3.889509 3.889509-10.892076l49.01434-329.089207c0.77766-7.002566 6.223698-14.003925 14.003924-14.003925h75.464453c8.557887 0 15.559245 7.001358 15.559245 15.559245z m379.539321 407.667925c0 8.557887-7.002566 15.559245-15.560453 15.559245h-66.128906c-8.557887 0-15.559245-7.001358-15.559245-15.559245v-12.448604c-35.788075 21.784151-72.353811 34.231547-109.697208 34.231547-64.573585 0-134.593208-24.896-134.593207-129.923622v-3.113057c0-88.690717 54.460377-134.592 189.830037-134.592h49.01434v-34.231547c0-50.56966-22.561811-63.017057-68.463094-63.017057-49.792 0-101.139321 3.111849-126.812981 6.223698h-3.88951c-7.780226 0-14.003925-2.334189-14.003924-13.225056v-49.792c0-8.557887 4.66717-14.003925 14.781584-16.338113 31.118491-6.223698 76.243321-12.447396 129.924831-12.447397 110.47366 0 171.157736 49.01434 171.157736 148.595925v280.077283z m-102.694642-81.690566V672.253585h-49.01434c-70.796075 0-86.356528 22.561811-86.356528 66.128906v3.113056c0 38.121057 17.115774 48.234264 56.015698 48.234264 28.007849 0 56.793358-9.33434 79.35517-21.784151z m305.630189 80.911698c0 8.557887-6.223698 16.338113-14.781585 16.338113h-72.353812c-8.557887 0-15.559245-7.780226-15.559245-16.338113V288.704c0-8.557887 7.001358-15.560453 15.559245-15.560453h72.353812c8.557887 0 14.780377 7.002566 14.780377 15.560453v560.152151z m453.448453 7.002566c0 4.66717-4.668377 9.335547-10.892076 9.335547h-94.914415c-8.557887 0-17.893434-8.557887-22.561811-15.559245l-122.144604-177.382642v176.603774c0 8.557887-7.001358 16.338113-15.559245 16.338113h-71.576151c-8.557887 0-15.559245-7.780226-15.559246-16.338113V288.704c0-8.557887 7.001358-15.560453 15.559246-15.560453h71.576151c8.557887 0 15.559245 7.002566 15.559245 15.560453v324.42083l133.035472-177.381434c5.446038-7.001358 13.226264-9.335547 17.894641-9.335547h87.135396c7.779019 0 11.669736 3.111849 11.669736 8.557887 0 2.334189-0.778868 4.668377-3.111849 7.780226l-156.377358 192.163019 157.932679 214.726038c1.556528 2.332981 2.334189 3.888302 2.334189 6.223698z m176.483018-503.36c0 8.557887-7.001358 15.559245-15.559245 15.559245h-75.464453c-8.557887 0-16.338113-7.001358-16.338113-15.559245v-68.463094c0-8.557887 7.780226-15.560453 16.338113-15.560453h75.464453c8.557887 0 15.560453 7.002566 15.560453 15.560453v68.463094z m-2.332981 496.357434c0 8.557887-7.001358 16.338113-15.559245 16.338113h-71.576151c-8.557887 0-15.559245-7.780226-15.559245-16.338113V441.967094c0-8.557887 7.001358-15.559245 15.559245-15.559245h71.576151c8.557887 0 15.559245 7.001358 15.559245 15.559245V848.857358z m458.11683 0c0 8.557887-7.002566 16.338113-15.560452 16.338113h-71.574944c-8.557887 0-15.559245-7.780226-15.559245-16.338113V595.231396c0-67.685434-6.223698-87.134189-66.130113-87.134188-26.451321 0-55.23683 10.892075-87.911849 28.006641V848.857358c0 8.557887-7.002566 16.338113-15.560453 16.338114h-71.574944c-8.557887 0-15.559245-7.780226-15.559245-16.338114V441.967094c0-8.557887 7.001358-15.559245 15.559245-15.559245h67.685434c8.557887 0 15.559245 7.001358 15.559246 15.559245v16.338114c45.123623-28.785509 74.686792-37.343396 126.03532-37.343397 112.030189 0 134.592 75.46566 134.592 174.269585V848.857358z m478.344453-368.766793c0 11.669736-3.111849 13.225057-12.448603 17.115774l-25.672453 10.113208c12.447396 17.894642 19.448755 35.010415 19.448754 62.239396v5.446038c0 97.248604-66.906566 141.594566-184.384 141.594566-41.232906 0-69.240755-7.002566-84.8-13.226265-9.336755 6.223698-13.226264 13.226264-13.226264 20.227623 0 15.560453 8.557887 21.784151 26.451321 25.67366l91.802566 21.784151c105.807698 24.896 174.270792 41.232906 174.270792 124.478793v5.446038c0 79.353962-58.348679 122.143396-190.607698 122.143396-126.035321 0-192.941887-47.456604-192.941886-129.145962v-7.001359c0-31.898566 14.781585-63.017057 39.677584-85.578868-21.784151-16.338113-35.009208-43.568302-35.009207-71.576151v-0.77766c0-24.117132 10.113208-48.235472 31.118491-63.017057-23.339472-24.117132-31.897358-52.124981-31.897359-91.024905v-5.446038c0-77.798642 50.56966-143.149887 185.16166-143.149887h182.049812a20.91834 20.91834 0 0 1 21.00649 21.005283v32.676226zM3766.339623 577.337962v-6.223698c0-37.343396-16.338113-66.128906-83.245887-66.128906-66.128906 0-84.02234 29.56317-84.02234 66.128906v6.223698c0 28.785509 11.669736 61.461736 84.02234 61.461736 64.573585 0 83.245887-22.561811 83.245887-61.461736z m8.557886 323.644378v-5.446038c0-17.115774-10.114415-27.230189-91.803773-46.680151l-69.240755-16.338113c-11.669736 16.338113-19.449962 26.452528-19.449962 54.460377v7.001359c0 31.897358 19.449962 51.347321 92.581434 51.34732 74.686792 0 87.913057-16.338113 87.913056-44.344754zM374.123472 607.081057c0 78.577509-49.01434 162.599849-204.611623 162.599849-58.348679 0-100.360453-5.446038-137.703849-14.003925-7.780226-1.555321-14.781585-7.001358-14.781585-15.559245v-56.015698c0-8.557887 7.001358-14.781585 14.780377-14.781585h1.557736c31.118491 3.889509 108.91834 7.780226 137.703849 7.780226 69.240755 0 90.246038-24.896 90.246038-70.019622 0-30.342038-14.780377-45.901283-66.128906-76.243321l-102.694641-61.460528C20.138264 426.587774 0.688302 381.464151 0.688302 327.003774c0-85.578868 49.790792-147.818264 194.497207-147.818265 51.347321 0 122.922264 7.779019 149.373585 14.003925 7.780226 1.555321 14.005132 7.001358 14.005132 14.780377v57.572227c0 7.780226-5.446038 14.003925-13.226264 14.003924h-1.556528c-51.347321-4.668377-102.694642-7.780226-153.263094-7.780226-57.572226 0-81.690566 20.227623-81.690566 55.238038 0 25.672453 13.227472 41.232906 63.795924 69.240754l93.359094 52.124981c85.578868 47.456604 108.140679 97.248604 108.14068 158.71034z m433.99849 147.040603c0 4.66717-4.66717 9.33434-10.892075 9.33434h-94.913208c-8.559094 0-17.895849-8.556679-22.563019-15.559245l-122.143396-177.381434v176.603773c0 8.557887-7.003774 16.338113-15.560453 16.338114h-71.574943c-8.557887 0-15.560453-7.780226-15.560453-16.338114V186.965736c0-8.557887 7.002566-15.559245 15.560453-15.559245h71.574943c8.557887 0 15.559245 7.001358 15.559246 15.559245v324.422038L690.645736 334.007547c5.446038-7.001358 13.226264-9.335547 17.893434-9.335547h87.135396c7.780226 0 11.669736 3.111849 11.669736 8.557887 0 2.334189-0.77766 4.66717-3.111849 7.780226L647.856302 533.171925l157.932679 214.726037c1.555321 2.332981 2.332981 3.888302 2.332981 6.223698z m434.777359-416.225811c0 1.556528 0 3.113057-0.777661 4.668377L1112.19683 796.911094c-24.117132 84.8-52.902642 122.143396-158.710339 122.143397-25.672453 0-64.572377-4.66717-82.467019-10.113208-8.557887-2.334189-16.338113-5.446038-16.338114-13.226264v-49.790793c0-8.557887 7.002566-14.003925 15.560453-14.003924h1.556529c21.784151 0.77766 66.128906 4.668377 87.911849 4.668377 33.453887 0 50.56966-9.336755 61.461736-49.792l6.223698-23.339471h-11.669736c-22.561811 0-50.56966-5.446038-67.685434-64.573585l-101.916981-356.319397c-0.77766-2.334189-0.77766-3.889509-0.777661-5.446037 0-7.780226 4.668377-12.447396 14.782793-12.447397h78.576302c7.002566 0 13.226264 7.001358 14.781585 14.003925l78.577509 316.641811c3.111849 13.226264 6.223698 17.115774 10.892075 17.115774h7.001359l84.023547-334.536453c1.555321-7.001358 7.779019-13.225057 15.559245-13.225057h79.35517c7.780226 0 14.003925 6.223698 14.003925 13.225057z" fill="#0068AF" p-id="1116"></path><path d="M3643.813434 155.203623c21.086189-4.692528 42.908981-7.631698 64.788528-8.777661 219.435472-11.499472 406.839547 158.192302 418.404227 378.855849 3.95834 75.522415-14.055849 150.439849-50.383698 215.553208 154.855849-55.217509 259.634717-206.250264 250.596226-378.724227-11.004377-209.968302-189.681509-371.759094-398.479698-360.815094-114.165132 5.982189-218.470642 63.932377-284.925585 153.907925z" fill="#D8D8D8" p-id="1117"></path>
18 | </svg>
19 | 


--------------------------------------------------------------------------------
/src/img/query.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apache/skywalking-grafana-plugins/6b220fe3201abaf73ceb919821db536c1a2d75ba/src/img/query.png


--------------------------------------------------------------------------------
/src/img/view.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apache/skywalking-grafana-plugins/6b220fe3201abaf73ceb919821db536c1a2d75ba/src/img/view.png


--------------------------------------------------------------------------------
/src/module.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Licensed to the Apache Software Foundation (ASF) under one or more
 3 |  * contributor license agreements.  See the NOTICE file distributed with
 4 |  * this work for additional information regarding copyright ownership.
 5 |  * The ASF licenses this file to You under the Apache License, Version 2.0
 6 |  * (the "License"); you may not use this file except in compliance with
 7 |  * the License.  You may obtain a copy of the License at
 8 |  *
 9 |  *      http://www.apache.org/licenses/LICENSE-2.0
10 |  *
11 |  * Unless required by applicable law or agreed to in writing, software
12 |  * distributed under the License is distributed on an "AS IS" BASIS,
13 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 |  * See the License for the specific language governing permissions and
15 |  * limitations under the License.
16 |  */
17 | 
18 | import { DataSourcePlugin } from '@grafana/data';
19 | import { DataSource } from './datasource';
20 | import { ConfigEditor } from './components/ConfigEditor';
21 | import { QueryEditor } from './components/QueryEditor';
22 | import { MyQuery, MyDataSourceOptions } from './types';
23 | 
24 | export const plugin = new DataSourcePlugin<DataSource, MyQuery, MyDataSourceOptions>(DataSource)
25 |   .setConfigEditor(ConfigEditor)
26 |   .setQueryEditor(QueryEditor);
27 | 


--------------------------------------------------------------------------------
/src/plugin.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://raw.githubusercontent.com/grafana/grafana/master/docs/sources/developers/plugins/plugin.schema.json",
 3 |   "type": "datasource",
 4 |   "name": "SkyWalking",
 5 |   "id": "apache-skywalking-datasource",
 6 |   "metrics": true,
 7 |   "info": {
 8 |     "description": "Apache SkyWalking",
 9 |     "author": {
10 |       "name": "Apache SkyWalking"
11 |     },
12 |     "keywords": ["datasource"],
13 |     "logos": {
14 |       "small": "img/logo-sw.svg",
15 |       "large": "img/logo.svg"
16 |     },
17 |     "links": [],
18 |     "screenshots": [
19 |       {
20 |         "name": "Config",
21 |         "path": "img/config.png"
22 |       },
23 |       {
24 |         "name": "Query",
25 |         "path": "img/query.png"
26 |       },
27 |       {
28 |         "name": "View",
29 |         "path": "img/view.png"
30 |       }
31 |     ],
32 |     "version": "%VERSION%",
33 |     "updated": "%TODAY%"
34 |   },
35 |   "dependencies": {
36 |     "grafanaDependency": ">=9.5.1",
37 |     "plugins": []
38 |   },
39 |   "routes": [
40 |     {
41 |       "path": "graphql",
42 |       "url": "{{ .JsonData.URL }}",
43 |       "headers": [
44 |         {
45 |           "name": "Content-Type",
46 |           "content": "application/json"
47 |         }
48 |       ]
49 |     }
50 |   ]
51 | }
52 | 


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Licensed to the Apache Software Foundation (ASF) under one or more
 3 |  * contributor license agreements.  See the NOTICE file distributed with
 4 |  * this work for additional information regarding copyright ownership.
 5 |  * The ASF licenses this file to You under the Apache License, Version 2.0
 6 |  * (the "License"); you may not use this file except in compliance with
 7 |  * the License.  You may obtain a copy of the License at
 8 |  *
 9 |  *      http://www.apache.org/licenses/LICENSE-2.0
10 |  *
11 |  * Unless required by applicable law or agreed to in writing, software
12 |  * distributed under the License is distributed on an "AS IS" BASIS,
13 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 |  * See the License for the specific language governing permissions and
15 |  * limitations under the License.
16 |  */
17 | 
18 | import { DataSourceJsonData } from '@grafana/data';
19 | import { DataQuery } from '@grafana/schema';
20 | 
21 | export interface MyQuery extends DataQuery {
22 |   layer?: string;
23 |   service?: string;
24 |   nodeMetrics?: string;
25 |   edgeMetrics?: string;
26 | }
27 | 
28 | export const DEFAULT_QUERY: Partial<MyQuery> = {};
29 | 
30 | /**
31 |  * These are options configured for each DataSource instance
32 |  */
33 | export interface MyDataSourceOptions extends DataSourceJsonData {
34 |   URL: string;
35 | }
36 | 
37 | /**
38 |  * Value that is used in the backend, but never sent over HTTP to the frontend
39 |  */
40 | export interface MySecureJsonData {
41 |   basicAuthPassword: string;
42 | }
43 | 
44 | export type DurationTime = {
45 |   start: string;
46 |   end: string;
47 |   step: string;
48 | }
49 | 
50 | export type MetricData = {
51 |   name: string;
52 |   label: string;
53 |   calculation: string;
54 |   unit: string;
55 |   type: string;
56 | }
57 | 
58 | export type Recordable = Record<string, any>;
59 | 
60 | export interface Node extends Recordable {
61 |   id: string;
62 |   name: string;
63 |   type: string;
64 |   isReal: boolean;
65 |   serviceName?: string;
66 | }
67 | export interface Call extends Recordable {
68 |   source: string;
69 |   target: string;
70 |   id: string;
71 |   detectPoints: string[];
72 |   type?: string;
73 |   sourceComponents: string[];
74 |   targetComponents: string[];
75 | }
76 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Licensed to the Apache Software Foundation (ASF) under one or more
 3 |  * contributor license agreements.  See the NOTICE file distributed with
 4 |  * this work for additional information regarding copyright ownership.
 5 |  * The ASF licenses this file to You under the Apache License, Version 2.0
 6 |  * (the "License"); you may not use this file except in compliance with
 7 |  * the License.  You may obtain a copy of the License at
 8 |  *
 9 |  *      http://www.apache.org/licenses/LICENSE-2.0
10 |  *
11 |  * Unless required by applicable law or agreed to in writing, software
12 |  * distributed under the License is distributed on an "AS IS" BASIS,
13 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 |  * See the License for the specific language governing permissions and
15 |  * limitations under the License.
16 |  */
17 | {
18 |   "extends": "./.config/tsconfig.json"
19 | }


--------------------------------------------------------------------------------