Improvement: Graphs in the nodes preview page

[Titof974]

Hi @feitnomore,
I want to add graphs in the node preview page to see what are the resources available.
Something like this:

The metrics will be retrieved from Prometheus.

If it's ok for you, I can create a PR to do it.

[feitnomore]

PRs are always welcome! I have thought about this in the past as well, but I think I've reached some point that got me stuck, probably relates do lack of metrics or metrics not as accurate.
My only concern is to have this as "default as possible", meaning that, I expect that there will be no additional config needed on Prometheus side, and not new Operators/Softwares introduced, because, if we need to introduce stuff like that, we'll introduce complexity and we should be able to set some kind of flag/config on our side to enable/disable this functionality.

[Titof974]

I was able to build this:

Maybe it's a bit big ?

I retrieve the metrics from prometheus with:

    /*
    * Get CPU Usage by Node in percentage
    */
    getCpuUsagePercentageByNode(start: Number, end: Number, step: Number): Observable<any> {
        var promQuery = "100 * avg(1 - rate(node_cpu_seconds_total{mode=\"idle\"}[5m])) by (node)&start=" + start.toString() + "&end=" + end.toString() + "&step=" + step.toString();
        return this.queryRange(promQuery);
    }

    /*
    * Get Memory Usage by Node in percentage
    */
    getMemoryUsagePercentageByNode(start: Number, end: Number, step: Number): Observable<any> {
        var promQuery = "node_memory_Active_bytes/node_memory_MemTotal_bytes*100&start=" + start.toString() + "&end=" + end.toString() + "&step=" + step.toString();
        return this.queryRange(promQuery);
    }

    /*
    * Get StorageUsage by Node in percentage
    */
    getStorageUsagePercentageByNode(start: Number, end: Number, step: Number): Observable<any> {
        var promQuery = "100 - ((sum(node_filesystem_avail_bytes) by (node))/(sum(node_filesystem_size_bytes) by (node))*100)&start=" + start.toString() + "&end=" + end.toString() + "&step=" + step.toString();
        return this.queryRange(promQuery);
    }

Unfortunately, I think these metrics are only available with the prometheus node exporter.

[feitnomore]

That looks promising. And now I think I remember why I haven't implemented that, that's because of the node exporter.
Maybe what we could do is add something to check if the metrics are present. In prometheus service implementation, I have this code:

    /*
     * Check if Prometheus is Enabled
     */
    checkPrometheus(): Observable<any> {
        var metric = "kubevirt_info";
        var baseUrl ='./api/v1/query?query';
        var promQuery = metric;
        return this.http.get(`${baseUrl}=${promQuery}`);
    }

When you open the main screen/dashboard component, I use this guy to determine if prometheus is available.
What if we use this one, and create another one called checkPrometheusNodeExporter? We could check for node_cpu, node_memory, node_filesystem. If we return true, we add the graphs, otherwise, the screen remains without them.

[Titof974]

I didn't have time to work on this week, but the code is here: https://github.com/Titof974/kubevirt-manager

I just need to clean it a bit and rename some variables.

[feitnomore]

I'm on vacation this week and the next, so I don't have the resources to test it here with me, but please, take your time as well, no rushes at all. Thanks again!