Improve the feature displaying data source load#597
Conversation
db7a6aa to
f352525
Compare
vincent-olivert-riera
left a comment
There was a problem hiding this comment.
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.
promgen/static/js/promgen.vue.js
Outdated
| .then(result => this.count = Number.parseInt(result.data.result[0].value[1])) | ||
| .finally(() => this.ready = true); | ||
| }, | ||
| }); No newline at end of file |
There was a problem hiding this comment.
This file is missing a new-line character at the end. Please add it.
f352525 to
897930a
Compare
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.
897930a to
da08584
Compare
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.