不算完美的实现了自动化部署的进度实时更新

Posted 2020-06-13

呵呵，思路比较明确，但实现时的JS确实麻烦。

想过用ANGULAR.JS，但不太熟悉。

以前用的JS函数setInterval() 有时停不下来。

后来，看那书上说setTimeout() 可以实现所有setInterval() 功能。

然后，再用promise的then功能来实现先后顺序。。

搞定。。。

短期内不会更新这个版本的进度提示啦。

function resetPercent(id_data){
        $.ajax({
              url:‘/a/reset_percent/‘ + id_data,
              success: function(json){
                },
            });
    };

    $(".btn-multi-deploy").click(function(){

          var group_data = $("#deploy-form").serialize();
          var deploy_type = $(this).attr("deploy_type");
          var _self = this;

          var id_array = []
          var id_s_array = []
          var group_array = group_data.split("&");
          for (var key_data in group_array) {
            if (group_array[key_data].indexOf("deployversion_id") != -1) {
                deploy_id = group_array[key_data].split("=")[1]
            };
            if (group_array[key_data].indexOf("check-server") != -1) {
                id_array.push(group_array[key_data].split("=")[1])
            };
          };

          var promiseDEPLOY = $.ajax({
            url:‘{% url "autodeploy:deploy-group-cmd-v2" %}‘,
            type: ‘post‘,
            data:{
                group_cmd: group_data,
                deploy_type: deploy_type,
            },
            dataType: ‘json‘,
            beforeSend: function(){
                $(_self).attr(‘disabled‘,"true");
                $(_self).append(" <i class=‘uk-icon-cog uk-icon-spin‘></i>");

                for( index=0;index < id_array.length;index++){
                    resetPercent(id_array[index]);
                }
            },
            success: function(json){
                $(_self).children(‘i‘).remove();
                $(_self).append(" <i class=‘uk-icon-cog uk-icon-spin‘></i>")


            },
            error: function(){
                $(_self).children(‘i‘).remove();
            },
            complete: function(){
                $(_self).children(‘i‘).remove();
                $(_self).append(" <i class=‘uk-icon-check‘></i>")
            }
          });/* end promiseDEPLOY stop */

      promiseShowStatus = promiseDEPLOY.then(function(){

        for( index=0;index < id_array.length;index++){
                var key = id_array[index];
                queryStatus(key);
            }

            function queryStatus(id_subserver){
                $.getJSON("/api/subserver/"+id_subserver,
                    function(data,state){
                        if (state == ‘success‘) {
                            var percent_value,
                                cmd_value;
                            percent_value_array = data.deploy_status.split(",");
                            percent_value = percent_value_array[0];
                            cmd_value = percent_value_array[1];
                            $(‘#‘ + id_subserver).html("<div class=‘uk-progress uk-progress-striped uk-progress-active‘><div class=‘uk-progress-bar‘ style=‘width: " + percent_value + "%;‘>" +  cmd_value + ‘ ‘ + percent_value + "%</div><i class=‘uk-icon-cog uk-icon-spin‘></i></div>");

                                if ( percent_value > 98 ){
                                     $(‘#‘ + id_subserver).html("<div class=‘uk-progress uk-progress-striped uk-progress-success‘><div class=‘uk-progress-bar‘ style=‘width: " + percent_value + "%;‘>100%</div></div>");
                    clearTimeout(st_func);
                                };

                            };
                    }
                );
            console.log(‘queryStatus...‘+id_subserver);
            var st_func = setTimeout(function(){queryStatus(id_subserver)}, 3000);
        }
      });

    });