Add a panel plugin named filter-panel.

build/docker/Dockerfile.grafana

@@ -4,7 +4,13 @@ FROM node as node
 COPY ./grafana_plugin/yaml_panel /app/yaml_panel
 # 在镜像中创建工作目录
 WORKDIR /app/yaml_panel
-
+# 安装依赖并编译
+RUN npm install \
+    && npm run build
+# 将filter panel代码拷贝到镜像中的工作目录
+COPY ./grafana_plugin/filter_panel /app/filter_panel
+# 在镜像中创建工作目录
+WORKDIR /app/filter_panel
 # 安装依赖并编译
 RUN npm install \
     && npm run build
@@ -13,6 +19,7 @@ RUN npm install \
 FROM grafana/grafana:10.4.2-ubuntu
 
 COPY --from=node /app/yaml_panel/dist /var/lib/grafana/plugins/antgroup-yaml-panel
+COPY --from=node /app/filter_panel/dist /var/lib/grafana/plugins/antgroup-filter_panel
 
 # Define the list of plugins to install, separated by spaces.
 ARG PLUGINS="" 

grafana_plugin/filter_panel/.aci.yaml

@@ -0,0 +1,43 @@
+version: "2.0"
+
+
+only:
+  triggerType:
+    - pullRequest
+    - push
+    - tagPush
+
+
+stages:
+  - image-build
+  - show-artifact
+
+jobs:
+  x86_64镜像构建:
+    stage: image-build
+    id: build
+    component: docker-image-build
+    inputs:
+      imageName: reg.docker.alibaba-inc.com/anthcs/antgroup-fiter-panel # 构建产物镜像名称(不含tag), 如: reg.docker.alibaba-inc.com/antcodebuild/test-image-build
+      imageTag: ${{vcs.commitShortSha}}
+      dockerfile: ./antgroup-fiter-panel/Dockerfile # dockerfile 路径，不传默认为 ./Dockerfile (即: ${ACB_BUILD_DIR}/code-repo/Dockerfile)
+      contextDir: ./antgroup-fiter-panel/ # docker build 的 context 目录，不传默认为 ./ (即: ${ACB_BUILD_DIR}/code-repo 目录)
+      buildArgs: null # docker build 的 args 参数，格式为 key1=value1,key2=value2，注意key/value的格式，不能有空格等特殊字符
+      registryUsername: null # 镜像 registry 用户名，建议使用 aci secrets 方式传递，避免泄露 (reg.docker.alibaba-inc.com、acs-reg.alipay.com 不传时默认使用平台公共账号 admin.for.antb)
+      registryPassword: null # 镜像 registry 密码，建议使用 aci secrets 方式传递，避免泄露 (不传使用平台公共账号)
+      skipWhenImageExists: null # true | false, 如果镜像已存在，是否跳过镜像构建，默认 false
+      errWhenImageExists: null # true | false, 如果镜像已存在，是否直接失败，默认 true
+      beforeScript: null # 前置脚本，按需传递 (在 ${ACB_BUILD_DIR}/code-repo 下执行)
+      beforeScriptImage: null  # 指定前置脚本运行环境镜像，beforeScript 不为空时需要传值(不传使用默认基础alios镜像)
+      afterScript: null # 后置脚本，按需传递 (在 ${ACB_BUILD_DIR}/code-repo 下执行)
+      afterScriptImage: null  # 指定后置脚本运行环境镜像，afterScript 不为空时需要传值(不传使用默认基础alios镜像)
+      nydusSwitch: false # nudys 镜像加速开关 true|false 默认为false
+      cacheStrategy: always # 镜像构建是否使用缓存，默认 always
+      extraTags: null # 可指定多个 (当前最多支持5个) 额外的构建镜像Tag, 格式参考下方文档描述 (如需推送到其他镜像中心，还需要配置对应的账密)
+      timeoutInSec: 600 # 构建任务执行超时时间，单位(秒)
+  pipeline下一阶段节点使用镜像sample:
+    stage: show-artifact
+    component: shell
+    inputs:
+      script: |
+              echo "x86_64 image: ${{jobs.build.outputs.image}}, sha256: ${{jobs.build.outputs.imageSha256}}"

grafana_plugin/filter_panel/.config/.cprc.json

@@ -0,0 +1,3 @@
+{
+  "version": "4.9.0"
+}

grafana_plugin/filter_panel/.config/.eslintrc

@@ -0,0 +1,25 @@
+/*
+ * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
+ *
+ * In order to extend the configuration follow the steps in
+ * https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations#extend-the-eslint-config
+ */
+{
+  "extends": ["@grafana/eslint-config"],
+  "root": true,
+  "rules": {
+    "react/prop-types": "off"
+  },
+  "overrides": [
+    {
+      "plugins": ["deprecation"],
+      "files": ["src/**/*.{ts,tsx}"],
+      "rules": {
+        "deprecation/deprecation": "warn"
+      },
+      "parserOptions": {
+        "project": "./tsconfig.json"
+      }
+    }
+  ]
+}

grafana_plugin/filter_panel/.config/.prettierrc.js

@@ -0,0 +1,16 @@
+/*
+ * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
+ *
+ * In order to extend the configuration follow the steps in .config/README.md
+ */
+
+module.exports = {
+  endOfLine: 'auto',
+  printWidth: 120,
+  trailingComma: 'es6',
+  semi: true,
+  jsxSingleQuote: false,
+  singleQuote: true,
+  useTabs: false,
+  tabWidth: 2,
+};

grafana_plugin/filter_panel/.config/Dockerfile

@@ -0,0 +1,52 @@
+ARG grafana_version=latest
+ARG grafana_image=grafana-enterprise
+
+FROM grafana/${grafana_image}:${grafana_version}
+
+ARG development=true
+
+
+ENV DEV "${development}"
+
+# Make it as simple as possible to access the grafana instance for development purposes
+# Do NOT enable these settings in a public facing / production grafana instance
+ENV GF_AUTH_ANONYMOUS_ORG_ROLE "Admin"
+ENV GF_AUTH_ANONYMOUS_ENABLED "true"
+ENV GF_AUTH_BASIC_ENABLED "false"
+# Set development mode so plugins can be loaded without the need to sign
+ENV GF_DEFAULT_APP_MODE "development"
+
+
+LABEL maintainer="Grafana Labs <hello@grafana.com>"
+
+ENV GF_PATHS_HOME="/usr/share/grafana"
+WORKDIR $GF_PATHS_HOME
+
+USER root
+
+# Installing supervisor and inotify-tools
+RUN if [ "${development}" = "true" ]; then \
+    if grep -i -q alpine /etc/issue; then \
+        apk add supervisor inotify-tools git; \
+    elif grep -i -q ubuntu /etc/issue; then \
+      DEBIAN_FRONTEND=noninteractive && \
+      apt-get update && \
+      apt-get install -y supervisor inotify-tools git && \
+      rm -rf /var/lib/apt/lists/*; \
+    else \
+      echo 'ERROR: Unsupported base image' && /bin/false; \
+    fi \
+    fi
+
+COPY supervisord/supervisord.conf /etc/supervisor.d/supervisord.ini
+COPY supervisord/supervisord.conf /etc/supervisor/conf.d/supervisord.conf
+
+
+
+# Inject livereload script into grafana index.html
+RUN sed -i 's|</body>|<script src="http://localhost:35729/livereload.js"></script></body>|g' /usr/share/grafana/public/views/index.html
+
+
+COPY entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
+ENTRYPOINT ["/entrypoint.sh"]

grafana_plugin/filter_panel/.config/README.md

@@ -0,0 +1,164 @@
+# Default build configuration by Grafana
+
+**This is an auto-generated directory and is not intended to be changed! ⚠️**
+
+The `.config/` directory holds basic configuration for the different tools
+that are used to develop, test and build the project. In order to make it updates easier we ask you to
+not edit files in this folder to extend configuration.
+
+## How to extend the basic configs?
+
+Bear in mind that you are doing it at your own risk, and that extending any of the basic configuration can lead
+to issues around working with the project.
+
+### Extending the ESLint config
+
+Edit the `.eslintrc` file in the project root in order to extend the ESLint configuration.
+
+**Example:**
+
+```json
+{
+  "extends": "./.config/.eslintrc",
+  "rules": {
+    "react/prop-types": "off"
+  }
+}
+```
+
+---
+
+### Extending the Prettier config
+
+Edit the `.prettierrc.js` file in the project root in order to extend the Prettier configuration.
+
+**Example:**
+
+```javascript
+module.exports = {
+  // Prettier configuration provided by Grafana scaffolding
+  ...require('./.config/.prettierrc.js'),
+
+  semi: false,
+};
+```
+
+---
+
+### Extending the Jest config
+
+There are two configuration in the project root that belong to Jest: `jest-setup.js` and `jest.config.js`.
+
+**`jest-setup.js`:** A file that is run before each test file in the suite is executed. We are using it to
+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))
+
+**`jest.config.js`:** The main Jest configuration file that extends the Grafana recommended setup. ([link to Jest docs](https://jestjs.io/docs/configuration))
+
+#### ESM errors with Jest
+
+A common issue with the current jest config involves importing an npm package that 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:
+
+```javascript
+process.env.TZ = 'UTC';
+const { grafanaESModules, nodeModulesToTransform } = require('./config/jest/utils');
+
+module.exports = {
+  // Jest configuration provided by Grafana
+  ...require('./.config/jest.config'),
+  // Inform jest to only transform specific node_module packages.
+  transformIgnorePatterns: [nodeModulesToTransform([...grafanaESModules, 'packageName'])],
+};
+```
+
+---
+
+### Extending the TypeScript config
+
+Edit the `tsconfig.json` file in the project root in order to extend the TypeScript configuration.
+
+**Example:**
+
+```json
+{
+  "extends": "./.config/tsconfig.json",
+  "compilerOptions": {
+    "preserveConstEnums": true
+  }
+}
+```
+
+---
+
+### Extending the Webpack config
+
+Follow these steps to extend the basic Webpack configuration that lives under `.config/`:
+
+#### 1. Create a new Webpack configuration file
+
+Create a new config file that is going to extend the basic one provided by Grafana.
+It can live in the project root, e.g. `webpack.config.ts`.
+
+#### 2. Merge the basic config provided by Grafana and your custom setup
+
+We are going to use [`webpack-merge`](https://github.com/survivejs/webpack-merge) for this.
+
+```typescript
+// webpack.config.ts
+import type { Configuration } from 'webpack';
+import { merge } from 'webpack-merge';
+import grafanaConfig from './.config/webpack/webpack.config';
+
+const config = async (env): Promise<Configuration> => {
+  const baseConfig = await grafanaConfig(env);
+
+  return merge(baseConfig, {
+    // Add custom config here...
+    output: {
+      asyncChunks: true,
+    },
+  });
+};
+
+export default config;
+```
+
+#### 3. Update the `package.json` to use the new Webpack config
+
+We need to update the `scripts` in the `package.json` to use the extended Webpack configuration.
+
+**Update for `build`:**
+
+```diff
+-"build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
++"build": "webpack -c ./webpack.config.ts --env production",
+```
+
+**Update for `dev`:**
+
+```diff
+-"dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",
++"dev": "webpack -w -c ./webpack.config.ts --env development",
+```
+
+### Configure grafana image to use when running docker
+
+By default, `grafana-enterprise` will be used as the docker image for all docker related commands. If you want to override this behavior, simply alter the `docker-compose.yaml` by adding the following build arg `grafana_image`.
+
+**Example:**
+
+```yaml
+version: '3.7'
+
+services:
+  grafana:
+    container_name: 'myorg-basic-app'
+    build:
+      context: ./.config
+      args:
+        grafana_version: ${GRAFANA_VERSION:-9.1.2}
+        grafana_image: ${GRAFANA_IMAGE:-grafana}
+```
+
+In this example, we assign the environment variable `GRAFANA_IMAGE` to the build arg `grafana_image` with a default value of `grafana`. This will allow you to set the value while running the docker-compose commands, which might be convenient in some scenarios.
+
+---

grafana_plugin/filter_panel/.config/entrypoint.sh

@@ -0,0 +1,18 @@
+#!/bin/sh
+
+if [ "${DEV}" = "false" ]; then
+    echo "Starting test mode"
+    exec /run.sh
+fi
+
+echo "Starting development mode"
+
+if grep -i -q alpine /etc/issue; then
+    exec /usr/bin/supervisord -c /etc/supervisord.conf
+elif grep -i -q ubuntu /etc/issue; then
+    exec /usr/bin/supervisord -c /etc/supervisor/supervisord.conf
+else
+    echo 'ERROR: Unsupported base image'
+    exit 1
+fi
+

grafana_plugin/filter_panel/.config/jest-setup.js

@@ -0,0 +1,25 @@
+/*
+ * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
+ *
+ * In order to extend the configuration follow the steps in
+ * https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations#extend-the-jest-config
+ */
+
+import '@testing-library/jest-dom';
+
+// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+Object.defineProperty(global, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+HTMLCanvasElement.prototype.getContext = () => {};