Skip to content

Improve the feature displaying data source load#597

Merged
vincent-olivert-riera merged 2 commits intoline:masterfrom
hoangpn:feature/improve_display_data_source_load
May 30, 2025
Merged

Improve the feature displaying data source load#597
vincent-olivert-riera merged 2 commits intoline:masterfrom
hoangpn:feature/improve_display_data_source_load

Conversation

@hoangpn
Copy link
Contributor

@hoangpn hoangpn commented May 28, 2025

This PR includes two improvements for the feature that displays the load of data sources.

One of the most important changes is replacing the Vue component and the corresponding API that Promgen Web uses to query metrics from data sources with a new component that has better security, and I also removed the old component.

Additionally, I have made changes to always display the load of the data source, regardless of whether the proxy attribute is True or False.

@hoangpn hoangpn requested a review from a team as a code owner May 28, 2025 09:16
@hoangpn hoangpn force-pushed the feature/improve_display_data_source_load branch 2 times, most recently from db7a6aa to f352525 Compare May 28, 2025 10:07
@hoangpn hoangpn changed the title [WIP] Improve the feature displaying data source load Improve the feature displaying data source load May 28, 2025
Copy link
Contributor

@vincent-olivert-riera vincent-olivert-riera left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I found a minor thing related to a missing new-line character. Other than that, the rest of the changes look good.

But I have one two requests.

1 - Please squash commits 8adb2b2 and f352525. After applying the first commit, the promql-query Vue component becomes totally unused, therefore what you are actually doing with that commit is replacing it with a new component. Please modify the commit message accordingly.

2 - As we have talked in private, some times the changes done to the promgen.vue.js file are not reflected unless you clear your browser's cache. This is because despite of changing the contents of the file, it keeps having the same name, and the browser uses the one that already have in its cache. This can be easily fixed if we pass a query string when we include the file. For instance, we could modify this (in the base.html file):
From this:

  <script src="{% static 'js/promgen.vue.js' %}"></script>

To this:

  <script src="{% static 'js/promgen.vue.js' %}?v=1"></script>

And increment that number every time we modify the file.

.then(result => this.count = Number.parseInt(result.data.result[0].value[1]))
.finally(() => this.ready = true);
},
}); No newline at end of file
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file is missing a new-line character at the end. Please add it.

@hoangpn hoangpn force-pushed the feature/improve_display_data_source_load branch from f352525 to 897930a Compare May 30, 2025 01:57
hoangpn added 2 commits May 30, 2025 09:23
We have replaced the API used by the "promql-query" Vue component, which was responsible
for querying data about samples and exporters of the Shard, with a new API. The original
API, promql-query, allowed users to input PromQL as a parameter and returned the query
results in the API response. This capability led to a potential security issue where users
could copy, modify, and execute requests with queries different from those intended on
Promgen Web. To prevent such exploits, we introduced a new API that accepts only a metric
parameter, enabling the client to choose between querying "samples" and "exporters." The
corresponding queries are now mapped on the backend to prevent manipulation.
Since the "promql-query" Vue component is no longer used elsewhere, we have renamed it to
"data-source-usage" to better reflect its purpose.

Following this change, the PromQL Query API became redundant. Consequently, we have
removed this API along with its associated View class.
When registering a new Project we are presented with a list of data sources, and we
need to select one of them. To keep the data source's load balanced, we display a load
percentage and expect the users to select one of the data sources with a low load.

Currently, the code for displaying that load percentage only runs if the proxy feature
for that data source is enabled, even if the proxy end point is not used at all for
that matter.

Therefore, we make some necessary changes to display the data source's load percentage
even if the proxy feature is disabled for the data source.
@hoangpn hoangpn force-pushed the feature/improve_display_data_source_load branch from 897930a to da08584 Compare May 30, 2025 02:24
@vincent-olivert-riera vincent-olivert-riera merged commit 5554904 into line:master May 30, 2025
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants