{% extends "admin/base.html" %} 
{% load static i18n %} 
{% block title %}{{ title }} | {{ site_title }}{% endblock %} 
{% block extrastyle %} 
{{ block.super }}
<style>
    .select2-container--default+.select2-container--jet {
        display: None;
    }
    
    #changelist-form #result_list input.vTextField {
        max-width: 10em;
    }
    
    #changelist-form #result_list .select2-container--jet {
        min-width: 6em;
    }
    
    #changelist-form #result_list a.button {
        min-width: 5em;
    }
    
    #content-main .field-blueprint .select2 {
        min-width: 18.7em;
    }
    
    #branding {
        background-color: rgba(255, 255, 255, 0.95);
    }
    
    #branding img {
        max-height: 50px;
    }
</style>
<style>
    div.breadcrumbs a,
    div.breadcrumbs a:visited {
        color: #ffffff;
    }
    
    div.breadcrumbs a:hover {
        color: #000000;
    }
    
    #user-tools,
    #user-tools a:link,
    #user-tools a:visited {
        color: #c1c8f4;
    }
    
    div.breadcrumbs,
    #header {
        background-color: #1970b2;
        color: #a6f3c1;
    }
    
    #branding img {
        max-height: 35px;
    }
</style>
<style>
    .clear {
        clear: both
    }
    
    .RadioStyle input {
        display: none
    }
    
    .RadioStyle label {
        /* border: 1px solid #00a4ff; */
        padding: 2px 10px 2px 5px;
        line-height: 28px;
        min-width: 80px;
        /* text-align: center; */
        float: left;
        /* margin: 2px; */
        border-radius: 4px
    }
    
    .RadioStyle input:checked+label {
        background: url(images/ico_checkon.svg) no-repeat right bottom;
        background-size: 21px 21px;
        color: #00a4ff
    }
    
    .stateBtnStyle {
        color: #fff;
        /* background-color: #9eb85c; */
        /* border-color: #4cae4c; */
        background-color: #b0d0e0;
        border-color: #85c2e2;
        line-height: 1.42857143;
        border: 1px solid transparent;
        border-radius: 4px;
    }
    
    .sidebar {
        background-color: #ffffff;
    }
    
    .sidebar-link,
    .sidebar-link:visited {
        color: #000000;
    }
    
    .sidebar-link:hover {
        color: #ffffff;
        background: #329ad0;
    }
    
    .sidebar-section {
        border-bottom: 0.07143rem solid #ececec;
    }
    
    .sidebar-link,
    .sidebar-link:visited,
    .sidebar-link:hover {
        color: #020202;
    }
    
    .sidebar-right-arrow:hover {
        color: #020202;
    }
    
    body {
        background: #f7f7f7;
        color: #777a7b;
        /* color: #0b6912; */
    }
    
    .dashboard-item {
        background: #c6deea;
    }
    
    .dashboard-item-content ul:not(.inline) li.contrast {
        /* background: #94c382; */
        background: #85c2e2;
    }
    
    a,
    a:visited,
    a:hover,
    a:focus {
        color: #656565;
    }
    
    .button,
    .button:visited,
    .button:hover,
    input[type="submit"],
    input[type="submit"]:visited,
    input[type="button"],
    input[type="button"]:visited,
    .object-tools a,
    .object-tools a:visited {
        background-color: #d3efff;
        color: #5d95ab;
    }
    
    .aHrefHover:hover {
        background-color: #47bac1;
        color: #fff;
    }
    
    .user-tools ul.opened {
        border: 0.07143rem solid #86c1df;
    }
    
    #user-tools,
    #user-tools a:link,
    #user-tools a:visited {
        color: #ddefdd;
    }
    
    #toolbar form input[type="submit"],
    #toolbar form input[type="submit"]:visited {
        background-color: #99c58a;
        color: #ffffff;
    }
    
    #changelist .actions .button,
    #changelist .actions .button:visited {
        background-color: #99c58a;
        color: #fff;
    }
    
    #changelist .actions .button:hover,
    #toolbar form input[type="submit"]:hover,
    .object-tools a:hover,
    a.button:hover,
    input[type="submit"]:hover,
    input[type="button"]:hover {
        background-color: #76bae4;
        color: #fff;
    }
    
    table thead th {
        background: #74b6e2;
    }
    
    .sidebar-container-toggle {
        background-color: #338BB8;
        color: #c0d4e8;
        min-height: 32px;
    }
    
    input[type="submit"].default {
        background-color: #d0dbe6;
        color: #657a90;
    }
    
    input[type="submit"]:hover {
        background-color: #47bac1;
        color: #fff;
    }
    
    .dashboard-item {
        background: #73b6e2;
    }
    
    img.dateset-list-iocn {
        width: 10px;
    }
    
    img.menu-list-iocn {
        width: 16px;
        vertical-align: middle;
    }
</style>
{% endblock %} 
{% block extrahead %}
<link rel="apple-touch-icon" sizes="180x180" href="{% static '/apple-touch-icon.png' %}">
<link rel="icon" type="image/png" sizes="32x32" href="{% static '/favicon-16x16.png' %}">
<link rel="stylesheet" href="{% static '/css/all.min.css' %}"> 
{% endblock %} 
{% block messages %}
<ul class="messagelist">
    <li id='ajax-success' class="success" style="display:none"></li>
    <li id='ajax-error' class="error" style="display:none"></li>
</ul>
{{ block.super }} 
{% endblock %} 
{% block branding %} 
{{ block.super }}
<h1 id="site-name">
    <a href="/clouds/instance/">
        <img src="{% static '/logo-large.png' %}">
    </a>
    <div style="display:none;" id="current-space">{{ request.space }}</div>
    <div style="display:none;" id="current-space-id">{{ request.space.pk }}</div>
    <div style="display:none;" id="current-space-portal">{{ request.space.portal }}</div>
</h1>
{% endblock %} 

{% block nav-global %}
<a href="https://github.com/cas-bigdatalab/packone" class="sidebar-link icon" style="display:none;">
    <span class="sidebar-link-label">
        <span class="sidebar-link-icon">
            <i class="fab fa-github"></i>
        </span> 
        {% trans 'Repo' %}
    </span>
</a>
<input id="iframe_value_input" style="display:none;" /> 
{% endblock %} 

{% block footer %} 
{{ block.super }}
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript">
    // jQuery(function($) {
    //     $('#changelist-form #result_list').find('input').each(function() {
    //         $(this).replaceWith("<span>" + this.value + "</span>");
    //     });
    // });
    // using jQuery
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    var csrftoken = getCookie('csrftoken');
    jQuery(function ($) {
        function operate(e) {
            e.preventDefault();
            $(this).html($(this).text() + 'ing')
            href = $(this).attr('href')
            $(this).removeAttr('href').unbind('click');
            postData = {
                operation: $(this).data("op"),
                target: $(this).data("id")
            }
            $.ajax({
                    type: "POST",
                    headers: {
                        "X-CSRFToken": csrftoken
                    },
                    url: href,
                    data: postData,
                    timeout: 150000
                })
                .done(function (data) {
                    window.location.replace(href.split('api')[1].slice(0, -2) + "/" + data.id + '/change');
                })
                .fail(function (xhr, ajaxOptions, thrownError) {
                    //what to do in error
                    $('#ajax-error')
                        .html(thrownError)
                        .fadeIn(800).fadeOut(5000);
                });
        }

        $('form[method=post] a.button[data-op]').click(operate);

        function umount(e) {
            e.preventDefault();
            href = $(this).attr('href')
            $.ajax({
                    type: "DELETE",
                    headers: {
                        "X-CSRFToken": csrftoken
                    },
                    url: href,
                    timeout: 15000
                })
                .done(function (data) {
                    location.reload();
                })
                .fail(function (xhr, ajaxOptions, thrownError) {
                    $('#ajax-error')
                        .html(thrownError)
                        .fadeIn(800).fadeOut(5000);
                })
        }

        $('form[method=post] a.button[umount]').click(umount);
    });
</script>
<script type="text/javascript">
    var window_location_href = window.location.href;
    var window_location_pathname = window.location.pathname;
    var window_location_search = window.location.search;
    var space_id = document.getElementById("current-space-id").innerHTML;
    var space_name = document.getElementById("current-space").innerHTML;
    var current_space_portal = document.getElementById("current-space-portal").innerHTML;
    var piflow_id_port = "http://10.0.86.131:6001";
    var zeppelin_id_port = "http://10.0.88.78:9995";
    var home_url = "/clouds/instance/";
    var space_home_url = '';
    if (space_id) {
        space_home_url = '/space/' + space_id;
    }
    if (space_name) {
        var html_head_title = document.getElementsByTagName("head")[0].getElementsByTagName("title")[0];
        //html_head_title.text = html_head_title.text.replace("PackOne Console", space_name);
        html_head_title.text = space_name;
    }
    if ('/login/' === window_location_pathname && '?next=/engines/cluster' !== window.location.search) {
        window.location.href = window.location.origin + window_location_pathname + '?next=/engines/cluster';
    }
    if ('/' === window_location_pathname && '' === window.location.search) {
        window.location.href = window.location.origin + space_home_url + '/engines/cluster';
    }

    function hasClassCustom(elements, cName) {
        return !!elements.className.match(new RegExp("(\\s|^)" + cName + "(\\s|$)"));
    }

    function hideElementArray(array) {
        if (array && array.length > 0) {
            for (var i = 0; i < array.length; i++) {
                array[i].style.display = "none";
            }
        }
    }

    function openStyle(elementId) {
        if (elementId) {
            var updateDivElement = document.getElementById(elementId);
            if (hasClassCustom(updateDivElement, "collapsed")) {
                updateDivElement.className = updateDivElement.className.replace(new RegExp("(\\s|^)" + "collapsed" + "(\\s|$)"), " ");
            }
        }
    }

    function closedStyle(elementId) {
        if (elementId) {
            var updateDivElement = document.getElementById(elementId);
            if (!hasClassCustom(updateDivElement, "collapsed")) {
                updateDivElement.className += " " + "collapsed";
            }
        }
    }

    function getNoteBookList(requestHead) {
        var rightContent_ = document.getElementById("content");
        jQuery(function ($) {
            $.get(requestHead + "/api/notebook", function (result) {
                if (result) {
                    if ("OK" === result.status) {
                        var result_body = result.body;
                        if (result_body && result_body.length > 0) {
                            //var p_element = '<p style="text-align: center;font-size: 26px;">Notebook List</p>';
                            var table_element = '<table id="table_id" style="width: 100%; display: none;"><thead><tr><th>Name</th></tr></thead>';
                            var select_element = '<div style="display: inline-block;"><span style="width: 10%;font-size: 20px;">Please choose:&nbsp;&nbsp;</span></div>' 
                            + '<div style="display: inline-block;">' 
                                + '<select tabindex="-1" aria-hidden="true" style="width: 100%;" onchange="changeIframeSrc(\'iframe_id\',this.value);">';
                            var table_tr = "";
                            var select_options = "";
                            var iframe_element_src = ""
                            for (var i = 0; i < result_body.length; i++) {
                                table_tr += ('<tr><td><a href="javascript:changeIframeSrc(\'iframe_id\',\'' + requestHead + '/#/notebook/' + result_body[i].id + '\');" >' + result_body[i].name + '</a></td></tr>');
                                var option_element = '<option value="' + requestHead + '/#/notebook/' + result_body[i].id + '">' + result_body[i].name + '</option>';
                                if ("simbademo" === result_body[i].name) {
                                    iframe_element_src = (requestHead + '/#/notebook/' + result_body[i].id + '">' + result_body[i].name);
                                    select_options = (option_element + select_options);
                                } else {
                                    select_options += option_element;
                                }
                            }
                            if (table_tr && select_options) {
                                table_element += (table_tr + '</table>');
                                select_element += (select_options + '</select></div></div><br/><br/>');
                                rightContent_.innerHTML = (select_element + table_element +
                                    '<iframe id="iframe_id" style="width: 100%; height: 1500px;border-width: 0px;" '
                                    + 'frameborder="no" border="0" marginwidth="0" marginheight="0" allowtransparency="yes" src="'
                                    + iframe_element_src + '"></iframe>');
                            }
                        }
                    }
                }
            });
        });
    }

    function loadPipeline(iframe_src) {
        var rightContent_ = document.getElementById("content");
        rightContent_.innerHTML = ('<iframe id="iframe_id" style="width: 100%; height: 1500px;border-width: 0px;" ' 
        + 'frameborder="no" border="0" marginwidth="0" marginheight="0" allowtransparency="yes" src="' 
            + iframe_src + '"></iframe>');
    }

    function changeIframeSrc(iframe_id, url) {
        var iframe_element = document.getElementById(iframe_id);
        iframe_element.setAttribute("src", url);
    }

    function sendMessage(iframe_id, json_object) {
        // json对象转换成字符串
        var data_json = JSON.stringify(json_object, function (key, val) {
            if (typeof val === 'function') {
                return val + '';
            }
            return val;
        });
        document.getElementById(iframe_id).contentWindow.postMessage(data_json, '*');
    }

    if ('/engines/cluster/' === window_location_pathname) {
        document.getElementById('content').style.display = "none";
    }

    function select_all() {
        var kk = document.getElementById("select_all_btn");
        var kk_table = kk.parentElement.parentElement.parentElement;
        var kk_table_label_array = kk_table.getElementsByTagName("td");
        for (var i = 0; i < kk_table_label_array.length; i++) {
            var kk_table_label_array_i_input = kk_table_label_array[i].getElementsByTagName("input")[0]
            if (kk_table_label_array_i_input && !kk_table_label_array_i_input.checked) {
                kk_table_label_array[i].firstElementChild.click();
            }
        }
    };

    function changePublicCheckBox(flag) {
        if (flag) {
            document.getElementById("public_no_id").checked = false;
            document.getElementById("id_public").checked = true;
        } else {
            document.getElementById("public_yes_id").checked = false;
            document.getElementById("id_public").checked = false;
        }
    }
    var pre_execution = function() {};
    var actionSubmitFun = function() {};
    var actionSubmitByIdFun = function() {};
    var changelist_footer_div = "";
    var result_list_select_array = "";
    window.onload = function () {
        var document_all_a = document.getElementsByTagName('a');
        if (document_all_a && document_all_a.length > 0) {
            for (var i = 0; i < document_all_a.length; i++) {
                var document_all_a_i_href = document_all_a[i].getAttribute("href");
                if (document_all_a_i_href && document_all_a_i_href[0] === "/" && document_all_a_i_href.search(space_home_url) == -1 ) {
                    if ("/" === document_all_a_i_href) {
                        document_all_a_i_href = home_url
                    }
                    document_all_a[i].setAttribute("href", space_home_url + document_all_a_i_href);
                }
            }
        }
        if (space_home_url + home_url === window_location_pathname) {
            if (!hasClassCustom(document.getElementsByTagName("body")[0], "menu-pinned")) {
                document.getElementById('branding-pin').click();
            }
        }
        if ('/engines/cluster/' !== window_location_pathname && document.getElementById("add-dashboard-module-form")) {
            document.getElementById("add-dashboard-module-form").parentElement.style.display = "none";
        }
        if (space_home_url + '/engines/cluster/add/' !== window_location_pathname) {
            // 多选平铺
            //查询到因select2隐藏的select
            var select_elements_array = document.getElementsByClassName("select2-hidden-accessible");
            //判断select是否有下拉项
            if (select_elements_array && select_elements_array.length > 0) {
                // 需要修改的数组
                var select_element_update_array = [];
                // 循环处理select(筛选需要修改的)
                for (var j = 0; j < select_elements_array.length; j++) {
                    if (select_elements_array[j] && "" === select_elements_array[j].getAttribute('multiple')) {
                        var update_select_obj = {}
                            // 需要修改的select
                        update_select_obj.select = select_elements_array[j];
                        // 需要修改select的父元素
                        update_select_obj.parent = select_elements_array[j].parentElement;
                        // 需要修改select父元素
                        update_select_obj.parent_last_child = select_elements_array[j].parentElement.lastElementChild;
                        // push进需修改的数组
                        select_element_update_array.push(update_select_obj);
                    }
                }
                // 循环处理需要修改的数组
                for (var j = 0; j < select_element_update_array.length; j++) {
                    // 数组中第一个元素
                    var select_element_obj_j = select_element_update_array[j];
                    // 取select的name
                    var select_elements_j_name = select_element_obj_j.select.getAttribute("name");
                    // 取select的option
                    var select_elements_j_opt = select_element_obj_j.select.getElementsByTagName('option');
                    // 判断取出的select的option是否为空
                    if (select_elements_j_opt && select_elements_j_opt.length > 0) {
                        // 把select转为checkbox并添加样式
                        var elements_checkbox = '<div class="RadioStyle"><div class="Block PaddingL"><table>';
                        for (var i = 0; i < select_elements_j_opt.length; i++) {
                            if (i === 0) {
                                elements_checkbox += '<tr><th colspan="4"><button id="select_all_btn" type="button" onclick="select_all()" class="button">Select All</button></th></tr><tr>';
                            } else if ((i + 1) % 4 === 1) {
                                elements_checkbox += '</tr><tr>';
                            }
                            var checkBox_id = ('love' + j + i);
                            elements_checkbox += ('<td><input type="checkbox" name="' +
                                select_elements_j_name + '" id="' + checkBox_id + '" value="' +
                                select_elements_j_opt[i].value + '" />' +
                                '<label for="' + checkBox_id + '">' + select_elements_j_opt[i].text + '</label></td>');
                            if (i === select_elements_j_opt.length - 1) {
                                elements_checkbox += '</tr>'
                            }
                        }
                        elements_checkbox += '</table></div></div>';
                        // 判断是否转换成功,若成功则进行替换
                        if (elements_checkbox) {
                            select_element_obj_j.parent.innerHTML = elements_checkbox + update_select_obj.parent_last_child.outerHTML
                        }
                    }
                }
            }
        }
        //操作事件
        changelist_footer_div = document.getElementsByClassName("changelist-footer")[0];
        if (changelist_footer_div) {
            // 查询select
            result_list_select_array = changelist_footer_div.getElementsByTagName('select');
            // 判断查询到的select
            if (result_list_select_array && result_list_select_array.length > 0) {
                actionSubmitFun = function actionSubmit(btnElement) {
                        console.log('执行操作');
                        if (btnElement) {
                            // 找到所点击btn的所在行
                            var current_tr = btnElement.parentNode.parentNode;
                            // 判空
                            if (current_tr) {
                                // 找到tr所在table
                                var current_table = current_tr.parentNode;
                                // 获取table的所有input
                                var current_table_input = current_table.getElementsByTagName('input');
                                // 循环处理（把所有的checkbox取消选中）
                                if (current_table_input && current_table_input.length > 0) {
                                    for (var i = 0; i < current_table_input.length; i++) {
                                        if (current_table_input[i].type == "checkbox") {
                                            current_table_input[i].checked = false;
                                        }
                                    }
                                    // 获取当前行的第一个td
                                    var current_tr_first_td = current_tr.firstElementChild;
                                    // 获取当前td的input并置为选中状态
                                    var current_tr_first_td_input = current_tr_first_td.getElementsByTagName('input')[0];
                                    current_tr_first_td_input.checked = true;
                                    // 循环获取from并提交
                                    var current_from = current_table;
                                    while (true) {
                                        if (current_from.tagName === 'FORM' || current_from.tagName === 'form') {
                                            result_list_select_array[0].value
                                            current_from.getElementsByTagName("select")[0].value = btnElement.getAttribute('selectValue');
                                            current_from.submit();
                                            break;
                                        } else {
                                            current_from = current_from.parentNode;
                                            if (current_from.tagName === 'BODY' || current_from.tagName === 'body' ||
                                                current_from.tagName === 'HTML' || current_from.tagName === 'html') {
                                                console.log('not find');
                                                break;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    // 获取查询到的select的option
                var result_list_select_option = result_list_select_array[0].getElementsByTagName('option');
                // 判断option是否为空
                if (result_list_select_option && result_list_select_option.length > 1) {
                    // 获取要处理的table
                    var result_list_table = document.getElementById('result_list');
                    // 判空
                    if (result_list_table) {
                        // 获取所有行
                        var result_list_table_tr_all = result_list_table.getElementsByTagName("tr");
                        // 判空
                        if (result_list_table_tr_all && result_list_table_tr_all.length > 1) {
                            // 要追加的操作的按钮
                            var append_element_obj_array = [];
                            // 循环select的option生成按钮
                            for (var i = 1; i < result_list_select_option.length; i++) {
                                var result_list_select_option_i = result_list_select_option[i];
                                var result_list_select_option_i_text = result_list_select_option_i.text.split(" ")[0];
                                var append_element_obj = {};
                                // 创建th
                                var append_th_element = document.createElement('th');
                                append_th_element.scope = "col";
                                append_th_element.class = "sortable column-owner";
                                var append_th_element_div = document.createElement('div');
                                append_th_element_div.class = "text";
                                append_th_element_div.append(result_list_select_option_i_text);
                                append_th_element.appendChild(append_th_element_div);
                                append_element_obj.th = append_th_element;
                                // 创建td
                                var append_td_element = document.createElement('td');
                                append_td_element.class = "field-owner nowrap";
                                var append_td_element_input = document.createElement('input');
                                append_td_element_input.type = "button";
                                append_td_element_input.value = result_list_select_option_i_text;
                                append_td_element_input.title = result_list_select_option_i.text;
                                append_td_element_input.setAttribute('onclick', 'actionSubmitFun(this)');
                                append_td_element_input.setAttribute('selectValue', result_list_select_option_i.value);
                                if ("Enter" === result_list_select_option_i_text) {
                                    append_td_element_input.id = "enterBtnId";
                                }
                                append_td_element.appendChild(append_td_element_input);
                                append_element_obj.td = append_td_element;
                                // push 
                                append_element_obj_array.push(append_element_obj);
                            }
                            // 判断需添加操作按钮是否为空
                            if (append_element_obj_array.length > 0) {
                                // 循环添加按钮和title
                                for (var i = 0; i < append_element_obj_array.length; i++) {
                                    var append_element_obj_i = append_element_obj_array[i];
                                    if (append_element_obj_i.th && append_element_obj_i.td) {
                                        var flag = false;
                                        if ("enterBtnId" === append_element_obj_i.td.firstElementChild.id) {
                                            flag = true;
                                        }
                                        result_list_table_tr_all[0].appendChild(append_element_obj_i.th);
                                        for (var j = 1; j < result_list_table_tr_all.length; j++) {
                                            var append_element_obj_i_td_clone = append_element_obj_i.td.cloneNode(true);
                                            append_element_obj_i_td_clone.firstElementChild.id = ("enterBtnId" + result_list_table_tr_all[j].firstElementChild.firstElementChild.value);
                                            result_list_table_tr_all[j].appendChild(append_element_obj_i_td_clone);
                                        }
                                    }
                                }
                            }
                        }
                        var result_list_element_column_size = result_list_table.getElementsByClassName("column-size")[0];
                        if (result_list_element_column_size) {
                            result_list_element_column_size.getElementsByTagName("a")[0].text = "Size(KB)";
                        }
                    }
                }
                actionSubmitByIdFun = function actionSubmitById(btnElementId) {
                    actionSubmitFun(document.getElementById(btnElementId));
                };
            }
        }
        // 菜单调整
        // 查找所有的菜单组
        var sidebar_section_array = document.getElementsByClassName('sidebar-section');
        if (sidebar_section_array && sidebar_section_array.length > 1) {
            // 用于存放最后一组菜单组
            var sidebar_section_array_i = "";
            // 循环
            for (var i = 0; i < sidebar_section_array.length; i++) {
                //隐藏菜单组
                sidebar_section_array[i].style.display = "none";
                if (i === sidebar_section_array.length - 1) {
                    sidebar_section_array_i = sidebar_section_array[i];
                }
            }
            // 判断是否添加菜单组
            if (sidebar_section_array_i) {
                var space_name_tmp = space_name;
                if (!space_name_tmp) {
                    space_name_tmp = 'HOME'
                }
                var addMenuSciSpace = '<div class="sidebar-section">'
                    + '<a href="' + space_home_url + home_url + '" class="sidebar-link icon">' 
                    + '<span class="sidebar-link-label">' 
                    + '<span class="sidebar-link-icon icon-data"></span>' + space_name_tmp + '</span>' 
                    + '</a>' 
                    + '</div>';
                var addNewMenuData = '<div class="sidebar-section">'
                    + '<div class="sidebar-title">'
                    + '<a href="' + space_home_url + '/data/" class="sidebar-title-link">Data</a>'
                    + '</div>'
                    + '<div>'
                    + '<a href="' + space_home_url + '/data/dataset/" class="sidebar-link">' 
                    + '<span class="sidebar-right">' 
                    + '<span class="sidebar-right-arrow icon-arrow-right"></span>' 
                    + '</span>' 
                    + ' <span class="sidebar-link-label"><img src="/static/dataset.svg" class="menu-list-iocn">&nbsp;Datasets</span>' 
                    + '</a>' 
                    + '</div>'
                    + '<div>' 
                    + '<a href="' + space_home_url + '/data/datainstance/" class="sidebar-link">' 
                    + '<span class="sidebar-right">' 
                    + '<span class="sidebar-right-arrow icon-arrow-right"></span>' 
                    + '</span>' 
                    + '<span class="sidebar-link-label"><img src="/static/instances.svg" class="menu-list-iocn">&nbsp;Instances</span>' 
                    + '</a>' 
                    + '</div>' 
                    + '<div>' 
                    + '<a href="' + space_home_url + '/?Analysis" class="sidebar-link">' 
                    + '<span class="sidebar-right">' 
                    + '<span class="sidebar-right-arrow icon-arrow-right"></span>' 
                    + '</span>' 
                    + '<span class="sidebar-link-label"><img src="/static/pipeline.svg" class="menu-list-iocn">&nbsp;Data Pipeline</span>' 
                    + '</a>' 
                    + '</div>' 
                    + '<div>' 
                    + '<a href="' + space_home_url + '/?ZeppelinNotebook" class="sidebar-link">' 
                    + '<span class="sidebar-right">' 
                    + '<span class="sidebar-right-arrow icon-arrow-right"></span>' 
                    + '</span>' 
                    + '<span class="sidebar-link-label"><img src="/static/noteboot.svg" class="menu-list-iocn">&nbsp;Notebook</span>' 
                    + '</a>' 
                    + '</div>' 
                    + '</div>';
                // 添加Admin菜单组
                var addNewMenuAdmin = '<div class="sidebar-section">' 
                    + '<div class="sidebar-title">' 
                    + '<a href="' + space_home_url + '/?logHome" class="sidebar-title-link">Admin</a>' 
                    + '</div>'
                    + '<div>' 
                    + '<a href="' + space_home_url + '/engines/stepoperation/" class="sidebar-link">' 
                    + '<span class="sidebar-right">' 
                    + '<span class="sidebar-right-arrow icon-arrow-right"></span>' 
                    + '</span>' 
                    + '<span class="sidebar-link-label"><img src="/static/operaction.svg" class="menu-list-iocn">&nbsp;SciSpace Operations</span>' 
                    + '</a>' 
                    + '</div>' 
                    + '<div>'
                    //+ '<a href="' + space_home_url + '/data/datainstanceoperation/" class="sidebar-link">'
                    + '<a href="' + space_home_url + '/clouds/instanceoperation/?q=mkdir+-p+%2Fdata%2Fpackone%2F" class="sidebar-link">' 
                    + '<span class="sidebar-right">' 
                    + '<span class="sidebar-right-arrow icon-arrow-right"></span>' 
                    + '</span>' 
                    + '<span class="sidebar-link-label"><img src="/static/operaction.svg" class="menu-list-iocn">&nbsp;Instances Operations</span>' 
                    + '</a>' 
                    + '</div>' 
                    + '<div>' 
                    + '<a href="' + current_space_portal + '" target="_blank" class="sidebar-link">' 
                    + '<span class="sidebar-right">' 
                    + '<span class="sidebar-right-arrow icon-arrow-right"></span>' 
                    + '</span>' 
                    + '<span class="sidebar-link-label"><img src="/static/manage.svg" class="menu-list-iocn">&nbsp;Cluster Manage</span>' 
                    + '</a>' 
                    + '</div>' 
                    + '</div>';
                sidebar_section_array_i.outerHTML = (sidebar_section_array_i.outerHTML + addMenuSciSpace + addNewMenuData + addNewMenuAdmin);
            }
        }
        if (space_home_url + "/" === window_location_pathname) {
            var rightContent = document.getElementById("content");
            var breadcrumbs_initialized_html_element = document.getElementsByClassName('breadcrumbs initialized')[0];
            var window_location_search_param = window.location.search;
            var window_location_search_param_array_hive = window_location_search_param.split("?query_hive&");
            var window_location_search_param_array_hdfs = window_location_search_param.split("?query_hdfs&");
            var window_location_search_param_array_hbase = window_location_search_param.split("?query_hbase&");
            var window_location_search_param_array_eventDB = window_location_search_param.split("?query_eventDB&");
            var window_location_search_param_array_gstore = window_location_search_param.split("?query_gstore&");
            var window_location_search_param_array_astroServ = window_location_search_param.split("?query_astroServ&");
            var iframe_src = "";
            var iframe_js_data = "";
            var breadcrumbs_initialized_html = "";
            if (window_location_search_param_array_hive && window_location_search_param_array_hive.length > 1 && "" === window_location_search_param_array_hive[0]) {
                var window_location_search_param_array_hive_param = window_location_search_param_array_hive[1].split("&");
                if (window_location_search_param_array_hive_param && window_location_search_param_array_hive_param.length > 1) {
                    iframe_src = 'http://' + window_location_search_param_array_hive_param[0] + ':8888/beeswax/#query';
                    //iframe_src = 'http://10.0.88.141:8888/beeswax/#query';
                    breadcrumbs_initialized_html = '<a href="'+ space_home_url + home_url + '">Home</a>' 
                        + '<span class="icon-arrow-right breadcrumbs-separator"></span>' 
                        + '<a href="'+space_home_url+'/data/">Data</a>' 
                        + '<span class="icon-arrow-right breadcrumbs-separator"></span>' 
                        + '<a href="'+space_home_url+'/data/datainstance/">Data instances</a>' 
                        + '<span class="icon-arrow-right breadcrumbs-separator"></span>' 
                        + window_location_search_param_array_hive_param[1];
                    var function_param_str = window_location_search_param_array_hive_param[1].split(".")[0];
                    var param_database_fun = function (function_param) {
                        var selectDom = [];
                        var dom = document.getElementsByTagName("a");
                        for (var i = 0; i < dom.length; i++) {
                            if ("click: back" === dom[i].getAttribute("data-bind")) {
                                selectDom.push(dom[i]);
                            }
                        }
                        if (selectDom && selectDom.length > 0) {
                            selectDom[0].click();
                            var database_list = document.getElementsByClassName("assist-flex-fill assist-db-scrollable")[0];
                            var database_list_table_link = database_list.getElementsByClassName("assist-table-link");
                            if (database_list_table_link && database_list_table_link.length > 0) {
                                console.log(function_param);
                                for (var i = 0; i < database_list_table_link.length; i++) {
                                    if (function_param.trim() === database_list_table_link[i].text.trim()) {
                                        database_list_table_link[i].click();
                                        break;
                                    }
                                }
                            }
                        }
                    };
                    pre_execution = function pre_execution() {
                        var iframe_element = document.getElementById("iframe_id");
                        if (iframe_element.attachEvent) {
                            iframe_element.attachEvent("onload", function () {
                                //alert("本地iframe现在已加载。");
                                var hue_hive_choice_base_json = {
                                    "function_name": param_database_fun,
                                    "function_param": function_param_str,
                                }
                                sendMessage("iframe_id", hue_hive_choice_base_json);
                            });
                        } else {
                            iframe_element.onload = function () {
                                //alert("本地iframe现在已加载。");
                                var hue_hive_choice_base_json = {
                                    "function_name": param_database_fun,
                                    "function_param": function_param_str,
                                }
                                sendMessage("iframe_id", hue_hive_choice_base_json);
                            };
                        }
                    };
                }

            } else if (window_location_search_param_array_hdfs && window_location_search_param_array_hdfs.length > 1 && "" === window_location_search_param_array_hdfs[0]) {
                var window_location_search_param_array_hdfs_param = window_location_search_param_array_hdfs[1].split("&");
                if (window_location_search_param_array_hdfs_param && window_location_search_param_array_hdfs_param.length > 1) {
                    iframe_src = 'http://' + window_location_search_param_array_hdfs_param[0] + ':8888/filebrowser/#' + window_location_search_param_array_hdfs_param[1];
                    //iframe_src = 'http://10.0.88.141:8888/filebrowser/#' + window_location_search_param_array_hdfs_param[1];
                    breadcrumbs_initialized_html = '<a href="'+ space_home_url + home_url +'">Home</a>' 
                        + '<span class="icon-arrow-right breadcrumbs-separator"></span>' 
                        + '<a href="'+space_home_url+'/data/">Data</a>' 
                        + '<span class="icon-arrow-right breadcrumbs-separator"></span>' 
                        + '<a href="'+space_home_url+'/data/datainstance/">Data instances</a>' 
                        + '<span class="icon-arrow-right breadcrumbs-separator"></span>' 
                        + window_location_search_param_array_hdfs_param[1];
                }
            } else if (window_location_search_param_array_hbase && window_location_search_param_array_hbase.length > 1 && "" === window_location_search_param_array_hbase[0]) {
                var window_location_search_param_array_hbase_param = window_location_search_param_array_hbase[1].split("&");
                if (window_location_search_param_array_hbase_param && window_location_search_param_array_hbase_param.length > 0) {
                    iframe_src = 'http://' + window_location_search_param_array_hbase_param[0] + ':8888/hbase/';
                    //iframe_src = 'http://10.0.88.141:8888/hbase/';
                    breadcrumbs_initialized_html = '<a href="'+ space_home_url + home_url +'">Home</a>' 
                        + '<span class="icon-arrow-right breadcrumbs-separator"></span>' 
                        + '<a href="'+space_home_url+'/data/">Data</a>' 
                        + '<span class="icon-arrow-right breadcrumbs-separator"></span>' 
                        + '<a href="'+space_home_url+'/data/datainstance/">Data instances</a>' 
                        + '<span class="icon-arrow-right breadcrumbs-separator"></span>' 
                        + '';
                }
            } else if (window_location_search_param_array_eventDB && window_location_search_param_array_eventDB.length > 1 && "" === window_location_search_param_array_eventDB[0]) {
                var window_location_search_param_array_eventDB_param = window_location_search_param_array_eventDB[1].split("&");
                if (window_location_search_param_array_eventDB_param && window_location_search_param_array_eventDB_param.length > 1) {
                    var window_location_search_param_array_eventDB_param_array = window_location_search_param_array_eventDB_param[1].split("+");
                    if (window_location_search_param_array_eventDB_param_array && window_location_search_param_array_eventDB_param_array.length > 1) {
                        iframe_src = window_location_search_param_array_eventDB_param_array[0].replace(RegExp('%20', "g"), "");
                        breadcrumbs_initialized_html = '<a href="'+ space_home_url + home_url +'">Home</a>' 
                            + '<span class="icon-arrow-right breadcrumbs-separator"></span>' 
                            + '<a href="'+space_home_url+'/data/">Data</a>' 
                            + '<span class="icon-arrow-right breadcrumbs-separator"></span>' 
                            + '<a href="'+space_home_url+'/data/datainstance/">Data instances</a>' 
                            + '<span class="icon-arrow-right breadcrumbs-separator"></span>' 
                            + window_location_search_param_array_eventDB_param_array[1];
                    }
                }
            } else if (window_location_search_param_array_gstore && window_location_search_param_array_gstore.length > 1 && "" === window_location_search_param_array_gstore[0]) {
                var window_location_search_param_array_gstore_param = window_location_search_param_array_gstore[1].split("&");
                if (window_location_search_param_array_gstore_param && window_location_search_param_array_gstore_param.length > 1) {
                    var window_location_search_param_array_gstore_param_array = window_location_search_param_array_gstore_param[1].split("+");
                    if (window_location_search_param_array_gstore_param_array && window_location_search_param_array_gstore_param_array.length > 1) {
                        iframe_src = window_location_search_param_array_gstore_param_array[0].replace(RegExp('%20', "g"), "") + '/admin_root.html';
                        iframe_src = 'http://10.0.88.81:8006/gStorems/admin_root.html';
                        iframe_src = iframe_src.replace(RegExp('%20', "g"), "");
                        breadcrumbs_initialized_html = '<a href="'+ space_home_url + home_url +'">Home</a>' 
                            + '<span class="icon-arrow-right breadcrumbs-separator"></span>' 
                            + '<a href="'+space_home_url+'/data/">Data</a>' 
                            + '<span class="icon-arrow-right breadcrumbs-separator"></span>' 
                            + '<a href="'+space_home_url+'/data/datainstance/">Data instances</a>' 
                            + '<span class="icon-arrow-right breadcrumbs-separator"></span>' 
                            + window_location_search_param_array_gstore_param_array[1];
                    }

                }
            } else if (window_location_search_param_array_astroServ && window_location_search_param_array_astroServ.length > 1 && "" === window_location_search_param_array_astroServ[0]) {
                var window_location_search_param_array_astroServ_param = window_location_search_param_array_astroServ[1].split("&");
                if (window_location_search_param_array_astroServ_param && window_location_search_param_array_astroServ_param.length > 1) {
                    var param = window_location_search_param_array_astroServ_param[1].split("+")[0];
                    iframe_src = param.replace(RegExp('%20', "g"), "");
                    breadcrumbs_initialized_html = '<a href="'+ space_home_url + home_url +'">Home</a>' 
                        + '<span class="icon-arrow-right breadcrumbs-separator"></span>' 
                        + '<a href="'+space_home_url+'/data/">Data</a>' 
                        + '<span class="icon-arrow-right breadcrumbs-separator"></span>' 
                        + '<a href="'+space_home_url+'/data/datainstance/">Data instances</a>' 
                        + '<span class="icon-arrow-right breadcrumbs-separator"></span>' 
                        + '';
                }
            } else {
                if ("?Analysis" === window.location.search || "?Analysis#" === window.location.search) {
                    if (breadcrumbs_initialized_html_element) {
                        breadcrumbs_initialized_html_element.innerHTML = ('<a href="'+ space_home_url + home_url +'">Home</a>' 
                            + '<span class="icon-arrow-right breadcrumbs-separator"></span>' 
                            + 'Pipeline');
                    }
                    loadPipeline(piflow_id_port + '/piflow-web/web/flowList?first');
                } else if ("?ZeppelinNotebook" === window.location.search || "?ZeppelinNotebook#" === window.location.search) {
                    if (breadcrumbs_initialized_html_element) {
                        breadcrumbs_initialized_html_element.innerHTML = ('<a href="'+ space_home_url + home_url +'">Home</a>' 
                            + '<span class="icon-arrow-right breadcrumbs-separator"></span>' 
                            + 'Notebook');
                    }
                    getNoteBookList(zeppelin_id_port);
                } else if ("?logHome" === window.location.search || "?logHome#" === window.location.search) {
                    var cf_children = document.getElementsByClassName("dashboard-container cf")[0].children;
                    if (cf_children && cf_children.length > 0) {
                        for (var i = 0; i < cf_children.length; i++) {
                            var cf_children_dashboard_item_header_title = cf_children[i].getElementsByClassName("dashboard-item-header-title")[0];
                            if (cf_children_dashboard_item_header_title && "Applications" === cf_children_dashboard_item_header_title.textContent.trim()) {
                                cf_children[i].getElementsByClassName("dashboard-item-header-title")[0].textContent = "Application models";
                                cf_children[i].getElementsByClassName("dashboard-item-header-buttons")[0].style.display = "none";
                                var cf_children_i_ul = cf_children[i].getElementsByTagName("ul")[0];
                                cf_children_i_ul.style.display = "none";
                                var cf_children_i_ul_new = "<ul>" 
                                    + '<li class="contrast"><a href="' + space_home_url + '/?logHome" title="Models in the log application">Admin</a></li>' 
                                    + '<li><a href="' + space_home_url + '/engines/stepoperation/">SciSpace Operations</a></li>'
                                    //+ '<li><a href="' + space_home_url + '/data/datainstanceoperation/">Instances Operations</a></li>'
                                    + '<li><a href="' + space_home_url + '/clouds/instanceoperation/?q=mkdir+-p+%2Fdata%2Fpackone%2F">Instances Operations</a></li>'

                                    + '<li><a href="' + current_space_portal + '" target="_blank">Cluster Manage</a></li>' 
                                    + "</ul>";
                                cf_children_i_ul.outerHTML = (cf_children_i_ul.outerHTML + cf_children_i_ul_new);
                            } else {
                                cf_children[i].style.display = "none";
                            }
                        }
                    }
                    breadcrumbs_initialized_html = '<a href="'+ space_home_url + home_url +'">Home</a>' 
                        + '<span class="icon-arrow-right breadcrumbs-separator"></span>' 
                        + 'Admin';
                } else {
                    // var element_first_div = document.getElementsByClassName('dashboard-column first ui-droppable ui-sortable')[0];
                    // if (element_first_div) {
                    //     var element_first_div_inner_html = element_first_div.innerHTML;
                    //     var state_div = '';
                    //     element_first_div.innerHTML = state_div + element_first_div_inner_html;
                    // }
                    // var cf_children = document.getElementsByClassName("dashboard-container cf")[0].children;
                    // if (cf_children && cf_children.length > 0) {
                    //     for (var i = 0; i < cf_children.length; i++) {
                    //         var titleElemet = cf_children[i].getElementsByClassName("dashboard-item-header-title")[0];
                    //         if (titleElemet) {
                    //             if ("Applications" === titleElemet.textContent.trim()) {
                    //                 cf_children[i].getElementsByClassName("dashboard-item-header-buttons")[0].style.display = "none";
                    //                 var cf_children_i_ul = cf_children[i].getElementsByTagName("ul")[0];
                    //                 cf_children_i_ul.style.display = "none";
                    //                 var cf_children_i_ul_new = "<ul>"
                    //                     + '<li class="contrast"><a href="' + space_home_url + '/data/" title="Models in the data application">Data</a></li>'
                    //                     + '<li><a href="' + space_home_url + '/data/dataset/">Datasets</a></li>'
                    //                     + '<li><a href="' + space_home_url + '/data/datainstance/">Instances</a></li>'
                    //                     + '<li><a href="' + space_home_url + '/?Analysis">Data Pipeline</a></li>'
                    //                     + '<li><a href="' + space_home_url + '/?ZeppelinNotebook">Notebook</a></li>'
                    //                     + '<li class="contrast"><a href="' + space_home_url + '/?logHome" title="Models in the log application">Admin</a></li>'
                    //                     + '<li><a href="' + space_home_url + '/engines/stepoperation/">SciSpace Operations</a></li>'
                    //                     //+ '<li><a href="' + space_home_url + '/data/datainstanceoperation/">Instances Operations</a></li>'
                    //                     + '<li><a href="' + space_home_url + '/clouds/instanceoperation/?q=mkdir+-p+%2Fdata%2Fpackone%2F">Instances Operations</a></li>'
                    //                     + '<li><a href="' + current_space_portal + '" target="_blank">Cluster Manage</a></li>'
                    //                     + "</ul>";
                    //                 cf_children_i_ul.outerHTML = (cf_children_i_ul.outerHTML + cf_children_i_ul_new);
                    //             }
                    //         }
                    //     }
                    // }



                    //随时注释
                    var content_element = document.getElementById("content");
                    content_element.style.display = 'none';
                    var content_element_new = '<div id="content_new" class="colM">' 
                        + '<h1 style="text-align: center;">Space Overview</h1>' 
                        + '<div style="margin: 16px;">' 
                        + '<table style="width: 100%;">' 
                        + '<tr style="display: none;"><td>' 
                        + '<table id="metics_table_id" style="width: 100%;">' 
                        + '<tr id="metics_table_tr_id">' 
                        + '<th style="width: 50%;"><span>Cluster Overview</span></th>' 
                        + '<th style="width: 50%;"></th>' 
                        //+ '<th style="width: 33.33%;"></th>' 
                        + '</tr>' 
                        + '</table>' 
                        + '</td></tr>' 
                        + '<tr style="display: none;"><td>' 
                        + '<table id="dataset_table_id" style="width: 100%;">' 
                        + '<tr>' 
                        + '<th style="width: 50%;"><span>Dataset Overview</span></th>' 
                        + '<th style="width: 50%;"></th>' 
                        + '</tr>' 
                        + '<tr>' 
                        + '<td>' 
                        + '<div id="dataset_1" style="height: 300px;"></div>' 
                        + '</td>' 
                        + '<td>' 
                        + '<div id="dataset_2" style="height: 300px;"></div>' 
                        + '</td>' 
                        + '</tr>' 
                        + '</table>' 
                        + '</td></tr>' 
                        + '<tr style="display: none;"><td>' 
                        + '<table id="instance_table_id" style="width: 100%;">' 
                        + '<tr>' 
                        + '<th style="width: 100%;"><span>Instance Overview</span></th>' 
                        + '</tr>' 
                        + '<tr>' 
                        + '<td>' 
                        + '<div id="instance_1" style="height: 300px;"></div>' 
                        + '</td>' 
                        + '</tr>' 
                        + '</table>' 
                        + '</td></tr>' 
                        + '<tr style="display: none;"><td>' 
                        + '<table id="pipeline_table_id_1" style="width: 100%;">' 
                        + '<tr id="pipeline_table_tr_id_1">' 
                        + '<th style="width: 100%;"><span>Pipeline Overview</span></th>' 
                        + '</tr>' 
                        + '</table>' 
                        + '</td></tr>' 
                        + '<tr style="display: none;"><td>' 
                        + '<table id="notebook_table_id_1" style="width: 100%;">' 
                        + '<tr id="notebook_table_tr_id_1">' 
                        + '<th style="width: 100%;"><span>Notebook Overview</span></th>' 
                        + '</tr>' 
                        + '</table>' 
                        + '</td></tr>' 
                        + '</table>' 
                        + '</div>' 
                        + '</div>';
                    content_element.outerHTML = (content_element_new + content_element.outerHTML);
                    jQuery(function($) {
                        $.get(space_home_url + "/api/data/state/", function(data) {
                        
                            var metics_array = data.cluster.metics
                            if (metics_array && metics_array.length > 0) {
                                var metics_table = document.getElementById("metics_table_id");
                                metics_table.parentElement.parentElement.style.display="";
                                var metics_table_tr = document.getElementById("metics_table_tr_id");
                                var metics_table_tr_all = "";
                                for (var i = 0; i < metics_array.length; i++) {
                                    if((i + 1) % 2 === 1){
                                        metics_table_tr_all += '<tr>' ;
                                    }
                                    metics_table_tr_all += ('<td style="width: 50%;"><div id="disk' + i + '" style="height: 300px;"></div></td>');
                                    if((i + 1) % 2 === 1 && i !== 0){
                                        metics_table_tr_all += '</tr>' ;
                                    }
                                }
                                metics_table_tr.outerHTML = (metics_table_tr.outerHTML + metics_table_tr_all);
                                for (var i = 0; i < metics_array.length; i++) {

                                    var disk_div_element = document.getElementById('disk' + i);
                                    var diskChart = echarts.init(disk_div_element);

                                    var metics_array_i = metics_array[i];
                                    var option = {
                                        title: {
                                            text: metics_array_i.Hosts.host_name + ' 统计',
                                            //subtext: '虚构数据',
                                            left: 'center'
                                        },
                                        color: ['#99d2dd', '#1c7099'],
                                        tooltip: {
                                            trigger: 'item',
                                            formatter: "{a} <br/>{b} : {c}"
                                        },
                                        series: [
                                            {
                                                name: '磁盘使用率：',
                                                type: 'pie',
                                                radius: '75%',
                                                center: ['30%', '55%'],
                                                data: [{
                                                    value: metics_array_i.metrics.disk.disk_free,
                                                    name: '磁盘空闲'
                                                }, {
                                                    value: (metics_array_i.metrics.disk.disk_total - metics_array_i.metrics.disk.disk_free).toFixed(2),
                                                    name: '磁盘使用'
                                                }],
                                                itemStyle: {
                                                    emphasis: {
                                                        show: true,
                                                        textStyle: {
                                                            fontSize: '30',
                                                            fontWeight: 'bold'
                                                        }
                                                    },
                                                    normal: {
                                                        position: 'center',
                                                        label: {
                                                            formatter: function(a, b, c, d) {
                                                                //return a.data.name + '：' + (a.data.value / 7601 * 100).toFixed(2) + '%<br>';
                                                                return a.data.name + '：' + a.data.value + 'GB ';
                                                            },
                                                            textStyle: {
                                                                baseline: 'top',
                                                                fontSize: '12',
                                                                fontWeight: 'bold'
                                                            }
                                                        }
                                                    },
                                                }
                                            },
                                            {
                                                name: '内存已使用(GB)',
                                                type: 'gauge',
                                                radius: '75%',
                                                center: ['70%', '60%'],
                                                min: 0,
                                                max: (metics_array_i.metrics.memory.mem_total/(1024*1024)).toFixed(1),
                                                axisLine: {            // 坐标轴线
                                                    lineStyle: {       // 属性lineStyle控制线条样式
                                                        width: 10
                                                    }
                                                },
                                                axisTick: {            // 坐标轴小标记
                                                    length: 15,        // 属性length控制线长
                                                    lineStyle: {       // 属性lineStyle控制线条样式
                                                        color: 'auto'
                                                    }
                                                },
                                                splitLine: {           // 分隔线
                                                    length: 20,         // 属性length控制线长
                                                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                                        color: 'auto'
                                                    }
                                                },
                                                //detail: {formatter:'{value}'},
                                                data: [{
                                                    value: ((metics_array_i.metrics.memory.mem_total - metics_array_i.metrics.memory.mem_free)/(1024*1024)).toFixed(2), 
                                                    name: '内存(GB)'
                                                    }]
                                            }
                                        ]
                                    };
                                    diskChart.setOption(option);
                                }
                            }

                            var data_sets_type_cnt = data.dataset.type_cnt;
                            if (data_sets_type_cnt && data_sets_type_cnt.length > 0) {
                                document.getElementById("dataset_table_id").parentElement.parentElement.style.display = "";
                                var dataset_div_element_1 = document.getElementById('dataset_1');
                                var dataset_chart_1_option_data_x = [];
                                var dataset_chart_1_option_data_y = [];
                                for (var i = 0; i < data_sets_type_cnt.length; i++) {
                                    dataset_chart_1_option_data_x.push(data_sets_type_cnt[i].type);
                                    dataset_chart_1_option_data_y.push(data_sets_type_cnt[i].cnt);
                                }
                                var dataset_chart_1 = echarts.init(dataset_div_element_1);
                                var dataset_chart_1_option = {
                                    title: {
                                        text: '各种类型数据数量',
                                        subtext: '',
                                        left: 'center'
                                    },
                                    color: ['#3398DB'],
                                    tooltip: {
                                        trigger: 'axis',
                                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                                        }
                                    },
                                    grid: {
                                        left: '3%',
                                        right: '4%',
                                        bottom: '3%',
                                        containLabel: true
                                    },
                                    xAxis: [{
                                        type: 'category',
                                        //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                                        data: dataset_chart_1_option_data_x,
                                        axisTick: {
                                            alignWithLabel: true
                                        }
                                    }],
                                    yAxis: [{
                                        type: 'value',
                                        axisLabel:{formatter:'{value}'}
                                    }],
                                    series: [{
                                        name: '大小',
                                        type: 'bar',
                                        barWidth: '60%',
                                        //data: [10, 51, 100, 334, 390, 330, 110]
                                        data: dataset_chart_1_option_data_y
                                    }]
                                };
                                dataset_chart_1.setOption(dataset_chart_1_option);
                            }

                            var data_sets_type_size = data.dataset.type_size;
                            if (data_sets_type_size && data_sets_type_size.length > 0) {
                                document.getElementById("dataset_table_id").parentElement.parentElement.style.display = "";
                                var dataset_div_element_2 = document.getElementById('dataset_2');
                                var dataset_chart_2_option_data_x = [];
                                var dataset_chart_2_option_data_y = [];
                                for (var i = 0; i < data_sets_type_size.length; i++) {
                                    dataset_chart_2_option_data_x.push(data_sets_type_size[i].type);
                                    dataset_chart_2_option_data_y.push(data_sets_type_size[i].size);
                                }
                                var dataset_chart_2 = echarts.init(dataset_div_element_2);
                                var dataset_chart_2_option = {
                                    title: {
                                        text: '各种类型数据占用空间',
                                        subtext: '',
                                        left: 'center'
                                    },
                                    color: ['#3398DB'],
                                    tooltip: {
                                        trigger: 'axis',
                                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                                        }
                                    },
                                    grid: {
                                        left: '3%',
                                        right: '4%',
                                        bottom: '3%',
                                        containLabel: true
                                    },
                                    xAxis: [{
                                        type: 'category',
                                        //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                                        data: dataset_chart_2_option_data_x,
                                        axisTick: {
                                            alignWithLabel: true
                                        }
                                    }],
                                    yAxis: [{
                                        type: 'value',
                                        axisLabel:{formatter:'{value} KB'}
                                    }],
                                    series: [{
                                        name: '大小：',
                                        type: 'bar',
                                        barWidth: '60%',
                                        //data: [10, 52, 200, 334, 390, 330, 220]
                                        data: dataset_chart_2_option_data_y,
                                        normal: {
                                            position: 'center',
                                            label: {
                                                formatter: function(a, b, c, d) {
                                                    //return a.data.name + '：' + (a.data.value / 7601 * 100).toFixed(2) + '%<br>';
                                                    return a.data.name + '：' + a.data.value + 'GB ';
                                                }
                                            }
                                        },
                                    }]
                                };
                                dataset_chart_2.setOption(dataset_chart_2_option);
                            }

                            var data_instance_type_cnt = data.instance.type_cnt;
                            if (data_instance_type_cnt && data_instance_type_cnt.length > 0) {
                                document.getElementById("instance_table_id").parentElement.parentElement.style.display = "";
                                var instance_div_element_1 = document.getElementById('instance_1');
                                var instance_chart_1_option_data_x = [];
                                var instance_chart_1_option_data_y = [];
                                for (var i = 0; i < data_instance_type_cnt.length; i++) {
                                    instance_chart_1_option_data_x.push(data_instance_type_cnt[i].dataset__type);
                                    instance_chart_1_option_data_y.push(data_instance_type_cnt[i].cnt);
                                }
                                var instance_chart_1 = echarts.init(instance_div_element_1);
                                var instance_chart_1_option = {
                                    title: {
                                        text: '',
                                        subtext: '',
                                        left: 'center'
                                    },
                                    color: ['#3398DB'],
                                    tooltip: {
                                        trigger: 'axis',
                                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                                        }
                                    },
                                    grid: {
                                        left: '3%',
                                        right: '4%',
                                        bottom: '3%',
                                        containLabel: true
                                    },
                                    xAxis: [{
                                        type: 'category',
                                        //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                                        data: instance_chart_1_option_data_x,
                                        axisTick: {
                                            alignWithLabel: true
                                        }
                                    }],
                                    yAxis: [{
                                        type: 'value'
                                    }],
                                    series: [{
                                        name: '数量',
                                        type: 'bar',
                                        barWidth: '60%',
                                        //data: [10, 52, 200, 334, 390, 330, 220]
                                        data: instance_chart_1_option_data_y
                                    }]
                                };
                                instance_chart_1.setOption(instance_chart_1_option);
                            }
                        });
                        $.get(piflow_id_port + "/piflow-web/api/flowList", function(result) {
                            if (result) {
                                var rtnMap = JSON.parse(result);
                                console.log(rtnMap);
                                if (1 === rtnMap.code) {
                                    var result_data = rtnMap.data;
                                    if (result_data && result_data.length > 0) {
                                        var pipeline_1_table = document.getElementById("pipeline_table_id_1");
                                        pipeline_1_table.parentElement.parentElement.style.display="";
                                        var pipeline_1_table_tr = document.getElementById("pipeline_table_tr_id_1");
                                        
                                        var pipeline_table_element = '';
                                        for (var i = 0; i < result_data.length; i++) {
                                            pipeline_table_element += ('<tr><td>' + result_data[i].name + '</td></tr>')
                                        }
                                        pipeline_1_table_tr.outerHTML = (pipeline_1_table_tr.outerHTML + pipeline_table_element);
                                    }
                                }
                            }
                        });
                        $.get(zeppelin_id_port + "/api/notebook", function(result) {
                            if (result) {
                                if ("OK" === result.status) {
                                    var result_body = result.body;
                                    if (result_body && result_body.length > 0) {
                                        var notebook_1_table = document.getElementById("notebook_table_id_1");
                                        notebook_1_table.parentElement.parentElement.style.display="";
                                        var notebook_1_table_tr = document.getElementById("notebook_table_tr_id_1");
                                        
                                        var notebook_table_element = '';
                                        for (var i = 0; i < result_body.length; i++) {
                                            notebook_table_element += ('<tr><td>' + result_body[i].name + '</td></tr>')
                                        }
                                        notebook_1_table_tr.outerHTML = (notebook_1_table_tr.outerHTML + notebook_table_element);
                                    }
                                }
                            }
                        });
                    });
                    //随时注释
                }
            }
            if (iframe_src) {
                rightContent.innerHTML = ('<iframe id="iframe_id" style="width: 100%; height: 1500px;border-width: 0px;" src="' + iframe_src + '"></iframe>');
                if (breadcrumbs_initialized_html_element && breadcrumbs_initialized_html) {
                    breadcrumbs_initialized_html_element.innerHTML = breadcrumbs_initialized_html;
                }
            }
        }
        if (space_home_url + "/data/" === window_location_pathname) {
            var cf_children = document.getElementsByClassName("dashboard-container cf")[0].children;
            if (cf_children && cf_children.length > 0) {
                for (var i = 0; i < cf_children.length; i++) {
                    var cf_children_dashboard_item_header_title = cf_children[i].getElementsByClassName("dashboard-item-header-title")[0];
                    if (cf_children_dashboard_item_header_title && "Application models" === cf_children_dashboard_item_header_title.textContent.trim()) {
                        cf_children[i].getElementsByClassName("dashboard-item-header-buttons")[0].style.display = "none";
                        var cf_children_i_ul = cf_children[i].getElementsByTagName("ul")[0];
                        cf_children_i_ul.style.display = "none";
                        var cf_children_i_ul_new = "<ul>" 
                            + '<li><a href="' + space_home_url + '/data/dataset/">Datasets</a></li>' 
                            + '<li><a href="' + space_home_url + '/data/datainstance/">Instances</a></li>' 
                            + '<li><a href="' + space_home_url + '/?Analysis">Data Pipeline</a></li>' 
                            + '<li><a href="' + space_home_url + '/?ZeppelinNotebook">Notebook</a></li>' 
                            + "</ul>";
                        cf_children_i_ul.outerHTML = (cf_children_i_ul.outerHTML + cf_children_i_ul_new);
                    } else {
                        cf_children[i].style.display = "none";
                    }
                }
            }
        }
        if (space_home_url + "/data/dataset/" === window_location_pathname) {
            var addlink_element_array = document.getElementsByClassName("addlink");
            if (addlink_element_array && addlink_element_array.length > 0) {
                for (var i = 0; i < addlink_element_array.length; i++) {
                    if (space_home_url + "/data/dataset/add/" === addlink_element_array[i].getAttribute("href")) {
                        addlink_element_array[i].style.display = "none";
                    }
                }
            }
            var field_type_element = document.getElementsByClassName("field-type");
            if (field_type_element && field_type_element.length > 0) {
                var dataset_type = new Object();
                dataset_type["RELATIONAL"] = '<img src="/static/hive.svg" class="dateset-list-iocn">&nbsp;';
                dataset_type["RAW"] = '<img src="/static/hdfs.svg" class="dateset-list-iocn">&nbsp;';
                dataset_type["SEMISTUCTED"] = '<img src="/static/hive.svg" class="dateset-list-iocn">&nbsp;';
                dataset_type["EVENT"] = '<img src="/static/event.svg" class="dateset-list-iocn">&nbsp;';
                dataset_type["GRAPH"] = '<img src="/static/gstore.svg" class="dateset-list-iocn">&nbsp;';
                dataset_type["STAR"] = '<img src="/static/star.svg" class="dateset-list-iocn">&nbsp;';
                for (var i = 0; i < field_type_element.length; i++) {
                    if (field_type_element[i].textContent && dataset_type[field_type_element[i].textContent.toUpperCase()]) {
                        //field_type_element[i].innerHTML = (dataset_type[field_type_element[i].textContent.toUpperCase()] + field_type_element[i].innerHTML);
                        var field_name_element = field_type_element[i].parentElement.getElementsByClassName("field-name");
                        if (field_name_element) {
                            field_name_element[0].innerHTML = (dataset_type[field_type_element[i].textContent.toUpperCase()] + field_name_element[0].innerHTML);
                        }
                    }
                }
            }
        }
        if (space_home_url + "/data/datainstance/" === window_location_pathname) {
            var result_list_table = document.getElementById('result_list');
            if (result_list_table) {
                var result_list_table_td_array = document.getElementsByClassName("field-query");
                var hide_result_list_table_array = [];
                if (result_list_table_td_array && result_list_table_td_array.length > 0) {
                    var type_array_obj = new Object();
                    type_array_obj["relational"] = "hive";
                    type_array_obj["raw"] = "hdfs";
                    type_array_obj["semistructed"] = "hbase";
                    type_array_obj["event"] = "eventDB";
                    type_array_obj["graph"] = "gstore";
                    type_array_obj["star"] = "astroServ";
                    for (var i = 0; i < result_list_table_td_array.length; i++) {
                        var result_list_table_td_array_i_f_child = result_list_table_td_array[i].firstElementChild
                        if (result_list_table_td_array_i_f_child) {
                            var query_a = '<a href="javascript:void(0);" class="button">Query</a>';
                            result_list_table_td_array_i_f_child.style.display = "none";
                            var result_list_table_td_array_i_f_child_type = result_list_table_td_array_i_f_child.getAttribute("type");
                            var result_list_table_td_array_i_f_child_href = result_list_table_td_array_i_f_child.getAttribute("href");
                            var query_url = "";
                            var result_list_table_td_array_i_parent = result_list_table_td_array[i].parentElement.getElementsByClassName("field-uri")[0];
                            if (result_list_table_td_array_i_parent && result_list_table_td_array_i_parent.textContent) {
                                query_url = result_list_table_td_array_i_parent.textContent;
                            }
                            if (type_array_obj[result_list_table_td_array_i_f_child_type]) {
                                var query_a_href = space_home_url 
                                    + '/?query_' + type_array_obj[result_list_table_td_array_i_f_child_type] + '&' 
                                    + result_list_table_td_array_i_f_child_href;
                                if (query_url) {
                                    query_a_href += ('&' + query_url);
                                }
                                query_a = '<a href="' + query_a_href + '" class="button">Query</a>';
                            }
                            result_list_table_td_array_i_f_child.outerHTML = (result_list_table_td_array_i_f_child.outerHTML + query_a);
                        }
                    }
                }
                var column_action_elements = document.getElementsByClassName("column-action");
                if (column_action_elements && column_action_elements.length > 0) {
                    for (var i = 0; i < column_action_elements.length; i++) {
                        column_action_elements[i].style.display = "none";
                    }
                }
                var field_action_elements = document.getElementsByClassName("field-action");
                if (field_action_elements && field_action_elements.length > 0) {
                    for (var i = 0; i < field_action_elements.length; i++) {
                        field_action_elements[i].style.display = "none";
                    }
                }
            }
        }
        // cluster table 转卡片显示
        if ('/engines/cluster/' === window_location_pathname) {
            // 关闭菜单
            if (hasClassCustom(document.getElementsByTagName("body")[0], "menu-pinned")) {
                document.getElementById('branding-pin').click();
            }
            // 隐藏无用导航
            hideElementArray(document.getElementsByClassName('breadcrumbs initialized')[0].getElementsByTagName('a'));
            hideElementArray(document.getElementsByClassName('breadcrumbs initialized')[0].getElementsByTagName('span'));
            document.getElementsByClassName('breadcrumbs initialized')[0].style.display = "none";
            document.getElementsByClassName('breadcrumbs initialized')[0].outerHTML = ('<p style="text-align: center;margin-top: 10px;"><img style="width: 180px;" src="/static/logo-large.png"></p>' 
                + document.getElementsByClassName('breadcrumbs initialized')[0].outerHTML);
            document.getElementById('container').firstElementChild.style.display = "none";

            var contentElement = document.getElementById('content');
            var contentElementNew = '<div id="contentNew" class="flex">'
                //+ '<p style="text-align: center;font-size: 26px;">Scispace List</p>'
                + '<p style="text-align: right;margin-top: -10px;">' 
                + '<a href="/engines/cluster/add/" class="addlink button aHrefHover">New Space</a>' 
                + '</p>' 
                + '<div class="dashboard-container columns_4 cf">';
            var result_list_cluster = document.getElementById('result_list');
            if (result_list_cluster) {
                var result_list_cluster_tr = result_list_cluster.getElementsByTagName('tr');
                if (result_list_cluster_tr && result_list_cluster_tr.length > 1) {
                    for (var i = 1; i < result_list_cluster_tr.length; i++) {
                        contentElementNew += ('<div class="dashboard-column-wrapper">' 
                            + '<div class="dashboard-column ui-droppable ui-sortable">' 
                            + '<div id="addDivElement' + i + '" class="dashboard-item collapsible deletable draggable">' 
                            + '<div class="dashboard-item-header ui-sortable-handle">' 
                            + '<span class="dashboard-item-header-title">' 
                            + '<a href="javascript:openStyle(\'addDivElement' + i + '\');" class="dashboard-item-collapse">' 
                            + '<span class="dashboard-item-header-collapse-button icon-arrow-down"></span>' 
                            + '</a>' 
                            + '<a href="javascript:closedStyle(\'addDivElement' + i + '\');" class="dashboard-item-collapse">' 
                            + '<span class="dashboard-item-header-collapse-button icon-arrow-up"></span>' 
                            + result_list_cluster_tr[i].getElementsByTagName('th')[0].getElementsByTagName('a')[0].innerText 
                            + '</a>' 
                            + '</span>' 
                            + '<div class="cf"></div>' 
                            + '</div>' 
                            + '<div class="dashboard-item-content">' 
                            + '<table>' 
                            + '<tbody>');
                        var result_list_cluster_tr_td_all = result_list_cluster_tr[i].getElementsByTagName('td');
                        if (result_list_cluster_tr_td_all && result_list_cluster_tr_td_all.length > 7) {
                            var clusterSpace = result_list_cluster_tr_td_all[0].getElementsByTagName("input")[0].value;
                            contentElementNew += ('<tr>' 
                                + '<td style="width: 31%;">Scale</td>' 
                                + '<td style="width: 69%;">：&nbsp;&nbsp;' + result_list_cluster_tr_td_all[1].innerHTML + '</td>' 
                                + '</tr>' 
                                + '<tr>' 
                                + '<td style="width: 31%;">Remark</td>' 
                                + '<td style="width: 69%;">：&nbsp;&nbsp;' + result_list_cluster_tr_td_all[2].innerHTML + '</td>' 
                                + '</tr>' 
                                + '<tr>' 
                                + '<td style="width: 31%;">Public</td>' 
                                + '<td style="width: 69%;">：&nbsp;&nbsp;' + result_list_cluster_tr_td_all[3].innerHTML + '</td>' 
                                + '</tr>' 
                                + '<tr>' 
                                + '<td style="width: 31%;">Owner</td>' 
                                + '<td style="width: 69%;">：&nbsp;&nbsp;' + result_list_cluster_tr_td_all[4].innerHTML + '</td>' 
                                + '</tr>' 
                                + '<tr>' 
                                + '<td style="width: 31%;">Created Time</td>' 
                                + '<td style="width: 69%;">：&nbsp;&nbsp;' + result_list_cluster_tr_td_all[5].innerHTML + '</td>' 
                                + '</tr>' 
                                + '<td style="width: 31%;">Built Time</td>' 
                                + '<td style="width: 69%;">：&nbsp;&nbsp;' + result_list_cluster_tr_td_all[6].innerHTML + '</td>' 
                                + '</tr>' 
                                + '<td style="width: 31%;">Status</td>' 
                                + '<td style="width: 69%;">：&nbsp;&nbsp;' + result_list_cluster_tr_td_all[7].innerHTML + '</td>' 
                                + '</tr>' 
                                + '</tr>' 
                                + '<td colspan="2">'
                                // + '<a class="button aHrefHover" title="Enter Space" name="index" href="#" onclick="actionSubmitByIdFun(\'enterBtnId' + result_list_cluster_tr_td_all[0].firstElementChild.value + '\')" >Enter</a></td>' 
                                + '<a class="button aHrefHover" title="Enter Space" name="index" href="/space/' + clusterSpace + home_url + '" target="_blank">OPEN IT</a></td>' 
                                + '</tr>');
                        }
                        contentElementNew += ('</tbody>' 
                            + '</table>' 
                            + '</div>' 
                            + '</div>' 
                            + '</div>' 
                            + '</div>');
                    }
                }
            }
            contentElementNew += '</div></div>';
            contentElement.outerHTML = contentElementNew + contentElement.outerHTML;
            var html_head_title = document.getElementsByTagName("head")[0].getElementsByTagName("title")[0];
            html_head_title.text = "SciSpace";
        }
        // modify cluster add page
        if (space_home_url + '/engines/cluster/add/' === window_location_pathname) {
            // close menu
            if (hasClassCustom(document.getElementsByTagName("body")[0], "menu-pinned")) {
                document.getElementById('branding-pin').click();
            }
            // hide useless navigation
            document.getElementById('container').firstElementChild.style.display = "none";
            var breadcrumbs_initialized_element = document.getElementsByClassName('breadcrumbs initialized')[0];
            if (breadcrumbs_initialized_element) {
                breadcrumbs_initialized_element.style.display = "none";
                breadcrumbs_initialized_element.outerHTML = (breadcrumbs_initialized_element.outerHTML + '<div class="breadcrumbs initialized">' 
                    + '<a href="/engines/cluster/">Spaces</a>' 
                    + '<span class="icon-arrow-right breadcrumbs-separator"></span> New Space' 
                    + '</div>');
            }
            // modify and hide button
            document.getElementsByClassName("submit-row")[0].firstElementChild.value = "Add";
            var submit_row_inputs = document.getElementsByClassName("submit-row")[0].getElementsByTagName("input");
            if (submit_row_inputs && submit_row_inputs.length > 0) {
                for (var i = 1; i < submit_row_inputs.length; i++) {
                    submit_row_inputs[i].style.display = "none";
                }
            }
            // 多选平铺
            //查询到因select2隐藏的select
            var select_elements_array = document.getElementsByClassName("select2-hidden-accessible");
            //判断select是否有下拉项
            if (select_elements_array && select_elements_array.length > 0) {
                // 需要修改的数组
                var select_element_update_array = [];
                // 循环处理select(筛选需要修改的)
                for (var j = 0; j < select_elements_array.length; j++) {
                    if (select_elements_array[j] && "" === select_elements_array[j].getAttribute('multiple')) {
                        var update_select_obj = {}
                            // 需要修改的select
                        update_select_obj.select = select_elements_array[j];
                        // 需要修改select的父元素
                        update_select_obj.parent = select_elements_array[j].parentElement;
                        // 需要修改select父元素
                        update_select_obj.parent_last_child = select_elements_array[j].parentElement.lastElementChild;
                        // push进需修改的数组
                        select_element_update_array.push(update_select_obj);
                    }
                }
                // 循环处理需要修改的数组
                for (var j = 0; j < select_element_update_array.length; j++) {
                    // 数组中第一个元素
                    var select_element_obj_j = select_element_update_array[j];
                    // 取select的name
                    var select_elements_j_name = select_element_obj_j.select.getAttribute("name");
                    // 取select的option
                    var select_elements_j_opt = select_element_obj_j.select.getElementsByTagName('option');
                    // 判断取出的select的option是否为空
                    if (select_elements_j_opt && select_elements_j_opt.length > 0) {
                        // 把select转为checkbox并添加样式
                        var elements_checkbox = '<div class="RadioStyle"><div class="Block PaddingL"><table>';
                        for (var i = 0; i < select_elements_j_opt.length; i++) {
                            if (i === 0) {
                                elements_checkbox += '<tr><th colspan="4"><button id="select_all_btn" type="button" onclick="select_all()" class="button">Select All</button></th></tr><tr>';
                            } else if ((i + 1) % 4 === 1) {
                                elements_checkbox += '</tr><tr>';
                            }
                            var checkBox_id = ('love' + j + i);
                            var checkBox_html = "";
                            var label_html = "";
                            var select_engines = new Object();
                            select_engines["HDFS"] = "HDFS";
                            select_engines["HIVE"] = "HIVE";
                            select_engines["YARN"] = "YARN";
                            select_engines["ZEPPELIN"] = "ZEPPELIN";
                            select_engines["MAPREDUCE2"] = "MAPREDUCE2";
                            select_engines["HUE"] = "HUE";
                            //select_engines["GSTORE"] = "GSTORE";
                            //select_engines["EVENTDB"] = "EVENTDB";
                            //select_engines["ASTROSERV"] = "ASTROSERV";
                            //select_engines["ZOOKEEPER"] = "ZOOKEEPER";
                            //select_engines["HBASE"] = "HBASE";
                            if (select_elements_j_opt[i].text && select_engines[select_elements_j_opt[i].text.toUpperCase()]) {
                                checkBox_html = '<input type="checkbox" name="' + select_elements_j_name + '" id="' + checkBox_id + '" value="' + select_elements_j_opt[i].value + '" checked />';
                                label_html = '<label for="" style="filter: grayscale(100%);">' + select_elements_j_opt[i].text + '</label>';
                            } else {
                                checkBox_html = '<input type="checkbox" name="' + select_elements_j_name + '" id="' + checkBox_id + '" value="' + select_elements_j_opt[i].value + '" />';
                                label_html = '<label for="' + checkBox_id + '">' + select_elements_j_opt[i].text + '</label>';
                            }
                            elements_checkbox += ('<td>' + checkBox_html + label_html + '</td>');
                            if (i === select_elements_j_opt.length - 1) {
                                elements_checkbox += '</tr>'
                            }
                        }
                        elements_checkbox += '</table></div></div>';
                        // 判断是否转换成功,若成功则进行替换
                        if (elements_checkbox) {
                            select_element_obj_j.parent.innerHTML = elements_checkbox + update_select_obj.parent_last_child.outerHTML
                        }
                    }
                }
            }
            var id_public = document.getElementById("id_public");
            var id_public_parent = id_public.parentElement;
            id_public_parent.style.display = "none";
            id_public_parent.outerHTML = id_public_parent.outerHTML + '<div><label>Public:</label>' 
                + '<input type="radio" id="public_yes_id" onchange="changePublicCheckBox(true)"><label class="vCheckboxLabel">YES</label>' 
                + '<input type="radio" checked="checked" id="public_no_id" onchange="changePublicCheckBox(false)"><label class="vCheckboxLabel">NO</label>' 
                + '</div>';
        }
        // modify load datasets page
        if (space_home_url + "/data/datainstance/add/" === window_location_pathname) {
            // modify and hide button
            document.getElementsByClassName("submit-row")[0].firstElementChild.value = "Load";
            var submit_row_inputs = document.getElementsByClassName("submit-row")[0].getElementsByTagName("input");
            if (submit_row_inputs && submit_row_inputs.length > 0) {
                for (var i = 1; i < submit_row_inputs.length; i++) {
                    submit_row_inputs[i].style.display = "none";
                }
            }
        }
        if (space_home_url + "/clouds/instance/" === window_location_pathname) {
            // modify and hide button
            document.getElementsByClassName('breadcrumbs initialized')[0].style.display = "none";
            document.getElementsByClassName('breadcrumbs initialized')[0].outerHTML = (document.getElementsByClassName('breadcrumbs initialized')[0].outerHTML + '<div class="breadcrumbs initialized"></div>');
        }
        pre_execution();
        if (document_all_a && document_all_a.length > 0) {
            for (var i = 0; i < document_all_a.length; i++) {
                var document_all_a_i_href = document_all_a[i].getAttribute("href");
                if (document_all_a_i_href && document_all_a_i_href[0] === "/" && document_all_a_i_href.search(space_home_url) == -1 ) {
                    if ("/" === document_all_a_i_href) {
                        document_all_a_i_href = home_url
                    }
                    document_all_a[i].setAttribute("href", space_home_url + document_all_a_i_href);
                }
            }
        }
    }
</script>
{% endblock %}