授之以渔-运维平台应用模块一（应用树篇）

最新推荐文章于 2024-04-14 15:29:26 发布
最新推荐文章于 2024-04-14 15:29:26 发布
阅读量419 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/babywd/article/details/103989692
版权

写在片头：干的是运维工作，爱好动手。纯属个人项目，身兼业务需求人员，产品经理，前端，后端，测试于一体，代码层面会有逻辑问题，请各位看官见谅，下文只是记录我一个10手码农在前端踩过的坑和一些思路。

###应用树： 为了方便管理以业务为单位的服务集群，利用树形结构建立起了一种服务组织关系，方便运维日常管理。先上一张效果图：

#一、 Jstree
看过XX公司的运维平台的应用树后，从此不能自拔，励志也要写出一样效果的东东。采用的jsTree，是基于javascript的一个跨浏览器树控件树行，功能强大，最重要的是免费，
左侧的树列表的生成因为会用到mysql的group by，所以采用了redis存储，需要的时候才更新服务树，减少对数据库的压力，项目用到了根据选择树节点点击事件功能。
既点击项目名称的红色图标时，会加载整个项目涉及到的服务器，效果图：
image.png
点击项目下单个主机时，会加载这个服务器的应用情况，效果图:
image.png

代码如下：

("changed.jstree", function (e, data) {
                var items = data.node.text;
                var icon = data.node.icon;
                if (icon == "fa fa-building-o font-blue"){
                    document.getElementById("group1").style.display="none";
                    document.getElementById("group2").style.display="block";
                    $.ajax({
                        type: "GET",
                        url: "../cmdb_app_info_ajax/?ip="+items,
                        dataType:'json',
                        async: false,
                        beforeSend:function(){
                            Metronic.blockUI({animate: true});
                        },
                        complete: function() {
                            Metronic.unblockUI();
                        },
                        success: function(data){
                           var  sOut= '';
                                sOut += '<tr>'
                                sOut += '<td>' + data['设备PHP版本号：'] + '</td>';
                                sOut += '<td>' + data['设备PHP路径：'] + '</td>';
                                sOut += '<td>' + data['设备PHP端口号：'] + '</td>';
                                sOut += '<tr>'
                                sOut += '<th><b>TOMCAT版本号</b></th>';
                                sOut += '<th><b>TOMCAT路径</b></th>';
                                sOut += '<th><b>TOMCAT端口号</b></th>';
                                sOut += '</tr>'
                                sOut += '<td>' + data['设备TOMCAT版本号：'] + '</td>';
                                sOut += '<td>' + data['设备TOMCAT路径：'] + '</td>';
                                sOut += '<td>' + data['设备TOMCAT端口号：'] + '</td>';
                                sOut += '<tr>'
                                sOut += '<th><b>NGINX版本号</b></th>';
                                sOut += '<th><b>NGINX路径</b></th>';
                                sOut += '<th><b>NGINX端口号</b></th>';
                                sOut += '</tr>'
                                sOut += '<td>' + data['设备NGINX版本号：'] + '</td>';
                                sOut += '<td>' + data['设备NGINX路径：'] + '</td>';
                                sOut += '<td>' + data['设备NGINX端口号：'] + '</td>';
                                sOut += '<tr>'
                                sOut += '<th><b>MYSQL版本号</b></th>';
                                sOut += '<th><b>MYSQL路径</b></th>';
                                sOut += '<th><b>MYSQL端口号</b></th>';
                                sOut += '<th><b>MYSQL数据库</b></th>';
                                sOut += '</tr>'
                                sOut += '<td>' + data['设备MYSQL版本号：'] + '</td>';
                                sOut += '<td>' + data['设备MYSQL路径：'] + '</td>';
                                sOut += '<td>' + data['设备MYSQL端口号：'] + '</td>';
                                sOut += '<td>' + data['设备MYSQL数据库：'] + '</td>';
                                sOut += '<tr>'
                                sOut += '<th><b>定时任务</b></th>';
                                sOut += '</tr>'
                                sOut += '<td>' + data['设备定时任务：'] + '</td>';
                                sOut += '</tr>'

                            $("#cmdb_app_info_get").html(sOut);

                            },
                        error: function (data) {
                            toastr.error('没有数据可以加载')
                        }
                    });
                }else if (icon == "fa fa-folder icon-state-warning icon-lg"){
                    document.getElementById("group1").style.display="block";
                    document.getElementById("group2").style.display="none";
                    $.ajax({
                        type: "GET",
                        url: "../cmdb_subtitle_info_ajax/?subtitle="+items,
                        dataType:'json',
                        async: false,
                        beforeSend:function(){
                            Metronic.blockUI({animate: true});
                        },
                        complete: function() {
                            Metronic.unblockUI();
                        },
                        success: function(data){
                            if ($('#product_tree').hasClass('dataTable')) {
                                console.log('重新加载datatable，准备初始化................')
                                $('#product_tree').dataTable().fnClearTable(false) //清空一下table
                                $('#product_tree').dataTable().fnDestroy();//还原初始化datatable
                            }
                            $("#cmdb_subtitle_info_get").html("");
                            $.each(data,function() {
                            var  sOut= '';
                                sOut += '<tr>'
                                sOut += '<td><input type="checkbox" class="checkboxes" value="1"/></td>'
                                sOut += '<td id='+this['fields']['unit_title']+'>' + '<a href="../cmdb_assets_list/?place=&status=&year=&type=&model=&search='+ this['fields']['unit_ip'] +'">' + this['fields']['unit_title'] + '</a>' + '</td>';
                                sOut += '<td>' + this['fields']['unit_subtitle'] + '</td>';
                                sOut += '<td id='+this['fields']['unit_ip']+'>' + this['fields']['unit_ip'] + '</td>';
                                sOut += '<td>' + this['fields']['unit_use_type'] + '</td>';                            
                                sOut += '<td><a class="fa fa-eye" href="#responsives" data-toggle="modal"></a></td>';
                                sOut += '</tr>'
                                $("#cmdb_subtitle_info_get").append(sOut);

                            });
                        },
                        error: function (data) {
                            toastr.error('没有数据可以加载')
                        }
                    });
                }
                $(document).ready(function(){
                    eyeClick();
                    TableManaged.init() //初始化datatables
                })

            }

捡一些重要的说：

var items = data.node.text;  //获取图标名称
var icon = data.node.icon;  //获取图标

我是通过判断图标的样式来获取用户点击的是哪里，没办法，谁叫咱是10手码农。同时有group1和gourp2两个tables，选择哪个图标就弹出哪个tables，隐藏另外的，在通过ajax后台获取数据，利用each循环获得的结果，构建出一个tr的内容，最后在添加到tables里，以此实现“山寨版”的数据加载。
####这里踩过的坑：
因为我要先加载完数据，然后才是初始化datatables表格。当点击到别的业务图标时，又要经历一次加载数据，然后初始化表格。结果datatables报错了…cannot reinitialise datatable,大概意思就是datatables不能重复初始化。
最后只能通过判断加载后的tables是否被加载后，如果加载过，先销毁，在初始化。

if ($('#product_tree').hasClass('dataTable')) {
	console.log('重新加载datatable，准备初始化................')
	$('#product_tree').dataTable().fnClearTable(false) //清空一下table
	$('#product_tree').dataTable().fnDestroy();//还原初始化datatable
}

#二、 Datatable
右边就是数据展示采用datatables，可以将任何HTML表格添加高级的交互功能，这里用到了checkbox的单选和多选。
datatables代码如下：

var TableManaged = function () {

    var initTable2 = function () {

        var table = $('#product_tree');
        table.dataTable({
            "bDestroy": true,
            "language": {
                "aria": {
                    "sortAscending": ": activate to sort column ascending",
                    "sortDescending": ": activate to sort column descending"
                },
                "emptyTable": "未有相关数据",
                "info": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录。",
                "infoEmpty": "当前显示0到0条，共0条记录",
                "infoFiltered": "(数据库中共为 _MAX_ 条记录)",
                "lengthMenu": "显示 _MENU_ 记录",
                "search": "模糊查询:",
                "zeroRecords": "对不起，查询不到任何相关数据",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": " 上一页 ",
                    "sNext": " 下一页 ",
                    "sLast": " 尾页 "
                }
            },

            "bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.

            "lengthMenu": [
                [5, 15, 20, -1],
                [5, 15, 20, "All"] // change per page values here
            ],
            // set the initial value
            "pageLength": 5,

            "columnDefs": [{  // set default column settings
                'orderable': false,
                'targets': [0]
            }, {
                "searchable": false,
                "targets": [0]
            }],
            "order": [
                [1, "asc"]
            ] // set first column as a default sort by asc
        });

        var tableWrapper = jQuery('#product_tree_wrapper');

        var host_list = [];
        var release_build_job = '';

        //全选
        table.find('.group-checkable').change(function () {
            var set = jQuery(this).attr("data-set");
            var checked = jQuery(this).is(":checked");
            host_list.length = 0;
            jQuery(set).each(function () {
                if (checked) {
                    $(this).attr("checked", true);
                    var hosts = $(this).parent().parent().find('td').eq(1).attr("id");
                    host_list.push(hosts);
                    document.getElementById("group3").style.display="block";
                } else {
                    $(this).attr("checked", false);
                    host_list.length = 0;
                    document.getElementById("group3").style.display="none";
                }
            });
            jQuery.uniform.update(set);

        });


        //单选
        table.on('change', 'tbody tr .checkboxes', function () {
            var hosts = $(this).parent().parent().find('td').eq(1).attr("id");
            var checked = jQuery(this).is(":checked");
            if (checked) {
                $(this).attr("checked", true);
                host_list.push(hosts);
                if (host_list.length > 1) {
                    document.getElementById("group3").style.display="block";
                }else {
                    document.getElementById("group3").style.display="none";
                }
            } else {
                $(this).attr("checked", false);
                host_list.pop(hosts);
                if (host_list.length > 1) {
                    document.getElementById("group3").style.display="block";
                }else {
                    document.getElementById("group3").style.display="none";
                }
            }

        });

        tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown
  
    return {

        //main function to initiate the module
        init: function () {
            if (!jQuery().dataTable) {
                return;
            }

            initTable2();
        }

    };

}();

捡一些重要的说：

if (host_list.length > 1) {
	document.getElementById("group3").style.display="block";
}else {
	document.getElementById("group3").style.display="none";
}

判断了checkbox选择的数量，大于1个的话，弹出gourp3（一个批量绘图按钮），效果图如下：
image.png

#三、 Multiselect
接上文，这里平台是结合了openfalcon做的监控，点击上文的监控指标项按钮，会弹出一个multiselect层，用过openfalcon的都知道，监控指标多是他的特色之一，所以在选型的时候第一个就想到得需要一个带filter功能的select控件，效果图如下：
image.png
代码如下：

            $('#get_hostlist_counter_select').multiselect({
                    buttonWidth: '500px',//按钮宽度
                    nonSelectedText: '---- 请选择监控指标 ----',
                    nSelectedText: '个被选中',
                    enableCaseInsensitiveFiltering: true,//不区分大小写
                    filterPlaceholder: '模糊查询',
                    enableFiltering: true,
                    onDropdownShow: function(event) {
                        get_hostlist_counter()
                    },
                    onChange: function (option, checked, select) {
                        var selectedOptions = $('#get_hostlist_counter_select option:selected');
                        if (selectedOptions.length >= 6) {
                            // 禁用选项
                            toastr.error('监控指标最多同时选取6个')
                            var nonSelectedOptions = $('#get_hostlist_counter_select option').filter(function() {
                            return !$(this).is(':selected');
                            });

                            nonSelectedOptions.each(function() {
                            var input = $('input[value="' + $(this).val() + '"]');
                            input.prop('disabled', true);
                            input.parent('li').addClass('disabled');
                            });
                        }
                        else {
                            // 启动选项
                            $('#get_hostlist_counter_select option').each(function() {
                            var input = $('input[value="' + $(this).val() + '"]');
                            input.prop('disabled', false);
                            input.parent('li').addClass('disabled');
                            });
                        }
                    }
            });

捡重要的说:
用到了multiselect的onDropdownShow和onChange两个回调函数，onDropdownShow可以理解成就是点击菜单下拉事件，触发了get_hostlist_counter()通过ajax取数据填充options，代码如下：

        function get_hostlist_counter(){
                var options_list = []
                var obj2 = new Object();
                var jsonData ={
                    'unit_title': host_list.join(','),
                };
                $("#get_hostlist_counter_select").empty();

                $.ajax({
                    async: false,
                    type: "POST",
                    url : "../openfalcon_get_endpoint_counter_ajax/",
                    data: jsonData,
                    cache: false,
                    dataType: "json",
                    beforeSend:function(){
                        Metronic.blockUI({animate: true});
                    },
                    complete: function() {
                        Metronic.unblockUI();
                    },
                    success: function(obj) {
                        if (obj['counter'] == ''){
                            toastr.error('获取监控指标为空或者异常')
                        }else{
                            for (var id in obj['counter']){
                                    obj2 = {
                                          label : obj['counter'][id],
                                          value : obj['counter'][id],
                                      };
                                options_list.push(obj2)
                                }
                            $('#get_hostlist_counter_select').multiselect('dataprovider', options_list);
                            }
                            }
                        });
			}

onChange可以理解成点击事件，监控指标这块还是怕传多了，压垮了openfalcon的graph的，所以限制最多传6个，超过的话会禁用所有选项。
#四、 绘图
最后就是一些绘图了，结合着openfalcon的API做的，下篇文章再议，效果图：
image.png

大Q的梦想
关注
基于服务树的动态资源管理方法
互联网运维杂谈
08-16 1364
我在很早之前高效运维社区出版的《运维36计》中提到的应用CMDB的构建原则，其中原则4表达的就是这个概念。如下：何为服务树？有些人（公司）把服务树...
授之以渔-运维平台应用模块二（Vmware控制台篇）
weixin_34050389的博客
06-05 1090
###Vmware控制台： 为了方便管理vmware,尽量摆脱vSphere，目前实现了对虚拟机的增、删、改（硬件配置）、快照管理、Console控制台、克隆等功能，本文只详细的介绍下Console功能。先上一张效果图： #一、 环境准备 pyvmovi 对应你的python版本，下载地址https://github.com/vmware/pyvmomi/releases 保证python环境...
服务树——灵活强大的运维资源管理体系
一万个小时
06-30 1383
运维行业发展至今，从最初的人肉运维、脚本时代，到后期的平台化阶段、以及现在很火的AIOps的概念。都绕不过一个主题——资源管理。 无论是健全而人性化的发布体系、灵敏强大的监控体系、还是稳定高效的服务发现，都需要我们有一种可以很灵活的管理资源的模型。 这个模型，应该有如下两个特点： 支持业务分级，可以与业务形态灵活对应 筛选能力灵活，可以支持多个维度灵活精确的匹配与筛选 这就是服务树概念的由来。接下来笔者会将我们在服务树的建设过程中的一些思考和遇到的问题，分享给大家。 此篇文章专注介绍服务树模型的设计与实
运维管理平台功能模块设计
weixin_33957648的博客
06-21 2038
2019独角兽企业重金招聘Python工程师标准>>> ...
树的应用
xiaomimi1993的博客
08-07 4099
二叉排序树 平衡二叉树 哈夫曼树及哈夫曼编码
树的应用 —— 树的简介
谢谢你们的关注
09-20 231
树的应用 —— 树的简介
【观察】首创智能运维分级成熟度模型，云智慧的再定义、再创新与再重塑
申耀的科技观察
10-12 442
申耀的科技观察读懂科技，赢取未来！毫无疑问，智能运维（AIOps）是最近几年全球最为火爆的新技术，自2016年AIOps概念首次出现之后，短短五年时间，AIOps就完成了技术与市场“鸿沟”...
Docker系列技术分享(一) 容器技术和Docker
qijigougou的博客
04-26 2714
文章目录什么是容器？什么是Docker？1. 解决了应用移植过程中环境一致性问题，提供标准化的软件打包、分发的能力2. 独特的设计和封装，带来了体验上的变革。虚拟机和容器的区别？Docker带来的技术变革？1. DevOps2. 微服务3. 云计算关于我们 什么是容器？ 首先来看下什么是容器技术，容器是由英文 “Container” 翻译过来的，这个单词即有容器也有集装箱的意思，在这里其实更偏向于集装箱，这点也可以从Docker的Logo里看出来，不能说是毫无关系，可以说是一摸一样！我们可能是因为好读所
第1章 开启Python之旅
weixin_44259522的博客
12-20 1026
这是一本关于如何利用Python提高日常办公效率的书，书中凝聚了作者多年的实践经验和独特思考，旨在帮助读者准确、高效地完成大量高重复度的工作。本书汇集了日常办公和处理文档时常见的问题，通过实例的演示与讲解，帮助读者灵活有效地使用Python处理工作中遇到的问题。全书共11章，涵盖Python的各种应用场景，具体包括文件管理自动化，网络信息自动获取，TXT、XLS／XLSX、DOC／DOCX、PPT、PDF、图片文件的自动化处理，模拟鼠标、键盘操控本地软件，自动化运行管理等。
linux系统下，我也用虚拟机——linux虚拟机随笔
lingsheng_的博客
12-20 3293
前言## 是时候聊一下虚拟机了，因为我们后面即将聊的 Linux 玩法，包括硬盘分区以及在同一块硬盘上安装多个 Linux 发行版、在 X86 的实模式下运行 16 位的程序、探索 Grub 和 Linux 纯字符模式等等，要截图和录像的话，必须借助于虚拟机。 说起虚拟机，大家都不陌生。需要使用虚拟机的场景也非常的多，对于有志于写操作系统的同志，往往需要一个虚拟机来运行和调试他写的系统；对于喜欢研究网络体系结构的朋友，往往需要在自己的电脑上虚拟出 N 个系统组成各种各样的网络。（这个需要电脑的配置够强大
运维平台中的业务树初版设计
杨建荣的学习笔记
11-19 399
这是学习笔记的第1807篇文章之前简单讨论过一版业务树的内容，随着讨论的深入，业务树的建设思路也越来越清晰。对此我设计了一个初版的业务树建设思路，会把整个业务树分为四层...
干货来袭 | 58CMDB服务树系统
weixin_33672109的博客
12-04 1041
简介CMDB系统是运维信息管理和自动化的基石，在整个运维管理中起着至关重要的作用，主要负责资源管理、业务管理和权限的配置管理；同时作为一个公共服务为其他管理平台和工具提供...
数字化智能运维平台建设方案
最新发布
weixin_44094929的博客
04-14 1253
因此，在数字化智能运维平台的建设中，我们需要注重数据来源及接入方式的选择和设计，确保数据的准确性、实时性和完整性，为智能运维提供强大的数据支撑。因此，我们需要构建一个数字化智能运维平台，通过自动化、智能化的手段，提高运维效率，降低运维成本，确保企业的业务能够持续稳定地运行。同时，为了确保平台的高可用性，我们还特别设计了冗余备份和高可用方案，这样一来，即使发生单点故障，平台也能保持正常运行，大大增强了整体的稳定性。同时，借助数字化手段，我们可以实现运维数据的数字化和可视化，为运维决策提供有力的支持。
服务树系列(一)：什么是服务树及其核心功能
qq_26193209的博客
01-08 1061
前言 服务树这个名词几乎所有运维和运维开发同学都不陌生，但是服务树的原理和为啥用服务树估计大家并不了解，本文先来讨论下这些基本概念，下文讨论如何实现，下图为其核心组件stree-index 现已开源 开源项目地址: 项目地址: https://github.com/ning1875/stree-index 介绍文章 服务树系列(二)：开源项目：stree-index 物化路径+倒排索引实现的开源服务树核心组件 服务树与资源管理 其实无论是引入CMDB或服务树的一个重要目的是完成对应用运行所依赖的
设备树与驱动的关系_嵌入式Linux设备树语法总结
weixin_39585795的博客
11-27 982
1 设备树的说明在写完嵌入式驱动总结后，对于设备树相关的语法和使用一直都想进行系统的描述，但是因为最近比较忙碌，所以一直拖到现在才完成初版，对于整个嵌入式Linux驱动开发中，设备树语法和构建是其中比较核心的部分，是需要比较系统的去学习掌握的。本文参考设备树说明文档<Devicetree Specification Release v0.2>, 在结合日常驱动开发中积累的经验，总结完成...
授之以渔-运维平台分布式任务系统，代号Veronica（Celery篇）
babywd的博客
01-15 801
2018年的最后几天平台迭代到了V6版本，代号Veronica（维罗妮卡）。（Veronica名字取自电影复仇者联盟2，电影中的Veronica是由布鲁斯·班纳（绿巨人）和托尼·斯塔克（钢铁侠）共同完成，Veronica系统包含多个功能模块，反浩克装甲是其中之一，反浩克装甲的作用相当于外勤特工，其余功能模块起着支持、补给作用。除反浩克外其余已知的功能模块包括：独立卫星通信，独立操作，战损支持（出...
使用jquery.DataTable.js 展示数据，并进行后台分页。
H5女王范儿
04-02 5925
话不多说，直接上干货。。要使用jquery.DataTable展现数据，比如引入jquery.js，jquery.DataTable.js，如果这个不会，建议从入门到放弃。1、使用jquery.DataTable展现数据。var TableManaged = function () { var initTable1 = function () { var table = $('...
使用jquery的blockui插件显示弹出层
漂渺影子的专栏
04-17 293
  在做网站的开发过程中，可能需要使用弹出层，使用jquery的blockui插件可以很轻松的实现这个效果。blockui可以在你发送ajax请求的时候，显示一个遮罩层禁止用户对页面进行操作并显示提示信息；或者用来显示一个登陆窗口，也可用来显示图片等。 　　blockui插件主要使用blockUI和unblockUI两个方法来控制弹出层的显示或者隐藏，可以在blockUI方法中指定一些参数，来...
构建通用应用运维管控平台：资源管理与自动化
"本文主要探讨了如何设计并实现一个通用的应用运维管控平台，以解决运维工作中面临的问题，如服务器数量增长、运维任务繁重、无自动化等。文章提到了运维工作的两大基本操作，并分析了现有解决方案的局限性，强调了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值