CN109117351A - 一种Docker容器云主机和Dashboard的前端展示实现方法 - Google Patents

Abstract

本发明公开了一种Docker容器云主机和Dashboard的前端展示实现方法，特别涉及对Dashboard中的数据提出了一种如何将需要展示的数据进行合理布局的实现方法，并提出了如何选用图表插件对数据进行更好的展示的实现方法。本发明的一种Docker容器云主机和Dashboard的前端展示实现方法，基于React技术使用Hightchart图表对Dashboard中的数据进行展示，其主要针对Docker容器云主机管理中的基础信息、资源监控、主机标签、副本信息、其他信息的展示进行优化以及对Dashboard中的信息提出一种前端展示实现方法，不仅实现了容器云主机管理的业务需求，而且得到更好的用户体验和管理体验。

Description

一种Docker容器云主机和Dashboard的前端展示实现方法

技术领域

本发明涉及计算机信息技术领域，尤其涉及一种Docker容器云主机和Dashboard的前端展示实现方法。

背景技术

Docker是一个开源的应用容器引擎，开发者可以在完成开发任务后打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的Linux机器上，也可以实现虚拟化。

Docker提供了一种在安全隔离的容器中运行几乎所有应用的方式，这种隔离性和安全性允许你在同一主机上同时运行多个容器，而容器的这种轻量级特性，意味着你可以节省更多的系统资源。对于容器云而言，所有的应用都需要容器化以后才能发布，即将应用程序打包进Docker容器，以镜像的方式运行。容器化应用未来将会成为云端应用交付的标准。

由于Docker容器的启动一般在秒级实现，这相比传统的虚拟机方式要快得多。另外 Docker对系统资源的利用率很高，一台主机上可以同时运行数千个Docker容器。容器除了运行其中的应用外，基本不需要消耗额外的系统资源，使得应用的性能很高，同时系统的开销很小。基于虚拟机的技术决定了它的启动速度分钟级(或数秒级)，而Docker基于轻量级的LXC，它的启动速度是毫秒级(秒级)的。这就使得容器云具备高密度，高弹性的特性，在面对突发访问量时也能轻松应对。

随着以Docker为代表的容器技术在国内的迅速发展，容器云也逐渐被广大开发者所熟知。容器云的Docker容器几乎可以在任意的平台上运行，包括物理机、虚拟机、公有云、私有云、个人电脑、服务器等。

在这种背景下，Docker容器云主机管理就显得尤为重要，而要实现这样的管理，需要在前端对这些信息进行展示，包括具有整个系统统计能力的Dashboard部分，都需要进行相应的展示，而传统的云主机管理和Dashboard部分的展示都较为简单，不够详细和直观。

因此，在这样的需求下，需要对以Docker容器云和Dashboard的管理系统的前端展示提供相应的解决方案，实现更好的用户体验和管理体验。

发明内容

本发明的目的就在于为了解决上述问题而提供一种基于区块链的版本控制方法及系统，本发明通过以下技术方案来实现上述目的：

一种Docker容器云主机和Dashboard的前端展示实现方法，包括以下步骤：

步骤S101、通过系统导航栏进入到主机管理列表中，在主机管理列表中，可以查看到主机名称、标签、状态、副本数量、可调度、类型、分组、操作信息的展示；

并通过点击某个主机名称进入到主机详情页面中，进行后续的详情信息展示；

步骤S102、进入到主机详情页面，可以进行主机基本信息、资源监控、主机标签、副本信息、其他信息的展示；

步骤S103、在基本信息中，将主机的基础信息模块和资源监控模块一起进行展示，其中，在基础信息模块中，主要进行EndPoint、可调度状态、副本信息、磁盘空间、磁盘压力、内存压力、可分配资源、接入时间等信息进行展示；

步骤S104、打开主机标签栏，可以设置“编辑标签”按钮，点击后，弹出编辑标签对话框，在此对话框中，不仅可以查看已有的标签，还可通过输入Key和Value添加新的标签，并且可以删除已有的标签，在此功能中，可以对标签进行排序，并且能进行标签名称的重复校验，即对标签的Key进行校验，如果有相同的Key，则禁止添加；

步骤S105、显示副本信息和其他信息，在副本信息中，不仅要对副本名称、IP地址、容器数量、重启次数、启动时间进行展示，还要对每个副本的CPU使用情况和内存使用情况进行展示，并且能对每个副本信息的事件信息进行展示。

步骤S106、在Dashboard中对整个系统的CPU使用情况、内存使用情况利用Highchart 图表的形式展示出来，并对系统的主机使用情况、运行情况和Ceph运行情况、系统状态、最近操作日志、系统通知、镜像排行榜、插件总览数据等进行展示。

更进一步的方案是：

所述步骤S103的资源监控模块中设置有四个图表，对CPU使用情况、内存使用情况、磁盘使用情况、网络使用情况分别进行展示，需要进行以下步骤的设置：

s201.在“chart”选项里面进行设置，type设置为area，height设置为200，events添加事件函数；

s202.在“title”选项里面进行设置，text设置为需要进行展示的名称，比如“CPU使用情况”，style设置标题的样式，y的值设置一个整数，用于进行垂直方向的偏移；

s203.在“subtitle”选项里面进行设置，text设置为需要进行展示的副标题名称，style设置标题的样式，y的值设置一个整数，用于进行垂直方向的偏移；

s204.在“plotOption”选项里面进行设置，该选项意思是数据点标记相关配置，只有线性图才有数据点标记，area里面的color为图表的背景颜色，lineColor为图表的线条颜色，其中，在marker选项里面，enabled意思是默认会取数据点或数据列的颜色，enabled的默认值是：null；

s205.在“credits”选项里面，该选项意思是默认在图表的右下角放置版权信息的标签，其中的enabled意思是是否显示版权信息，默认是null；

s206.配置“xAxis”选项，默认情况下，x轴显示在图表的底部，y轴显示在左侧或右侧，通过设置chart.inverted＝true可以让x，y轴显示位置对调；在多轴中，xAxis可以配置成数组的形式；X轴可以通过坐标轴对象来进行动态更新或进行其他操作，设置其type为要展示的数据类型，lable为要展示的数据标签；

s207.配置“yAxis”选项，在多轴中，yAxis可以配置成数组的形式。Y轴可以通过坐标轴对象来进行动态更新或进行其他操作，设置其type为要展示的数据类型，lable为要展示的数据标签；

s208..配置“tooltip”选项，数据提示框指的当鼠标悬停在某点上时，以框的形式提示该点的数据，比如该点的值，数据单位等。数据提示框内提示的信息完全可以通过格式化函数动态指定；通过设置tooltip.enabled＝false即可不启用提示框；

s209.配置“legend”选项，该选项是包含图表中数列标志和名称的容器，各数列或各点由图例中的标志和名称表示；

s210.配置“series”选项，图表的数据列，可以在每个数据列中指定其参数，另外也可以通过数据列配置来指定对某一种类型的数据列有效的配置。

更进一步的方案是：

所述步骤S105中，在其他信息中需要对Architecture、ContainerRuntimeVersion、 KernelVersion、KubeProxyVersion、BootID等信息进行展示。

更进一步的方案是：

对于展示Dashboard中的数据具体实现过程如下：

a1.首先在Dashboard中的系统资源使用情况中，展示系统整体主机的CPU使用情况和内存使用情况，并且对其进行每一分钟一次的数据自动更新操作，并且能显示当前的CPU使用了几核，内存占用了多少；

a2.在运行信息模块中，首先显示运行中的服务和已停止的服务，并且显示运行中的容器和已停止的容器；

a3.在Ceph信息模块中，首先显示Ceph的存储情况，即显示有多少的Ceph总量，然后显示有多少已用的Ceph总量，并且计算出它们的百分比；其次显示Ceph网关节点数、Ceph存储节点数、Ceph监控节点数，并且计算出它们的运行数量；

a4.在系统状态信息中，首先定义一个固定数组，数组里面是预先定义好的name、runningNum以及unrunningNum，然后将获取到的数据进行遍历，如果这些数组中的name字段的子字符串包含预先定义的数组里面的name，并且查询它的status，如果为running，则runningNum加1，否则unrunningNum加1，这样预先定义的数组就更新其中字段的数据，然后利用antd中的Table组件将更新后的数据赋值给Tabel的data属性，即可对系统状态的数据进行展示；

a5.在最近操作日志模块中，对获取到的数据只是显示Cname和Caze两个字段的内容，并且列表最后一列显示日志的操作时间；

a6.在系统通知中，对获取到的数据只是显示Caze、Name和Createat字段的内容，并且列表最后一列显示日志的操作时间。

a7.在镜像排行榜中，需要使用到antd的Switch组件进行使用次数和最近上传的切换，然后分别对获取到的数据利用Table组件展示出来。

a8.在插件信息中，需要对插件总数量、已激活插件、未激活插件、正在激活插件、正在卸载插件、异常插件展示出来。

本发明的有益效果在于：

本发明的一种Docker容器云主机和Dashboard的前端展示实现方法，基于React技术使用Hightchart图表对Dashboard中的数据进行展示，其主要针对Docker容器云主机管理中的基础信息、资源监控、主机标签、副本信息、其他信息的展示进行优化以及对Dashboard中的信息提出一种前端展示实现方法，不仅实现了容器云主机管理的业务需求，而且得到更好的用户体验和管理体验。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例或现有技术描述中所需要实用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本实施例的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明使用流程图；

图2为本发明方法中Hightchart具体的选项配置图；

图3为本发明方法的Hightchart的详细参数图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将对本发明的技术方案进行详细的描述。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所得到的所有其它实施方式，都属于本发明所保护的范围。

如图1所示，一种Docker容器云主机和Dashboard的前端展示实现方法，包括以下步骤：

步骤S101、通过系统导航栏进入到主机管理列表中，在主机管理列表中，可以查看到主机名称、标签、状态、副本数量、可调度、类型、分组、操作信息的展示；

并通过点击某个主机名称进入到主机详情页面中，进行后续的详情信息展示；

步骤S102、进入到主机详情页面，可以进行主机基本信息、资源监控、主机标签、副本信息、其他信息的展示；

步骤S103、在基本信息中，将主机的基础信息模块和资源监控模块一起进行展示，其中，在基础信息模块中，主要进行EndPoint、可调度状态、副本信息、磁盘空间、磁盘压力、内存压力、可分配资源、接入时间等信息进行展示；

步骤S104、打开主机标签栏，可以设置“编辑标签”按钮，点击后，弹出编辑标签对话框，在此对话框中，不仅可以查看已有的标签，还可通过输入Key和Value添加新的标签，并且可以删除已有的标签，在此功能中，可以对标签进行排序，并且能进行标签名称的重复校验，即对标签的Key进行校验，如果有相同的Key，则禁止添加；

步骤S105、显示副本信息和其他信息，在副本信息中，不仅要对副本名称、IP地址、容器数量、重启次数、启动时间进行展示，还要对每个副本的CPU使用情况和内存使用情况进行展示，并且能对每个副本信息的事件信息进行展示。

步骤S106、在Dashboard中对整个系统的CPU使用情况、内存使用情况利用Highchart 图表的形式展示出来，并对系统的主机使用情况、运行情况和Ceph运行情况、系统状态、最近操作日志、系统通知、镜像排行榜、插件总览数据等进行展示。

在上述任一实施例中，还可以做进一步的改进。所述步骤S103的资源监控模块中设置有四个图表，对CPU使用情况、内存使用情况、磁盘使用情况、网络使用情况分别进行展示，需要进行以下步骤的设置：

s201.在“chart”选项里面进行设置，type设置为area，height设置为200，events添加事件函数；

s202.在“title”选项里面进行设置，text设置为需要进行展示的名称，比如“CPU使用情况”，style设置标题的样式，y的值设置一个整数，用于进行垂直方向的偏移；

s203.在“subtitle”选项里面进行设置，text设置为需要进行展示的副标题名称，style设置标题的样式，y的值设置一个整数，用于进行垂直方向的偏移；

s204.在“plotOption”选项里面进行设置，该选项意思是数据点标记相关配置，只有线性图才有数据点标记，area里面的color为图表的背景颜色，lineColor为图表的线条颜色，其中，在marker选项里面，enabled意思是默认会取数据点或数据列的颜色，enabled的默认值是：null;

s205.在“credits”选项里面，该选项意思是默认在图表的右下角放置版权信息的标签，其中的enabled意思是是否显示版权信息，默认是null；

s206.配置“xAxis”选项，默认情况下，x轴显示在图表的底部，y轴显示在左侧或右侧，通过设置chart.inverted＝true可以让x，y轴显示位置对调；在多轴中，xAxis可以配置成数组的形式；X轴可以通过坐标轴对象来进行动态更新或进行其他操作，设置其type为要展示的数据类型，lable为要展示的数据标签；

s207.配置“yAxis”选项，在多轴中，yAxis可以配置成数组的形式。Y轴可以通过坐标轴对象来进行动态更新或进行其他操作，设置其type为要展示的数据类型，lable为要展示的数据标签；

s208..配置“tooltip”选项，数据提示框指的当鼠标悬停在某点上时，以框的形式提示该点的数据，比如该点的值，数据单位等。数据提示框内提示的信息完全可以通过格式化函数动态指定；通过设置tooltip.enabled＝false即可不启用提示框；

s209.配置“legend”选项，该选项是包含图表中数列标志和名称的容器，各数列或各点由图例中的标志和名称表示；

s210.配置“series”选项，图表的数据列，可以在每个数据列中指定其参数，另外也可以通过数据列配置(plotOptions)来指定对某一种类型的数据列有效的配置；

数据列和数据列配置(plotOptions)选项不同之处在于数据列里的对象是图表中具体的某一个数据列，包括数据、类型、ID、下标等具体的值，而数据列配置只是针对某一种数据列有效的通用参数。

在上述任一实施例中，还可以做进一步的改进。所述步骤S105中，在其他信息中需要对 Architecture、ContainerRuntimeVersion、KemelVersion、KubeProxyVersion、BootID等信息进行展示。

在上述任一实施例中，还可以做进一步的改进。对于展示Dashboard中的数据具体实现过程如下：

a1.首先在Dashboard中的系统资源使用情况中，展示系统整体主机的CPU使用情况和内存使用情况，并且对其进行每一分钟一次的数据自动更新操作，并且能显示当前的CPU使用了几核，内存占用了多少；

a2.在运行信息模块中，首先显示运行中的服务和已停止的服务，并且显示运行中的容器和已停止的容器；

a3.在Ceph信息模块中，首先显示Ceph的存储情况，即显示有多少的Ceph总量，然后显示有多少已用的Ceph总量，并且计算出它们的百分比。其次显示Ceph网关(RGW)节点数、Ceph存储(OSD)节点数、Ceph监控(MON)节点数，并且计算出它们的运行数量；

a4.在系统状态信息中，首先定义一个固定数组，数组里面是预先定义好的name、runningNum以及unrunningNum，然后将获取到的数据进行遍历，如果这些数组中的name字段的子字符串包含预先定义的数组里面的name，并且查询它的status，如果为running，则runningNum加1，否则unrunningNum加1，这样预先定义的数组就更新其中字段的数据，然后利用antd中的Table组件将更新后的数据赋值给Tabel的data属性，即可对系统状态的数据进行展示；

a5.在最近操作日志模块中，对获取到的数据只是显示Cname和Caze两个字段的内容，并且列表最后一列显示日志的操作时间；

a6.在系统通知中，对获取到的数据只是显示Caze、Name和Createat字段的内容，并且列表最后一列显示日志的操作时间。

a7.在镜像排行榜中，需要使用到antd的Switch组件进行使用次数和最近上传的切换，然后分别对获取到的数据利用Table组件展示出来。

a8.在插件信息中，需要对插件总数量、已激活插件、未激活插件、正在激活插件、正在卸载插件、异常插件展示出来。

通过对Docker容器云主机管理中的基础信息、资源监控、主机标签、副本信息、其他信息的展示进行优化以及对Dashboard中的信息的展示，对Docker容器云主机的信息进行了充分的展示。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。另外需要说明的是，在上述具体实施方式中所描述的各个具体技术特征，在不矛盾的情况下，可以通过任何合适的方式进行组合，为了避免不必要的重复，本发明对各种可能的组合方式不再另行说明。此外，本发明的各种不同的实施方式之间也可以进行任意组合，只要其不违背本发明的思想，其同样应当视为本发明所公开的内容。

Claims (4)

1.一种Docker容器云主机和Dashboard的前端展示实现方法，其特征在于，包括以下步骤：

步骤S101、通过系统导航栏进入到主机管理列表中，在主机管理列表中，可以查看到主机名称、标签、状态、副本数量、可调度、类型、分组、操作信息的展示；

并通过点击某个主机名称进入到主机详情页面中，进行后续的详情信息展示；

步骤S102、进入到主机详情页面，可以进行主机基本信息、资源监控、主机标签、副本信息、其他信息的展示；

步骤S103、在基本信息中，将主机的基础信息模块和资源监控模块一起进行展示，其中，在基础信息模块中，主要进行EndPoint、可调度状态、副本信息、磁盘空间、磁盘压力、内存压力、可分配资源、接入时间等信息进行展示；

步骤S104、打开主机标签栏，可以设置“编辑标签”按钮，点击后，弹出编辑标签对话框，在此对话框中，不仅可以查看已有的标签，还可通过输入Key和Value添加新的标签，并且可以删除已有的标签，在此功能中，可以对标签进行排序，并且能进行标签名称的重复校验，即对标签的Key进行校验，如果有相同的Key，则禁止添加；

步骤S105、显示副本信息和其他信息，在副本信息中，不仅要对副本名称、IP地址、容器数量、重启次数、启动时间进行展示，还要对每个副本的CPU使用情况和内存使用情况进行展示，并且能对每个副本信息的事件信息进行展示。

步骤S106、在Dashboard中对整个系统的CPU使用情况、内存使用情况利用Highchart图表的形式展示出来，并对系统的主机使用情况、运行情况和Ceph运行情况、系统状态、最近操作日志、系统通知、镜像排行榜、插件总览数据等进行展示。

2.根据权利要求1所述一种Docker容器云主机和Dashboard的前端展示实现方法，其特征在于：所述步骤S103的资源监控模块中设置有四个图表，对CPU使用情况、内存使用情况、磁盘使用情况、网络使用情况分别进行展示，需要进行以下步骤的设置：

s201.在“chart”选项里面进行设置，type设置为area，height设置为200，events添加事件函数；

s202.在“title”选项里面进行设置，text设置为需要进行展示的名称，比如“CPU使用情况”，style设置标题的样式，y的值设置一个整数，用于进行垂直方向的偏移；

s203.在“subtitle”选项里面进行设置，text设置为需要进行展示的副标题名称，style设置标题的样式，y的值设置一个整数，用于进行垂直方向的偏移；

s204.在“plotOption”选项里面进行设置，该选项意思是数据点标记相关配置，只有线性图才有数据点标记，area里面的color为图表的背景颜色，lineColor为图表的线条颜色，其中，在marker选项里面，enabled意思是默认会取数据点或数据列的颜色，enabled的默认值是：null；

s205.在“credits”选项里面，该选项意思是默认在图表的右下角放置版权信息的标签，其中的enabled意思是是否显示版权信息，默认是null；

s206.配置“xAxis”选项，默认情况下，x轴显示在图表的底部，y轴显示在左侧或右侧，通过设置chart.inverted＝true可以让x，y轴显示位置对调；在多轴中，xAxis可以配置成数组的形式；X轴可以通过坐标轴对象来进行动态更新或进行其他操作，设置其type为要展示的数据类型，lable为要展示的数据标签；

s207.配置“yAxis”选项，在多轴中，yAxis可以配置成数组的形式。Y轴可以通过坐标轴对象来进行动态更新或进行其他操作，设置其type为要展示的数据类型，lable为要展示的数据标签；

s208..配置“tooltip”选项，数据提示框指的当鼠标悬停在某点上时，以框的形式提示该点的数据，比如该点的值，数据单位等。数据提示框内提示的信息完全可以通过格式化函数动态指定；通过设置tooltip.enabled＝false即可不启用提示框；

s209.配置“legend”选项，该选项是包含图表中数列标志和名称的容器，各数列或各点由图例中的标志和名称表示；

s210.配置“series”选项，图表的数据列，可以在每个数据列中指定其参数，另外也可以通过数据列配置来指定对某一种类型的数据列有效的配置。

3.根据权利要求1所述一种Docker容器云主机和Dashboard的前端展示实现方法，其特征在于：所述步骤S105中，在其他信息中需要对Architecture、ContainerRuntimeVersion、KemelVersion、KubeProxyVersion、BootID等信息进行展示。

4.根据权利要求1所述一种Docker容器云主机和Dashboard的前端展示实现方法，其特征在于：对于展示Dashboard中的数据具体实现过程如下：

a1.首先在Dashboard中的系统资源使用情况中，展示系统整体主机的CPU使用情况和内存使用情况，并且对其进行每一分钟一次的数据自动更新操作，并且能显示当前的CPU使用了几核，内存占用了多少；

a2.在运行信息模块中，首先显示运行中的服务和已停止的服务，并且显示运行中的容器和已停止的容器；

a3.在Ceph信息模块中，首先显示Ceph的存储情况，即显示有多少的Ceph总量，然后显示有多少已用的Ceph总量，并且计算出它们的百分比；其次显示Ceph网关节点数、Ceph存储节点数、Ceph监控节点数，并且计算出它们的运行数量；

a4.在系统状态信息中，首先定义一个固定数组，数组里面是预先定义好的name、runningNum以及unrunningNum，然后将获取到的数据进行遍历，如果这些数组中的name字段的子字符串包含预先定义的数组里面的name，并且查询它的status，如果为running，则runningNum加1，否则unmnningNum加1，这样预先定义的数组就更新其中字段的数据，然后利用antd中的Table组件将更新后的数据赋值给Tabel的data属性，即可对系统状态的数据进行展示；

a5.在最近操作日志模块中，对获取到的数据只是显示Cname和Caze两个字段的内容，并且列表最后一列显示日志的操作时间；

a6.在系统通知中，对获取到的数据只是显示Caze、Name和Createat字段的内容，并且列表最后一列显示日志的操作时间。

a7.在镜像排行榜中，需要使用到antd的Switch组件进行使用次数和最近上传的切换，然后分别对获取到的数据利用Table组件展示出来。

a8.在插件信息中，需要对插件总数量、已激活插件、未激活插件、正在激活插件、正在卸载插件、异常插件展示出来。