一种基于html5的集群网络拓扑展现方法

文档序号:6375778阅读:615来源:国知局
专利名称:一种基于html5的集群网络拓扑展现方法
技术领域
本发明属于计算机技术领域,具体涉及一种基于HTML5的集群网络拓扑展现方法。
背景技术
超大规模集群环境下的网络监控和管理,以及各节点之间的相互关系表现是非常困难的。在集群管理系统中,如果不能直观地表现网络拓扑关系,不仅导致管理和维护成本的增加,而且在网络发生故障或在冗余网络中出现单线网络连接故障时,会导致网络连接信息反馈不及时,无法对相应问题作出正确反映,从而影响到集群的正常运转,可能会给企业造成经济损失。 目前表现网络拓扑图的技术主要是SVG,SVG是一种可缩放矢量图形技术。SVG特点之一是可以用来动态生成图形。例如,可用SVG动态生成具有交互功能的地图,嵌入网页中,并显示给终端用户。SVG虽然能够很好的动态表现图形,但不是所有的浏览器都支持SVG格式。如果某些浏览器不支持它,就必须在浏览器上安装插件。最常用的SVG插件来自Adobe公司(AdobeSVG Viewer),另外Corel也提供SVG浏览器(Corel SVG Viewer)。然而前者宣布于2009年I月I日停止对该产品的支持。SVG兼容性不是特别好。需要根据具体集群进行定制,成本闻。

发明内容
为了克服上述现有技术的不足,本发明提供一种基于HTML5的集群网络拓扑展现方法,在集群环境下网络拓扑图可以清晰、直观的表现,用户可以轻松了解集群网络信息;网络拓扑图中节点增加,减少,位置变化,节点之间相互关系改变,只需要简单的操作就可以完成,既可以满足一般用户的需求,也可以为特殊用户进行个性化定制,采用异步读取数据方法,实时保存修改后的信息,所见即所得,实时呈现。为了实现上述发明目的,本发明采取如下技术方案—种基于HTML5的集群网络拓扑展现方法,所述方法包括以下步骤步骤I :从数据库中读取网络拓扑图的原数据;步骤2 :将所述原数据转换为展示数据;步骤3 :将所述展示数据转化为网络拓扑图信息,并进行显示; 步骤4 修改网络拓扑图;步骤5 :保存修改信息。所述步骤I中,原数据包括网络节点设备、设备配置信息、设备指标信息、画布信息和设备关系信息;原数据以List〈Map〈String, Object〉〉集合方式存储。所述步骤2中,通过页面设定的函数解析所述原数据,从而使其被HTML5所使用,转换为展示数据。
所述步骤3中,所述展示数据包括网络节点设备、设备的图片信息、设备配置信息、设备指标信息、画布信息、设备关系信息和设备坐标值;所述展示数据以json格式存储。所述步骤3包括以下步骤步骤3-1 :根据屏幕大小重新设置设备坐标值,根据重新设置的设备坐标值将设备图片定位到相应位置;步骤3-2 :根据设备关系信息利用HTML5将节点之间的相互关系及网络连接展现出来;步骤3-3 :将设备指标值、端口信息和设备运行情况以页面属性值方式赋值到页面中。所述步骤4包括以下步骤
步骤4-1 :通过调用位置设定函数修改网络拓扑图中节点的位置;步骤4-2 :修改节点之间的相互关系;通过调用删除节点间关系函数取消节点之间的相互关系,通过调用创建节点间关系函数建立节点间的相互关系;步骤4-3 :添加网络节点;在节点添加导航中,将要添加的节点拖拽到目标位置上,即完成网络节点添加,并调用节点添加函数,将添加的节点各项指标值、端口信息赋值到页面中;步骤4-4 :删除网络节点;选中需要删除的节点,通过调用删除函数完成网络节点删除。所述步骤5中,将修改信息发送到数据库中进行保存。与现有技术相比,本发明的有益效果在于I.在集群环境下网络拓扑图可以清晰、直观的表现,用户可以轻松了解集群网络
信息;2.网络拓扑图中节点增加,减少,位置变化,节点之间相互关系改变,只需要简单的操作就可以完成,既可以满足一般用户的需求,也可以为特殊用户进行个性化定制;3.采用异步读取数据方法,实时保存修改后的信息,所见即所得,实时呈现;4.本发明的浏览器兼容性好,不用安装任何插件,安全性高;5.可以清晰的表现出网络节点间的相互关系,且复杂的拓扑图显示不增加页面运算压力。


图I是基于HTML5的集群网络拓扑展现方法流程图。
具体实施例方式下面结合附图对本发明作进一步详细说明。如图1,一种基于HTML5的集群网络拓扑展现方法,所述方法包括以下步骤步骤I :从数据库中读取网络拓扑图的原数据;步骤2 :将所述原数据转换为展示数据;步骤3 :将所述展示数据转化为网络拓扑图信息,并进行显示;
步骤4 修改网络拓扑图;步骤5:保存修改信息。所述步骤I中,原数据包括网络节点设备、设备配置信息、设备指标信息、画布信息和设备关系信息;原数据不能直接用于网络拓扑图显示。原数据以List〈Map〈String,Object〉〉集合方式存储。所述步骤2中,通过页面设定的函数解析所述原数据,从而使其被HTML5所使用,转换为展示数据。 所述步骤3中,所述展示数据包括网络节点设备、设备的图片信息、设备配置信息、设备指标信息、画布信息、设备关系信息和设备坐标值;所述展示数据以json格式存储。网络节点使用X、Y坐标定位方式,以像素为单位。这种方式定位方便、精准。所述步骤3包括以下步骤步骤3-1 :根据屏幕大小重新设置设备坐标值,根据重新设置的设备坐标值将设备图片定位到相应位置;步骤3-2 :根据设备关系信息利用HTML5将节点之间的相互关系及网络连接展现出来;步骤3-3 :将设备指标值、端口信息和设备运行情况以页面属性值方式赋值到页面中。所述步骤4包括以下步骤步骤4-1 :通过调用位置设定函数修改网络拓扑图中节点的位置;步骤4-2 :修改节点之间的相互关系;通过调用删除节点间关系函数取消节点之间的相互关系,通过调用创建节点间关系函数建立节点间的相互关系;步骤4-3 :添加网络节点;在节点添加导航中,将要添加的节点拖拽到目标位置上,即完成网络节点添加,并调用节点添加函数,将添加的节点各项指标值、端口信息赋值到页面中;步骤4-4 :删除网络节点;选中需要删除的节点,通过调用删除函数完成网络节点删除。所述步骤5中,将修改信息发送到数据库中进行保存。最后应当说明的是以上实施例仅用以说明本发明的技术方案而非对其限制,尽管参照上述实施例对本发明进行了详细的说明,所属领域的普通技术人员应当理解依然可以对本发明的具体实施方式
进行修改或者等同替换,而未脱离本发明精神和范围的任何修改或者等同替换,其均应涵盖在本发明的权利要求范围当中。
权利要求
1.一种基于HTML5的集群网络拓扑展现方法,其特征在于所述方法包括以下步骤 步骤I :从数据库中读取网络拓扑图的原数据; 步骤2 :将所述原数据转换为展示数据; 步骤3 :将所述展示数据转化为网络拓扑图信息,并进行显示; 步骤4 :修改网络拓扑图; 步骤5 :保存修改信息。
2.根据权利要求I所述的基于HTML5的集群网络拓扑展现方法,其特征在于所述步骤I中,原数据包括网络节点设备、设备配置信息、设备指标信息、画布信息和设备关系信息;原数据以List〈Map〈String, Object 集合方式存储。
3.根据权利要求I所述的基于HTML5的集群网络拓扑展现方法,其特征在于所述步骤2中,通过页面设定的函数解析所述原数据,从而使其被HTML5所使用,转换为展示数据。
4.根据权利要求I所述的基于HTML5的集群网络拓扑展现方法,其特征在于所述步骤3中,所述展示数据包括网络节点设备、设备的图片信息、设备配置信息、设备指标信息、画布信息、设备关系信息和设备坐标值;所述展示数据以json格式存储。
5.根据权利要求I所述的基于HTML5的集群网络拓扑展现方法,其特征在于所述步骤3包括以下步骤 步骤3-1 :根据屏幕大小重新设置设备坐标值,根据重新设置的设备坐标值将设备图片定位到相应位置; 步骤3-2 :根据设备关系信息利用HTML5将节点之间的相互关系及网络连接展现出来; 步骤3-3 :将设备指标值、端口信息和设备运行情况以页面属性值方式赋值到页面中。
6.根据权利要求I所述的基于HTML5的集群网络拓扑展现方法,其特征在于所述步骤4包括以下步骤 步骤4-1 :通过调用位置设定函数修改网络拓扑图中节点的位置; 步骤4-2 :修改节点之间的相互关系;通过调用删除节点间关系函数取消节点之间的相互关系,通过调用创建节点间关系函数建立节点间的相互关系; 步骤4-3 :添加网络节点;在节点添加导航中,将要添加的节点拖拽到目标位置上,即完成网络节点添加,并调用节点添加函数,将添加的节点各项指标值、端口信息赋值到页面中; 步骤4-4:删除网络节点;选中需要删除的节点,通过调用删除函数完成网络节点删除。
7.根据权利要求I所述的基于HTML5的集群网络拓扑展现方法,其特征在于所述步骤5中,将修改信息发送到数据库中进行保存。
全文摘要
本发明提供一种基于HTML5的集群网络拓扑展现方法,包括以下步骤从数据库中读取网络拓扑图的原数据;将所述原数据转换为展示数据;将所述展示数据转化为网络拓扑图信息,并进行显示;修改网络拓扑图;保存修改信息。本方法在集群环境下网络拓扑图可以清晰、直观的表现,用户可以轻松了解集群网络信息;网络拓扑图中节点增加,减少,位置变化,节点之间相互关系改变,只需要简单的操作就可以完成,既可以满足一般用户的需求,也可以为特殊用户进行个性化定制,采用异步读取数据方法,实时保存修改后的信息,所见即所得,实时呈现。
文档编号G06F17/30GK102855315SQ20121030936
公开日2013年1月2日 申请日期2012年8月28日 优先权日2012年8月28日
发明者李立京, 张晋锋 申请人:曙光信息产业(北京)有限公司
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1