re-promql

安装

npm install re-promql

参数

|属性|类型|必填|默认值|说明| |---|---|---|---|---| |placeholder|string|否|-|-| |disabled|boolean|否|false|-| |themeMode|GrafanaThemeType|否|GrafanaThemeType.Light|主题模式| |query|string|否|-|输入框的value| |onChange|(query:string) => void|否|-|输入框变化的回调| |getRangeCompletionItems|IGetRangeCompletionItems|否|-|区间范围输入建议(时间范围)| |getAggregationCompletionItems|IGetAggregationCompletionItems|否|-|by 或 without 后的输入建议| |getTermCompletionItems|IGetTermCompletionItems|否|-|历史记录、方法、指标 输入建议| |getLabelCompletionItems|IGetLabelCompletionItems|否|-|{}内输入建议|

示例

import PromQL, {IContext,GrafanaThemeType,EMPTY_SELECTOR,GrafanaThemeType} from 're-promql';

const items = [
  {"label": "cggrhzrk","filterText": "cggrhzrk"},
  {"label": "rhmghjnf","filterText": "rhmghjnf"},
]

export const PromQLPage: React.FC = () => {
  const [query, setQuery] = useState('');
  const getRangeCompletionItems = () => {
    return [
      { label: '1m', sortText: '00:01:00' },
      { label: '5m', sortText: '00:05:00' },
    ];
  };
  const getLabelCompletionItems = (params: any) => {
    const EMPTY_SELECTOR = '{}';
    let context = IContext.LABELS;
    const { text, labelKey, value, selector, isValueStart } = params;
    if (labelKey && selector === EMPTY_SELECTOR) {
      const allLabels = items;
      return {
        context: IContext.VALUES,
        suggestions: [{ label: `Label values for "${labelKey}"`, items: allLabels }],
      };
    }
    if (selector === EMPTY_SELECTOR) {
      const allLabels = items;
      return { context, suggestions: [{ label: `Labels`, items: allLabels }] };
    }
    if (text.startsWith(',') && selector !== EMPTY_SELECTOR) {
      return { context, suggestions: [{ label: `Labels`, items }] };
    }
    if (isValueStart && selector !== EMPTY_SELECTOR) {
      return {
        context: IContext.VALUES,
        suggestions: [{ label: `Label values for "${labelKey}"`, items }],
      };
    }
    return { context, suggestions: [] };
  };
  const getTermCompletionItems = () => {
    return [
      {
        label: '历史记录',
        items: [
          {label: '{app="ocloud-cbs-qcbs"}'},
          {label: 'sort_desc(sum(sum_over_time(ALERTS{alertstate="firing"}[24h])) by (alertname))',}
        ],
      },
      {
        label: 'Functions',
        prefixMatch: true,
        items: [
          {label: 'sum',insertText: 'sum',documentation: 'Calculate sum over dimensions',},
          {label: 'min',insertText: 'min',documentation: 'Select minimum over dimensions',}
        ],
      },
      {
        label: 'Metrics',
        items: [
          {"label":"agent_up","documentation":"GAUGE: state of agent startup"},
          {"label":"agent_inflight_requests","documentation":"GAUGE: Current number of inflight requests."}
        ],
      },
    ]
  };
  const getAggregationCompletionItems = (params: any) => {
    return {
      label: 'Labels',
      items,
    };
  }
  return (
    <div style={{ padding: '200px 20px', width: '100%' }}>
      <PromQL
        query={query}
        onChange={setQuery}
        placeholder='请输入 PromQL 语句'
        getAggregationCompletionItems={getAggregationCompletionItems}
        getRangeCompletionItems={getRangeCompletionItems}
        getTermCompletionItems={getTermCompletionItems}
        getLabelCompletionItems={getLabelCompletionItems}
        themeMode={GrafanaThemeType.Light}
      />
    </div>
  );
};