0.1.5 • Published 2 years ago
re-promql v0.1.5
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>
);
};