# re-promql

> ## 安装

Latest version **0.1.5** (published 2022-01-11) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install re-promql
pnpm add re-promql
yarn add re-promql
bun add re-promql
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.1.5 |
| Published | 2022-01-11 |
| First published | 2022-01-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 40.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | kaibinluo |

## Links

- npm: https://www.npmjs.com/package/re-promql
- npm.io page: https://npm.io/package/re-promql

## Dependencies (2)

- [query-field](https://npm.io/package/query-field.md) ^0.1.7
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.16.5

## Recent versions

- 0.1.5 (latest) — 2022-01-11
- 0.1.4 — 2022-01-11
- 1.0.3 — 2022-01-11
- 1.0.2 — 2022-01-11
- 1.0.1 — 2022-01-11
- 1.0.0 — 2022-01-11

## README

# 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|否|-|{}内输入建议|

## 示例

```tsx
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>
  );
};

```

---
_Source: https://npm.io/package/re-promql · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._