|
| 1 | +import React, { Component } from "react"; |
| 2 | +import jschart from "jschart"; |
| 3 | +import d3 from "d3"; |
| 4 | + |
| 5 | +import fio_cdm_1 from './data/fio-iops.json'; |
| 6 | +import fio_cdm_2 from './data/fio-iops-host.json'; |
| 7 | +import fio_cdm_3 from './data/fio-iops-host-per36-action.json'; |
| 8 | +import fio_cdm_4 from './data/fio-iops-host-per84-action.json'; |
| 9 | +import fio_cdm_5 from './data/fio-iops-host-perf36-action-job.json'; |
| 10 | +import fio_cdm_6 from './data/fio-iops-host-perf84-action-job.json'; |
| 11 | +import fio_cdm_7 from './data/fio-iops-host-action-job.json'; |
| 12 | + |
| 13 | +import iostat_cdm_1 from './data/iostat-iops.json'; |
| 14 | +import iostat_cdm_2 from './data/iostat-iops-host.json'; |
| 15 | +import iostat_cdm_3 from './data/iostat-iops-host-per36-dev-sda.json'; |
| 16 | +import iostat_cdm_4 from './data/iostat-iops-host-per84-dev-nvme0n1.json'; |
| 17 | +import iostat_cdm_5 from './data/iostat-iops-host-perf36-dev-sda-type.json'; |
| 18 | +import iostat_cdm_6 from './data/iostat-iops-host-perf84-dev-nvme0n1-type.json'; |
| 19 | +import iostat_cdm_7 from './data/iostat-iops-host-dev-type.json'; |
| 20 | + |
| 21 | +import mpstat_cdm_1 from './data/mpstat-busy.json'; |
| 22 | +import mpstat_cdm_2 from './data/mpstat-busy-host.json'; |
| 23 | +import mpstat_cdm_3 from './data/mpstat-busy-host-socket.json'; |
| 24 | +import mpstat_cdm_4 from './data/mpstat-busy-host-socket-core.json'; |
| 25 | +import mpstat_cdm_5 from './data/mpstat-busy-host-socket-core-id.json'; |
| 26 | +import mpstat_cdm_6 from './data/mpstat-busy-host-socket-core-id-mode.json'; |
| 27 | + |
| 28 | +var fio_choices = [ |
| 29 | + { |
| 30 | + "label": "Null", |
| 31 | + "object": { } |
| 32 | + }, |
| 33 | + { |
| 34 | + "label": "IOPs", |
| 35 | + "object": { cdmjson_object: fio_cdm_1 } |
| 36 | + }, |
| 37 | + { |
| 38 | + "label": "IOPs - Per Host", |
| 39 | + "object": { cdmjson_object: fio_cdm_2 } |
| 40 | + }, |
| 41 | + { |
| 42 | + "label": "IOPs - host=perf36, per action", |
| 43 | + "object": { cdmjson_object: fio_cdm_3 } |
| 44 | + }, |
| 45 | + { |
| 46 | + "label": "IOPs - host=perf84, per action", |
| 47 | + "object": { cdmjson_object: fio_cdm_4 } |
| 48 | + }, |
| 49 | + { |
| 50 | + "label": "IOPs - host=perf36, per action, per job", |
| 51 | + "object": { cdmjson_object: fio_cdm_5 } |
| 52 | + }, |
| 53 | + { |
| 54 | + "label": "IOPs - host=perf84, per action, per job", |
| 55 | + "object": { cdmjson_object: fio_cdm_6 } |
| 56 | + }, |
| 57 | + { |
| 58 | + "label": "IOPs - per host, per action, per job", |
| 59 | + "object": { cdmjson_object: fio_cdm_7 } |
| 60 | + } |
| 61 | +]; |
| 62 | +for (var i = 0; i < fio_choices.length; i++) { |
| 63 | + fio_choices[i].index = i; |
| 64 | +} |
| 65 | + |
| 66 | +function change_fio_selection() { |
| 67 | + jschart.chart_set_title("jschart_cdm_fio", fio_choices[this.value].label); |
| 68 | + jschart.chart_set_y_axis_label("jschart_cdm_fio", "Y Axis"); |
| 69 | + jschart.chart_set_x_axis_label("jschart_cdm_fio", "X Axis"); |
| 70 | + jschart.chart_reload_options("jschart_cdm_fio", fio_choices[this.value].object); |
| 71 | +} |
| 72 | + |
| 73 | +function setup_fio_chart_selection_box() { |
| 74 | + var myselect = d3.select("#select_fio_dataset") |
| 75 | + .append("select") |
| 76 | + .on("change", change_fio_selection) |
| 77 | + |
| 78 | + myselect.selectAll(".options") |
| 79 | + .data(fio_choices) |
| 80 | + .enter() |
| 81 | + .append("option") |
| 82 | + .attr("value", function(d) { return d.index; }) |
| 83 | + .text(function(d) { return d.label; }); |
| 84 | +} |
| 85 | + |
| 86 | +var iostat_choices = [ |
| 87 | + { |
| 88 | + "label": "Null", |
| 89 | + "object": { } |
| 90 | + }, |
| 91 | + { |
| 92 | + "label": "IOPs", |
| 93 | + "object": { cdmjson_object: iostat_cdm_1 } |
| 94 | + }, |
| 95 | + { |
| 96 | + "label": "IOPs - Per Host", |
| 97 | + "object": { cdmjson_object: iostat_cdm_2 } |
| 98 | + }, |
| 99 | + { |
| 100 | + "label": "IOPs - host=perf36,dev=sda", |
| 101 | + "object": { cdmjson_object: iostat_cdm_3 } |
| 102 | + }, |
| 103 | + { |
| 104 | + "label": "IOPs - host=perf84,dev=nvme0n1", |
| 105 | + "object": { cdmjson_object: iostat_cdm_4 } |
| 106 | + }, |
| 107 | + { |
| 108 | + "label": "IOPs - host=perf36,dev=sda, per type", |
| 109 | + "object": { cdmjson_object: iostat_cdm_5 } |
| 110 | + }, |
| 111 | + { |
| 112 | + "label": "IOPs - host=perf84,dev=nvme0n1, per type", |
| 113 | + "object": { cdmjson_object: iostat_cdm_6 } |
| 114 | + }, |
| 115 | + { |
| 116 | + "label": "IOPs - Per Host, Per Dev, Per Type", |
| 117 | + "object": { cdmjson_object: iostat_cdm_7 } |
| 118 | + } |
| 119 | +]; |
| 120 | +for (i = 0; i < iostat_choices.length; i++) { |
| 121 | + iostat_choices[i].index = i; |
| 122 | +} |
| 123 | + |
| 124 | +function change_iostat_selection() { |
| 125 | + jschart.chart_set_title("jschart_cdm_iostat", iostat_choices[this.value].label); |
| 126 | + jschart.chart_set_y_axis_label("jschart_cdm_iostat", "Y Axis"); |
| 127 | + jschart.chart_set_x_axis_label("jschart_cdm_iostat", "X Axis"); |
| 128 | + jschart.chart_reload_options("jschart_cdm_iostat", iostat_choices[this.value].object); |
| 129 | +} |
| 130 | + |
| 131 | +function setup_iostat_chart_selection_box() { |
| 132 | + var myselect = d3.select("#select_iostat_dataset") |
| 133 | + .append("select") |
| 134 | + .on("change", change_iostat_selection) |
| 135 | + |
| 136 | + myselect.selectAll(".options") |
| 137 | + .data(iostat_choices) |
| 138 | + .enter() |
| 139 | + .append("option") |
| 140 | + .attr("value", function(d) { return d.index; }) |
| 141 | + .text(function(d) { return d.label; }); |
| 142 | +} |
| 143 | + |
| 144 | +var mpstat_choices = [ |
| 145 | + { |
| 146 | + "label": "Null", |
| 147 | + "object": { } |
| 148 | + }, |
| 149 | + { |
| 150 | + "label": "Busy", |
| 151 | + "object": { cdmjson_object: mpstat_cdm_1 } |
| 152 | + }, |
| 153 | + { |
| 154 | + "label": "Busy - Per Host", |
| 155 | + "object": { cdmjson_object: mpstat_cdm_2 } |
| 156 | + }, |
| 157 | + { |
| 158 | + "label": "Busy - Per Host, Per Socket", |
| 159 | + "object": { cdmjson_object: mpstat_cdm_3 } |
| 160 | + }, |
| 161 | + { |
| 162 | + "label": "Busy - Per Host, Per Socket, Per Core", |
| 163 | + "object": { cdmjson_object: mpstat_cdm_4 } |
| 164 | + }, |
| 165 | + { |
| 166 | + "label": "Busy - Per Host, Per Socket, Per Core, Per ID", |
| 167 | + "object": { cdmjson_object: mpstat_cdm_5 } |
| 168 | + }, |
| 169 | + { |
| 170 | + "label": "Busy - Per Host, Per Socket, Per Core, Per ID, Per Mode", |
| 171 | + "object": { cdmjson_object: mpstat_cdm_6 } |
| 172 | + } |
| 173 | +]; |
| 174 | +for (i = 0; i < mpstat_choices.length; i++) { |
| 175 | + mpstat_choices[i].index = i; |
| 176 | +} |
| 177 | + |
| 178 | +function change_mpstat_selection() { |
| 179 | + jschart.chart_set_title("jschart_cdm_mpstat", mpstat_choices[this.value].label); |
| 180 | + jschart.chart_set_y_axis_label("jschart_cdm_mpstat", "Y Axis"); |
| 181 | + jschart.chart_set_x_axis_label("jschart_cdm_mpstat", "X Axis"); |
| 182 | + jschart.chart_reload_options("jschart_cdm_mpstat", mpstat_choices[this.value].object); |
| 183 | +} |
| 184 | + |
| 185 | +function setup_mpstat_chart_selection_box() { |
| 186 | + var myselect = d3.select("#select_mpstat_dataset") |
| 187 | + .append("select") |
| 188 | + .on("change", change_mpstat_selection) |
| 189 | + |
| 190 | + myselect.selectAll(".options") |
| 191 | + .data(mpstat_choices) |
| 192 | + .enter() |
| 193 | + .append("option") |
| 194 | + .attr("value", function(d) { return d.index; }) |
| 195 | + .text(function(d) { return d.label; }); |
| 196 | +} |
| 197 | + |
| 198 | +class App extends Component { |
| 199 | + componentDidMount = () => { |
| 200 | + setup_fio_chart_selection_box(); |
| 201 | + setup_iostat_chart_selection_box(); |
| 202 | + setup_mpstat_chart_selection_box(); |
| 203 | + |
| 204 | + jschart.create_jschart( |
| 205 | + 1, |
| 206 | + "timeseries", |
| 207 | + "jschart_cdm_fio", |
| 208 | + "FIO", |
| 209 | + "Time", |
| 210 | + "FIO", |
| 211 | + {} |
| 212 | + ); |
| 213 | + jschart.create_jschart( |
| 214 | + 1, |
| 215 | + "timeseries", |
| 216 | + "jschart_cdm_iostat", |
| 217 | + "IOSTAT", |
| 218 | + "Time", |
| 219 | + "IOSTAT", |
| 220 | + {} |
| 221 | + ); |
| 222 | + jschart.create_jschart( |
| 223 | + 1, |
| 224 | + "timeseries", |
| 225 | + "jschart_cdm_mpstat", |
| 226 | + "MPSTAT", |
| 227 | + "Time", |
| 228 | + "MPSTAT", |
| 229 | + {} |
| 230 | + ); |
| 231 | + jschart.finish_page(); |
| 232 | + }; |
| 233 | + |
| 234 | + render() { |
| 235 | + return ( |
| 236 | + <div className="App"> |
| 237 | + <header className="App-header"> |
| 238 | + <h1 className="App-title">JSChart CDM Demo</h1> |
| 239 | + </header> |
| 240 | + <br></br> |
| 241 | + <div id="jschart_cdm_fio"> |
| 242 | + <h3 id="select_fio_dataset"> |
| 243 | + FIO Chart Dataset Selection: |
| 244 | + </h3> |
| 245 | + </div> |
| 246 | + <div id="jschart_cdm_iostat"> |
| 247 | + <h3 id="select_iostat_dataset"> |
| 248 | + IOSTAT Chart Dataset Selection: |
| 249 | + </h3> |
| 250 | + </div> |
| 251 | + <div id="jschart_cdm_mpstat"> |
| 252 | + <h3 id="select_mpstat_dataset"> |
| 253 | + MPSTAT Chart Dataset Selection: |
| 254 | + </h3> |
| 255 | + </div> |
| 256 | + </div> |
| 257 | + ); |
| 258 | + } |
| 259 | +} |
| 260 | + |
| 261 | +export default App; |
0 commit comments