Comments (8)
Hello @stenwolf
Hopefully changing the HTTP Method used shouldn't change or block the queries going to /v1/prom/labels
and to /v1/prom/series
and it is the regular behaviour that the autocompletion feature is asking to these two endpoints to get the required info.
The usage of the metadata endpoint is here to display the metrics helper during the autocompletion. But it's only happening if there is not too much metadata to get.
Do you have some errors in the browser console ?
Which version of codemirror-promql
are you using ? With which version of codemirror
?
Is it possible to see how did you integrate codemirror-promql
?
I look at the code and I didn't find why the code would have the behaviour your are describing. I'm not saying there is no issue, I'm just saying that so far I don't explain or understand how the code is doing what you are experimenting.
from codemirror-promql.
Hi, I don't see any related error in console, the only one is 404 for the /v1/prom/metadata, it's because i dont want to expose this metadata endpoint. Speaking of that, is there a way for me to specify i don't want metadata endpoint to be called? If not I guess i can create a proxy endpoint and just returns nothing.
For the versions, im using "codemirror-promql": "0.19.0",
and these are the versions im using for codemirror
"@codemirror/autocomplete": "0.19.14",
"@codemirror/basic-setup": "0.19.1",
"@codemirror/highlight": "0.19.7",
"@codemirror/language": "0.19.8",
"@codemirror/lint": "0.19.6",
"@codemirror/state": "0.19.9",
"@codemirror/view": "0.19.47",
"codemirror-promql": "0.19.0",
this is how I set up my codemirror-promql
const promQL = new PromQLExtension().setComplete({
remote: {
apiPrefix: '/v1/prom',
httpMethod: 'GET',
},
});
const defaultExtentions = [
enterKey(),
basicSetup,
promQL.asExtension(),
EditorView.updateListener.of(editorViewUpdateListener),
];
editorView = new EditorView({
state: EditorState.create({
extensions: [
...defaultExtentions,
...themeOptions[currentTheme.value],
],
}),
parent: document.getElementById(editorID.value)
});
from codemirror-promql.
Thanks for details provided.
I tried to reproduce the issue and so far I didn't success :(.
Here what I have:
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PromQL</title>
</head>
<body>
<div id=editor></div>
</body>
</html>
- index.ts
import {PromQLExtension} from "codemirror-promql";
import {EditorView} from "@codemirror/view";
import {EditorState} from "@codemirror/state";
import {basicSetup} from "@codemirror/basic-setup";
const promQL = new PromQLExtension().setComplete({
remote: {
apiPrefix: '/v1/prom',
httpMethod: 'GET',
},
});
new EditorView({
state: EditorState.create({
extensions: [basicSetup, promQL.asExtension()],
doc: '',
}),
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
parent: document.querySelector('#editor')!,
});
- package.json
{
"name": "cmp-investigation",
"version": "1.0.0",
"description": "",
"scripts": {
"start": "webpack serve --config webpack.dev.ts",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"@codemirror/autocomplete": "0.19.14",
"@codemirror/basic-setup": "0.19.1",
"@codemirror/highlight": "0.19.7",
"@codemirror/language": "0.19.8",
"@codemirror/lint": "0.19.6",
"@codemirror/state": "0.19.9",
"@codemirror/view": "0.19.47",
"codemirror-promql": "0.19.0"
},
"devDependencies": {
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4",
"ts-loader": "^9.2.8",
"ts-node": "^10.7.0",
"typescript": "^4.6.2"
}
}
- webpack.dev.ts
import path from 'path';
import { Configuration } from 'webpack';
import { Configuration as DevServerConfig } from 'webpack-dev-server';
import HtmlWebpackPlugin from "html-webpack-plugin";
declare module 'webpack' {
interface Configuration {
devServer?: DevServerConfig | undefined;
}
}
const config: Configuration = {
mode: "development",
entry: path.resolve(__dirname, './src/index.ts'),
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './src/index.html'),
templateParameters: {},
}),
],
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
devServer: {
allowedHosts: 'all',
proxy: {
'/v1/prom': {
target: 'https://prometheus.demo.do.prometheus.io',
pathRewrite: {'^/v1/prom':'/api/v1'},
changeOrigin: true
}
}
}
}
export default config;
And so far I can see the request going to the series
and labels
endpoint
To deactivate the query going to the endpoint /api/v1/metadata
, you can simply set the parameter maxMetricsMetadata
to 0 :
const promQL = new PromQLExtension().setComplete({
maxMetricsMetadata: 0,
remote: {
apiPrefix: '/v1/prom',
httpMethod: 'GET',
},
});
from codemirror-promql.
Thank you, I see it is calling the /label
endpoint, I thought it was calling /labels
. So I was searching for labels
and didn't see anything popping up. I still don't see the /series
endpoint being called though. After I set this property from your snippet above maxMetricsMetadata: 0
, I'm still seeing /metadata
being called.
Could this be the reason why /series
endpoint is not being called? Because /metadata
is returning a 404?
from codemirror-promql.
the autocompletion is calling the different endpoints when it is required and it depends of the context (i.e. of where you are in the PromQL expression). So it can be normal the endpoint /series
is not called.
To see the endpoint /series
called, you can try something like that <insert_a_metric_name>{<start_typing a label>}
, like I am showing in my example.
from codemirror-promql.
it is also the same notes for the endpoint /labels
that is indeed called under a certain context. It is basically called with this kind of expression:
sum by()
.
Other all, to know if your autocompletion is working fine, you should see the list of the metrics proposed, labels or label value depending of the context.
from codemirror-promql.
Ah I see it, thank you very much! It is indeed working as intended.
Last thing I wanted to ask is the /metadata
endpoint, as I'm still seeing it's being called even with maxMetricsMetadata: 0
, would you mind whenever you have a chance to verify it on your side if it is working correctly please?
This is what I have to setup the promQL extension
const promQL = new PromQLExtension().setComplete({
maxMetricsMetadata: 0,
remote: {
lookbackInterval: 12 * 60 * 60 * 1000 * 1000, // TODO: 12000 hours, change this
apiPrefix: '/v1/prom',
httpMethod: 'GET',
},
});
from codemirror-promql.
Actually nevermind, I rebuilt my workspace and all is working now, thank you so much for the help!
from codemirror-promql.
Related Issues (20)
- Weird behavior when using enricher to autocomplete query history HOT 2
- No autocomplete for the 2nd hard of subquery time selector HOT 1
- Support negative offset HOT 12
- Add the parameters of the function indescription HOT 2
- PromQL autocomplete: impossible to get full labels list after comma HOT 5
- Have a way to warm the cache
- Remove strict node requirement HOT 11
- Support autocompleting NaN and Inf HOT 1
- A valid expression is underlined HOT 1
- Support variable format HOT 4
- Cannot parse metrics beginning with `inf` HOT 2
- fetch series with POST not allowed by Grafana
- How to make the editor read only? HOT 2
- How to override the `apiPrefix` HOT 5
- Version 17 The api that a package depends on does not exist HOT 4
- Update codemirror dependencies to v0.19 HOT 2
- autocomplete stops working after setting initial metric list HOT 1
- Update to Codemirror 0.20.X HOT 9
- how can I config gutter? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from codemirror-promql.