|
334 | 334 | <a id="select-all-cluster-sizes" class="selector selector-active">All</a> |
335 | 335 | </td> |
336 | 336 | </tr> |
| 337 | + <tr> |
| 338 | + <th>Cache size: </th> |
| 339 | + <td id="selectors_cache_size"> |
| 340 | + <a id="select-all-cache-sizes" class="selector selector-active">All</a> |
| 341 | + </td> |
| 342 | + </tr> |
337 | 343 | <tr> |
338 | 344 | <th>Metric: </th> |
339 | 345 | <td id="selectors_run"> |
|
386 | 392 | "type": {}, |
387 | 393 | "machine": {}, |
388 | 394 | "cluster_size": {}, |
| 395 | + "cache_size": {}, |
389 | 396 | "metric": "hot", |
390 | 397 | "queries": [], |
391 | 398 | }; |
392 | 399 |
|
| 400 | + function normalizeSelectors() { |
| 401 | + selectors.system = selectors.system || {}; |
| 402 | + selectors.type = selectors.type || {}; |
| 403 | + selectors.machine = selectors.machine || {}; |
| 404 | + selectors.cluster_size = selectors.cluster_size || {}; |
| 405 | + selectors.cache_size = selectors.cache_size || {}; |
| 406 | + selectors.metric = selectors.metric || 'hot'; |
| 407 | + selectors.queries = selectors.queries || []; |
| 408 | + } |
| 409 | +
|
393 | 410 | let theme = 'light'; |
394 | 411 |
|
395 | 412 | function setTheme(new_theme) { |
|
413 | 430 | let types = document.getElementById('selectors_type'); |
414 | 431 | let machines = document.getElementById('selectors_machine'); |
415 | 432 | let cluster_sizes = document.getElementById('selectors_cluster_size'); |
| 433 | + let cache_sizes = document.getElementById('selectors_cache_size'); |
416 | 434 |
|
417 | 435 | let unique_systems = [... new Set(data.map(elem => elem.system))]; |
| 436 | + const default_cache_size = 'n/a'; |
| 437 | + const getCacheLabel = entry => { |
| 438 | + if (entry.cache_size === undefined || entry.cache_size === null || entry.cache_size === '') { |
| 439 | + return default_cache_size; |
| 440 | + } |
| 441 | + return entry.cache_size.toString(); |
| 442 | + }; |
418 | 443 |
|
419 | 444 | function toggle(e, elem, selectors_map) { |
420 | 445 | selectors_map[elem] = !selectors_map[elem]; |
|
483 | 508 | if (!(elem in selectors.cluster_size)) { selectors.cluster_size[elem] = true; } |
484 | 509 | selector.addEventListener('click', e => toggle(e, elem, selectors.cluster_size)); |
485 | 510 | }); |
| 511 | + [... new Set(data.map(getCacheLabel))].map(elem => { |
| 512 | + let selector = document.createElement('a'); |
| 513 | + selector.className = 'selector selector-active'; |
| 514 | + selector.appendChild(document.createTextNode(elem)); |
| 515 | + cache_sizes.appendChild(selector); |
| 516 | + if (!(elem in selectors.cache_size)) { selectors.cache_size[elem] = true; } |
| 517 | + selector.addEventListener('click', e => toggle(e, elem, selectors.cache_size)); |
| 518 | + }); |
486 | 519 |
|
487 | 520 | document.getElementById('select-all-systems').addEventListener('click', e => toggleAll(e, selectors.system)); |
488 | 521 | document.getElementById('select-all-types').addEventListener('click', e => toggleAll(e, selectors.type)); |
489 | 522 | document.getElementById('select-all-machines').addEventListener('click', e => toggleAll(e, selectors.machine)); |
490 | 523 | document.getElementById('select-all-cluster-sizes').addEventListener('click', e => toggleAll(e, selectors.cluster_size)); |
| 524 | + document.getElementById('select-all-cache-sizes').addEventListener('click', e => toggleAll(e, selectors.cache_size)); |
491 | 525 |
|
492 | 526 | [...document.getElementById('selectors_run').querySelectorAll('a')].map(elem => elem.addEventListener('click', e => { |
493 | 527 | [...e.target.parentElement.querySelectorAll('a')].map(elem => { elem.className = elem == e.target ? 'selector selector-active' : 'selector' }); |
|
505 | 539 | [...types.childNodes].map(elem => { elem.className = selectors.type[elem.innerText] ? 'selector selector-active' : 'selector' }); |
506 | 540 | [...machines.childNodes].map(elem => { elem.className = selectors.machine[elem.innerText] ? 'selector selector-active' : 'selector' }); |
507 | 541 | [...cluster_sizes.childNodes].map(elem => { elem.className = selectors.cluster_size[elem.innerText] ? 'selector selector-active' : 'selector' }); |
| 542 | + [...cache_sizes.childNodes].map(elem => { elem.className = selectors.cache_size[elem.innerText] ? 'selector selector-active' : 'selector' }); |
508 | 543 |
|
509 | 544 | [...document.getElementById('selectors_run').querySelectorAll('a')].map(elem => { |
510 | 545 | elem.className = elem.id == 'selector-metric-' + selectors.metric ? 'selector selector-active' : 'selector' |
|
713 | 748 | clearElement(details_body); |
714 | 749 |
|
715 | 750 | let filtered_data = data.filter(elem => |
716 | | - selectors.system[elem.system] && |
717 | | - selectors.machine[elem.machine] && |
718 | | - selectors.cluster_size[elem.cluster_size] && |
719 | | - elem.tags.filter(type => selectors.type[type]).length > 0); |
| 751 | + selectors.system[elem.system] && |
| 752 | + selectors.machine[elem.machine] && |
| 753 | + selectors.cluster_size[elem.cluster_size] && |
| 754 | + selectors.cache_size[getCacheLabel(elem)] && |
| 755 | + elem.tags.filter(type => selectors.type[type]).length > 0); |
720 | 756 |
|
721 | 757 | let nothing_selected_elem = document.getElementById('nothing-selected'); |
722 | 758 | if (filtered_data.length == 0) { |
|
868 | 904 | window.onpopstate = function (event) { |
869 | 905 | if (!event.state) { return; } |
870 | 906 | selectors = event.state; |
| 907 | + normalizeSelectors(); |
871 | 908 | render(); |
872 | 909 | updateSelectors(); |
873 | 910 | }; |
874 | 911 |
|
875 | 912 | if (window.location.hash) { |
876 | 913 | try { |
877 | 914 | selectors = JSON.parse(atob(window.location.hash.substring(1))); |
| 915 | + normalizeSelectors(); |
878 | 916 | } catch { } |
879 | 917 | } |
880 | 918 |
|
|
0 commit comments