Index: /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/router.py
===================================================================
--- /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/router.py	(revision 38952)
+++ /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/router.py	(working copy)
@@ -706,19 +706,19 @@
                                       PackageLoader('apv', 'templates')]))
     if request.GET['type'] == "azure":
         if request.GET['page'] == "basic":
-            template = env.get_template("/ha/cloud/azure/basic.html")
+            template = env.get_template("/network/cloud/azure/basic.html")
             response = HttpResponse(template.render())
             return response
         elif request.GET['page'] == "nic":
-            template = env.get_template("/ha/cloud/azure/nic.html")
+            template = env.get_template("/network/cloud/azure/nic.html")
             response = HttpResponse(template.render())
             return response
         elif request.GET['page'] == "udr":
-            template = env.get_template("/ha/cloud/azure/udr.html")
+            template = env.get_template("/network/cloud/azure/udr.html")
             response = HttpResponse(template.render())
             return response
         elif request.GET['page'] == "log":
-            template = env.get_template("/ha/cloud/azure/log.html")
+            template = env.get_template("/network/cloud/azure/log.html")
             response = HttpResponse(template.render())
             return response
     raise Http404('Page not found')
Index: /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/ha/cloud/azure/basic.html
===================================================================
--- /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/ha/cloud/azure/basic.html	(revision 38952)
+++ /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/ha/cloud/azure/basic.html	(working copy)
@@ -1,160 +0,0 @@
-<form class="form-horizontal main-form">
-<div class="row-fluid">
-    <div class="span12 with-min-width field-group-box">
-        <fieldset>
-            <div class="form-group">
-                <label class="col-md-3 control-label">{% trans %}Status{% endtrans %}:</label>
-                <div class="col-md-9 status_field">
-                    <div class="align_center_for_info">...</div>
-                </div>
-            </div>
-        </fieldset>
-        <fieldset class="not_logged_check">
-            <div class="form-group">
-                <label class="col-md-3 control-label">{% trans %}Login Url{% endtrans %}:</label>
-                <div class="col-md-9 url_field">
-                    <a href="#" class="align_center_for_info" target="_blank">...</a>
-                    <span class="field-icon-set"><i class="fa fa-question-circle"></i></span>
-                </div>
-            </div>
-        </fieldset>
-        <fieldset class="not_logged_check">
-            <div class="form-group">
-                <label class="col-md-3 control-label">{% trans %}Code{% endtrans %}:</label>
-                <div class="col-md-9 code_field">
-                    <div class="align_center_for_info" target="_blank">...</div>
-                    <span class="field-icon-set"><i class="fa fa-question-circle"></i></span>
-                </div>
-            </div>
-        </fieldset>
-        <fieldset class="error_field">
-            <div class="form-group">
-                <div class="col-md-3"></div>
-                <div class="error-info">{% trans %}Internal error, please refresh the page.{% endtrans %}</div>
-            </div>
-        </fieldset>
-        <fieldset>
-            <div class="form-group">
-                <label class="col-md-3 control-label"></label>
-                <div class="col-md-9">
-                    <button type="button" class="btn btn-primary btn-log-out">{% trans %}Log Out{% endtrans %}</button>
-                </div>
-            </div>
-        </fieldset>
-    </div>
-</div>
-</form>
-<style type="text/css">
-.align_center_for_info {
-    line-height: 28px;
-}
-.btn-log-out {
-    display: none;
-}
-.code_field div {
-    display: inline-block;
-}
-.code_field span {
-    display: none;
-}
-.error_field {
-    display: none;
-}
-</style>
-
-{% block box_script %}
-
-<script type="text/javascript">
-
-$(function () {
-
-    getStatus();
-    function getStatus () {
-        $('.status_field div').html('...');
-        $('.btn-log-out').css('display', 'none');
-        $.ajax({
-            url: "/api/v1/cloud/az/login/status/",
-            type: 'GET',
-            dataType: 'json',
-            success: function (res) {
-                var status = false;
-                if (typeof (res["status"]) != "undefined") {
-                    status = res["status"];
-                }
-                if (!status) {
-                    getInformation();
-                    $('.status_field div').html("{% trans %}Not logged in{% endtrans %}");
-                    return;
-                }
-                $('.not_logged_check').css('display', 'none');
-                $('.status_field div').html("{% trans %}Logged in{% endtrans %}");
-                $('.btn-log-out').css('display', 'block');
-            },
-            error: function (xhr, textStatus, errorThrown) {
-                getInformation();
-                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
-            }
-        });
-    }
-    function getInformation () {
-        $.ajax({
-            url: "/api/v1/cloud/az/login/",
-            type: 'GET',
-            dataType: 'json',
-            success: function (res) {
-                var url = "", code = "";
-                if (typeof (res["url"]) != "undefined") {
-                    url = res["url"];
-                }
-                if (typeof (res["code"]) != "undefined") {
-                    code = res["code"];
-                }
-                $('.url_field a').html(url).prop('href', url);
-                $('.code_field div').html(code);
-                $('.code_field span').css('display', 'inline-block');
-                var content = [
-                    '{% trans %}Please login using the above information in 1 minute.{% endtrans %}<br />',
-                    '{% trans %}After 1 minute the login credential will be clear.{% endtrans %}<br />',
-                    '{% trans %}WARNING: To sign in, use a web browser to open the page {% endtrans %}',
-                    url,
-                    '{% trans %} and enter the code {% endtrans %}',
-                    code,
-                    '{% trans %} to authenticate.{% endtrans %}'
-                ].join("");
-                $('.field-icon-set').popover({
-                    trigger: "hover",
-                    content: content,
-                    html: true
-                });
-                $('.not_logged_check').css('display', 'block');
-            },
-            error: function (xhr, textStatus, errorThrown) {
-                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
-                $('.error_field').css('display', 'block');
-            }
-        });
-    }
-
-    $('.btn-log-out').click(function() {
-        var that = this;
-        $(that).prop('disabled', true);
-        $.ajax({
-            url: "/api/v1/cloud/az/logout/",
-            type: 'POST',
-            dataType: 'json',
-            success: function (res) {
-                $(that).prop('disabled', false);
-                getStatus();
-            },
-            error: function (xhr, textStatus, errorThrown) {
-                $(that).prop('disabled', false);
-                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
-            }
-        });
-    });
-
-});
-
-</script>
-
-{% endblock box_script %}
Index: /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/ha/cloud/azure/index.html
===================================================================
--- /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/ha/cloud/azure/index.html	(revision 38952)
+++ /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/ha/cloud/azure/index.html	(working copy)
@@ -1,120 +0,0 @@
-{% extends "base.html" %}
-
-{% block content %}
-
-{% block horizontal_nav %}
-<div class="horizontal-nav">
-    <div class="crumbs">
-        <a href="/apv/ha/cloud/azure/_index"><i class="fa fa-home"></i></a>
-    </div>
-<ul class="nav nav-tabs">
-    <li class="active">
-        <a href="/apv/ha/cloud/azure/_index">Azure</a>
-    </li>
-</ul>
-</div>
-<div></div>
-{% endblock horizontal_nav %}
-
-<div class="head-nav-box clearfix-before">
-{% block model_nav %}
-<nav class="head-nav" role="navigation">
-    <a class="model-name" href="#" style="width:90%;"><i class="fa fa-folder-open"></i>&nbsp;Azure</a>
-</nav>
-{% endblock model_nav %}
-</div>
-
-{% block sub_nav %}
-<ul class="config-nav nav nav-pills" style="display:none;">
-    <li class="active">
-        <a class="config-nav-a" val="/apv/get_cloud_page?type=azure&page=basic" href="javascript:;">{% trans %}Basic Settings{% endtrans %} <i class="fa fa-wrench"></i></a>
-        <ul class="sub-config-nav group-index">
-            <li><a val="/apv/get_cloud_page?type=azure&page=basic" href="javascript:;">General</a></li>
-        </ul>
-    </li>
-    <li>
-        <a class="config-nav-a" val="/apv/get_cloud_page?type=azure&page=nic" href="javascript:;">{% trans %}NIC{% endtrans %} <i class="fa fa-wrench"></i></a>
-        <ul class="sub-config-nav group-nic">
-            <li><a val="/apv/get_cloud_page?type=azure&page=nic" href="javascript:;">General</a></li>
-        </ul>
-    </li>
-    <li>
-        <a class="config-nav-a" val="/apv/get_cloud_page?type=azure&page=udr" href="javascript:;">{% trans %}UDR{% endtrans %} <i class="fa fa-wrench"></i></a>
-        <ul class="sub-config-nav group-udr">
-            <li><a val="/apv/get_cloud_page?type=azure&page=udr" href="javascript:;">General</a></li>
-        </ul>
-    </li>
-    <li>
-        <a class="config-nav-a" val="/apv/get_cloud_page?type=azure&page=log" href="javascript:;">{% trans %}Log{% endtrans %} <i class="fa fa-wrench"></i></a>
-        <ul class="sub-config-nav group-log">
-            <li><a val="/apv/get_cloud_page?type=azure&page=log" href="javascript:;">General</a></li>
-        </ul>
-    </li>
-</ul>
-<ul class="sub-config-nav-real"></ul>
-<script type="text/javascript">
-require(['jquery'], function(){
-    if ($('.config-nav li').length > 1) {
-        $('.config-nav').show();
-    }
-});
-</script>
-{% endblock %}
-
-<div id="frame_model_main" class="frame" style="display: block;">
-</div>
-<style type="text/css">
-#frame_model_main {
-    position: relative;
-}
-.align_center_for_info {
-    line-height: 28px;
-}
-</style>
-
-{% endblock %}
-
-{% block page_javascript %}
-<script type="text/javascript">
-require(['jquery'], function(){
-    $(".config-nav-a").on("click", function(e) {
-        e.preventDefault();
-    });
-});
-require(['hive', 'widget-form'], function(){
-    var initiator = new Object();
-    $HIVE.enable_event(initiator);
-    $(".config-nav a.config-nav-a").click(function(){
-        $(".config-nav li").removeClass("active");
-        $(this).parents("li").addClass("active");
-        var sub_nav = $($(this).parents('li').find('ul')[0])
-        if (sub_nav && sub_nav.children().length > 1) {
-           var real_sub_nav = sub_nav.clone(true).removeClass('sub-config-nav').addClass('sub-config-nav-real');
-            $(".sub-config-nav-real").replaceWith(real_sub_nav);
-            $(".sub-config-nav-real").show();
-            $("#frame_instance_main").css("padding-top", "50px");
-            real_sub_nav.find('a').click(function(){
-                $(".sub-config-nav-real li").removeClass("active");
-                $(this).parents("li").addClass("active");
-                var url = $(this).attr('val')
-                $HIVE.ajax_load_box(url, initiator, $("#frame_model_main"));
-                return false;
-            });
-            $(".sub-config-nav-real a:first").trigger("click");
-        } else {
-            $("#frame_instance_main").css("padding-top", "0px");
-            $(".sub-config-nav-real").empty();
-            $(".sub-config-nav-real").hide();
-            var url = $(this).attr('val')
-            $HIVE.ajax_load_box(url, initiator, $("#frame_model_main"));
-        }
-       
-        return false;
-    });
-    $(".config-nav a:first").trigger("click");
-});
-</script>
-{% endblock %}
-
-{% block box_script %}
-{% endblock %}
Index: /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/ha/cloud/azure/log.html
===================================================================
--- /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/ha/cloud/azure/log.html	(revision 38952)
+++ /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/ha/cloud/azure/log.html	(working copy)
@@ -1,218 +0,0 @@
-
-<form class="form-horizontal main-form">
-    <div class="row-fluid">
-        <div class="span12 with-min-width field-group-box">
-            <fieldset>
-                <div class="group_actions"></div>
-                <div class="form-group switch switch_enable">
-                    <label class="col-md-3 control-label">{% trans %}Enable{% endtrans %}:</label>
-                    <div class="col-md-9">
-                        <input class="switch-small" type="checkbox" name="switch_btn"
-                        data-on-label="{% trans %}On{% endtrans %}"
-                        data-off-label="{% trans %}Off{% endtrans %}" />
-                        <span class="field-icon-set"></span>
-                    </div>
-                </div>
-            </fieldset>
-            <fieldset>
-                <div class="form-group">
-                    <label class="col-md-3 control-label">{% trans %}Level{% endtrans %}</label>
-                    <div class="col-md-9">
-                        <select class="selectpicker select-level">
-                            <option value="debug">0: {% trans %}Debug{% endtrans %}</option>
-                            <option value="info">1: {% trans %}Info{% endtrans %}</option>
-                            <option value="warning">2: {% trans %}Warning{% endtrans %}</option>
-                            <option value="error">3: {% trans %}Error{% endtrans %}</option>
-                        </select>
-                        <span class="field-icon-set"><i class="fa fa-question-circle" style="display:none;"></i></span>
-                    </div>
-                </div>
-            </fieldset>
-            <fieldset>
-                <div class="form-group">
-                    <label class="col-md-3 control-label"></label>
-                    <div class="col-md-9">
-                        <button type="button" class="btn btn-primary download-btn">{% trans %}Download{% endtrans %}</button>
-                    </div>
-                </div>
-            </fieldset>
-            <fieldset>
-                <pre class="log_content"></pre>
-            </fieldset>
-        </div>
-    </div><!-- row-fluid -->
-    <div class="btn-static">
-        <div class="btn-switch">
-            <button type="button" class="btn btn-action btn-submit">{% trans %}Save Changes{% endtrans %}</button>
-            <button type="button" class="btn btn-default btn-cancel-action">{% trans %}Cancel{% endtrans %}</button>
-        </div>
-    </div>
-</form>
-<style type="text/css">
-.main-form pre {
-    background: #1b2d43;
-}
-.btn-static {
-    display: none;
-}
-</style>
-
-{% block box_script %}
-
-<script type="text/javascript">
-
-$(function() {
-    var enableSwitch = $("input[name='switch_btn']").bootstrapSwitch();
-    var is_init = 0;
-    getEnableStatus();
-    function getEnableStatus() {
-        $.ajax({
-            url: '/api/v1/cloud/az/log/status/',
-            type: 'GET',
-            dataType: 'json',
-            success: function (res) {
-                if (typeof(res["is_on"]) == "undefined") {
-                    return;
-                }
-                enableSwitch.bootstrapSwitch('setState', res["is_on"]);
-                is_init++;
-            },
-            error: function (xhr, textStatus, errorThrown) {
-                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
-            }
-        });
-    }
-    enableSwitch.on('switch-change', function(e, data) {
-        if (is_init < 2) {
-            return;
-        }
-        $('#frame_model_main .btn-static').fadeIn("slow");
-        if ($(".btn-static").is(":visible")) {
-            var buttonH = $(".btn-static").offset().top;  
-            $(function(){ 
-                $(window).scroll(function(){ 
-                    var scrollH = $(this).scrollTop();  
-                    if (scrollH >= buttonH) {
-                        $(".btn-switch").addClass("btn-fixed");
-                    }else{  
-                        $(".btn-switch").removeClass("btn-fixed");
-                    } 
-                });
-            });
-        }
-    });
-    $('.select-level').selectpicker();
-    getLogLevel();
-    function getLogLevel() {
-        $.ajax({
-            url: '/api/v1/cloud/az/log/severity/',
-            type: 'GET',
-            dataType: 'json',
-            success: function (res) {
-                if (typeof(res["severity"]) == "undefined") {
-                    return;
-                }
-                $('.select-level').selectpicker("val", res["severity"]);
-                is_init++;
-            },
-            error: function (xhr, textStatus, errorThrown) {
-                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
-            }
-        });
-    }
-    $(".select-level").change(function() {
-        if (is_init < 2) {
-            return;
-        }
-        $('#frame_model_main .btn-static').fadeIn("slow");
-        if ($(".btn-static").is(":visible")) {
-            var buttonH = $(".btn-static").offset().top;  
-            $(function(){ 
-                $(window).scroll(function(){ 
-                    var scrollH = $(this).scrollTop();  
-                    if (scrollH >= buttonH) {
-                        $(".btn-switch").addClass("btn-fixed");
-                    }else{  
-                        $(".btn-switch").removeClass("btn-fixed");
-                    } 
-                });
-            });
-        }
-    });
-    $('.btn-cancel-action').click(function(evt) {
-        if(evt.detail && evt.detail != 1) {
-            return;
-        }
-        refreshPage();
-    });
-    $('.btn-submit').click(function(evt) {
-        if(evt.detail && evt.detail != 1) {
-            return;
-        }
-        var enable = enableSwitch.bootstrapSwitch('state'); // true / false
-        var ajaxes = [];
-        ajaxes.push($.ajax({
-            url: '/api/v1/cloud/az/log/status/',
-            type: 'PUT',
-            dataType: 'json',
-            data: JSON.stringify({
-                status: (enable ? 'on' : 'off')
-            }),
-            success: function (res) {
-            },
-            error: function (xhr, textStatus, errorThrown) {
-                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
-            }
-        }));
-        ajaxes.push($.ajax({
-            url: '/api/v1/cloud/az/log/severity/',
-            type: 'PUT',
-            dataType: 'json',
-            data: JSON.stringify({
-                severity: $(".select-level").selectpicker('val')
-            }),
-            success: function (res) {
-                refreshPage();
-            },
-            error: function (xhr, textStatus, errorThrown) {
-                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
-            }
-        }));
-        $.when.apply($, ajaxes)
-        .done(function(){
-            refreshPage();
-        });
-    });
-
-    $('.download-btn').click(function(evt) {
-        if(evt.detail && evt.detail != 1) {
-            return;
-        }
-        window.open("/api/v1/cloud/az/logfile/");
-    });
-
-    getInit();
-    function getInit() {
-        $.ajax({
-            url: '/api/v1/cloud/az/log/',
-            type: 'GET',
-            dataType: 'json',
-            success: function(res) {
-                if (typeof(res["message"]) == "undefined") {
-                    return;
-                }
-                $('.log_content').html(res["message"]);
-            },
-            error: function (xhr, textStatus, errorThrown) {
-                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
-            }
-        });
-    }
-
-    function refreshPage() {
-        $('.config-nav li.active a').trigger('click');
-    }
-});
-
-</script>
-{% endblock box_script %}
Index: /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/ha/cloud/azure/nic.html
===================================================================
--- /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/ha/cloud/azure/nic.html	(revision 38952)
+++ /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/ha/cloud/azure/nic.html	(working copy)
@@ -1,457 +0,0 @@
-<form class="form-horizontal main-form">
-<div class="row-fluid">
-    <div class="span12 with-min-width field-group-box">
-        <fieldset>
-            <div class="group_actions"></div>
-            <div class="form-group switch switch_enable">
-                <label class="col-md-3 control-label">{% trans %}Enable{% endtrans %}:</label>
-                <div class="col-md-3">
-                    <input class="switch-small" type="checkbox" name="switch_btn"
-                    data-on-label="{% trans %}Enable{% endtrans %}"
-                    data-off-label="{% trans %}Disabled{% endtrans %}" />
-                    <span class="field-icon-set"></span>
-                </div>
-                <label class="col-md-3 control-label">{% trans %}Manual Trigger{% endtrans %}:</label>
-                <div class="col-md-3 col-manual-trigger">
-                    <button type="button" class="btn btn-primary failover-btn">{% trans %}Failover{% endtrans %}</button>
-                    <button type="button" class="btn btn-primary recover-btn">{% trans %}Recover{% endtrans %}</button>
-                </div>
-            </div>
-        </fieldset>
-        <fieldset>
-            <div class="form-group add-btn-style">
-                <div class="col-md-3">
-                    <button type="button" class="btn btn-action add-btn"><i class="fa fa-plus-circle"></i>{% trans %}ADD{% endtrans %}</button>
-                </div>
-                <div class="col-md-9" id="app"></div>
-            </div>
-        </fieldset>
-    </div>
-</div>
-<!-- row-fluid -->
-<div class="btn-static">
-    <div class="btn-switch">
-        <button type="button" class="btn btn-action btn-submit">{% trans %}Save Changes{% endtrans %}</button>
-        <button type="button" class="btn btn-default btn-cancel-action">{% trans %}Cancel{% endtrans %}</button>
-    </div>
-</div>
-<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-    <div class="modal-dialog">
-        <div class="box modal-content">
-            <div class="box-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true"></span></button>
-                    <h2>{{ gettext('New %s')%"NIC" }}</h2>
-                </button>
-            </div>
-            <div class="box-body">
-                <form class="form-horizontal main-form">
-                    <div class="padded">
-                        <div class="row-fluid">
-                            <div class="span12 with-min-width field-group-box modal-fields">
-                            </div>
-                        </div>
-                    </div>
-                    <div class="form-actions col-md-offset-3">
-                        <button type="button" class="btn btn-action btn-save">{% trans %}Submit{% endtrans %}</button>
-                        <button type="button" data-dismiss="modal" class="btn btn-default btn-cancel">{% trans %}Cancel{% endtrans %}</button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
-</div>
-</form>
-<style type="text/css">
-.add-btn-style {
-    text-align: right;
-}
-.add-btn-style .add-btn {
-    background-color: transparent;
-    border: 0;
-}
-.modal-fields {
-    padding-top: 20px;
-}
-.form-actions {
-    padding-bottom: 20px;
-}
-#app {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-}
-#app .block {
-    min-width: 200px;
-    box-sizing: border-box;
-    margin-right: 20px;
-}
-#app .box.modal-content {
-    border-radius: 6px;
-}
-#app .block .modal-dialog {
-    width: 100%;
-    margin: 0;
-}
-#app .box-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-right: 10px;
-    padding-left: 10px;
-}
-#app .box-header button.close:active {
-    opacity: 0.2;
-}
-#app .box-body ul {
-    padding: 0;
-    list-style: none;
-}
-#app .box-body ul li {
-    padding: 5px;
-    text-align: left;
-}
-.btn-static {
-    display: none;
-}
-</style>
-</div>
-
-{% block box_script %}
-
-<script type="text/javascript">
-
-$(function(){
-    var enableSwitch = $("input[name='switch_btn']").bootstrapSwitch();
-    var is_init = 0;
-    getEnableStatus();
-    function getEnableStatus() {
-        $.ajax({
-            url: '/api/v1/cloud/az/nicpoller/status/',
-            type: 'GET',
-            dataType: 'json',
-            success: function (res) {
-                if (typeof(res["is_running"]) == "undefined") {
-                    return;
-                }
-                enableSwitch.bootstrapSwitch('setState', res["is_running"]);
-                is_init++;
-            },
-            error: function (xhr, textStatus, errorThrown) {
-                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
-            }
-        });
-    }
-    enableSwitch.on('switch-change', function(e, data) {
-        if (is_init < 1) {
-            return;
-        }
-        $('#frame_model_main .btn-static').fadeIn("slow");
-        if ($(".btn-static").is(":visible")) {
-            var buttonH = $(".btn-static").offset().top;  
-            $(function(){ 
-                $(window).scroll(function(){ 
-                    var scrollH = $(this).scrollTop();  
-                    if (scrollH >= buttonH) {
-                        $(".btn-switch").addClass("btn-fixed");
-                    }else{  
-                        $(".btn-switch").removeClass("btn-fixed");
-                    } 
-                });
-            });
-        }
-    });
-    $('.btn-cancel-action').click(function(evt) {
-        if(evt.detail && evt.detail != 1) {
-            return;
-        }
-        refreshPage();
-    });
-    $('.btn-submit').click(function(evt) {
-        if(evt.detail && evt.detail != 1) {
-            return;
-        }
-        var enable = enableSwitch.bootstrapSwitch('state'); // true / false
-        $.ajax({
-            url: '/api/v1/cloud/az/nicpoller/',
-            type: 'PUT',
-            dataType: 'json',
-            data: JSON.stringify({
-                status: (enable ? 'on' : 'off')
-            }),
-            success: function (res) {
-                refreshPage();
-            },
-            error: function (xhr, textStatus, errorThrown) {
-                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
-            }
-        });
-    });
-    var modal_fields = [{
-        field: '{% trans %}Sub ID{% endtrans %}',
-        id: 'sub_id',
-        value: ''
-    }, {
-        field: '{% trans %}Resource Grop Name{% endtrans %}',
-        id: 'res_grp_name',
-        value: ''
-    }, {
-        field: '{% trans %}Source NIC Name{% endtrans %}',
-        id: 'src_nic_name',
-        value: ''
-    }, {
-        field: '{% trans %}Destination NIC Name{% endtrans %}',
-        id: 'dest_nic_name',
-        value: ''
-    }];
-    // for displaying fields in each block
-    var show_fields = ['src_nic_name', 'dest_nic_name'];
-    var is_show_field_title = true;
-
-    $('.add-btn').click(function() {
-        var content = setContent(modal_fields);
-        $('.modal-fields').html(content);
-        $('#addModal').modal();
-    });
-    $('.failover-btn').click(function(evt) {
-        if(evt.detail && evt.detail != 1) {
-            return;
-        }
-        var that = this;
-        $(that).css("disabled", true);
-        $.ajax({
-            url: '/api/v1/cloud/az/nictrigger/',
-            type: 'PUT',
-            dataType: 'json',
-            data: JSON.stringify({
-                status: 'failover'
-            }),
-            success: function (res) {
-                if (typeof(res["message"]) == "undefined") {
-                    return;
-                }
-                alert(res["message"]);
-                $(that).css("disabled", false);
-            },
-            error: function (xhr, textStatus, errorThrown) {
-                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
-                $(that).css("disabled", false);
-            }
-        });
-    });
-    $('.recover-btn').click(function(evt) {
-        if(evt.detail && evt.detail != 1) {
-            return;
-        }
-        var that = this;
-        $(that).css("disabled", true);
-        $.ajax({
-            url: '/api/v1/cloud/az/nictrigger/',
-            type: 'PUT',
-            dataType: 'json',
-            data: JSON.stringify({
-                status: 'recover'
-            }),
-            success: function (res) {
-                if (typeof(res["message"]) == "undefined") {
-                    return;
-                }
-                alert(res["message"]);
-                $(that).css("disabled", false);
-            },
-            error: function (xhr, textStatus, errorThrown) {
-                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
-                $(that).css("disabled", false);
-            }
-        });
-    });
-    var config = [];
-    $('.btn-save').click(function(evt) {
-        if(evt.detail && evt.detail != 1) {
-            return;
-        }
-        var each = {};
-        $('.field').each(function() {
-            if ($(this).val() == "") {
-                return;
-            }
-            each[$(this).data('id')] = $(this).val();
-        });
-        if (Object.keys(each).length < 1) {
-            return;
-        }
-        addNIC(each.sub_id, each.res_grp_name, each.src_nic_name, each.dest_nic_name);
-    });
-
-    getInit();
-    function getInit() {
-        $.ajax({
-            url: '/api/v1/cloud/az/nicconfig/',
-            type: 'GET',
-            dataType: 'json',
-            success: function(res) {
-                for (var index in res) {
-                    config.push({
-                        primary_key: index,
-                        sub_id: res[index].subscription_id,
-                        res_grp_name: res[index].res_grp_name,
-                        src_nic_name: res[index].from_nic_name,
-                        dest_nic_name: res[index].to_nic_name
-                    })
-                }
-                updateBlockList(config, show_fields, is_show_field_title);
-            },
-            error: function (xhr, textStatus, errorThrown) {
-                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
-            }
-        });
-    }
-
-    /**
-     * Return html string for content of pop up window(Add)
-     * @param array setting: array for each setting
-     * @return string
-     */
-    function setContent(setting) {
-        var html = [];
-        for (var ind = 0; ind < setting.length; ++ind) {
-            var each = setting[ind];
-            html.push([
-                '<fieldset>',
-                    '<div class="group_actions"></div>',
-                        '<div class="form-group">',
-                        '<label class="col-md-3 control-label">',
-                            setting[ind].field,
-                        ':</label>',
-                        '<div class="col-md-9">',
-                            '<input type="text" class="field" data-id="' + setting[ind].id,
-                            '" value="' + setting[ind].value + '" />',
-                        '</div>',
-                    '</div>',
-                '</fieldset>'
-            ].join(""));
-        }
-        return html.join("");
-    }
-
-    /**
-     * Update layout for each blocks
-     * @param array setting: array of block information
-     * @param array fields: array of displaying fields, empty is all
-     * @param bool value_only: display value or [field: value] for each list
-     * @return void
-     */
-    function updateBlockList(setting, fields = [], value_only = true) {
-        var html = [];
-        var nameMapping = getNameMapping(); // ex: sub_id: SubId
-        for (var ind = 0; ind < setting.length; ++ind) {
-            var list = [];
-            for (var field in setting[ind]) {
-                if (fields.length !== 0 && fields.indexOf(field) === -1) {
-                    // Not display
-                    continue;
-                }
-                if (field == "primary_key") {
-                    // Not display
-                    continue;
-                }
-                var content = setting[ind][field];
-                if (!value_only) {
-                    var display_name = "";
-                    if (nameMapping.hasOwnProperty(field)) {
-                        display_name = nameMapping[field];
-                    }
-                    content = display_name + ": " + content;
-                }
-                list.push([
-                    '<li data-id="' + field + '">' + content + '</li>'
-                ].join(""));
-            }
-            html.push([
-                '<div class="block">',
-                    '<div class="modal-dialog">',
-                        '<div class="box modal-content">',
-                            '<div class="box-header">',
-                                '<span>' + setting[ind]['primary_key'] + '</span>',
-                                '<button type="button" class="close" aria-label="Close"',
-                                    'data-id="' + setting[ind]['primary_key'] + '">',
-                                    '<span aria-hidden="true">&times;</span></button>',
-                            '</div>',
-                            '<div class="box-body">',
-                                '<ul>',
-                                    list.join(""),
-                                '</ul>',
-                            '</div>',
-                        '</div>',
-                    '</div>',
-                '</div>'
-            ].join(""));
-        }
-        $('#app').html(html.join(""));
-        $('#app .block .box-header button').click(function() {
-            var index = parseInt($(this).data("id"));
-            delNIC(index);
-        });
-    }
-
-    function addNIC(sub_id, res_grp_name, src_nic_name, dest_nic_name) {
-        $.ajax({
-            url: '/api/v1/cloud/az/nicconfig/',
-            type: 'POST',
-            dataType: 'json',
-            data: JSON.stringify({
-                sub_id: sub_id,
-                res_grp_name: res_grp_name,
-                src_nic_name: src_nic_name,
-                dest_nic_name: dest_nic_name
-            }),
-            success: function(res) {
-                $('#addModal').modal('hide');
-                setTimeout(function() {
-                    refreshPage();
-                }, 400);
-            },
-            error: function (xhr, textStatus, errorThrown) {
-                $('#addModal').modal('hide');
-                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
-            }
-        });
-    }
-
-    function delNIC(index) {
-        $.ajax({
-            url: '/api/v1/cloud/az/nicconfig/',
-            type: 'DELETE',
-            dataType: 'json',
-            data: JSON.stringify({
-                index: index
-            }),
-            success: function(res) {
-                refreshPage();
-            },
-            error: function (xhr, textStatus, errorThrown) {
-                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
-            }
-        });
-    }
-
-    /**
-     * Get Display name mapping by index
-     * @return object
-     */
-    function getNameMapping() {
-        var mapping = {};
-        for (var ind = 0; ind < modal_fields.length; ++ind) {
-            mapping[modal_fields[ind].id] = modal_fields[ind].field;
-        }
-        return mapping;
-    }
-
-    function refreshPage() {
-        $('.config-nav li.active a').trigger('click');
-    }
-
-});
-
-</script>
-{% endblock box_script %}
Index: /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/ha/cloud/azure/udr.html
===================================================================
--- /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/ha/cloud/azure/udr.html	(revision 38952)
+++ /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/ha/cloud/azure/udr.html	(working copy)
@@ -1,406 +0,0 @@
-<form class="form-horizontal main-form">
-<div class="row-fluid">
-    <div class="span12 with-min-width field-group-box">
-        <fieldset>
-            <div class="group_actions"></div>
-            <div class="form-group switch switch_enable">
-                <label class="col-md-3 control-label">{% trans %}Enable{% endtrans %}:</label>
-                <div class="col-md-9">
-                    <input class="switch-small" type="checkbox" name="switch_btn"
-                    data-on-label="{% trans %}Enable{% endtrans %}"
-                    data-off-label="{% trans %}Disabled{% endtrans %}" />
-                    <span class="field-icon-set"></span>
-                </div>
-            </div>
-        </fieldset>
-        <fieldset>
-            <div class="form-group add-btn-style">
-                <div class="col-md-3">
-                    <button type="button" class="btn btn-action add-btn"><i class="fa fa-plus-circle"></i>{% trans %}ADD{% endtrans %}</button>
-                </div>
-                <div class="col-md-9" id="app"></div>
-            </div>
-        </fieldset>
-    </div>
-</div>
-<!-- row-fluid -->
-<div class="btn-static">
-    <div class="btn-switch">
-        <button type="button" class="btn btn-action btn-submit">{% trans %}Save Changes{% endtrans %}</button>
-        <button type="button" class="btn btn-default btn-cancel-action">{% trans %}Cancel{% endtrans %}</button>
-    </div>
-</div>
-<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-    <div class="modal-dialog">
-        <div class="box modal-content">
-            <div class="box-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true"></span></button>
-                    <h2>{{ gettext('New %s')%"UDR" }}</h2>
-                </button>
-            </div>
-            <div class="box-body">
-                <form class="form-horizontal main-form">
-                    <div class="padded">
-                        <div class="row-fluid">
-                            <div class="span12 with-min-width field-group-box modal-fields">
-                            </div>
-                        </div>
-                    </div>
-                    <div class="form-actions col-md-offset-3">
-                        <button type="button" class="btn btn-action btn-save">{% trans %}Submit{% endtrans %}</button>
-                        <button type="button" data-dismiss="modal" class="btn btn-default btn-cancel">{% trans %}Cancel{% endtrans %}</button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
-</div>
-</form>
-<style type="text/css">
-.add-btn-style {
-    text-align: right;
-}
-.add-btn-style .add-btn {
-    background-color: transparent;
-    border: 0;
-}
-.modal-fields {
-    padding-top: 20px;
-}
-.form-actions {
-    padding-bottom: 20px;
-}
-#app {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-}
-#app .block {
-    min-width: 200px;
-    box-sizing: border-box;
-    margin-right: 20px;
-}
-#app .box.modal-content {
-    border-radius: 6px;
-}
-#app .block .modal-dialog {
-    width: 100%;
-    margin: 0;
-}
-#app .box-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-right: 10px;
-    padding-left: 10px;
-}
-#app .box-header button.close:active {
-    opacity: 0.2;
-}
-#app .box-body ul {
-    padding: 0;
-    list-style: none;
-}
-#app .box-body ul li {
-    padding: 5px;
-    text-align: left;
-}
-.btn-static {
-    display: none;
-}
-</style>
-</div>
-
-{% block box_script %}
-
-<script type="text/javascript">
-
-$(function(){
-    var enableSwitch = $("input[name='switch_btn']").bootstrapSwitch();
-    var is_init = 0;
-    getEnableStatus();
-    function getEnableStatus() {
-        $.ajax({
-            url: '/api/v1/cloud/az/udrpoller/status/',
-            type: 'GET',
-            dataType: 'json',
-            success: function (res) {
-                if (typeof(res["is_running"]) == "undefined") {
-                    return;
-                }
-                enableSwitch.bootstrapSwitch('setState', res["is_running"]);
-                is_init++;
-            },
-            error: function (xhr, textStatus, errorThrown) {
-                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
-            }
-        });
-    }
-    enableSwitch.on('switch-change', function(e, data) {
-        if (is_init < 1) {
-            return;
-        }
-        $('#frame_model_main .btn-static').fadeIn("slow");
-        if ($(".btn-static").is(":visible")) {
-            var buttonH = $(".btn-static").offset().top;  
-            $(function(){ 
-                $(window).scroll(function(){ 
-                    var scrollH = $(this).scrollTop();  
-                    if (scrollH >= buttonH) {
-                        $(".btn-switch").addClass("btn-fixed");
-                    }else{  
-                        $(".btn-switch").removeClass("btn-fixed");
-                    } 
-                });
-            });
-        }
-    });
-    $('.btn-cancel-action').click(function(evt) {
-        if(evt.detail && evt.detail != 1) {
-            return;
-        }
-        refreshPage();
-    });
-    $('.btn-submit').click(function(evt) {
-        if(evt.detail && evt.detail != 1) {
-            return;
-        }
-        var enable = enableSwitch.bootstrapSwitch('state'); // true / false
-        $.ajax({
-            url: '/api/v1/cloud/az/udrpoller/',
-            type: 'PUT',
-            dataType: 'json',
-            data: JSON.stringify({
-                status: (enable ? 'on' : 'off')
-            }),
-            success: function (res) {
-                refreshPage();
-            },
-            error: function (xhr, textStatus, errorThrown) {
-                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
-            }
-        });
-    });
-    var modal_fields = [{
-        field: '{% trans %}Sub ID{% endtrans %}',
-        id: 'sub_id',
-        value: ''
-    }, {
-        field: '{% trans %}Resource Grop Name{% endtrans %}',
-        id: 'res_grp_name',
-        value: ''
-    }, {
-        field: '{% trans %}Monitored VM Name{% endtrans %}',
-        id: 'vm_name',
-        value: ''
-    }, {
-        field: '{% trans %}Target IP When Running{% endtrans %}',
-        id: 'ip_running',
-        value: ''
-    }, {
-        field: '{% trans %}Target IP When Deallocated{% endtrans %}',
-        id: 'ip_deallocated',
-        value: ''
-    }];
-    // for displaying fields in each block
-    var show_fields = []; // for displaying fields in each block
-    is_show_field_title = false;
-
-    $('.add-btn').click(function() {
-        var content = setContent(modal_fields);
-        $('.modal-fields').html(content);
-        $('#addModal').modal();
-    });
-    var config = [];
-    $('.btn-save').click(function(evt) {
-        if(evt.detail && evt.detail != 1) {
-            return;
-        }
-        var each = {};
-        $('.field').each(function() {
-            if ($(this).val() == "") {
-                return;
-            }
-            each[$(this).data('id')] = $(this).val();
-        });
-        if (Object.keys(each).length < 1) {
-            return;
-        }
-        addUDR(each.sub_id, each.res_grp_name, each.vm_name, each.ip_running, each.ip_deallocated);
-    });
-
-    getInit();
-    function getInit() {
-        $.ajax({
-            url: '/api/v1/cloud/az/udrconfig/',
-            type: 'GET',
-            dataType: 'json',
-            success: function(res) {
-                for (var index in res) {
-                    config.push({
-                        primary_key: index,
-                        sub_id: res[index].subscription_id,
-                        res_grp_name: res[index].resource_group_name,
-                        vm_name: res[index].monitored_vm_name,
-                        ip_running: res[index].target_ip_when_running,
-                        ip_deallocated: res[index].target_ip_when_deallocated
-                    })
-                }
-                updateBlockList(config, show_fields, is_show_field_title);
-            },
-            error: function (xhr, textStatus, errorThrown) {
-                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
-            }
-        });
-    }
-
-    /**
-     * Return html string for content of pop up window(Add)
-     * @param array setting: array for each setting
-     * @return string
-     */
-    function setContent(setting) {
-        var html = [];
-        for (var ind = 0; ind < setting.length; ++ind) {
-            var each = setting[ind];
-            html.push([
-                '<fieldset>',
-                    '<div class="group_actions"></div>',
-                        '<div class="form-group">',
-                        '<label class="col-md-3 control-label">',
-                            setting[ind].field,
-                        ':</label>',
-                        '<div class="col-md-9">',
-                            '<input type="text" class="field" data-id="' + setting[ind].id,
-                            '" value="' + setting[ind].value + '" />',
-                        '</div>',
-                    '</div>',
-                '</fieldset>'
-            ].join(""));
-        }
-        return html.join("");
-    }
-
-    /**
-     * Update layout for each blocks
-     * @param array setting: array of block information
-     * @param array fields: array of displaying fields, empty is all
-     * @param bool value_only: display value or [field: value] for each list
-     * @return void
-     */
-    function updateBlockList(setting, fields = [], value_only = true) {
-        var html = [];
-        var nameMapping = getNameMapping(); // ex: sub_id: SubId
-        for (var ind = 0; ind < setting.length; ++ind) {
-            var list = [];
-            for (var field in setting[ind]) {
-                if (fields.length !== 0 && fields.indexOf(field) === -1) {
-                    // Not display
-                    continue;
-                }
-                if (field == "primary_key") {
-                    // Not display
-                    continue;
-                }
-                var content = setting[ind][field];
-                if (!value_only) {
-                    var display_name = "";
-                    if (nameMapping.hasOwnProperty(field)) {
-                        display_name = nameMapping[field];
-                    }
-                    content = display_name + ": " + content;
-                }
-                list.push([
-                    '<li data-id="' + field + '">' + content + '</li>'
-                ].join(""));
-            }
-            html.push([
-                '<div class="block">',
-                    '<div class="modal-dialog">',
-                        '<div class="box modal-content">',
-                            '<div class="box-header">',
-                                '<span>' + setting[ind]['primary_key'] + '</span>',
-                                '<button type="button" class="close" aria-label="Close"',
-                                    'data-id="' + setting[ind]['primary_key'] + '">',
-                                    '<span aria-hidden="true">&times;</span></button>',
-                            '</div>',
-                            '<div class="box-body">',
-                                '<ul>',
-                                    list.join(""),
-                                '</ul>',
-                            '</div>',
-                        '</div>',
-                    '</div>',
-                '</div>'
-            ].join(""));
-        }
-        $('#app').html(html.join(""));
-        $('#app .block .box-header button').click(function() {
-            var index = parseInt($(this).data("id"));
-            delUDR(index);
-        });
-    }
-
-    function addUDR(sub_id, res_grp_name, vm_name, ip_running, ip_deallocated) {
-        $.ajax({
-            url: '/api/v1/cloud/az/udrconfig/',
-            type: 'POST',
-            dataType: 'json',
-            data: JSON.stringify({
-                sub_id: sub_id,
-                res_grp_name: res_grp_name,
-                vm_name: vm_name,
-                ip_running: ip_running,
-                ip_deallocating: ip_deallocated
-            }),
-            success: function(res) {
-                $('#addModal').modal('hide');
-                setTimeout(function() {
-                    refreshPage();
-                }, 400);
-            },
-            error: function (xhr, textStatus, errorThrown) {
-                $('#addModal').modal('hide');
-                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
-            }
-        });
-    }
-
-    function delUDR(index) {
-        $.ajax({
-            url: '/api/v1/cloud/az/udrconfig/',
-            type: 'DELETE',
-            dataType: 'json',
-            data: JSON.stringify({
-                index: index
-            }),
-            success: function(res) {
-                refreshPage();
-            },
-            error: function (xhr, textStatus, errorThrown) {
-                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
-            }
-        });
-    }
-
-    /**
-     * Get Display name mapping by index
-     * @return object
-     */
-    function getNameMapping() {
-        var mapping = {};
-        for (var ind = 0; ind < modal_fields.length; ++ind) {
-            mapping[modal_fields[ind].id] = modal_fields[ind].field;
-        }
-        return mapping;
-    }
-
-    function refreshPage() {
-        $('.config-nav li.active a').trigger('click');
-    }
-
-});
-
-</script>
-{% endblock box_script %}
Index: /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/network/cloud/azure/basic.html
===================================================================
--- /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/network/cloud/azure/basic.html	(revision 0)
+++ /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/network/cloud/azure/basic.html	(working copy)
@@ -0,0 +1,160 @@
+<form class="form-horizontal main-form">
+<div class="row-fluid">
+    <div class="span12 with-min-width field-group-box">
+        <fieldset>
+            <div class="form-group">
+                <label class="col-md-3 control-label">{% trans %}Status{% endtrans %}:</label>
+                <div class="col-md-9 status_field">
+                    <div class="align_center_for_info">...</div>
+                </div>
+            </div>
+        </fieldset>
+        <fieldset class="not_logged_check">
+            <div class="form-group">
+                <label class="col-md-3 control-label">{% trans %}Login Url{% endtrans %}:</label>
+                <div class="col-md-9 url_field">
+                    <a href="#" class="align_center_for_info" target="_blank">...</a>
+                    <span class="field-icon-set"><i class="fa fa-question-circle"></i></span>
+                </div>
+            </div>
+        </fieldset>
+        <fieldset class="not_logged_check">
+            <div class="form-group">
+                <label class="col-md-3 control-label">{% trans %}Code{% endtrans %}:</label>
+                <div class="col-md-9 code_field">
+                    <div class="align_center_for_info" target="_blank">...</div>
+                    <span class="field-icon-set"><i class="fa fa-question-circle"></i></span>
+                </div>
+            </div>
+        </fieldset>
+        <fieldset class="error_field">
+            <div class="form-group">
+                <div class="col-md-3"></div>
+                <div class="error-info">{% trans %}Internal error, please refresh the page.{% endtrans %}</div>
+            </div>
+        </fieldset>
+        <fieldset>
+            <div class="form-group">
+                <label class="col-md-3 control-label"></label>
+                <div class="col-md-9">
+                    <button type="button" class="btn btn-primary btn-log-out">{% trans %}Log Out{% endtrans %}</button>
+                </div>
+            </div>
+        </fieldset>
+    </div>
+</div>
+</form>
+<style type="text/css">
+.align_center_for_info {
+    line-height: 28px;
+}
+.btn-log-out {
+    display: none;
+}
+.code_field div {
+    display: inline-block;
+}
+.code_field span {
+    display: none;
+}
+.error_field {
+    display: none;
+}
+</style>
+
+{% block box_script %}
+
+<script type="text/javascript">
+
+$(function () {
+
+    getStatus();
+    function getStatus () {
+        $('.status_field div').html('...');
+        $('.btn-log-out').css('display', 'none');
+        $.ajax({
+            url: "/api/v1/cloud/az/login/status/",
+            type: 'GET',
+            dataType: 'json',
+            success: function (res) {
+                var status = false;
+                if (typeof (res["status"]) != "undefined") {
+                    status = res["status"];
+                }
+                if (!status) {
+                    getInformation();
+                    $('.status_field div').html("{% trans %}Not logged in{% endtrans %}");
+                    return;
+                }
+                $('.not_logged_check').css('display', 'none');
+                $('.status_field div').html("{% trans %}Logged in{% endtrans %}");
+                $('.btn-log-out').css('display', 'block');
+            },
+            error: function (xhr, textStatus, errorThrown) {
+                getInformation();
+                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
+            }
+        });
+    }
+    function getInformation () {
+        $.ajax({
+            url: "/api/v1/cloud/az/login/",
+            type: 'GET',
+            dataType: 'json',
+            success: function (res) {
+                var url = "", code = "";
+                if (typeof (res["url"]) != "undefined") {
+                    url = res["url"];
+                }
+                if (typeof (res["code"]) != "undefined") {
+                    code = res["code"];
+                }
+                $('.url_field a').html(url).prop('href', url);
+                $('.code_field div').html(code);
+                $('.code_field span').css('display', 'inline-block');
+                var content = [
+                    '{% trans %}Please login using the above information in 1 minute.{% endtrans %}<br />',
+                    '{% trans %}After 1 minute the login credential will be clear.{% endtrans %}<br />',
+                    '{% trans %}WARNING: To sign in, use a web browser to open the page {% endtrans %}',
+                    url,
+                    '{% trans %} and enter the code {% endtrans %}',
+                    code,
+                    '{% trans %} to authenticate.{% endtrans %}'
+                ].join("");
+                $('.field-icon-set').popover({
+                    trigger: "hover",
+                    content: content,
+                    html: true
+                });
+                $('.not_logged_check').css('display', 'block');
+            },
+            error: function (xhr, textStatus, errorThrown) {
+                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
+                $('.error_field').css('display', 'block');
+            }
+        });
+    }
+
+    $('.btn-log-out').click(function() {
+        var that = this;
+        $(that).prop('disabled', true);
+        $.ajax({
+            url: "/api/v1/cloud/az/logout/",
+            type: 'POST',
+            dataType: 'json',
+            success: function (res) {
+                $(that).prop('disabled', false);
+                getStatus();
+            },
+            error: function (xhr, textStatus, errorThrown) {
+                $(that).prop('disabled', false);
+                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
+            }
+        });
+    });
+
+});
+
+</script>
+
+{% endblock box_script %}
Index: /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/network/cloud/azure/index.html
===================================================================
--- /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/network/cloud/azure/index.html	(revision 0)
+++ /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/network/cloud/azure/index.html	(working copy)
@@ -0,0 +1,120 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+{% block horizontal_nav %}
+<div class="horizontal-nav">
+    <div class="crumbs">
+        <a href="/apv/ha/cloud/azure/_index"><i class="fa fa-home"></i></a>
+    </div>
+<ul class="nav nav-tabs">
+    <li class="active">
+        <a href="/apv/ha/cloud/azure/_index">Azure</a>
+    </li>
+</ul>
+</div>
+<div></div>
+{% endblock horizontal_nav %}
+
+<div class="head-nav-box clearfix-before">
+{% block model_nav %}
+<nav class="head-nav" role="navigation">
+    <a class="model-name" href="#" style="width:90%;"><i class="fa fa-folder-open"></i>&nbsp;Azure</a>
+</nav>
+{% endblock model_nav %}
+</div>
+
+{% block sub_nav %}
+<ul class="config-nav nav nav-pills" style="display:none;">
+    <li class="active">
+        <a class="config-nav-a" val="/apv/get_cloud_page?type=azure&page=basic" href="javascript:;">{% trans %}Basic Settings{% endtrans %} <i class="fa fa-wrench"></i></a>
+        <ul class="sub-config-nav group-index">
+            <li><a val="/apv/get_cloud_page?type=azure&page=basic" href="javascript:;">General</a></li>
+        </ul>
+    </li>
+    <li>
+        <a class="config-nav-a" val="/apv/get_cloud_page?type=azure&page=nic" href="javascript:;">{% trans %}NIC{% endtrans %} <i class="fa fa-wrench"></i></a>
+        <ul class="sub-config-nav group-nic">
+            <li><a val="/apv/get_cloud_page?type=azure&page=nic" href="javascript:;">General</a></li>
+        </ul>
+    </li>
+    <li>
+        <a class="config-nav-a" val="/apv/get_cloud_page?type=azure&page=udr" href="javascript:;">{% trans %}UDR{% endtrans %} <i class="fa fa-wrench"></i></a>
+        <ul class="sub-config-nav group-udr">
+            <li><a val="/apv/get_cloud_page?type=azure&page=udr" href="javascript:;">General</a></li>
+        </ul>
+    </li>
+    <li>
+        <a class="config-nav-a" val="/apv/get_cloud_page?type=azure&page=log" href="javascript:;">{% trans %}Log{% endtrans %} <i class="fa fa-wrench"></i></a>
+        <ul class="sub-config-nav group-log">
+            <li><a val="/apv/get_cloud_page?type=azure&page=log" href="javascript:;">General</a></li>
+        </ul>
+    </li>
+</ul>
+<ul class="sub-config-nav-real"></ul>
+<script type="text/javascript">
+require(['jquery'], function(){
+    if ($('.config-nav li').length > 1) {
+        $('.config-nav').show();
+    }
+});
+</script>
+{% endblock %}
+
+<div id="frame_model_main" class="frame" style="display: block;">
+</div>
+<style type="text/css">
+#frame_model_main {
+    position: relative;
+}
+.align_center_for_info {
+    line-height: 28px;
+}
+</style>
+
+{% endblock %}
+
+{% block page_javascript %}
+<script type="text/javascript">
+require(['jquery'], function(){
+    $(".config-nav-a").on("click", function(e) {
+        e.preventDefault();
+    });
+});
+require(['hive', 'widget-form'], function(){
+    var initiator = new Object();
+    $HIVE.enable_event(initiator);
+    $(".config-nav a.config-nav-a").click(function(){
+        $(".config-nav li").removeClass("active");
+        $(this).parents("li").addClass("active");
+        var sub_nav = $($(this).parents('li').find('ul')[0])
+        if (sub_nav && sub_nav.children().length > 1) {
+           var real_sub_nav = sub_nav.clone(true).removeClass('sub-config-nav').addClass('sub-config-nav-real');
+            $(".sub-config-nav-real").replaceWith(real_sub_nav);
+            $(".sub-config-nav-real").show();
+            $("#frame_instance_main").css("padding-top", "50px");
+            real_sub_nav.find('a').click(function(){
+                $(".sub-config-nav-real li").removeClass("active");
+                $(this).parents("li").addClass("active");
+                var url = $(this).attr('val')
+                $HIVE.ajax_load_box(url, initiator, $("#frame_model_main"));
+                return false;
+            });
+            $(".sub-config-nav-real a:first").trigger("click");
+        } else {
+            $("#frame_instance_main").css("padding-top", "0px");
+            $(".sub-config-nav-real").empty();
+            $(".sub-config-nav-real").hide();
+            var url = $(this).attr('val')
+            $HIVE.ajax_load_box(url, initiator, $("#frame_model_main"));
+        }
+       
+        return false;
+    });
+    $(".config-nav a:first").trigger("click");
+});
+</script>
+{% endblock %}
+
+{% block box_script %}
+{% endblock %}
Index: /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/network/cloud/azure/log.html
===================================================================
--- /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/network/cloud/azure/log.html	(revision 0)
+++ /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/network/cloud/azure/log.html	(working copy)
@@ -0,0 +1,215 @@
+
+<form class="form-horizontal main-form">
+    <div class="row-fluid">
+        <div class="span12 with-min-width field-group-box">
+            <fieldset>
+                <div class="group_actions"></div>
+                <div class="form-group switch switch_enable">
+                    <label class="col-md-3 control-label">{% trans %}Enable{% endtrans %}:</label>
+                    <div class="col-md-9">
+                        <input class="switch-small" type="checkbox" name="switch_btn"
+                        data-on-label="{% trans %}On{% endtrans %}"
+                        data-off-label="{% trans %}Off{% endtrans %}" />
+                        <span class="field-icon-set"></span>
+                    </div>
+                </div>
+            </fieldset>
+            <fieldset>
+                <div class="form-group">
+                    <label class="col-md-3 control-label">{% trans %}Level{% endtrans %}</label>
+                    <div class="col-md-9">
+                        <select class="selectpicker select-level">
+                            <option value="debug">0: {% trans %}Debug{% endtrans %}</option>
+                            <option value="info">1: {% trans %}Info{% endtrans %}</option>
+                            <option value="warning">2: {% trans %}Warning{% endtrans %}</option>
+                            <option value="error">3: {% trans %}Error{% endtrans %}</option>
+                        </select>
+                        <span class="field-icon-set"><i class="fa fa-question-circle" style="display:none;"></i></span>
+                    </div>
+                </div>
+            </fieldset>
+            <fieldset>
+                <div class="form-group">
+                    <label class="col-md-3 control-label"></label>
+                    <div class="col-md-9">
+                        <button type="button" class="btn btn-primary download-btn">{% trans %}Download{% endtrans %}</button>
+                    </div>
+                </div>
+            </fieldset>
+            <fieldset>
+                <pre class="log_content log_background"></pre>
+            </fieldset>
+        </div>
+    </div><!-- row-fluid -->
+    <div class="btn-static">
+        <div class="btn-switch">
+            <button type="button" class="btn btn-action btn-submit">{% trans %}Save Changes{% endtrans %}</button>
+            <button type="button" class="btn btn-default btn-cancel-action">{% trans %}Cancel{% endtrans %}</button>
+        </div>
+    </div>
+</form>
+<style type="text/css">
+.btn-static {
+    display: none;
+}
+</style>
+
+{% block box_script %}
+
+<script type="text/javascript">
+
+$(function() {
+    var enableSwitch = $("input[name='switch_btn']").bootstrapSwitch();
+    var is_init = 0;
+    getEnableStatus();
+    function getEnableStatus() {
+        $.ajax({
+            url: '/api/v1/cloud/az/log/status/',
+            type: 'GET',
+            dataType: 'json',
+            success: function (res) {
+                if (typeof(res["is_on"]) == "undefined") {
+                    return;
+                }
+                enableSwitch.bootstrapSwitch('setState', res["is_on"]);
+                is_init++;
+            },
+            error: function (xhr, textStatus, errorThrown) {
+                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
+            }
+        });
+    }
+    enableSwitch.on('switch-change', function(e, data) {
+        if (is_init < 2) {
+            return;
+        }
+        $('#frame_model_main .btn-static').fadeIn("slow");
+        if ($(".btn-static").is(":visible")) {
+            var buttonH = $(".btn-static").offset().top;  
+            $(function(){ 
+                $(window).scroll(function(){ 
+                    var scrollH = $(this).scrollTop();  
+                    if (scrollH >= buttonH) {
+                        $(".btn-switch").addClass("btn-fixed");
+                    }else{  
+                        $(".btn-switch").removeClass("btn-fixed");
+                    } 
+                });
+            });
+        }
+    });
+    $('.select-level').selectpicker();
+    getLogLevel();
+    function getLogLevel() {
+        $.ajax({
+            url: '/api/v1/cloud/az/log/severity/',
+            type: 'GET',
+            dataType: 'json',
+            success: function (res) {
+                if (typeof(res["severity"]) == "undefined") {
+                    return;
+                }
+                $('.select-level').selectpicker("val", res["severity"]);
+                is_init++;
+            },
+            error: function (xhr, textStatus, errorThrown) {
+                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
+            }
+        });
+    }
+    $(".select-level").change(function() {
+        if (is_init < 2) {
+            return;
+        }
+        $('#frame_model_main .btn-static').fadeIn("slow");
+        if ($(".btn-static").is(":visible")) {
+            var buttonH = $(".btn-static").offset().top;  
+            $(function(){ 
+                $(window).scroll(function(){ 
+                    var scrollH = $(this).scrollTop();  
+                    if (scrollH >= buttonH) {
+                        $(".btn-switch").addClass("btn-fixed");
+                    }else{  
+                        $(".btn-switch").removeClass("btn-fixed");
+                    } 
+                });
+            });
+        }
+    });
+    $('.btn-cancel-action').click(function(evt) {
+        if(evt.detail && evt.detail != 1) {
+            return;
+        }
+        refreshPage();
+    });
+    $('.btn-submit').click(function(evt) {
+        if(evt.detail && evt.detail != 1) {
+            return;
+        }
+        var enable = enableSwitch.bootstrapSwitch('state'); // true / false
+        var ajaxes = [];
+        ajaxes.push($.ajax({
+            url: '/api/v1/cloud/az/log/status/',
+            type: 'PUT',
+            dataType: 'json',
+            data: JSON.stringify({
+                status: (enable ? 'on' : 'off')
+            }),
+            success: function (res) {
+            },
+            error: function (xhr, textStatus, errorThrown) {
+                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
+            }
+        }));
+        ajaxes.push($.ajax({
+            url: '/api/v1/cloud/az/log/severity/',
+            type: 'PUT',
+            dataType: 'json',
+            data: JSON.stringify({
+                severity: $(".select-level").selectpicker('val')
+            }),
+            success: function (res) {
+                refreshPage();
+            },
+            error: function (xhr, textStatus, errorThrown) {
+                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
+            }
+        }));
+        $.when.apply($, ajaxes)
+        .done(function(){
+            refreshPage();
+        });
+    });
+
+    $('.download-btn').click(function(evt) {
+        if(evt.detail && evt.detail != 1) {
+            return;
+        }
+        window.open("/api/v1/cloud/az/logfile/");
+    });
+
+    getInit();
+    function getInit() {
+        $.ajax({
+            url: '/api/v1/cloud/az/log/',
+            type: 'GET',
+            dataType: 'json',
+            success: function(res) {
+                if (typeof(res["message"]) == "undefined") {
+                    return;
+                }
+                $('.log_content').html(res["message"]);
+            },
+            error: function (xhr, textStatus, errorThrown) {
+                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
+            }
+        });
+    }
+
+    function refreshPage() {
+        $('.config-nav li.active a').trigger('click');
+    }
+});
+
+</script>
+{% endblock box_script %}
Index: /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/network/cloud/azure/nic.html
===================================================================
--- /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/network/cloud/azure/nic.html	(revision 0)
+++ /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/network/cloud/azure/nic.html	(working copy)
@@ -0,0 +1,458 @@
+<form class="form-horizontal main-form">
+<div class="row-fluid">
+    <div class="span12 with-min-width field-group-box">
+        <fieldset>
+            <div class="group_actions"></div>
+            <div class="form-group switch switch_enable">
+                <label class="col-md-3 control-label">{% trans %}Enable{% endtrans %}:</label>
+                <div class="col-md-3">
+                    <input class="switch-small" type="checkbox" name="switch_btn"
+                    data-on-label="{% trans %}Enable{% endtrans %}"
+                    data-off-label="{% trans %}Disabled{% endtrans %}" />
+                    <span class="field-icon-set"></span>
+                </div>
+                <label class="col-md-3 control-label">{% trans %}Manual Trigger{% endtrans %}:</label>
+                <div class="col-md-3 col-manual-trigger">
+                    <button type="button" class="btn btn-primary failover-btn">{% trans %}Failover{% endtrans %}</button>
+                    <button type="button" class="btn btn-primary recover-btn">{% trans %}Recover{% endtrans %}</button>
+                </div>
+            </div>
+        </fieldset>
+        <fieldset>
+            <div class="form-group add-btn-style">
+                <div class="col-md-3">
+                    <button type="button" class="btn btn-action add-btn control-label"><i class="fa fa-plus-circle"></i>{% trans %}ADD{% endtrans %}</button>
+                </div>
+                <div class="col-md-9" id="app"></div>
+            </div>
+        </fieldset>
+    </div>
+</div>
+<!-- row-fluid -->
+<div class="btn-static">
+    <div class="btn-switch">
+        <button type="button" class="btn btn-action btn-submit">{% trans %}Save Changes{% endtrans %}</button>
+        <button type="button" class="btn btn-default btn-cancel-action">{% trans %}Cancel{% endtrans %}</button>
+    </div>
+</div>
+<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="box modal-content">
+            <div class="box-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true"></span></button>
+                    <h2>{{ gettext('New %s')%"NIC" }}</h2>
+                </button>
+            </div>
+            <div class="box-body">
+                <form class="form-horizontal main-form">
+                    <div class="padded">
+                        <div class="row-fluid">
+                            <div class="span12 with-min-width field-group-box modal-fields">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-actions col-md-offset-3">
+                        <button type="button" class="btn btn-action btn-save">{% trans %}Submit{% endtrans %}</button>
+                        <button type="button" data-dismiss="modal" class="btn btn-default btn-cancel">{% trans %}Cancel{% endtrans %}</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+</form>
+<style type="text/css">
+.add-btn-style {
+    text-align: right;
+}
+.add-btn-style .add-btn {
+    background-color: transparent;
+    border: 0;
+    font-weight: 700;
+}
+.modal-fields {
+    padding-top: 20px;
+}
+.form-actions {
+    padding-bottom: 20px;
+}
+#app {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+#app .block {
+    min-width: 200px;
+    box-sizing: border-box;
+    margin-right: 20px;
+}
+#app .box.modal-content {
+    border-radius: 6px;
+}
+#app .block .modal-dialog {
+    width: 100%;
+    margin: 0;
+}
+#app .box-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 10px;
+    padding-left: 10px;
+}
+#app .box-header button.close:active {
+    opacity: 0.2;
+}
+#app .box-body ul {
+    padding: 0;
+    list-style: none;
+}
+#app .box-body ul li {
+    padding: 5px;
+    text-align: left;
+}
+.btn-static {
+    display: none;
+}
+</style>
+</div>
+
+{% block box_script %}
+
+<script type="text/javascript">
+
+$(function(){
+    var enableSwitch = $("input[name='switch_btn']").bootstrapSwitch();
+    var is_init = 0;
+    getEnableStatus();
+    function getEnableStatus() {
+        $.ajax({
+            url: '/api/v1/cloud/az/nicpoller/status/',
+            type: 'GET',
+            dataType: 'json',
+            success: function (res) {
+                if (typeof(res["is_running"]) == "undefined") {
+                    return;
+                }
+                enableSwitch.bootstrapSwitch('setState', res["is_running"]);
+                is_init++;
+            },
+            error: function (xhr, textStatus, errorThrown) {
+                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
+            }
+        });
+    }
+    enableSwitch.on('switch-change', function(e, data) {
+        if (is_init < 1) {
+            return;
+        }
+        $('#frame_model_main .btn-static').fadeIn("slow");
+        if ($(".btn-static").is(":visible")) {
+            var buttonH = $(".btn-static").offset().top;  
+            $(function(){ 
+                $(window).scroll(function(){ 
+                    var scrollH = $(this).scrollTop();  
+                    if (scrollH >= buttonH) {
+                        $(".btn-switch").addClass("btn-fixed");
+                    }else{  
+                        $(".btn-switch").removeClass("btn-fixed");
+                    } 
+                });
+            });
+        }
+    });
+    $('.btn-cancel-action').click(function(evt) {
+        if(evt.detail && evt.detail != 1) {
+            return;
+        }
+        refreshPage();
+    });
+    $('.btn-submit').click(function(evt) {
+        if(evt.detail && evt.detail != 1) {
+            return;
+        }
+        var enable = enableSwitch.bootstrapSwitch('state'); // true / false
+        $.ajax({
+            url: '/api/v1/cloud/az/nicpoller/',
+            type: 'PUT',
+            dataType: 'json',
+            data: JSON.stringify({
+                status: (enable ? 'on' : 'off')
+            }),
+            success: function (res) {
+                refreshPage();
+            },
+            error: function (xhr, textStatus, errorThrown) {
+                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
+            }
+        });
+    });
+    var modal_fields = [{
+        field: '{% trans %}Sub ID{% endtrans %}',
+        id: 'sub_id',
+        value: ''
+    }, {
+        field: '{% trans %}Resource Grop Name{% endtrans %}',
+        id: 'res_grp_name',
+        value: ''
+    }, {
+        field: '{% trans %}Source NIC Name{% endtrans %}',
+        id: 'src_nic_name',
+        value: ''
+    }, {
+        field: '{% trans %}Destination NIC Name{% endtrans %}',
+        id: 'dest_nic_name',
+        value: ''
+    }];
+    // for displaying fields in each block
+    var show_fields = ['src_nic_name', 'dest_nic_name'];
+    var is_show_field_title = true;
+
+    $('.add-btn').click(function() {
+        var content = setContent(modal_fields);
+        $('.modal-fields').html(content);
+        $('#addModal').modal();
+    });
+    $('.failover-btn').click(function(evt) {
+        if(evt.detail && evt.detail != 1) {
+            return;
+        }
+        var that = this;
+        $(that).css("disabled", true);
+        $.ajax({
+            url: '/api/v1/cloud/az/nictrigger/',
+            type: 'PUT',
+            dataType: 'json',
+            data: JSON.stringify({
+                status: 'failover'
+            }),
+            success: function (res) {
+                if (typeof(res["message"]) == "undefined") {
+                    return;
+                }
+                alert(res["message"]);
+                $(that).css("disabled", false);
+            },
+            error: function (xhr, textStatus, errorThrown) {
+                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
+                $(that).css("disabled", false);
+            }
+        });
+    });
+    $('.recover-btn').click(function(evt) {
+        if(evt.detail && evt.detail != 1) {
+            return;
+        }
+        var that = this;
+        $(that).css("disabled", true);
+        $.ajax({
+            url: '/api/v1/cloud/az/nictrigger/',
+            type: 'PUT',
+            dataType: 'json',
+            data: JSON.stringify({
+                status: 'recover'
+            }),
+            success: function (res) {
+                if (typeof(res["message"]) == "undefined") {
+                    return;
+                }
+                alert(res["message"]);
+                $(that).css("disabled", false);
+            },
+            error: function (xhr, textStatus, errorThrown) {
+                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
+                $(that).css("disabled", false);
+            }
+        });
+    });
+    var config = [];
+    $('.btn-save').click(function(evt) {
+        if(evt.detail && evt.detail != 1) {
+            return;
+        }
+        var each = {};
+        $('.field').each(function() {
+            if ($(this).val() == "") {
+                return;
+            }
+            each[$(this).data('id')] = $(this).val();
+        });
+        if (Object.keys(each).length < 1) {
+            return;
+        }
+        addNIC(each.sub_id, each.res_grp_name, each.src_nic_name, each.dest_nic_name);
+    });
+
+    getInit();
+    function getInit() {
+        $.ajax({
+            url: '/api/v1/cloud/az/nicconfig/',
+            type: 'GET',
+            dataType: 'json',
+            success: function(res) {
+                for (var index in res) {
+                    config.push({
+                        primary_key: index,
+                        sub_id: res[index].subscription_id,
+                        res_grp_name: res[index].res_grp_name,
+                        src_nic_name: res[index].from_nic_name,
+                        dest_nic_name: res[index].to_nic_name
+                    })
+                }
+                updateBlockList(config, show_fields, is_show_field_title);
+            },
+            error: function (xhr, textStatus, errorThrown) {
+                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
+            }
+        });
+    }
+
+    /**
+     * Return html string for content of pop up window(Add)
+     * @param array setting: array for each setting
+     * @return string
+     */
+    function setContent(setting) {
+        var html = [];
+        for (var ind = 0; ind < setting.length; ++ind) {
+            var each = setting[ind];
+            html.push([
+                '<fieldset>',
+                    '<div class="group_actions"></div>',
+                        '<div class="form-group">',
+                        '<label class="col-md-3 control-label">',
+                            setting[ind].field,
+                        ':</label>',
+                        '<div class="col-md-9">',
+                            '<input type="text" class="field" data-id="' + setting[ind].id,
+                            '" value="' + setting[ind].value + '" />',
+                        '</div>',
+                    '</div>',
+                '</fieldset>'
+            ].join(""));
+        }
+        return html.join("");
+    }
+
+    /**
+     * Update layout for each blocks
+     * @param array setting: array of block information
+     * @param array fields: array of displaying fields, empty is all
+     * @param bool value_only: display value or [field: value] for each list
+     * @return void
+     */
+    function updateBlockList(setting, fields = [], value_only = true) {
+        var html = [];
+        var nameMapping = getNameMapping(); // ex: sub_id: SubId
+        for (var ind = 0; ind < setting.length; ++ind) {
+            var list = [];
+            for (var field in setting[ind]) {
+                if (fields.length !== 0 && fields.indexOf(field) === -1) {
+                    // Not display
+                    continue;
+                }
+                if (field == "primary_key") {
+                    // Not display
+                    continue;
+                }
+                var content = setting[ind][field];
+                if (!value_only) {
+                    var display_name = "";
+                    if (nameMapping.hasOwnProperty(field)) {
+                        display_name = nameMapping[field];
+                    }
+                    content = display_name + ": " + content;
+                }
+                list.push([
+                    '<li data-id="' + field + '">' + content + '</li>'
+                ].join(""));
+            }
+            html.push([
+                '<div class="block">',
+                    '<div class="modal-dialog">',
+                        '<div class="box modal-content">',
+                            '<div class="box-header">',
+                                '<span>' + setting[ind]['primary_key'] + '</span>',
+                                '<button type="button" class="close" aria-label="Close"',
+                                    'data-id="' + setting[ind]['primary_key'] + '">',
+                                    '<span aria-hidden="true">&times;</span></button>',
+                            '</div>',
+                            '<div class="box-body">',
+                                '<ul>',
+                                    list.join(""),
+                                '</ul>',
+                            '</div>',
+                        '</div>',
+                    '</div>',
+                '</div>'
+            ].join(""));
+        }
+        $('#app').html(html.join(""));
+        $('#app .block .box-header button').click(function() {
+            var index = parseInt($(this).data("id"));
+            delNIC(index);
+        });
+    }
+
+    function addNIC(sub_id, res_grp_name, src_nic_name, dest_nic_name) {
+        $.ajax({
+            url: '/api/v1/cloud/az/nicconfig/',
+            type: 'POST',
+            dataType: 'json',
+            data: JSON.stringify({
+                sub_id: sub_id,
+                res_grp_name: res_grp_name,
+                src_nic_name: src_nic_name,
+                dest_nic_name: dest_nic_name
+            }),
+            success: function(res) {
+                $('#addModal').modal('hide');
+                setTimeout(function() {
+                    refreshPage();
+                }, 400);
+            },
+            error: function (xhr, textStatus, errorThrown) {
+                $('#addModal').modal('hide');
+                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
+            }
+        });
+    }
+
+    function delNIC(index) {
+        $.ajax({
+            url: '/api/v1/cloud/az/nicconfig/',
+            type: 'DELETE',
+            dataType: 'json',
+            data: JSON.stringify({
+                index: index
+            }),
+            success: function(res) {
+                refreshPage();
+            },
+            error: function (xhr, textStatus, errorThrown) {
+                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
+            }
+        });
+    }
+
+    /**
+     * Get Display name mapping by index
+     * @return object
+     */
+    function getNameMapping() {
+        var mapping = {};
+        for (var ind = 0; ind < modal_fields.length; ++ind) {
+            mapping[modal_fields[ind].id] = modal_fields[ind].field;
+        }
+        return mapping;
+    }
+
+    function refreshPage() {
+        $('.config-nav li.active a').trigger('click');
+    }
+
+});
+
+</script>
+{% endblock box_script %}
Index: /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/network/cloud/azure/udr.html
===================================================================
--- /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/network/cloud/azure/udr.html	(revision 0)
+++ /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/templates/network/cloud/azure/udr.html	(working copy)
@@ -0,0 +1,407 @@
+<form class="form-horizontal main-form">
+<div class="row-fluid">
+    <div class="span12 with-min-width field-group-box">
+        <fieldset>
+            <div class="group_actions"></div>
+            <div class="form-group switch switch_enable">
+                <label class="col-md-3 control-label">{% trans %}Enable{% endtrans %}:</label>
+                <div class="col-md-9">
+                    <input class="switch-small" type="checkbox" name="switch_btn"
+                    data-on-label="{% trans %}Enable{% endtrans %}"
+                    data-off-label="{% trans %}Disabled{% endtrans %}" />
+                    <span class="field-icon-set"></span>
+                </div>
+            </div>
+        </fieldset>
+        <fieldset>
+            <div class="form-group add-btn-style">
+                <div class="col-md-3">
+                    <button type="button" class="btn btn-action add-btn control-label"><i class="fa fa-plus-circle"></i>{% trans %}ADD{% endtrans %}</button>
+                </div>
+                <div class="col-md-9" id="app"></div>
+            </div>
+        </fieldset>
+    </div>
+</div>
+<!-- row-fluid -->
+<div class="btn-static">
+    <div class="btn-switch">
+        <button type="button" class="btn btn-action btn-submit">{% trans %}Save Changes{% endtrans %}</button>
+        <button type="button" class="btn btn-default btn-cancel-action">{% trans %}Cancel{% endtrans %}</button>
+    </div>
+</div>
+<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="box modal-content">
+            <div class="box-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true"></span></button>
+                    <h2>{{ gettext('New %s')%"UDR" }}</h2>
+                </button>
+            </div>
+            <div class="box-body">
+                <form class="form-horizontal main-form">
+                    <div class="padded">
+                        <div class="row-fluid">
+                            <div class="span12 with-min-width field-group-box modal-fields">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-actions col-md-offset-3">
+                        <button type="button" class="btn btn-action btn-save">{% trans %}Submit{% endtrans %}</button>
+                        <button type="button" data-dismiss="modal" class="btn btn-default btn-cancel">{% trans %}Cancel{% endtrans %}</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+</form>
+<style type="text/css">
+.add-btn-style {
+    text-align: right;
+}
+.add-btn-style .add-btn {
+    background-color: transparent;
+    border: 0;
+    font-weight: 700;
+}
+.modal-fields {
+    padding-top: 20px;
+}
+.form-actions {
+    padding-bottom: 20px;
+}
+#app {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+#app .block {
+    min-width: 200px;
+    box-sizing: border-box;
+    margin-right: 20px;
+}
+#app .box.modal-content {
+    border-radius: 6px;
+}
+#app .block .modal-dialog {
+    width: 100%;
+    margin: 0;
+}
+#app .box-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 10px;
+    padding-left: 10px;
+}
+#app .box-header button.close:active {
+    opacity: 0.2;
+}
+#app .box-body ul {
+    padding: 0;
+    list-style: none;
+}
+#app .box-body ul li {
+    padding: 5px;
+    text-align: left;
+}
+.btn-static {
+    display: none;
+}
+</style>
+</div>
+
+{% block box_script %}
+
+<script type="text/javascript">
+
+$(function(){
+    var enableSwitch = $("input[name='switch_btn']").bootstrapSwitch();
+    var is_init = 0;
+    getEnableStatus();
+    function getEnableStatus() {
+        $.ajax({
+            url: '/api/v1/cloud/az/udrpoller/status/',
+            type: 'GET',
+            dataType: 'json',
+            success: function (res) {
+                if (typeof(res["is_running"]) == "undefined") {
+                    return;
+                }
+                enableSwitch.bootstrapSwitch('setState', res["is_running"]);
+                is_init++;
+            },
+            error: function (xhr, textStatus, errorThrown) {
+                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
+            }
+        });
+    }
+    enableSwitch.on('switch-change', function(e, data) {
+        if (is_init < 1) {
+            return;
+        }
+        $('#frame_model_main .btn-static').fadeIn("slow");
+        if ($(".btn-static").is(":visible")) {
+            var buttonH = $(".btn-static").offset().top;  
+            $(function(){ 
+                $(window).scroll(function(){ 
+                    var scrollH = $(this).scrollTop();  
+                    if (scrollH >= buttonH) {
+                        $(".btn-switch").addClass("btn-fixed");
+                    }else{  
+                        $(".btn-switch").removeClass("btn-fixed");
+                    } 
+                });
+            });
+        }
+    });
+    $('.btn-cancel-action').click(function(evt) {
+        if(evt.detail && evt.detail != 1) {
+            return;
+        }
+        refreshPage();
+    });
+    $('.btn-submit').click(function(evt) {
+        if(evt.detail && evt.detail != 1) {
+            return;
+        }
+        var enable = enableSwitch.bootstrapSwitch('state'); // true / false
+        $.ajax({
+            url: '/api/v1/cloud/az/udrpoller/',
+            type: 'PUT',
+            dataType: 'json',
+            data: JSON.stringify({
+                status: (enable ? 'on' : 'off')
+            }),
+            success: function (res) {
+                refreshPage();
+            },
+            error: function (xhr, textStatus, errorThrown) {
+                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
+            }
+        });
+    });
+    var modal_fields = [{
+        field: '{% trans %}Sub ID{% endtrans %}',
+        id: 'sub_id',
+        value: ''
+    }, {
+        field: '{% trans %}Resource Grop Name{% endtrans %}',
+        id: 'res_grp_name',
+        value: ''
+    }, {
+        field: '{% trans %}Monitored VM Name{% endtrans %}',
+        id: 'vm_name',
+        value: ''
+    }, {
+        field: '{% trans %}Target IP When Running{% endtrans %}',
+        id: 'ip_running',
+        value: ''
+    }, {
+        field: '{% trans %}Target IP When Deallocated{% endtrans %}',
+        id: 'ip_deallocated',
+        value: ''
+    }];
+    // for displaying fields in each block
+    var show_fields = []; // for displaying fields in each block
+    is_show_field_title = false;
+
+    $('.add-btn').click(function() {
+        var content = setContent(modal_fields);
+        $('.modal-fields').html(content);
+        $('#addModal').modal();
+    });
+    var config = [];
+    $('.btn-save').click(function(evt) {
+        if(evt.detail && evt.detail != 1) {
+            return;
+        }
+        var each = {};
+        $('.field').each(function() {
+            if ($(this).val() == "") {
+                return;
+            }
+            each[$(this).data('id')] = $(this).val();
+        });
+        if (Object.keys(each).length < 1) {
+            return;
+        }
+        addUDR(each.sub_id, each.res_grp_name, each.vm_name, each.ip_running, each.ip_deallocated);
+    });
+
+    getInit();
+    function getInit() {
+        $.ajax({
+            url: '/api/v1/cloud/az/udrconfig/',
+            type: 'GET',
+            dataType: 'json',
+            success: function(res) {
+                for (var index in res) {
+                    config.push({
+                        primary_key: index,
+                        sub_id: res[index].subscription_id,
+                        res_grp_name: res[index].resource_group_name,
+                        vm_name: res[index].monitored_vm_name,
+                        ip_running: res[index].target_ip_when_running,
+                        ip_deallocated: res[index].target_ip_when_deallocated
+                    })
+                }
+                updateBlockList(config, show_fields, is_show_field_title);
+            },
+            error: function (xhr, textStatus, errorThrown) {
+                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
+            }
+        });
+    }
+
+    /**
+     * Return html string for content of pop up window(Add)
+     * @param array setting: array for each setting
+     * @return string
+     */
+    function setContent(setting) {
+        var html = [];
+        for (var ind = 0; ind < setting.length; ++ind) {
+            var each = setting[ind];
+            html.push([
+                '<fieldset>',
+                    '<div class="group_actions"></div>',
+                        '<div class="form-group">',
+                        '<label class="col-md-3 control-label">',
+                            setting[ind].field,
+                        ':</label>',
+                        '<div class="col-md-9">',
+                            '<input type="text" class="field" data-id="' + setting[ind].id,
+                            '" value="' + setting[ind].value + '" />',
+                        '</div>',
+                    '</div>',
+                '</fieldset>'
+            ].join(""));
+        }
+        return html.join("");
+    }
+
+    /**
+     * Update layout for each blocks
+     * @param array setting: array of block information
+     * @param array fields: array of displaying fields, empty is all
+     * @param bool value_only: display value or [field: value] for each list
+     * @return void
+     */
+    function updateBlockList(setting, fields = [], value_only = true) {
+        var html = [];
+        var nameMapping = getNameMapping(); // ex: sub_id: SubId
+        for (var ind = 0; ind < setting.length; ++ind) {
+            var list = [];
+            for (var field in setting[ind]) {
+                if (fields.length !== 0 && fields.indexOf(field) === -1) {
+                    // Not display
+                    continue;
+                }
+                if (field == "primary_key") {
+                    // Not display
+                    continue;
+                }
+                var content = setting[ind][field];
+                if (!value_only) {
+                    var display_name = "";
+                    if (nameMapping.hasOwnProperty(field)) {
+                        display_name = nameMapping[field];
+                    }
+                    content = display_name + ": " + content;
+                }
+                list.push([
+                    '<li data-id="' + field + '">' + content + '</li>'
+                ].join(""));
+            }
+            html.push([
+                '<div class="block">',
+                    '<div class="modal-dialog">',
+                        '<div class="box modal-content">',
+                            '<div class="box-header">',
+                                '<span>' + setting[ind]['primary_key'] + '</span>',
+                                '<button type="button" class="close" aria-label="Close"',
+                                    'data-id="' + setting[ind]['primary_key'] + '">',
+                                    '<span aria-hidden="true">&times;</span></button>',
+                            '</div>',
+                            '<div class="box-body">',
+                                '<ul>',
+                                    list.join(""),
+                                '</ul>',
+                            '</div>',
+                        '</div>',
+                    '</div>',
+                '</div>'
+            ].join(""));
+        }
+        $('#app').html(html.join(""));
+        $('#app .block .box-header button').click(function() {
+            var index = parseInt($(this).data("id"));
+            delUDR(index);
+        });
+    }
+
+    function addUDR(sub_id, res_grp_name, vm_name, ip_running, ip_deallocated) {
+        $.ajax({
+            url: '/api/v1/cloud/az/udrconfig/',
+            type: 'POST',
+            dataType: 'json',
+            data: JSON.stringify({
+                sub_id: sub_id,
+                res_grp_name: res_grp_name,
+                vm_name: vm_name,
+                ip_running: ip_running,
+                ip_deallocating: ip_deallocated
+            }),
+            success: function(res) {
+                $('#addModal').modal('hide');
+                setTimeout(function() {
+                    refreshPage();
+                }, 400);
+            },
+            error: function (xhr, textStatus, errorThrown) {
+                $('#addModal').modal('hide');
+                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
+            }
+        });
+    }
+
+    function delUDR(index) {
+        $.ajax({
+            url: '/api/v1/cloud/az/udrconfig/',
+            type: 'DELETE',
+            dataType: 'json',
+            data: JSON.stringify({
+                index: index
+            }),
+            success: function(res) {
+                refreshPage();
+            },
+            error: function (xhr, textStatus, errorThrown) {
+                console.log(textStatus + "," + errorThrown + "," + xhr.responseText);
+            }
+        });
+    }
+
+    /**
+     * Get Display name mapping by index
+     * @return object
+     */
+    function getNameMapping() {
+        var mapping = {};
+        for (var ind = 0; ind < modal_fields.length; ++ind) {
+            mapping[modal_fields[ind].id] = modal_fields[ind].field;
+        }
+        return mapping;
+    }
+
+    function refreshPage() {
+        $('.config-nav li.active a').trigger('click');
+    }
+
+});
+
+</script>
+{% endblock box_script %}
Index: /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/tree.py
===================================================================
--- /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/tree.py	(revision 38952)
+++ /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/apv/tree.py	(working copy)
@@ -263,6 +263,9 @@
             ('dnsnat46', {'cls':ModelNode, 'model':'network.ipv6.DNSNAT46Settings'}),
             ('ipv6', {'cls':ModelNode, 'model':'network.ipv6.IPv6Tune'}),
         ])}),
+        ('cloud', {'cls':MenuNode, 'verbose_name':_('Cloud'),'sub_nodes':D([
+            ('azure', {'cls':ModuleNode, 'default_action':'index', 'package':''}),
+        ])}),
         ('route', {'cls':MenuNode, 'verbose_name':_('Routing'), 'icon':'fa-code-fork', 'sub_nodes':D([
             ('basic', {'cls':MenuNode, 'verbose_name':_('Basic Routing'),'sub_nodes':D([
                 ('default', {'cls':ModelNode, 'model':'routing.static.DefaultRoutingSetting'}),
@@ -458,9 +461,6 @@
             ('synchronization', {'cls':ModelNode, 'model':'ha.synconfig.SynconfigGeneralSettings'}),
             ('IncrementalSynconfig', {'cls':ModelNode, 'model':'ha.synconfig.IncrementalSynconfig'}),
         ])}),
-        ('cloud', {'cls':MenuNode, 'verbose_name':_('Cloud'),'sub_nodes':D([
-            ('azure', {'cls':ModuleNode, 'default_action':'index', 'package':''}),
-        ])}),
     ])}),
             
     ('ajax', {'cls':MenuNode, 'hidden':True, 'sub_nodes':D([
Index: /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/media/less/themes/Default/widgets.less
===================================================================
--- /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/media/less/themes/Default/widgets.less	(revision 38952)
+++ /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/media/less/themes/Default/widgets.less	(working copy)
@@ -184,3 +184,6 @@
         }
     }
 }
+.log_background {
+    background-color: #fff !important;
+}
Index: /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/media/less/themes/New/widgets.less
===================================================================
--- /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/media/less/themes/New/widgets.less	(revision 38952)
+++ /branches/rel_apv_10_7_0_21_pre_sight/usr/click/webui/htdocs/new/src/media/less/themes/New/widgets.less	(working copy)
@@ -184,3 +184,6 @@
         }
     }
 }
+.log_background {
+    background-color: #1b2d43 !important;
+}