@cloudcare/guance-front-tools 1.0.12 → 1.0.13

package/lib/scripts/grafana-covert-to-guance-core.ts

@@ -1,13 +1,4 @@
-import type {
-  DashboardData as GuanceDashboardType,
-  ChartVarsSettings,
-  ChartVarsItem,
-  ChartData as GuanceChartData,
-  ChartType1 as GuanceChartType,
-  ChartQueries as GuanceChartQueries,
-  ChartQueryItem as GuanceChartQueryItem,
-  ChartSettings as GuanceChartSettings,
-} from '../generated/dashboardCharts'
+import type { DashboardData as GuanceDashboardType } from '../generated/dashboardCharts'
 import type {
   DashboardData as GrafanaDashboardType,
   VariableModel,
@@ -15,323 +6,18 @@ import type {
   RowPanel,
 } from './grafana-dashbord'
 
-const grafanaPanelTypeToGuanceChartMap: { [key: string]: GuanceChartType } = {
-  stat: 'singlestat',
-  singlestat: 'singlestat',
-  barchart: 'bar',
-  timeseries: 'sequence',
-  graph: 'sequence',
-  piechart: 'pie',
-  histogram: 'histogram',
-  bargauge: 'toplist',
-  gauge: 'gauge',
-  table: 'table',
-  text: 'text',
-  heatmap: 'heatmap',
-  treemap: 'treemap',
-}
-
-const GRAFANA_KEYWORKD = ['__interval']
-
-const VARIABLE_MAP = {
-  query: 'PROMQL_QUERY',
-  custom: 'CUSTOM_LIST',
-} as const
-
-const VARIABLE_DATASOURCE_MAP = {
-  query: 'dataflux',
-  custom: 'custom',
-} as const
-
-function isSupportedVariableType(type: string): type is keyof typeof VARIABLE_MAP {
-  return Object.prototype.hasOwnProperty.call(VARIABLE_MAP, type)
-}
-
-function replaceVariableStr(grafanaExpr: string): string {
-  return grafanaExpr.replace(/\$\{?([\d_\w]+)\}?/g, function (match, variable) {
-    if (GRAFANA_KEYWORKD.indexOf(variable) > -1) return match
-    return `#{${variable}}`
-  })
-}
-
-function sortPanelItemsByRowCol(panels: Panel[]): Panel[] {
-  return panels.slice(0).sort(function (panelA, panelB) {
-    const { gridPos: posA } = panelA
-    const { gridPos: posB } = panelB
-    if (!posA || !posB) return -1
-    if (posA.y === posB.y && posA.x === posB.x && posA.w > posB.w) {
-      return -1
-    }
-    if (posA.y === posB.y && posA.x === posB.x) {
-      return 0
-    }
-
-    if (posA.y > posB.y || (posA.y === posB.y && posA.x > posB.x)) {
-      return 1
-    }
-
-    return -1
-  })
-}
-
-function tenToTweenty(source: number = 1): string {
-  const numArr: number[] = []
-  source--
-  do {
-    numArr.push(source % 26)
-    source = Math.floor(source / 26)
-  } while (source > 0)
-  return numArr
-    .reverse()
-    .map((item: number, index: number) => {
-      return String.fromCharCode(item + 97 + (index === numArr.length - 1 ? 0 : -1))
-    })
-    .join('')
-    .toLowerCase()
-}
-
-function getGridH(h: number, rowHeight: number, margin: number) {
-  return Math.round(h * rowHeight + Math.max(0, 2 * (h - 1)) * margin)
-}
-
-function getGuanceHByGrafanaH(granfanH: number) {
-  return (getGridH(granfanH, 30, 4) + 10) / 20
-}
-
-function covertPanelToGuanceChart(grafanaPanel: Panel, rowPanel: RowPanel | undefined): GuanceChartData {
-  const { gridPos, title, type, targets, options } = grafanaPanel
-  const chartType: GuanceChartType = grafanaPanelTypeToGuanceChartMap[type]
-  let pos = {
-    x: gridPos!.x,
-    w: gridPos!.w,
-    y: gridPos!.y,
-    h: gridPos!.h,
-  }
-
-  if (rowPanel) {
-    const { gridPos: rowGridPos } = rowPanel
-    if (rowGridPos && gridPos && !rowPanel.collapsed) {
-      pos = {
-        x: gridPos.x,
-        w: gridPos.w,
-        y: gridPos.y - rowGridPos.y,
-        h: gridPos.h,
-      }
-    }
-  }
-
-  const queries: GuanceChartQueries = []
-  if (targets && targets.length) {
-    let currentIndex = 0
-    targets.forEach((_target) => {
-      const queryStr: string | unknown = _target.expr || _target.query || _target.queryText
-      if (!queryStr) return
-
-      currentIndex++
-      const queryItem: GuanceChartQueryItem = {
-        datasource: 'dataflux',
-        qtype: 'promql',
-        type: chartType,
-        query: {
-          q: replaceVariableStr(queryStr as string),
-          type: 'promql',
-          code: tenToTweenty(currentIndex),
-          promqlCode: currentIndex,
-        },
-      }
-      queries.push(queryItem)
-    })
-  }
-
-  let settings: GuanceChartSettings = {}
-  if (options) {
-    switch (chartType) {
-      case 'text':
-        queries.push({
-          query: {
-            content: options.content,
-          },
-        })
-        break
-      case 'toplist':
-        settings = {
-          showTopSize: true,
-          chartType: 'bar',
-        }
-        break
-      default:
-        break
-    }
-  }
-
-  return {
-    extend: {
-      settings: settings,
-    },
-    group: {
-      name: rowPanel ? rowPanel.title : null,
-    },
-    pos: {
-      x: pos.x,
-      y: getGuanceHByGrafanaH(pos.y),
-      h: getGuanceHByGrafanaH(pos.h),
-      w: pos.w,
-    },
-    name: replaceVariableStr(title || ''),
-    queries: queries,
-    type: chartType,
-  }
-}
-
-function covertPanelsToCharts(grafanaPanelData: Panel[], rowPanel: RowPanel | undefined): GuanceChartData[] {
-  const guanceCharts: GuanceChartData[] = []
-  grafanaPanelData.forEach((grafanaPanel) => {
-    if (!grafanaPanel.gridPos) return
-    guanceCharts.push(covertPanelToGuanceChart(grafanaPanel, rowPanel))
-  })
-  return guanceCharts
-}
+// This script is the shared conversion source for the published API and CLI.
+// Keep it thin and delegate to the maintained converter implementation.
+// @ts-ignore
+import { convertDashboard } from '../../skills/grafana-to-guance-dashboard/scripts/convert-grafana-dashboard.mjs'
 
 export function covert(grafanaData: GrafanaDashboardType): GuanceDashboardType {
-  const covertGuanceResult: GuanceDashboardType = {}
-  covertGuanceResult.title = grafanaData.title
-
-  const guanceVars: ChartVarsSettings = []
-  grafanaData.templating?.list?.forEach((_variable: VariableModel, index: number) => {
-    const { current, type, allValue } = _variable
-    const variableType = String(type)
-    if (!isSupportedVariableType(variableType)) return
-
-    let defaultVal = {
-      label: '',
-      value: '',
-    }
-
-    if (current) {
-      let labels: string[] = []
-      let values: string[] = []
-      if (Array.isArray(current.text)) {
-        labels = current.text
-      } else if (typeof current.text === 'string') {
-        labels = [current.text]
-      }
-      if (Array.isArray(current.value)) {
-        values = current.value
-      } else if (typeof current.value === 'string') {
-        values = [current.value]
-      }
-
-      labels = labels.map((label) => {
-        if (label === 'All') {
-          if (allValue === '.*') {
-            return '*'
-          }
-          return 'all values'
-        }
-        return label
-      })
-
-      values = values.map((value) => {
-        if (value === '$__all') {
-          if (allValue === '.*') {
-            return '*'
-          }
-          return '__all__'
-        }
-        return value
-      })
-
-      defaultVal = {
-        label: labels.join(','),
-        value: values.join(','),
-      }
-    }
-
-    let value = _variable.query
-    if (value && typeof value === 'object' && value.query) {
-      value = replaceVariableStr(value.query as string)
-    } else if (value && typeof value === 'string') {
-      value = replaceVariableStr(_variable.query as string)
-    } else {
-      return
-    }
-
-    const guanceVariableItem: ChartVarsItem = {
-      type: VARIABLE_MAP[variableType],
-      datasource: VARIABLE_DATASOURCE_MAP[variableType],
-      name: _variable.label || _variable.name || '',
-      seq: index,
-      hide: _variable.hide ? 1 : 0,
-      multiple: _variable.multi !== undefined ? _variable.multi : true,
-      includeStar: _variable.includeAll !== undefined ? _variable.includeAll : true,
-      valueSort: 'desc',
-      code: _variable.name,
-      definition: {
-        value: value,
-        defaultVal: defaultVal,
-      },
-    }
-    guanceVars.push(guanceVariableItem)
-  })
-
-  const guanceGroups: Array<{ name?: string }> = []
-  const guanceExpand: { [key: string]: boolean } = {}
-  const guanceCharts: GuanceChartData[] = []
-
-  let lastRowPanel: RowPanel | undefined
-  let lastPanels: Panel[] = []
-  let grafanaCharts =
-    grafanaData.panels?.filter(
-      (_panel: Panel | RowPanel) => _panel.type === 'row' || grafanaPanelTypeToGuanceChartMap[_panel.type]
-    ) || []
-
-  grafanaCharts = sortPanelItemsByRowCol(grafanaCharts)
-  grafanaCharts.forEach((_panel) => {
-    if (_panel.type === 'row') {
-      const _rowPanel = _panel as RowPanel
-
-      if (_rowPanel.title) {
-        guanceGroups.push({
-          name: _rowPanel.title,
-        })
-        guanceExpand[_rowPanel.title] = !_rowPanel.collapsed
-      }
-
-      if (lastPanels.length) {
-        guanceCharts.push(...covertPanelsToCharts(lastPanels, lastRowPanel))
-        lastPanels = []
-        lastRowPanel = undefined
-      }
-
-      if (_rowPanel.collapsed) {
-        const subPanels =
-          _rowPanel.panels?.filter(
-            (_childPanel: Panel | RowPanel) =>
-              _childPanel.type === 'row' || grafanaPanelTypeToGuanceChartMap[_childPanel.type]
-          ) || []
-        guanceCharts.push(...covertPanelsToCharts(subPanels, _rowPanel))
-      } else {
-        lastRowPanel = _rowPanel
-      }
-    } else {
-      lastPanels.push(_panel)
-    }
-  })
-
-  if (lastPanels.length) {
-    guanceCharts.push(...covertPanelsToCharts(lastPanels, lastRowPanel))
-  }
-
-  covertGuanceResult.dashboardExtend = {
-    groupUnfoldStatus: guanceExpand,
-  }
-  covertGuanceResult.main = {
-    vars: guanceVars,
-    charts: guanceCharts,
-    groups: guanceGroups,
-  }
-
-  return covertGuanceResult
+  return convertDashboard(grafanaData) as GuanceDashboardType
 }
 
-export type { GrafanaDashboardType, Panel as GrafanaPanel, RowPanel as GrafanaRowPanel, VariableModel as GrafanaVariableModel }
+export type {
+  GrafanaDashboardType,
+  Panel as GrafanaPanel,
+  RowPanel as GrafanaRowPanel,
+  VariableModel as GrafanaVariableModel,
+}

package/lib/scripts/grafana-covert-to-guance.js

@@ -7,43 +7,66 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import * as fs from 'fs';
-import * as path from 'path';
+import fs from 'fs';
+import path from 'path';
 import yargs from 'yargs';
-import { covert } from './grafana-covert-to-guance-core.js';
+// @ts-ignore
+import { convertDashboard, validateDashboardFile, } from '../../skills/grafana-to-guance-dashboard/scripts/convert-grafana-dashboard.mjs';
 export function run(args) {
     return __awaiter(this, void 0, void 0, function* () {
         const { argv } = yargs(args)
             .usage('Convert grafana dashboard json template to guance dashboard json template.')
-            .demand('d')
-            .alias('d', 'input')
-            .describe('d', 'path to grafana dashboard json file path')
-            .coerce('d', (d) => {
-            const resolved = d && path.resolve(d);
-            if (fs.existsSync(resolved) && /\.json$/.test(resolved)) {
-                return resolved;
-            }
-            throw new Error(`Input Grafana JSON File "${d}" is not a JSON!`);
+            .option('d', {
+            alias: 'input',
+            type: 'string',
+            demandOption: true,
+            describe: 'path to grafana dashboard json file path',
+            coerce: (value) => {
+                const resolved = value && path.resolve(value);
+                if (fs.existsSync(resolved) && /\.json$/.test(resolved)) {
+                    return resolved;
+                }
+                throw new Error(`Input Grafana JSON File "${value}" is not a JSON!`);
+            },
         })
-            .alias('o', 'out')
-            .describe('o', 'path to output json file path')
-            .default('o', path.resolve(path.join('.', 'guance-dashboard.json')))
-            .coerce('o', (o) => path.resolve(o));
+            .option('o', {
+            alias: 'out',
+            type: 'string',
+            default: path.resolve(path.join('.', 'guance-dashboard.json')),
+            describe: 'path to output json file path',
+            coerce: (value) => path.resolve(value),
+        })
+            .option('validate', {
+            type: 'boolean',
+            default: false,
+            describe: 'validate generated dashboard against schema',
+        })
+            .option('schema', {
+            type: 'string',
+            default: 'dashboard-schema.json',
+            describe: 'schema file name under schemas/',
+        })
+            .option('guance-promql-compatible', {
+            type: 'boolean',
+            default: false,
+            describe: 'rewrite PromQL metric names to Guance compatible measurement:field form',
+        })
+            .option('keep-grafana-meta', {
+            type: 'boolean',
+            default: false,
+            describe: 'keep source grafana metadata under extend.grafana',
+        });
         const grafanaJsonPath = argv.d;
         const outGuanceJsonPath = argv.o;
-        try {
-            const grafanaJSONData = JSON.parse(fs.readFileSync(grafanaJsonPath, 'utf-8'));
-            const covertResult = covert(grafanaJSONData);
-            // 确保目录存在
-            const dir = path.dirname(outGuanceJsonPath);
-            if (!fs.existsSync(dir)) {
-                fs.mkdirSync(dir, { recursive: true }); // recursive: true 确保递归创建目录
-            }
-            fs.writeFileSync(outGuanceJsonPath, JSON.stringify(covertResult), 'utf-8');
-        }
-        catch (err) {
-            throw new Error(err);
+        const grafanaJSONData = JSON.parse(fs.readFileSync(grafanaJsonPath, 'utf-8'));
+        const convertResult = convertDashboard(grafanaJSONData, {
+            guancePromqlCompatible: Boolean(argv.guancePromqlCompatible),
+            keepGrafanaMeta: Boolean(argv.keepGrafanaMeta),
+        });
+        fs.mkdirSync(path.dirname(outGuanceJsonPath), { recursive: true });
+        fs.writeFileSync(outGuanceJsonPath, `${JSON.stringify(convertResult, null, 2)}\n`, 'utf-8');
+        if (argv.validate) {
+            validateDashboardFile(outGuanceJsonPath, String(argv.schema));
         }
     });
 }
-// console.log(JSON.stringify(result, null, 2))

package/lib/scripts/grafana-covert-to-guance.ts

@@ -1,41 +1,69 @@
-import * as fs from 'fs'
-import * as path from 'path'
+import fs from 'fs'
+import path from 'path'
 import yargs from 'yargs'
-import { covert } from './grafana-covert-to-guance-core.js'
+// @ts-ignore
+import {
+  convertDashboard,
+  validateDashboardFile,
+} from '../../skills/grafana-to-guance-dashboard/scripts/convert-grafana-dashboard.mjs'
 
-export async function run(args) {
+export async function run(args: string[]) {
   const { argv } = yargs(args)
     .usage('Convert grafana dashboard json template to guance dashboard json template.')
-
-    .demand('d')
-    .alias('d', 'input')
-    .describe('d', 'path to grafana dashboard json file path')
-    .coerce('d', (d) => {
-      const resolved = d && path.resolve(d)
-      if (fs.existsSync(resolved) && /\.json$/.test(resolved)) {
-        return resolved
-      }
-      throw new Error(`Input Grafana JSON File "${d}" is not a JSON!`)
+    .option('d', {
+      alias: 'input',
+      type: 'string',
+      demandOption: true,
+      describe: 'path to grafana dashboard json file path',
+      coerce: (value: string) => {
+        const resolved = value && path.resolve(value)
+        if (fs.existsSync(resolved) && /\.json$/.test(resolved)) {
+          return resolved
+        }
+        throw new Error(`Input Grafana JSON File "${value}" is not a JSON!`)
+      },
+    })
+    .option('o', {
+      alias: 'out',
+      type: 'string',
+      default: path.resolve(path.join('.', 'guance-dashboard.json')),
+      describe: 'path to output json file path',
+      coerce: (value: string) => path.resolve(value),
+    })
+    .option('validate', {
+      type: 'boolean',
+      default: false,
+      describe: 'validate generated dashboard against schema',
+    })
+    .option('schema', {
+      type: 'string',
+      default: 'dashboard-schema.json',
+      describe: 'schema file name under schemas/',
     })
+    .option('guance-promql-compatible', {
+      type: 'boolean',
+      default: false,
+      describe: 'rewrite PromQL metric names to Guance compatible measurement:field form',
+    })
+    .option('keep-grafana-meta', {
+      type: 'boolean',
+      default: false,
+      describe: 'keep source grafana metadata under extend.grafana',
+    })
+
+  const grafanaJsonPath = argv.d as string
+  const outGuanceJsonPath = argv.o as string
+
+  const grafanaJSONData = JSON.parse(fs.readFileSync(grafanaJsonPath, 'utf-8'))
+  const convertResult = convertDashboard(grafanaJSONData, {
+    guancePromqlCompatible: Boolean(argv.guancePromqlCompatible),
+    keepGrafanaMeta: Boolean(argv.keepGrafanaMeta),
+  })
 
-    .alias('o', 'out')
-    .describe('o', 'path to output json file path')
-    .default('o', path.resolve(path.join('.', 'guance-dashboard.json')))
-    .coerce('o', (o) => path.resolve(o))
-  const grafanaJsonPath = argv.d
-  const outGuanceJsonPath = argv.o
+  fs.mkdirSync(path.dirname(outGuanceJsonPath), { recursive: true })
+  fs.writeFileSync(outGuanceJsonPath, `${JSON.stringify(convertResult, null, 2)}\n`, 'utf-8')
 
-  try {
-    const grafanaJSONData = JSON.parse(fs.readFileSync(grafanaJsonPath, 'utf-8'))
-    const covertResult = covert(grafanaJSONData)
-    // 确保目录存在
-    const dir = path.dirname(outGuanceJsonPath)
-    if (!fs.existsSync(dir)) {
-      fs.mkdirSync(dir, { recursive: true }) // recursive: true 确保递归创建目录
-    }
-    fs.writeFileSync(outGuanceJsonPath, JSON.stringify(covertResult), 'utf-8')
-  } catch (err) {
-    throw new Error(err)
+  if (argv.validate) {
+    validateDashboardFile(outGuanceJsonPath, String(argv.schema))
   }
 }
-// console.log(JSON.stringify(result, null, 2))

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cloudcare/guance-front-tools",
-    "version": "1.0.12",
+    "version": "1.0.13",
     "publishConfig": {
         "access": "public"
     },
@@ -24,7 +24,8 @@
         "generate": "node scripts/generate.mjs",
         "test": "node --test test/*.test.mjs",
         "format": "prettier -c .",
-        "validate": "node scripts/validate.mjs",
+        "validate": "node scripts/validate.mjs && npm run validate:dashboard",
+        "validate:dashboard": "node scripts/validate-file.mjs guance-dashboard.json guance-all-charts.json",
         "prepare": "npm run build"
     },
     "devDependencies": {
@@ -37,7 +38,7 @@
         "@types/node": "^12.20.55"
     },
     "engines": {
-        "node": ">=12.7.0"
+        "node": ">=18.0.0"
     },
     "author": "",
     "license": "ISC",

package/schemas/charts/chart-schema.json

@@ -16,6 +16,9 @@
             "type": "object",
             "additionalProperties": true,
             "properties": {
+                "links": {
+                    "$ref": "common/chart-links-schema.json"
+                },
                 "settings": {
                     "$ref": "settings/settings-schema.json"
                 }
@@ -54,18 +57,18 @@
             "properties": {
                 "h": {
                     "description": "图表高度,每行的高度默认为10像素,比如 h 为12, 则实际高度为 12 * 10",
-                    "type": "integer"
+                    "type": "number"
                 },
                 "w": {
-                    "type": "integer",
+                    "type": "number",
                     "description": "图表宽度,栅格系统的最大列数为 24, 比如 w为12，则显示宽度则为容器宽度的 1/2 倍 "
                 },
                 "x": {
-                    "type": "integer",
+                    "type": "number",
                     "description": "图表距离容器的水平距离,栅格系统的最大列数为 24, 比如 x为12，则图表距离容器左边的水平距离为容器宽度 1/2 倍 "
                 },
                 "y": {
-                    "type": "integer",
+                    "type": "number",
                     "description": "图表距离容器垂直距离,每行的高度默认为10像素,比如 y为12, 则实际高度为 12 * 10"
                 }
             }
@@ -78,4 +81,4 @@
             "$ref": "query/queries-schema.json"
         }
     }
-}
+}

package/schemas/charts/common/chart-link-item-schema.json

@@ -0,0 +1,48 @@
+{
+    "$schema": "http://json-schema.org/draft-07/schema#",
+    "$id": "charts/common/chart-link-item-schema.json",
+    "type": "object",
+    "description": "图表联动跳转项",
+    "required": [
+        "url",
+        "open",
+        "show",
+        "type",
+        "showChanged"
+    ],
+    "properties": {
+        "url": {
+            "type": "string",
+            "description": "跳转地址"
+        },
+        "open": {
+            "type": "string",
+            "description": "打开方式",
+            "enum": [
+                "newWin",
+                "curWin",
+                "drawerWin"
+            ]
+        },
+        "show": {
+            "type": "boolean",
+            "description": "是否展示"
+        },
+        "type": {
+            "type": "string",
+            "description": "跳转类型",
+            "enum": [
+                "logging",
+                "container",
+                "processes",
+                "tracing",
+                "host",
+                "custom"
+            ]
+        },
+        "showChanged": {
+            "type": "boolean",
+            "description": "是否修改过显示状态"
+        }
+    }
+}

package/schemas/charts/common/chart-links-schema.json

@@ -0,0 +1,9 @@
+{
+    "$schema": "http://json-schema.org/draft-07/schema#",
+    "$id": "charts/common/chart-links-schema.json",
+    "type": "array",
+    "description": "图表跳转链接列表",
+    "items": {
+        "$ref": "chart-link-item-schema.json"
+    }
+}