Mesos | 1.3.2 webui static 界面代码分析

知识点链接：https://blog.youkuaiyun.com/lilele12211104/article/details/85011877

                      https://blog.youkuaiyun.com/lilele12211104/article/details/85078357

（持续更新中……）

Chamelon新添项目简略分析：

HTML文件：

1.将以前的control.html页面分开成hardware.html，runtime.html，algorithm.html，timeandspace.html，network_topology.html五个页面。

2.shutdown.html控制模态框。slave.html是runtime.html界面的cpu,mem.disk等资源利用率的饼状图展示。

JS文件：

•     app.js

4-30行，为module “Chameleon” 注入routeProvider,定义路由规则

使用立即执行函数(function(){})(), 具体请参考 https://www.cnblogs.com/yanzp/p/6371292.html

“use strict”,好处和坏处 https://blog.youkuaiyun.com/weixin_40387601/article/details/80514358

• controllers.js

1.第5行，定义了chameleon_app 变量，代表app.js 中angularJS 定义的app。

2.HardwareCtrl控制hardware.html里的元素。RuntimeCtrl，SlaveCtrl，TopologyCtrl其他以此类推，对应相应的html文件。

3.ShutdownCtrl，ShutdownInstanceCtrl ，ClusterOperationCtrl 控制   模态框（关闭所有slave节点）

          

                                

 

1.3.2 webui static 界面代码分析

工具介绍：npm

npm的全称是Node Package Manager 是世界上最大的软件注册表，是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用

https://www.npmjs.cn/     中文网
https://www.npmjs.com/
http://www.runoob.com/nodejs/nodejs-npm.html     菜鸟教程

app.js代码分析：

1.filter :'truncateMesosID'

/**
      * Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.
      * @param start The zero-based location in the array from which to start removing elements.
      * @param deleteCount The number of elements to remove.
      * @param items Elements to insert into the array in place of the deleted elements.
      */
    splice(start: number, deleteCount: number, ...items: T[]): T[];

/**
      * Adds all the elements of an array separated by the specified separator string.
      * @param separator A string used to separate one element of an array from the next in the resulting String. If omitted, the array elements are separated with a comma.
      */
    join(separator?: string): string;

2..filter :'truncateMesosState'

subString (int beginIndex)  返回一个新的字符串，它是此字符串的一个子字符串。该子字符串始于指定索引处的字符，一直到此字符串末尾。

TASK_struct结构体成员详解
https://blog.youkuaiyun.com/bit_clearoff/article/details/54292300

3..filter :'isoDate‘

// Is the given value `NaN`? (NaN is the only number which does not equal itself).
  _.isNaN = function(obj) {
    return _.isNumber(obj) && obj != +obj;
  };

// Add some isType methods: isArguments, isFunction, isString, isNumber, isDate, isRegExp.
each(['Arguments', 'Function', 'String', 'Number', 'Date', 'RegExp'], function(name) {
  _['is' + name] = function(obj) {
    return toString.call(obj) == '[object ' + name + ']';
  };
});

http://www.it1352.com/611622.html   基于ISODate格式的时间查询(Mongodb : Query based on time in ISODate format)

3..filter :'relativeDate‘

/**
  * Converts A string to an integer.
  * @param s A string to convert into a number.
  * @param radix A value between 2 and 36 that specifies the base of the number in numString.       radix介于2和36之间的         值，用于指定numString中数字的基数
  * If this argument is not supplied, strings with a prefix of '0x' are considered hexadecimal. All other strings are considered               decimal.    如果未提供此参数，则前缀为“0x”的字符串将被视为十六进制。所有其他字符串都被视为十进制。

  */
declare function parseInt(s: string, radix?: number): number;