Bonjour,

Je suis en train de d'essayer d'intégrer des graphiques dans une page web dont les data proviennent de prometheus.
Jusqu'à présent, en utilisant chart.umd.min.js + chartjs-adapter-date-fns.bundle.min.js + chartjs-plugin-datasource-prometheus.umd.min.js , j'arrive à afficher ce que je veux, mais j'aimerai ajouter la possibilité de modifier l'échelle de temps du graph.

J'ai donc repris la structure du code en y ajoutant un champ, j'ai testé en Input, mais aussi en Select, pour y ajouter la valeur voulue (valeur négative). Cette valeur doit être utilisée dans la section "timeRange" à la valeur start.
Quand je modifie en "manuel" cette valeur , par exemple : start : -10000, alors le graphe m'affiche correctement les 10 dernières secondes. Donc tout va bien. Par contre quand j'essaie avec la valeur provenant du formulaire, alors ça ne va pas. Le graph m'affiche :
Failed to fetch data.
Pour info les 2 autres champs du formulaire sont ok et prennent bien en compte les valeurs passées. Du coup je ne comprends pas pourquoi ça bloque. Si vous avez des idées je suis preneurs, ça fait 2 jours que je fais pleins de tests, et effectivement je ne suis pas à l'aise avec JS.

En vous remerciant.

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
	<script src="/staticFiles/chart.umd.min.js"></script>
	<script src="/staticFiles/chartjs-adapter-date-fns.bundle.min.js"></script>
	<script src="/staticFiles/chartjs-plugin-datasource-prometheus.umd.min.js"></script>
 
 
			<div id="mastercenter_graph">
 
 
			<div class="container">
				<form id="refresh-form">
					<input type="text" id="endpoint" placeholder="Prometheus endpoint">
					<input type="text" id="query" placeholder="Prometheus query">
					<input type="text" id="startval" placeholder="Start time">
 
	<!--				<select id="start_time" placeholder="Prometheus start" >
						<option value=-1000 >1s</option>
						<option value=-10000 >10s</option>
						<option value=-30000 >30s</option>
						<option value=-300000 >5min</option>
						<option value=-3600000 select="selected">1hr</option>
						<option value=-86400000 >1j</option>
					</select>			-->
				  <button>Refresh</button>
				</form>
			</div>
 
				<div id="myChart">
					<canvas></canvas>
				</div>				
 
				<br></br>
 
				<script>
                                const form = document.querySelector('form#refresh-form');
                                const endpointInput = document.querySelector('form#refresh-form input#endpoint');
                                const queryInput = document.querySelector('form#refresh-form input#query');
                                const startInput = document.querySelector('form#refresh-form input#startval');
                                const ctx = document.querySelector('#myChart canvas').getContext('2d');
                                
 
                                
                                endpointInput.value = 'http://192.168.1.80:9090/';
                                queryInput.value = 'sum by (job) (memory_usage_p)';
                                startInput.value = '-10000';
                                
                                const myChart = new Chart(ctx, {
                                        type: 'line',
                                        plugins: [ChartDatasourcePrometheusPlugin],
                                        options: {
                                                                                
                                                animation: {
                                                        duration: 0,
                                                },
                                                scales: {
                                                                y: {
                                                                suggestedMin: 0,
                                                                suggestedMax: 100
                                                        }
                                                },
                                                legend: {
                                                                display: true,
                                                                labels: {
                                                                                color: 'rgb(255, 99, 132)',
                                                                }
                                                },
                                                plugins: {
                                                
                                                                subtitle: {
                                                                        display: false,
                                                                        text: 'Title of the Graph',
                                                                        color: 'rgb(255, 99, 132)',
                                                                },
                                                
 
                                                        'datasource-prometheus': {
                                                                prometheus: {
                                                                        endpoint: endpointInput.value,
                                                                },
                                                                //query: ['node_load1', 'node_load5', 'node_load15'],
                                                                query: queryInput.value,
                                                                //query: customReq,
                                                                timeRange: {
                                                                        type: 'relative',
                                                                        start: startInput.value,
                                                                        end: 0,
                                                                        step: 2,
                                                                        msUpdateInterval: 10000,
                                                                },
                                                                drawActiveElementsOnTop: false,
                                                                tension: 0,  // Bezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used.
                                                                fill: {
                                                                        target: 'origin',  // coloration under the line
                                                                        above: 'rgb(255, 182, 182)',   // Area will be red above the origin
                                                                        below: 'rgb(0, 0, 0)',    // And blue below the origin
                                                                },
                                                                
 
                                                        },
                                                },
                                        },
                                });
                                
 
                                form.addEventListener('submit', (event) => {
                                        event.preventDefault();
                                        myChart.options.plugins['datasource-prometheus'].prometheus.endpoint = endpointInput.value;
                                        myChart.options.plugins['datasource-prometheus'].query = queryInput.value;
                                        myChart.options.plugins['datasource-prometheus'].timeRange.start = startInput.value;
                                        myChart.update();
                                });
                                                                
                                
                                </script>