K6->InfluxDB-> Grafana静态替代品？

如何解决K6->InfluxDB-> Grafana静态替代品？

是否可以在DevOps管道中保存 K6 负载测试结果或静态的 Grafana仪表板？

稍后可以运行InfluxDB和backup/restore结果。

但是有其他选择吗？

类似于我通过将数据保存为某些result的本地快照来修复K6 JSON replace or simulate和DashBoard InfluxDB角色的尝试？我可以将这些JSON作为工件发布，然后将填充的仪表板导入本地的 Grafana 实例。

最新版本还可以用 uPlot 替换Grafana ，并且可能具有

const collection = { "Virtual Users": [[[1597252646500,1597252647500,1597252648500,1597252649500,1597252650500,1597252651500,1597252652500,1597252653500,1597252654500,1597252655500,1597252656500,1597252657500,1597252658500,1597252659500,1597252660500,1597252661500,1597252662500,1597252663500,1597252664500,1597252665500,1597252666500,1597252667500,1597252668500,1597252669500,1597252670500,1597252671500,1597252672500,1597252673500,1597252674500,1597252675500,1597252676500,1597252677500,1597252678500,1597252679500,1597252680500,1597252681500,1597252682500,1597252683500,1597252684500,1597252685500,1597252686500,1597252687500,1597252688500,1597252689500,1597252690500,1597252691500,1597252692500,1597252693500,1597252694500,1597252695500,1597252696500,1597252697500,1597252698500,1597252699500,1597252700500,1597252701500,1597252702500,1597252703500,1597252704500,1597252705500],[183,183,180,4,3,2,2],"vus.mean"]],"Requests per Second": [[[1597252645500,1597252646000,1597252646500,1597252647000,1597252648000,1597252649000,1597252650000,1597252651000,1597252652000,1597252653000,1597252654000,1597252655000,1597252656000,1597252657000,1597252658000,1597252659000,1597252660000,1597252661000,1597252662000,1597252663000,1597252664000,1597252665000,1597252666000,1597252667000,1597252668000,1597252669000,1597252670000,1597252671000,1597252672000,1597252673000,1597252674000,1597252675000,1597252676000,1597252677000,1597252678000,1597252679000,1597252680000,1597252681000,1597252682000,1597252683000,1597252684000,1597252685000,1597252686000,1597252687000,1597252688000,1597252689000,1597252690000,1597252691000,1597252692000,1597252693000,1597252694000,1597252695000,1597252696000,1597252697000,1597252698000,1597252699000,1597252700000,1597252701000,1597252702000,1597252703000,1597252704000],[1,null,1,15,163,1],"http_reqs.sum"]],"Errors Per Second": [[[1597252705500],[16],16,"errors.count"]],"Checks Per Second": [[[1597252698500,1597252704000,157,0],"is has records.sum"],[[1597252698500,[30,60,"is status 200.sum"]],"http_req_duration": [[1597252645500,53717.56413820331,"mean"],[1597252704241,58114.220892,"max"],[1597252645500,53996.039154,"median"],[1597252645963,59.493934,"min"],[1597252700187,54060.737341,"p90"],[1597252700190,54063.54766,"p95"],[[1597252645500,[59.493934,52750.910837,53845.717182,54079.271843,56755.190755,58114.220892],"http_req_duration.max"],53833.321595,54062.898259,"http_req_duration.p95"],"http_req_duration.p90"],53397.128931,53879.679315,"http_req_duration.min"],[[1597252645963,1597252698876,1597252699523,1597252699753,1597252699793,1597252699806,1597252699812,1597252699836,1597252699843,1597252699851,1597252699862,1597252699909,1597252699920,1597252699930,1597252699941,1597252699959,1597252699974,1597252700010,1597252700018,1597252700027,1597252700029,1597252700061,1597252700072,1597252700074,1597252700079,1597252700080,1597252700081,1597252700082,1597252700083,1597252700086,1597252700087,1597252700088,1597252700089,1597252700090,1597252700092,1597252700093,1597252700094,1597252700095,1597252700096,1597252700097,1597252700098,1597252700099,1597252700100,1597252700101,1597252700102,1597252700103,1597252700104,1597252700105,1597252700106,1597252700107,1597252700108,1597252700109,1597252700110,1597252700111,1597252700112,1597252700113,1597252700114,1597252700115,1597252700116,1597252700117,1597252700119,1597252700120,1597252700121,1597252700122,1597252700123,1597252700124,1597252700125,1597252700126,1597252700127,1597252700128,1597252700129,1597252700130,1597252700131,1597252700132,1597252700133,1597252700134,1597252700135,1597252700136,1597252700137,1597252700138,1597252700139,1597252700140,1597252700165,1597252700167,1597252700168,1597252700169,1597252700170,1597252700171,1597252700172,1597252700173,1597252700174,1597252700175,1597252700177,1597252700178,1597252700179,1597252700180,1597252700181,1597252700182,1597252700183,1597252700184,1597252700185,1597252700186,1597252700187,1597252700188,1597252700190,1597252700191,1597252700192,1597252700193,1597252700194,1597252700195,1597252700196,1597252700197,1597252700198,1597252700199,1597252700200,1597252702881,1597252704241],53627.193494,53663.227344,53679.856552,53683.140877,53707.413742,53737.198319,53726.418367,53731.912011,53782.249649,53790.72711,53803.807495,53814.653769,53892.656397,53901.87516,53900.742957,53957.13771,53946.440362,53943.949552,53965.636579,53954.009714,53973.615925,53951.577803,53955.778527,53951.973106,53956.179231,53971.992323,53977.235652,53960.611261,53982.264984,53964.496686,53961.231268,53974.347044,53966.4695,53966.3075,53967.805609,53965.806799,53988.681129,53968.435816,53971.273033,53971.325635,53973.90245,53987.901729,53975.011557,53985.497317,53975.14456,53998.771093,53975.274061,53978.087978,53976.837272,53978.035579,53974.431859,53979.87169,53976.810574,53979.970093,53978.173383,53980.913199,53981.232902,54001.223414,53979.511692,53979.915696,53985.052825,53980.708702,53986.598235,53981.516407,53985.962733,53982.911717,53987.725445,53984.776629,53999.967614,53989.213855,53986.57894,53987.762248,53986.543842,53987.470248,53990.691465,53988.364054,53990.277565,53994.691591,53990.812069,53990.673269,53991.244973,53993.190685,53992.931483,53991.637577,53996.291304,53995.023897,53995.3846,53995.338,53995.787004,54001.115535,54001.356136,53996.649511,53999.095225,54001.356338,53996.699813,53999.409029,53999.934832,54002.574447,54000.903239,54004.331658,54025.105177,54005.911568,54007.820181,54006.525073,54008.827587,54005.396067,54005.63247,54005.266968,54009.171491,54009.276792,54009.620995,54007.716784,54011.447106,54006.232177,54011.952211,54009.356395,54010.085801,54009.958701,54035.912776,54026.693126,54028.588438,54042.302016,54042.955921,54042.341319,54028.750344,54035.09778,54034.185076,54034.974382,54038.665204,54050.652173,54038.122503,54035.466389,54050.587875,54050.708476,54051.33338,54042.558832,54051.04218,54040.865423,54045.938552,54055.465506,54048.687269,54054.475902,54059.295829,54059.372331,54055.337409,54049.834579,54048.058469,54060.786642,54048.311273,54061.815349,54060.991346,54060.576044,54064.529767,54047.429073,54062.573458,54051.591798,54062.639758,54054.416514,54067.588889,54062.150758,54058.397138,54050.493594,54066.957387,54070.406306,54054.72802,54061.603759,54054.951122,54067.424192,54053.569715,54064.320876,58114.220892]],"http_req_blocked": [[1597252645500,153.9907778296703,[1597252700198,177.816798,153.8475135,105.533493,[1597252700186,163.335817,[1597252700178,166.857037,[105.533493,146.885425,162.437412,151.626751,149.49364],"http_req_blocked.max"],160.2263,167.023638,"http_req_blocked.p95"],164.005821,"http_req_blocked.p90"],138.277776,126.027607,"http_req_blocked.min"],150.069843,147.374428,156.139277,158.52629,152.842158,154.97367,156.596579,153.644962,151.610152,150.426545,149.388539,148.526034,159.162794,157.869787,160.779503,149.870642,138.495277,155.584874,157.966187,149.260038,148.349633,134.591656,161.500806,151.191649,154.639168,150.795347,149.038437,136.217265,149.901742,129.294626,154.806469,158.603291,142.799901,152.503556,153.252961,153.07196,152.433756,129.547327,150.582845,153.764364,149.67624,148.625034,144.33991,154.480968,149.54824,152.030053,149.848841,148.742835,153.16256,146.09432,151.624551,149.539639,164.655525,147.637528,154.820769,151.718252,146.326922,132.764645,155.880375,152.443056,148.504334,160.508901,148.765036,158.339789,151.721752,152.156354,151.289749,145.777619,151.535451,155.119771,156.234077,156.132976,157.524484,156.67478,155.387373,149.58114,147.261527,158.56829,160.340201,156.263178,151.160448,159.510396,160.890103,155.250072,155.703775,154.152665,159.894498,153.902264,154.767169,153.29006,156.560179,148.596234,148.203332,154.364767,151.24405,155.590874,157.007182,149.847841,154.365767,137.604372,149.823942,159.889498,152.555556,153.470462,159.331495,164.659425,156.862081,157.085682,158.56539,156.80008,152.085454,150.282644,160.101899,157.094382,151.24225,156.410678,155.556973,152.952858,162.21291,166.039033,150.484845,156.838381,153.653363,170.114855,163.678919,163.300117,170.85176,159.886697,146.569723,172.378468,155.833175,151.027048,158.793891,159.139093,157.339383,160.428301,165.352928,148.154532,162.865714,158.592191,146.315322,158.188088,151.784852,130.205831,166.335534,149.907542,153.792763,161.837309,151.579951,156.977182,150.044242,152.967959,149.594639,159.490796,171.875666,156.128077,169.746054,153.554262,171.01686,152.466856,153.507862,156.66138,166.654635,156.73168,152.950659,170.368356,161.415707,153.637863,163.182616,177.816798]] };
function paintEm () {
    for (const key in collection) {
        const arr = collection[key];
        let target = document.getElementById(arr[0][4]);
        if (target == null) {
            target = document.getElementById(key);
            // if (!target) prompt('',JSON.stringify(arr));
            let title = target.innerText;
            target.innerText = '';
            let data; const labels = [];
            if (arr[0].length === 5) {
                for (const multi of arr) {
                    if (!data) data = multi.slice(0,2);
                    else data.push(multi[1]);
                    labels.push(multi[4]);
                }
            } else {
                data = arr.pop();
                createChart(data,title,target,labels);
                let key4 = key + '.4';
                for (const smallArray of arr) {
                    if (smallArray.length === 3) {
                        target = document.getElementById(key + '.' + smallArray[2]).lastChild;
                        let val = smallArray[1];
                        if (val < 1000) val = val.toFixed(2) + ' ms';
                        else val = (val / 1000).toFixed(2) + ' s';
                        target.innerText = val;
                    } else if (smallArray.length === 5) {
                        if (key4) {
                            target = document.getElementById(key4);
                            key4 = 0;
                            title = target.innerText;
                            target.innerText = '';
                            data = smallArray.slice(0,2);
                        } else data.push(smallArray[1]);
                        labels.push(smallArray[4].replace(/.+\./g,''));
                    }
                }
            }
            createChart(data,labels);
            continue;
        }
        const title = target.innerText;
        target.innerText = '';
        const data = arr[0].slice(0,2);
        createChart(data,target);
    }
}
function createChart (data,inside,labels) {
    const initXmin = data[0][0];
    const initXmax = data[0][data[0].length - 1];

    const rangerOpts = {
        title: title,width: 450,height: 100,cursor: {
            y: false,points: {
                show: false
            },drag: {
                setScale: false,x: true,y: false
            },sync: {
                key: 'vus'
            }
        },legend: {
            show: false
        },scales: {
            x: {
                time: true
            }
        },series: [
            {},{
                label: ' ',stroke: '#7eb26d'
            }
        ],hooks: {
            ready: [
                uRanger => {
                    const left = Math.round(uRanger.valToPos(initXmin,'x'));
                    const width = Math.round(uRanger.valToPos(initXmax,'x')) - left;
                    const height = uRanger.bbox.height / devicePixelRatio;
                    uRanger.setSelect({ left,width,height },false);
                }
            ]
        },axes: [
            {
                scale: 'mb',values: (self,ticks) => ticks.map(rawValue => new Date(rawValue).toLocaleTimeString())
            },{
                values: (self,ticks) => ticks.map(rawValue => rawValue.toFixed(0)),side: 1,grid: { show: true }
            }
        ]
    };

    const zoomedOpts = {
        width: 450,height: 250,cursor: {
            drag: {
                x: true,series: [
            { value: (u,rawValue) => {
              let exactFrac = rawValue.toString()
                   .substr(10)
                   .replace(/\./,'')
                   .replace(/0+$/,'');
              if (exactFrac) exactFrac = '.' + exactFrac;
              return new Date(rawValue).toLocaleTimeString().substr(6) + exactFrac + 's';
            }},{
                stroke: '#7eb26d'
            }
        ],ticks) => {
                  let x = ticks.map(rawValue => {
                    let exactFrac = rawValue.toString()
                      .substr(10)
                      .replace(/\./,'')
                      .replace(/0+$/,'');
                    if (exactFrac) exactFrac = '.' + exactFrac;
                    return new Date(rawValue).toLocaleTimeString().substr(6) + exactFrac + 's';
                  })
                  return x;
                }
            },grid: { show: true }
            }
        ],tzDate: ts => ( new Date(ts) )
    };
    rangerOpts.cursor.sync.key = title;
    zoomedOpts.cursor.sync.key = title;
    const colors = ['#7EB26D','#EAB839','#6ED0E0','#EF843C'];
    for (const l in labels) {
        const nxt = (l === '0') ? rangerOpts.series[1] : { stroke: colors[l] };
        nxt.label = labels[l].replace(/\..+/g,'');
        if (l !== '0') {
            rangerOpts.series.push(nxt);
            zoomedOpts.series.push(nxt);
        }
    }

    const uRanger = new uPlot(rangerOpts,data,inside);
    const uZoomed = new uPlot(zoomedOpts,inside);
}

<html><head>
    <link rel="stylesheet" href="https://leeoniya.github.io/uPlot/dist/uPlot.min.css">
  <style>
  DIV { display: inline-block; }
  SPAN > DIV { padding: 10px; }
  SPAN > DIV { text-align: center; }
  .uplot { display: block; width: 450px; }
  </style>
</head>
<script src="https://leeoniya.github.io/uPlot/dist/uPlot.iife.js"></script>
<body onload="paintEm()">
<div id="vus.mean">Virtual Users</div>
<div id="http_reqs.sum">Requests per Second</div>
<div id="errors.count">Errors per Second</div>
<div id="Checks Per Second">Checks Per Second</div>
<br>
<span>
<div id="http_req_duration.mean"><B>Request duration (mean)</B><BR><div></div></div>
<div id="http_req_duration.max"><B>Request duration (max)</B><BR><div></div></div>
<div id="http_req_duration.median"><B>Request duration (med)</B><BR><div></div></div>
<div id="http_req_duration.min"><B>Request duration (min)</B><BR><div></div></div>
<div id="http_req_duration.p90"><B>Request duration (p90)</B><BR><div></div></div>
<div id="http_req_duration.p95"><B>Request duration (p95)</B><BR><div></div></div>
</span>
<br>
<div id="http_req_duration.4">Request duration</div>
<div id="http_req_duration">Request duration</div>
<br>
<span>
<div id="http_req_blocked.mean"><B>Waiting 4 3 TCP connection slot (mean)</B><BR><div></div></div>
<div id="http_req_blocked.max"><B>Waiting 4 3 TCP connection slot (max)</B><BR><div></div></div>
<div id="http_req_blocked.median"><B>Waiting 4 3 TCP connection slot (med)</B><BR><div></div></div>
<div id="http_req_blocked.min"><B>Waiting 4 3 TCP connection slot (min)</B><BR><div></div></div>
<div id="http_req_blocked.p90"><B>Waiting 4 3 TCP connection slot (p90)</B><BR><div></div></div>
<div id="http_req_blocked.p95"><B>Waiting 4 3 TCP connection slot (p95)</B><BR><div></div></div>
</span>
<br>
<div id="http_req_blocked.4">Waiting 4 3 TCP connection slot</div>
<div id="http_req_blocked">Waiting 4 3 TCP connection slot</div>
</body>
</html>