• 全部
  • 经验案例
  • 典型配置
  • 技术公告
  • FAQ
  • 漏洞说明
  • 全部
  • 全部
  • 大数据引擎
  • 知了引擎
产品线
搜索
取消
案例类型
发布者
是否解决
是否官方
时间
搜索引擎
匹配模式
高级搜索

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

2021-12-30 发表
  • 0关注
  • 0收藏 1255浏览
高洋 七段
粉丝:2人 关注:0人

组网及说明

改配置方法仅适用于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接口不同,因此结果仅供参考;

该案例对您是否有帮助:

您的评价:1

若您有关于案例的建议,请反馈:

作者在2021-12-31对此案例进行了修订
0 个评论

该案例暂时没有网友评论

编辑评论

举报

×

侵犯我的权益 >
对根叔知了社区有害的内容 >
辱骂、歧视、挑衅等(不友善)

侵犯我的权益

×

泄露了我的隐私 >
侵犯了我企业的权益 >
抄袭了我的内容 >
诽谤我 >
辱骂、歧视、挑衅等(不友善)
骚扰我

泄露了我的隐私

×

您好,当您发现根叔知了上有泄漏您隐私的内容时,您可以向根叔知了进行举报。 请您把以下内容通过邮件发送到zhiliao@h3c.com 邮箱,我们会尽快处理。
  • 1. 您认为哪些内容泄露了您的隐私?(请在邮件中列出您举报的内容、链接地址,并给出简短的说明)
  • 2. 您是谁?(身份证明材料,可以是身份证或护照等证件)

侵犯了我企业的权益

×

您好,当您发现根叔知了上有关于您企业的造谣与诽谤、商业侵权等内容时,您可以向根叔知了进行举报。 请您把以下内容通过邮件发送到 zhiliao@h3c.com 邮箱,我们会在审核后尽快给您答复。
  • 1. 您举报的内容是什么?(请在邮件中列出您举报的内容和链接地址)
  • 2. 您是谁?(身份证明材料,可以是身份证或护照等证件)
  • 3. 是哪家企业?(营业执照,单位登记证明等证件)
  • 4. 您与该企业的关系是?(您是企业法人或被授权人,需提供企业委托授权书)
我们认为知名企业应该坦然接受公众讨论,对于答案中不准确的部分,我们欢迎您以正式或非正式身份在根叔知了上进行澄清。

抄袭了我的内容

×

原文链接或出处

诽谤我

×

您好,当您发现根叔知了上有诽谤您的内容时,您可以向根叔知了进行举报。 请您把以下内容通过邮件发送到zhiliao@h3c.com 邮箱,我们会尽快处理。
  • 1. 您举报的内容以及侵犯了您什么权益?(请在邮件中列出您举报的内容、链接地址,并给出简短的说明)
  • 2. 您是谁?(身份证明材料,可以是身份证或护照等证件)
我们认为知名企业应该坦然接受公众讨论,对于答案中不准确的部分,我们欢迎您以正式或非正式身份在根叔知了上进行澄清。

对根叔知了社区有害的内容

×

垃圾广告信息
色情、暴力、血腥等违反法律法规的内容
政治敏感
不规范转载 >
辱骂、歧视、挑衅等(不友善)
骚扰我
诱导投票

不规范转载

×

举报说明

提出建议

    +

亲~登录后才可以操作哦!

确定

亲~检测到您登陆的账号未在http://hclhub.h3c.com进行注册

注册后可访问此模块

跳转hclhub

你的邮箱还未认证,请认证邮箱或绑定手机后进行当前操作