Print

U-Center 2.0 大屏定制某设备接口接收/发送速率折线图

15小时前 发表

组网及说明

改配置方法仅适用于U-Center 2.0 E0612版本,其他版本略有不同。


配置步骤

1.首先在Swagger入口http://ip:port/perfrs/swagger-ui.html获取接口信息:

查询instanceId接口:GET /perf/monitor/monitorInstance;

参数说明: devId:设备ID(在设备详细界面获取,与uuid相同)、 taskId:1为接口接收速率 5为接口发送速率 ;

输入devld与taskld,获取某个接口的instanceID;


2.查询设备接口进出口流量:GET /perf/data/device;

参数说明: devIds:设备Id 、taskIds:1,为接口接收速率 5为接口发送速率 ,可同时填写,用逗号隔开、 instanceId:实例Id ,对应上面接口查询到的结果,可同时填写,用逗号隔开、 time:时间维度,可填写的值如下所示 Five Mins、   One Hour、 Two Hours 、One Day 、One Week 、One Month、 Three Month 、YesterDay 、LastWeek 、LastMonth 、YEAR LastYear ;


输入devids,taskids(1,5),instanceid,time,pagesize(=10000),currentpage(=1),获取URL。


3.在大屏编辑页面增加一个折线图。

在右侧点击下图所示位置,选择“配置数据源”,数据源类型选择“API”。

将上面获取到的URL数据复制到“URL”处(从“/perfrs”开始复制)。


之后点击右侧下方的“点击编辑过滤器”,之后将下方代码复制到红框位置,保存后即可生成对应折线图。

const res = data.data

function add0(m) { return m < 10 ? '0' + m : m }

function format(timestamp) {

    //shijianchuo是整数,否则要parseInt转换

    var time = new Date(timestamp);

    var y = time.getFullYear();

    var m = time.getMonth() + 1;

    var d = time.getDate();

    var h = time.getHours();

    var mm = time.getMinutes();

    var s = time.getSeconds();

    return y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s);

}

function transValue(unit, value) {

    switch (unit) {

        case "Kbps":

            return value / 1024;

        case "Mbps":

            return value / (1024 * 1024);

        case "Gbps":

            return value / (1024 * 1024 * 1024);

    }

} 

const inData = res.filter(v => v.taskId == 1)[0];

const outData = res.filter(v => v.taskId == 5)[0];

let inDataLine = [];

let outDataLine = [];

const time = Array.from(new Set(inData?.times.concat(outData?.times || []))).sort((a, b) => a - b);

function getbeforeData(i, source) {

    for (const index in i) {

        const sourceIndex = source.times.findIndex(val => val == time[index]);

        if (sourceIndex > -1) {

            return source.values[sourceIndex];

        }

    }

}

function getAfterData(i, source) {

    const rests = time.slice(i); 

    for (const item of rests) {

        const sourceIndex = source.times.findIndex(val => val === item);

        if (sourceIndex !== -1) {

            return source.values[sourceIndex];

        }

    }

}

if (inData) {

    inDataLine = time.reduce((r, v, i) => {

        const index = inData.times.findIndex(val => val == v);

        if (index > -1) {

            r.push({

                s: "接收速率/" + inData.taskUnit,

                x: format(v),

                y: transValue(inData.taskUnit, inData.values[index])

            })

        } else {

            const before = getbeforeData(i, inData);

            const after = getAfterData(i, inData);

            let y;

            if (!before) {

                y = after

            }

            if (!after) {

                y = before

            }

            if (before && after) {

                y = (before + after) / 2

            }

 

            r.push({

                s: "接收速率/" + inData.taskUnit,

                x: format(v),

                y: transValue(inData.taskUnit, y)

            })

        }

        return r;

    }, []);

}

if (outData) {

    outDataLine = time.reduce((r, v, i) => {

        const index = outData.times.findIndex(val => val == v);

        if (index > -1) {

            r.push({

                s: "发送速率/" + outData.taskUnit,

                x: format(v),

                y: transValue(outData.taskUnit, outData.values[index])

            })

        } else {

            const before = getbeforeData(i, outData);

            const after = getAfterData(i, outData);

            let y;

            if (!before) {

                y = after

            }

            if (!after) {

                y = before

            }

            if (before && after) {

                y = (before + after) / 2

            }

            r.push({

                s: "发送速率/" + outData.taskUnit,

                x: format(v),

                y: transValue(outData.taskUnit, y)

            })

        } 

        return r;

    }, []); 

}

const line = inDataLine.concat(outDataLine);

return line;


4.生成的接口流量折线图:



配置关键点

不同版本由于开放的API接口不同,因此结果仅供参考;