Code Monkey home page Code Monkey logo

Comments (8)

Nexucis avatar Nexucis commented on May 27, 2024

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.

stenwolf avatar stenwolf commented on May 27, 2024

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.

Nexucis avatar Nexucis commented on May 27, 2024

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

image

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.

stenwolf avatar stenwolf commented on May 27, 2024

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.

Screen Shot 2022-03-18 at 12 53 42 PM

Could this be the reason why /series endpoint is not being called? Because /metadata is returning a 404?

from codemirror-promql.

Nexucis avatar Nexucis commented on May 27, 2024

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.

Nexucis avatar Nexucis commented on May 27, 2024

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.

stenwolf avatar stenwolf commented on May 27, 2024

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.

stenwolf avatar stenwolf commented on May 27, 2024

Actually nevermind, I rebuilt my workspace and all is working now, thank you so much for the help!

from codemirror-promql.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.