Index: /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/router.py
===================================================================
--- /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/router.py	(revision 38990)
+++ /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/router.py	(working copy)
@@ -14,7 +14,6 @@
 import geoip2.database as database
 from apv.company import *
 import re
-import time
 
 lruCache = LRUCacheDict(max_size=10000)
 reader = database.Reader('/ca/webui/conf/GeoLite2-City.mmdb')
@@ -632,7 +631,7 @@
     result = result[:3]
 
     return HttpResponse(json.dumps({
-        "system_version":result[1][0], 
+        "system_version":result[1][0],
         "patch_version":result[0][0] if result[0] else "",
         "other_version":result[2][0],
         }))
@@ -721,56 +720,18 @@
         "device_healthy_count" : device_count - device_unhealthy_count,
         "device_unhealthy_count" : device_unhealthy_count,
     }))
-
-def prometheus_log_download(request):
-    lines = 0
-    if "lines" in request.GET and request.GET["lines"]:
-        lines = request.GET["lines"]
-    sess = get_current_session()
-    sess.cli.set_enable()
-    logs = sess.cli.cmd('show prometheus log %s' % lines)
-    cur_time = time.strftime("%Y%m%d%H%M%S", time.localtime())
-    file_name = "%s_%s.%s" % ("Prometheus_log", cur_time, 'txt')
-    response = HttpResponse(logs)
-    response['Content-Type'] = 'text/plain; charset=utf-8'
-    response['Content-Disposition'] = 'attachment; filename=%s' % file_name
-    return response
-
-
-def get_cloud_page(request):
+def get_prometheus_page(request):
     if not request.GET['type'] or not request.GET['page']:
         raise Http404('Page not found')
     env = HiveEnvironment(loader=ChoiceLoader([
-                                    PackageLoader('apv', 'templates')]))
-    if request.GET['type'] == "azure":
-        if request.GET['page'] == "basic":
-            template = env.get_template("/ha/cloud/azure/basic.html")
-            response = HttpResponse(template.render())
-            return response
-        elif request.GET['page'] == "nic":
-            template = env.get_template("/ha/cloud/azure/nic.html")
-            response = HttpResponse(template.render())
-            return response
-        elif request.GET['page'] == "udr":
-            template = env.get_template("/ha/cloud/azure/udr.html")
-            response = HttpResponse(template.render())
-            return response
-        elif request.GET['page'] == "log":
-            template = env.get_template("/ha/cloud/azure/log.html")
-            response = HttpResponse(template.render())
-            return response
-
-    elif request.GET['type'] == "aws":
+                                      PackageLoader('apv', 'templates')]))
+    if request.GET['type'] == "matrix":
         if request.GET['page'] == "basic":
-            template = env.get_template("/ha/cloud/aws/basic.html")
-            response = HttpResponse(template.render())
-            return response
-        elif request.GET['page'] == "eni":
-            template = env.get_template("/ha/cloud/aws/eni.html")
+            template = env.get_template("/monitoring/prometheus/index/basic.html")
             response = HttpResponse(template.render())
             return response
         elif request.GET['page'] == "log":
-            template = env.get_template("/ha/cloud/aws/log.html")
+            template = env.get_template("/monitoring/prometheus/index/log.html")
             response = HttpResponse(template.render())
             return response
-    raise Http404('Page not found')
\ No newline at end of file
+    raise Http404('Page not found')
Index: /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/templates/monitoring/prometheus/index/basic.html
===================================================================
--- /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/templates/monitoring/prometheus/index/basic.html	(revision 0)
+++ /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/templates/monitoring/prometheus/index/basic.html	(working copy)
@@ -0,0 +1,1088 @@
+<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.dataTables.css" />
+<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 %}Disable{% endtrans %}" />
+                        <span class="field-icon-set"></span>
+                    </div>
+                </div>
+            </fieldset>
+            <fieldset class="controled active">
+                <div class="form-group">
+                    <label class="col-md-3 control-label">{% trans %}Port{% endtrans %}</label>
+                    <div class="col-md-9">
+                        <input type="number" name="port_number" min="0" max="65535" /> (0-65535)
+                    </div>
+                </div>
+            </fieldset>
+            <fieldset class="controled active">
+                <div class="group_actions"></div>
+                <div class="form-group switch switch_enable">
+                    <label class="col-md-3 control-label">{% trans %}Enable HTTPS{% endtrans %}</label>
+                    <div class="col-md-9">
+                        <input class="switch-small" type="checkbox" name="switch_https_btn"
+                            data-on-label="{% trans %}Enable{% endtrans %}"
+                            data-off-label="{% trans %}Disable{% endtrans %}" />
+                        <span class="field-icon-set"></span>
+                    </div>
+                </div>
+            </fieldset>
+            <fieldset class="controled active">
+                <div class="form-group">
+                    <label class="col-md-3 control-label">{% trans %}Certificate{% endtrans %}</label>
+                    <div class="col-md-9">
+                        <button type="button" class="btn btn-primary lightbox-toggle">Import</button>
+                        <button type="button" class="btn btn-danger remove-data">Remove</button>
+                    </div>
+                </div>
+            </fieldset>
+            <fieldset class="controled active">
+                <div class="form-group">
+                    <label class="col-md-3 control-label">{% trans %}TTL{% endtrans %}</label>
+                    <div class="col-md-9">
+                        <input type="number" name="ttl" min="3" max="60" /> (3-60)min
+                    </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 id="basic-setting-table">
+        <div class="box-header" id="25db1b5a-6eae-43a0-972b-2df786ddaf74_header">
+            <div class="box-bg-spe">
+                <div class="box-icon-title">
+                    <i class="fa fa-list-alt" id="25db1b5a-6eae-43a0-972b-2df786ddaf74_setting"></i>
+                </div>
+            </div>
+            <div class="control-group table-btn-group" id="25db1b5a-6eae-43a0-972b-2df786ddaf74_actions">
+                <button type="button" class="btn btn-action add-btn"><i class="fa fa-plus-circle"></i>ADD</button>
+                <button type="button" class="btn btn-action delete-btn disabled"><i class="fa fa-minus-circle"></i>DELETE</button>
+                <select class="expired-filter" id="25db1b5a-6eae-43a0-972b-2df786ddaf74_expired_filter">
+                    <option value="all">All</option>
+                    <option value="expired">Expired</option>
+                    <option value="not_expired">Not Expired</option>
+                </select>
+            </div>
+            <div class="pull-right filter-control-group">
+            </div>
+        </div>
+        <table id="prometheus_token" class="display" style="width:100%">
+            <thead>
+                <tr>
+                    <th></th>
+                    <th>ID</th>
+                    <th>{% trans %}User Name{% endtrans %}</th>
+                    <th>{% trans %}Token{% endtrans %}</th>
+                    <th>{% trans %}Created Date{% endtrans %}</th>
+                    <th>{% trans %}Expired Date{% endtrans %}</th>
+                    <th>{% trans %}Last Used Date{% endtrans %}</th>
+                    <th>{% trans %}Is Expired{% endtrans %}</th>
+                </tr>
+            </thead>
+        </table>
+    </div>
+</form>
+<div class="custom-lightbox">
+    <div class="lightbox-toggle close-lightbox">
+        <i class="fa modal-close-icon">×</i>
+    </div>
+    <div class="lightbox-content">
+        <div class="box">
+            <div class="box-header my-header">
+                <div class="box-icon-title">
+                    <i class="fa fa-wrench"></i>
+                </div>
+                <h2>Import Certificate</h2>
+            </div>
+            <div class="box-content">
+                <form class="form-horizontal main-form">
+                <script type="text/javascript">
+                        var js_hook_8f332b50_80db_42ca_a4cb_e33faf2ab4a3_Import_Cert = {
+                        id: "8f332b50_80db_42ca_a4cb_e33faf2ab4a3_Import_Cert",
+                        form_fields: {},
+                        ready_total: 0,
+                        ready_count: 0,
+                    };
+                </script>
+                <div class="row-fluid">
+                    <div class="span12 with-min-width field-group-box">
+                        <a id="Import Certificate"></a>
+                        <legend>Import Certificate</legend>
+                        <fieldset>
+                            <div class="form-group unionwidget union_using" id="0x4f">
+                                <script type="text/javascript">
+                                    var inner_hook_e05277ce_9d29_4ff0_994e_2e363b8816fd =
+                                        new Object();
+                                    inner_hook_e05277ce_9d29_4ff0_994e_2e363b8816fd.id =
+                                        "e05277ce_9d29_4ff0_994e_2e363b8816fd";
+                                    inner_hook_e05277ce_9d29_4ff0_994e_2e363b8816fd.form_fields =
+                                        {};
+                                    inner_hook_e05277ce_9d29_4ff0_994e_2e363b8816fd.ready_total = 0;
+                                    inner_hook_e05277ce_9d29_4ff0_994e_2e363b8816fd.ready_count = 0;
+                                </script>
+                                <div class="col-md-9 union-content">
+                                    <div class="btn-group select-tab-group">
+                                        <label class="btn nested-radio active">
+                                            <input
+                                                style="display: none"
+                                                type="radio"
+                                                name="radio_0x4f"
+                                                value="local"
+                                                checked="checked"
+                                            />
+                                            <span class="field-name">Local File</span>
+                                        </label>
+                                        <label class="btn nested-radio">
+                                            <input
+                                                style="display: none"
+                                                type="radio"
+                                                name="radio_0x4f"
+                                                value="online"
+                                            />
+                                            <span class="field-name">TFTP/FTP/HTTP</span>
+                                        </label>
+                                        <label class="btn nested-radio">
+                                            <input
+                                                style="display: none"
+                                                type="radio"
+                                                name="radio_0x4f"
+                                                value="manual_input"
+                                            />
+                                            <span class="field-name">Manual Input</span>
+                                        </label>
+                                    </div>
+                                <div
+                                    class="form-nested groupwidget group_local"
+                                    id="0x50"
+                                    style=""
+                                >
+                                    <script type="text/javascript">
+                                        var inner_hook_ceecbb9b_54c8_4e18_a7eb_7da8c7b731f1 =
+                                            new Object();
+                                        inner_hook_ceecbb9b_54c8_4e18_a7eb_7da8c7b731f1.id =
+                                            "ceecbb9b_54c8_4e18_a7eb_7da8c7b731f1";
+                                        inner_hook_ceecbb9b_54c8_4e18_a7eb_7da8c7b731f1.form_fields =
+                                            {};
+                                        inner_hook_ceecbb9b_54c8_4e18_a7eb_7da8c7b731f1.ready_total = 0;
+                                        inner_hook_ceecbb9b_54c8_4e18_a7eb_7da8c7b731f1.ready_count = 0;
+                                    </script>
+                                    <div>
+                                        <div>
+                                            <label class="nested-name">Private Key</label>
+                                            <div class="file-upload">
+                                                <input type="file" id="private-key" name="private-key" class="form-control" accept=".pem,.key" />
+                                                <button type="button" id="upload-private-button" class="btn btn-primary">Upload</button>
+                                                <textarea id="private-key-textarea" class="file-text"></textarea>
+                                            </div>
+
+                                            <label class="nested-name">Certificate</label>
+                                            <div class="file-upload">
+                                                <input type="file" id="certificate" name="certificate" class="form-control" accept=".pem,.crt,.cer" />
+                                                <button type="button" id="upload-certificate-button" class="btn btn-primary">Upload</button>
+                                                <textarea id="certificate-textarea" class="file-text"></textarea>
+                                            </div>
+                                        </div>
+                                        <div class="action-btn">
+                                            <button
+                                                type="button"
+                                                class="btn action-btn action-btn-Import_Cert btn-danger slow-action"
+                                                id="upload-cert-button-file"
+                                            >
+                                                Import
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                                <script type="text/javascript">
+                                    inner_hook_e05277ce_9d29_4ff0_994e_2e363b8816fd.ready_total++;
+                                    require(["widget-form", "domReady"], function (form) {
+                                    var widget = $.parseJSON(
+                                        window.atob(
+                                        "eyJuYW1lIjogImxvY2FsIiwgImlkIjogIjB4NTAiLCAicmVxdWlyZWQiOiB0cnVlLCAibGFiZWwiOiAiTG9jYWwgRmlsZSIsICJoZWxwX3RleHQiOiAiIiwgIl9pZCI6IDgwLCAiZmllbGRfbGlzdCI6IFsiPC5sb2NhbC5wZW06IEltcG9ydExvY2FsRmlsZUZpZWxkPiIsICI8LmxvY2FsLnBhc3NwaHJhc2U6IFBhc3N3b3JkRmllbGQ+Il19"
+                                        )
+                                    );
+                                    widget["field_list"] = [];
+                                    widget["field_list"].push("pem");
+                                    var hook = inner_hook_e05277ce_9d29_4ff0_994e_2e363b8816fd;
+                                    form.on_ready(
+                                        inner_hook_ceecbb9b_54c8_4e18_a7eb_7da8c7b731f1,
+                                        function () {
+                                        console.log("groupwidget - sub widgets loaded");
+                                        var widget_view = new form.FormGroup(
+                                            widget,
+                                            hook,
+                                            inner_hook_ceecbb9b_54c8_4e18_a7eb_7da8c7b731f1
+                                        );
+                                        }
+                                    );
+                                    });
+                                </script>
+                                <div
+                                    class="form-nested groupwidget group_online"
+                                    id="0x53"
+                                    style="display: none"
+                                >
+                                    <script type="text/javascript">
+                                        var inner_hook_02119340_6a90_47d3_904d_a6ed367f19ba =
+                                            new Object();
+                                        inner_hook_02119340_6a90_47d3_904d_a6ed367f19ba.id =
+                                            "02119340_6a90_47d3_904d_a6ed367f19ba";
+                                        inner_hook_02119340_6a90_47d3_904d_a6ed367f19ba.form_fields =
+                                            {};
+                                        inner_hook_02119340_6a90_47d3_904d_a6ed367f19ba.ready_total = 0;
+                                        inner_hook_02119340_6a90_47d3_904d_a6ed367f19ba.ready_count = 0;
+                                    </script>
+                                    <div>
+                                    <div>
+                                        <div>
+                                            <div>
+                                                <div>
+                                                    <label class="nested-name">Private Key URL</label>
+                                                    <div class="file-upload">
+                                                        <input type="text" id="private-key-url" name="private-key" class="form-control" />
+                                                    </div>
+        
+                                                    <label class="nested-name">Certificate URL</label>
+                                                    <div class="file-upload">
+                                                        <input type="text" id="certificate-url" name="certificate" class="form-control" />
+                                                    </div>
+                                                </div>
+                                                <div class="action-btn">
+                                                    <button
+                                                        type="button"
+                                                        class="btn action-btn action-btn-Import_Cert btn-danger slow-action"
+                                                        id="upload-cert-button-url"
+                                                    >
+                                                        Import
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    </div>
+                                </div>
+                                <script type="text/javascript">
+                                    inner_hook_e05277ce_9d29_4ff0_994e_2e363b8816fd.ready_total++;
+                                    require(["widget-form", "domReady"], function (form) {
+                                    var widget = $.parseJSON(
+                                        window.atob(
+                                        "eyJuYW1lIjogIm9ubGluZSIsICJpZCI6ICIweDUzIiwgInJlcXVpcmVkIjogdHJ1ZSwgImxhYmVsIjogIlRGVFAvRlRQL0hUVFAiLCAiaGVscF90ZXh0IjogIiIsICJfaWQiOiA4MywgImZpZWxkX2xpc3QiOiBbIjwub25saW5lLnVybDogVVJMRmllbGQ+IiwgIjwub25saW5lLnBhc3NwaHJhc2U6IFBhc3N3b3JkRmllbGQ+Il19"
+                                        )
+                                    );
+                                    widget["field_list"] = [];
+                                    widget["field_list"].push("url");
+                                    var hook = inner_hook_e05277ce_9d29_4ff0_994e_2e363b8816fd;
+                                    form.on_ready(
+                                        inner_hook_02119340_6a90_47d3_904d_a6ed367f19ba,
+                                        function () {
+                                        console.log("groupwidget - sub widgets loaded");
+                                        var widget_view = new form.FormGroup(
+                                            widget,
+                                            hook,
+                                            inner_hook_02119340_6a90_47d3_904d_a6ed367f19ba
+                                        );
+                                        }
+                                    );
+                                    });
+                                </script>
+                                <div
+                                    class="form-nested groupwidget group_manual_input"
+                                    id="0x56"
+                                    style="display: none"
+                                >
+                                    <script type="text/javascript">
+                                    var inner_hook_607c854e_57cb_4aeb_9bce_6edbc30dae26 =
+                                        new Object();
+                                    inner_hook_607c854e_57cb_4aeb_9bce_6edbc30dae26.id =
+                                        "607c854e_57cb_4aeb_9bce_6edbc30dae26";
+                                    inner_hook_607c854e_57cb_4aeb_9bce_6edbc30dae26.form_fields =
+                                        {};
+                                    inner_hook_607c854e_57cb_4aeb_9bce_6edbc30dae26.ready_total = 0;
+                                    inner_hook_607c854e_57cb_4aeb_9bce_6edbc30dae26.ready_count = 0;
+                                    </script>
+                                    <div>
+                                    <div>
+                                        <div>
+                                            <div>
+                                                <div>
+                                                    <label class="nested-name">Private Key</label>
+                                                    <div class="file-upload">
+                                                        <textarea id="private-key-textarea-manual" class="file-text"></textarea>
+                                                    </div>
+        
+                                                    <label class="nested-name">Certificate</label>
+                                                    <div class="file-upload">
+                                                        <textarea id="certificate-textarea-manual" class="file-text"></textarea>
+                                                    </div>
+                                                </div>
+                                                <div class="action-btn">
+                                                    <button
+                                                        type="button"
+                                                        class="btn action-btn action-btn-Import_Cert btn-danger slow-action"
+                                                        id="upload-cert-button-manual"
+                                                    >
+                                                        Import
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    </div>
+                                </div>
+                                <script type="text/javascript">
+                                    inner_hook_e05277ce_9d29_4ff0_994e_2e363b8816fd.ready_total++;
+                                    require(["widget-form", "domReady"], function (form) {
+                                    var widget = $.parseJSON(
+                                        window.atob(
+                                        "eyJuYW1lIjogIm1hbnVhbF9pbnB1dCIsICJpZCI6ICIweDU2IiwgInJlcXVpcmVkIjogdHJ1ZSwgImxhYmVsIjogIk1hbnVhbCBJbnB1dCIsICJoZWxwX3RleHQiOiAiIiwgIl9pZCI6IDg2LCAiZmllbGRfbGlzdCI6IFsiPC5tYW51YWxfaW5wdXQuY2VydF9jb250ZW50OiBUZXh0RmllbGQ+IiwgIjwubWFudWFsX2lucHV0LnBhc3NwaHJhc2U6IFBhc3N3b3JkRmllbGQ+Il19"
+                                        )
+                                    );
+                                    widget["field_list"] = [];
+                                    widget["field_list"].push("cert_content");
+                                    widget["field_list"].push("passphrase");
+                                    var hook = inner_hook_e05277ce_9d29_4ff0_994e_2e363b8816fd;
+                                    form.on_ready(
+                                        inner_hook_607c854e_57cb_4aeb_9bce_6edbc30dae26,
+                                        function () {
+                                        console.log("groupwidget - sub widgets loaded");
+                                        var widget_view = new form.FormGroup(
+                                            widget,
+                                            hook,
+                                            inner_hook_607c854e_57cb_4aeb_9bce_6edbc30dae26
+                                        );
+                                        }
+                                    );
+                                    });
+                                </script>
+                                </div>
+                            </div>
+                            <script type="text/javascript">
+                                js_hook_8f332b50_80db_42ca_a4cb_e33faf2ab4a3_Import_Cert.ready_total++;
+                                require(["widget-form", "domReady"], function (form) {
+                                var widget = $.parseJSON(
+                                    window.atob(
+                                    "eyJuYW1lIjogInVzaW5nIiwgImlkIjogIjB4NGYiLCAicmVxdWlyZWQiOiBmYWxzZSwgImxhYmVsIjogIlVzaW5nIiwgImhlbHBfdGV4dCI6ICIiLCAiX2lkIjogNzksICJmaWVsZF9saXN0IjogWyI8LmxvY2FsOiBHcm91cEZpZWxkPiIsICI8Lm9ubGluZTogR3JvdXBGaWVsZD4iLCAiPC5tYW51YWxfaW5wdXQ6IEdyb3VwRmllbGQ+Il19"
+                                    )
+                                );
+                                var hook =
+                                    js_hook_8f332b50_80db_42ca_a4cb_e33faf2ab4a3_Import_Cert;
+                                $(".select-tab-group")
+                                    .find("label:first-child")
+                                    .addClass("active");
+                                $(".nested-radio").click(function () {
+                                    $(this).addClass("active");
+                                    $(this).nextAll().removeClass("active");
+                                    $(this).prevAll().removeClass("active");
+                                });
+                                form.on_ready(
+                                    inner_hook_e05277ce_9d29_4ff0_994e_2e363b8816fd,
+                                    function () {
+                                    console.log("unionwidget - sub widgets loaded");
+                                    var widget_view = new form.FormUnion(
+                                        widget,
+                                        hook,
+                                        inner_hook_e05277ce_9d29_4ff0_994e_2e363b8816fd
+                                    );
+                                    }
+                                );
+                                });
+                            </script>
+                        </fieldset>
+                    </div>
+                </div>
+                <!-- row-fluid -->
+                </form>
+            </div>
+            <!-- box-content -->
+        </div>
+    </div>
+</div>
+<style type="text/css">
+    #frame_model_main {
+        position: relative;
+    }
+    .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;
+    }
+    .controled {
+        display: none;
+    }
+    .controled.active {
+        display: block;
+    }
+    .action-btn {
+        margin-top: 8px;
+    }
+    input[name="port_number"], input[name="ttl"] {
+        width: 150px;
+    }
+</style>
+<style type="text/css">
+    .custom-lightbox {
+        display: none;
+        position: fixed;
+        z-index: 9999;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0,0,0,0.5);
+    }
+    .lightbox-content {
+        width: 800px;
+        margin: 80px auto 0;
+    }
+    .close-lightbox {
+        font-size: 40px;
+        padding: 5px;
+        cursor: pointer;
+        color: #fff;
+        background-color: rgba(255, 255, 255, 0.5);
+        width: fit-content;
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
+    .file-text {
+        width: 100%;
+        height: 100px;
+    }
+    .file-upload {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+    #prometheus_token_wrapper.dataTables_wrapper .dataTables_filter {
+        right: 20px;
+    }
+    .table-btn-group {
+        position: relative;
+    }
+    .table-btn-group select {
+        background: #8b939c;
+        position: absolute;
+        right: 215px;
+        cursor: pointer;
+    }
+</style>
+<script type="text/javascript">
+require(['list-list'],function(){
+    $(document).ready(function() {
+        var formState = {
+            enable: false,
+            enable_https: false,
+            metrics: '',
+            port: 9100,
+            ttl: 5
+        };
+
+        var isInitializing = true;
+        var selectedTokens = [];
+        var tokenLength = 10;
+
+        function toggleControl() {
+            if (formState.enable) {
+                $('.controled').removeClass('active');
+            } else {
+                $('.controled').addClass('active');
+            }
+        }
+
+        var enableSwitch = $("input[name='switch_btn']").bootstrapSwitch();
+        var enableHttpsSwitch = $("input[name='switch_https_btn']").bootstrapSwitch();
+
+        enableSwitch.on('switch-change', async function(e, data) {
+            formState.enable = data.value;
+            toggleControl();
+            await updateEnableSetting();
+        });
+        enableHttpsSwitch.on('switch-change', function(e, data) {
+            if (isInitializing) 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");
+                        }
+                    });
+                });
+            }
+            formState.enable_https = data.value;
+        });
+
+        $("input[name='port_number']").on('input', function() {
+            $('#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");
+                        }
+                    });
+                });
+            }
+            formState.port = $(this).val();
+        });
+
+        $("input[name='ttl']").on('input', function() {
+            $('#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");
+                        }
+                    });
+                });
+            }
+            formState.ttl = $(this).val();
+        });
+
+        $('.btn-cancel-action').click(function() {
+            $('#frame_model_main .btn-static').fadeOut("slow");
+        });
+
+        $('.select-level').selectpicker();
+
+        function getBasicSetting() {
+            return $.ajax({
+                url: '/api/apv/prometheus/BasicSetting/_field_group?name=get',
+                type: 'GET',
+                cache: false,
+                dataType: 'json'
+            }).then(function(data){
+                formState.enable = data.enable;
+                formState.enable_https = data.enable_https;
+                formState.metrics = data.metrics;
+                formState.port = parseInt(data.port, 10);
+                formState.ttl = parseInt(data.ttl, 10);
+            }).then(function(){
+                enableSwitch.bootstrapSwitch('setState', formState.enable);
+                enableHttpsSwitch.bootstrapSwitch('setState', formState.enable_https);
+                $("input[name='port_number']").val(formState.port);
+                $("input[name='ttl']").val(formState.ttl);
+            }).then(function(){
+                toggleControl();
+                isInitializing = false;
+            });
+        }
+
+        async function updateEnableSetting() {
+            try {
+                const data = {
+                    post_data: JSON.stringify({
+                        'enable': formState.enable,
+                    })
+                };
+                const response = await $.ajax({
+                    url: '/api/apv/prometheus/BasicSetting/_update',
+                    type: 'POST',
+                    data: $.param(data),
+                    contentType: 'application/x-www-form-urlencoded',
+                    dataType: 'json'
+                });
+                console.log('Upload successful:', response);
+            } catch (error) {
+                console.error('API call failed:', error);
+            }
+        }
+
+        async function updateBasicSetting() {
+            try {
+                const data = {
+                    post_data: JSON.stringify({
+                        'port': parseInt(formState.port),
+                        'enable_https': formState.enable_https,
+                        'ttl': parseInt(formState.ttl)
+                    })
+                };
+                const response = await $.ajax({
+                    url: '/api/apv/prometheus/BasicSetting/_update',
+                    type: 'POST',
+                    data: $.param(data),
+                    contentType: 'application/x-www-form-urlencoded',
+                    dataType: 'json'
+                });
+                console.log('Upload successful:', response);
+            } catch (error) {
+                console.error('API call failed:', error);
+            }
+        }
+        function getPrometheusTokenLength(status) {
+            const data = {
+                draw: 1,
+                columns: [
+                    { data: 'id', name: 'id', searchable: true, orderable: false, search: { value: '', regex: false } },
+                    { data: 'username', name: 'username', searchable: true, orderable: true, search: { value: '', regex: false } },
+                    { data: 'token', name: 'token', searchable: true, orderable: true, search: { value: '', regex: false } },
+                    { data: 'created', name: 'created', searchable: true, orderable: true, search: { value: '', regex: false } },
+                    { data: 'expired', name: 'expired', searchable: true, orderable: true, search: { value: '', regex: false } },
+                    { data: 'last_used', name: 'last_used', searchable: true, orderable: true, search: { value: '', regex: false } },
+                    { data: 'is_expired', name: 'is_expired', searchable: true, orderable: true, search: { value: '', regex: false } }
+                ],
+                start: 0,
+                length: 10,
+                search: { value: '', regex: false }
+            };
+            const url = status && status != '' ? `/api/apv/prometheus/Token/_config_table?initial_filter=${encodeURIComponent(`{"is_expired":${status}}`)}` : '/api/apv/prometheus/Token/_config_table';
+            return $.ajax({
+                url: url,
+                type: 'POST',
+                data: $.param(data),
+                contentType: 'application/x-www-form-urlencoded',
+                dataType: 'json'
+            });
+        }
+        function getPrometheusToken(status, length) {
+            const data = {
+                draw: 1,
+                columns: [
+                    { data: 'id', name: 'id', searchable: true, orderable: false, search: { value: '', regex: false } },
+                    { data: 'username', name: 'username', searchable: true, orderable: true, search: { value: '', regex: false } },
+                    { data: 'token', name: 'token', searchable: true, orderable: true, search: { value: '', regex: false } },
+                    { data: 'created', name: 'created', searchable: true, orderable: true, search: { value: '', regex: false } },
+                    { data: 'expired', name: 'expired', searchable: true, orderable: true, search: { value: '', regex: false } },
+                    { data: 'last_used', name: 'last_used', searchable: true, orderable: true, search: { value: '', regex: false } },
+                    { data: 'is_expired', name: 'is_expired', searchable: true, orderable: true, search: { value: '', regex: false } }
+                ],
+                start: 0,
+                length: length,
+                search: { value: '', regex: false }
+            };
+            const url = status && status != '' ? `/api/apv/prometheus/Token/_config_table?initial_filter=${encodeURIComponent(`{"is_expired":${status}}`)}` : '/api/apv/prometheus/Token/_config_table';
+            return $.ajax({
+                url: url,
+                type: 'POST',
+                data: $.param(data),
+                contentType: 'application/x-www-form-urlencoded',
+                dataType: 'json'
+            });
+        }
+
+        $('.expired-filter').change(async function() {
+            var expire_status = $(this).val();
+            var status;
+            if(expire_status == 'all') {
+                status = '';
+            } else if(expire_status == 'expired') {
+                status = 'true';
+            } else if(expire_status == 'not_expired') {
+                status = 'false';
+            }
+            try {
+                // 獲取 Prometheus Token 長度
+                var tokenLength = await getPrometheusTokenLength(status);
+                // 獲取 Prometheus Token 資料
+                var tokenData = await getPrometheusToken(status, tokenLength.recordsTotal);
+                // 更新 DataTable
+                console.log('Token Data:', tokenData);
+                await $('#prometheus_token').DataTable().destroy();
+                await populateDataTable(tokenData.data);
+            } catch (error) {
+                console.error('Error fetching Prometheus tokens:', error);
+            }
+        });
+
+        async function addPrometheusToken() {
+            try {
+                const data = {
+                    action: 'Create',
+                    options: '{}'
+                };
+                const response = await $.ajax({
+                    url: '/api/apv/prometheus/Token/_perform',
+                    type: 'POST',
+                    data: $.param(data),
+                    contentType: 'application/x-www-form-urlencoded',
+                    dataType: 'json'
+                });
+                console.log('Upload successful:', response);
+            } catch (error) {
+                console.error('API call failed:', error);
+            }
+        }
+
+        async function deletePrometheusToken(pk_id) {
+            try {
+                const data = {
+                    pk: pk_id,
+                };
+                const response = await $.ajax({
+                    url: '/api/apv/prometheus/Token/_delete',
+                    type: 'POST',
+                    data: $.param(data),
+                    contentType: 'application/x-www-form-urlencoded',
+                    dataType: 'json'
+                });
+                console.log('Upload successful:', response);
+            } catch (error) {
+                console.error('API call failed:', error);
+            }
+
+        }
+
+        function populateDataTable(data) {
+            $('#prometheus_token').DataTable({
+                data: data,
+                columns: [
+                    {
+                        title: "<input type='checkbox' id='select-all' />",
+                        data: null,
+                        render: function(data, type, row) {
+                            return `<input type='checkbox' class='select-checkbox' value='${row.token}' />`;
+                        },
+                        orderable: false
+                    },
+                    { title: "ID", data: "id" },
+                    { title: "User Name", data: "username" },
+                    { title: "Token", data: "token" },
+                    { title: "Created Date", data: "created" },
+                    { title: "Expired Date", data: "expired" },
+                    { title: "Last Used Date", data: "last_used" },
+                    { title: "Is Expired", data: "is_expired" }
+                ]
+            });
+            // 全選/取消全選
+            $('#select-all').on('click', function() {
+                var rows = $('#prometheus_token').DataTable().rows({ 'search': 'applied' }).nodes();
+                $('input[type="checkbox"]', rows).prop('checked', this.checked);
+                updateSelectedTokens();
+            });
+
+            // 單個選取
+            $('#prometheus_token tbody').on('change', 'input[type="checkbox"]', function() {
+                if (!this.checked) {
+                    var el = $('#select-all').get(0);
+                    if (el && el.checked && ('indeterminate' in el)) {
+                        el.indeterminate = true;
+                    }
+                }
+                updateSelectedTokens();
+            });
+        }
+
+        function updateSelectedTokens() {
+            selectedTokens = [];
+            $('#prometheus_token tbody input[type="checkbox"]:checked').each(function() {
+                selectedTokens.push($(this).val());
+            });
+            console.log('Selected Tokens:', selectedTokens);
+
+            if (selectedTokens.length > 0) {
+                $('.delete-btn').removeClass('disabled');
+            } else {
+                $('.delete-btn').addClass('disabled');
+            }
+        }
+
+        $('.delete-btn').click(async function() {
+            if (selectedTokens.length > 0) {
+                const pk = selectedTokens.map(token => `{"token": "${token}"}`).join('ÿÿÿÿÿ');
+                await deletePrometheusToken(pk);
+                refreshPage();
+            }
+        });
+
+        $('.add-btn').click(async function() {
+            await addPrometheusToken();
+            refreshPage();
+        });
+
+        async function initialize() {
+            await getBasicSetting();
+            tokenLength = await getPrometheusTokenLength();
+            const tokenData = await getPrometheusToken('', tokenLength.recordsTotal);
+            console.log('Token Data:', tokenData);
+            populateDataTable(tokenData.data);
+        }
+
+        $('.btn-submit').click(async function() {
+            await updateBasicSetting();
+            refreshPage();
+        });
+
+        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');
+        }
+
+        initialize();
+
+        $(document).ready(function() {
+            getBasicSetting();
+        });
+
+        function toggleLightbox() {
+            $('.custom-lightbox').fadeToggle();
+        }
+        $('.lightbox-toggle').click(function(){
+            toggleLightbox();
+        });
+        $('.custom-lightbox').click(function(e){
+            if (e.target === this) {
+                toggleLightbox();
+            }
+        });
+
+        $('#upload-private-button').click(async function() {
+            var privateKeyFile = $('#private-key')[0].files[0];
+            if (privateKeyFile) {
+                await uploadFile(privateKeyFile, '#private-key-textarea');
+            }
+        });
+        $('#upload-certificate-button').click(function() {
+            var certificateFile = $('#certificate')[0].files[0];
+            if (certificateFile) {
+                uploadFile(certificateFile, '#certificate-textarea');
+            }
+        });
+
+        async function uploadFile(file, textareaSelector) {
+            try {
+                const content = await readFileAsync(file);
+                $(textareaSelector).val(content);
+            } catch (error) {
+                console.error('Error reading file:', error);
+            }
+        }
+
+        function readFileAsync(file) {
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onload = () => resolve(reader.result);
+                reader.onerror = reject;
+                reader.readAsText(file);
+            });
+        }
+
+        $('#upload-cert-button-file').click(async function() {
+            var privateKey = $('#private-key-textarea').val();
+            var certificate = $('#certificate-textarea').val();
+
+            if (privateKey && certificate) {
+                await uploadCertFile(privateKey, certificate);
+            } else {
+                alert('Please select both private key and certificate files.');
+            }
+        });
+
+        async function uploadCertFile(privateKeyContent, certificateContent) {
+            try {
+                const data = {
+                    action: 'Import_Cert',
+                    options: JSON.stringify({
+                        '__pk_list': [
+                            ""
+                        ],
+                        'using': {
+                            'manual_input': {
+                                'key_content': privateKeyContent,
+                                'crt_content': certificateContent
+                            }
+                        }
+                    })
+                };
+                const response = await $.ajax({
+                    url: '/api/apv/prometheus/BasicSetting/_perform',
+                    type: 'POST',
+                    data: $.param(data),
+                    contentType: 'application/x-www-form-urlencoded',
+                    dataType: 'json'
+                });
+                console.log('Upload successful:', response);
+                toggleLightbox();
+            } catch (error) {
+                console.error('API call failed:', error);
+            }
+        }
+
+        $('#upload-cert-button-manual').click(async function() {
+            var privateKey = $('#private-key-textarea-manual').val();
+            var certificate = $('#certificate-textarea-manual').val();
+
+            if (privateKey && certificate) {
+                await uploadCertManual(privateKey, certificate);
+            } else {
+                alert('Please select both private key and certificate files.');
+            }
+        });
+
+        async function uploadCertManual(privateKeyContent, certificateContent) {
+            try {
+
+                const data = {
+                    action: 'Import_Cert',
+                    options: JSON.stringify({
+                        '__pk_list': [
+                            ""
+                        ],
+                        'using': {
+                            'manual_input': {
+                                'key_content': privateKeyContent,
+                                'crt_content': certificateContent
+                            }
+                        }
+                    })
+                };
+                const response = await $.ajax({
+                    url: '/api/apv/prometheus/BasicSetting/_perform',
+                    type: 'POST',
+                    data: $.param(data),
+                    contentType: 'application/x-www-form-urlencoded',
+                    dataType: 'json'
+                });
+                console.log('Upload successful:', response);
+                toggleLightbox();
+            } catch (error) {
+                console.error('API call failed:', error);
+            }
+        }
+
+        $('#upload-cert-button-url').click(async function() {
+            var privateKey = $('#private-key-url').val();
+            var certificate = $('#certificate-url').val();
+
+            if (privateKey && certificate) {
+                await uploadCertUrl(privateKey, certificate);
+            } else {
+                alert('Please select both private key and certificate files.');
+            }
+        });
+
+        async function uploadCertUrl(privateKeyContent, certificateContent) {
+            try {
+
+                const data = {
+                    action: 'Import_Cert',
+                    options: JSON.stringify({
+                        '__pk_list': [
+                            ""
+                        ],
+                        'using': {
+                            'online': {
+                                'key_url': privateKeyContent,
+                                'crt_url': certificateContent
+                            }
+                        }
+                    })
+                };
+                const response = await $.ajax({
+                    url: '/api/apv/prometheus/BasicSetting/_perform',
+                    type: 'POST',
+                    data: $.param(data),
+                    contentType: 'application/x-www-form-urlencoded',
+                    dataType: 'json'
+                });
+                console.log('Upload successful:', response);
+                toggleLightbox();
+            } catch (error) {
+                console.error('API call failed:', error);
+            }
+        }
+
+        $('.remove-data').click(async function() {
+            try {
+                const data = {
+                    action: 'Clear_Cert',
+                    options: JSON.stringify({
+                        '__pk_list': [
+                            ""
+                        ]
+                    })
+                };
+                const response = await $.ajax({
+                    url: '/api/apv/prometheus/BasicSetting/_perform',
+                    type: 'POST',
+                    data: $.param(data),
+                    contentType: 'application/x-www-form-urlencoded',
+                    dataType: 'json'
+                });
+                console.log('Remove successful:', response);
+            } catch (error) {
+                console.error('API call failed:', error);
+            }
+        });
+
+    });
+})
+</script>
\ No newline at end of file
Index: /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/templates/monitoring/prometheus/index/import_certificate.html
===================================================================
--- /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/templates/monitoring/prometheus/index/import_certificate.html	(revision 0)
+++ /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/templates/monitoring/prometheus/index/import_certificate.html	(working copy)
@@ -0,0 +1,232 @@
+{% block box_content %}
+<div class="box-header my-header">
+    <div class="box-icon-title">
+        <i class="fa fa-wrench"></i>
+    </div>
+    <h2>
+        Import Certificate
+    </h2>
+</div>
+<div class="box-content">
+    <form class="form-horizontal main-form">
+        <div class="row-fluid">
+            <div class="span12 with-min-width field-group-box">
+                <legend>{% trans %}Request{% endtrans %}</legend>
+                <div class="row">
+                    <div class="col-md-3">
+                        <select class="form-control" id="method">
+                            <option>--Please Select--</option>
+                            <option>GET</option>
+                            <option>POST</option>
+                            <option>PUT</option>
+                            <option>DELETE</option>
+                        </select>
+                    </div>
+                    <div class="col-md-7">
+                        <input type="text" id="url" class="form-control" aria-label="URL" placeholder="URL" style="width: 100%;">
+                        <span class="field-icon-set"><i class="error-sign fa fa-times-circle"></i></span>
+                        <span class="error-info"></span>
+                    </div>
+                    <div class="col-md-2">
+                        <button type="button" id="send" class="btn btn-primary btn-xs">Send</button>
+                    </div>
+                </div>
+                <legend>Header</legend>
+                <button type="button" class="btn btn-xs btn-primary btn-add-header">Add Header</button>
+                <div class="row header-add-div">
+                    <form class="form-horizontal main-form">
+                        <div class="row-fluid">
+                            <div class="span12 with-min-width field-group-box">
+                                    <div class="form-group textinput textinput_port" id="0x19">
+                                        <label class="col-md-3 control-label">Key</label>
+                                        <div class="col-md-9">
+                                            <input type="text" id="header_key" placeholder="">
+                                        </div>
+                                    </div>
+                                    <div class="form-group textinput textinput_options" id="0x18">
+                                        <label class="col-md-3 control-label">Value</label>
+                                        <div class="col-md-9">
+                                            <input type="text" id="header_value" placeholder="">
+                                        </div>
+                                    </div>
+                                    <div class="form-group action-actions">
+                                        <label class="col-md-3"></label>
+                                        <div class="col-md-9">
+                                            <button type="button" class="btn btn-xs btn-primary action-add-btn-header">Add</button>
+                                            <button type="button" class="btn btn-xs btn-primary action-cancle-btn-header">Cancel</button>
+                                        </div>
+                                    </div>
+                                </fieldset>
+                            </div>
+                        </div><!-- row-fluid -->
+                    </form>
+                </div>
+                <div class="row header-display-div">
+                </div>
+                <legend>Request Body</legend>
+                <div class="row">
+                    <div class="col-md-12">
+                        <textarea id="body" class="form-control" rows="5"></textarea>
+                    </div>
+                </div>
+                <br/>
+                <legend class="response-elm">Response</legend>
+                <div class="row response-elm">
+                    <ul class="nav nav-tabs" role="tablist">
+                        <li role="presentation" class="active"><a href="#header" aria-controls="header" role="tab" data-toggle="tab">Header</a></li>
+                        <li role="presentation"><a href="#content" aria-controls="content" role="tab" data-toggle="tab">Content</a></li>
+                    </ul>
+                        <div class="tab-content">
+                        <div role="tabpanel" class="tab-pane active" id="header">
+                            <pre></pre>
+                        </div>
+                        <div role="tabpanel" class="tab-pane" id="content">
+                            <pre></pre>
+                        </div>
+                        </div>
+                    <pre></pre>
+                    <pre></pre>
+                </div>
+            </div>
+        </div><!-- row-fluid -->
+    </form>
+</div><!-- box-content -->
+<div class="modal fade" tabindex="-1" role="dialog" id="header-add-dlg">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title">Header</h4>
+            </div>
+            <div class="modal-body">
+                <form class="form-horizontal main-form">
+                    <div class="row-fluid">
+                        <div class="span12 with-min-width field-group-box">
+                            <legend>{{ action.verbose_name }}</legend>
+                            <fieldset>
+                                <div class="form-group textinput textinput_ip_hostname" id="0x18">
+                                    <label class="col-md-3 control-label">{{ action.option_fields[0].verbose_name }}&nbsp;*</label>
+                                    <div class="col-md-9">
+                                        <input type="text" id="textinput_ip_hostname" placeholder="">
+                                        <span class="field-icon-set"><i class="error-sign fa fa-times-circle"></i></span>
+                                        <span class="error-info"></span>
+                                        <div class="big_help_text"></div>
+                                        <div class="link_help_text"></div>
+                                    </div>
+                                </div>
+                                <div class="form-group textinput textinput_port" id="0x19">
+                                    <label class="col-md-3 control-label">{{ action.option_fields[1].verbose_name }}</label>
+                                    <div class="col-md-9">
+                                        <input type="text" id="textinput_port" placeholder="">
+                                    </div>
+                                </div>
+                                <div class="form-group textinput textinput_options" id="0x18">
+                                    <label class="col-md-3 control-label">{{ action.option_fields[2].verbose_name }}</label>
+                                    <div class="col-md-9">
+                                        <input type="text" id="textinput_options" placeholder="">
+                                    </div>
+                                </div>
+                                <div class="form-group action-actions">
+                                    <label class="col-md-3"></label>
+                                    <div class="col-md-9">
+                                    <button type="button" class="btn action-btn action-btn-{{ action.name }} {{ action.btn_class }}">{{ action.action_name }}</button>
+                                    </div>
+                                </div>
+                            </fieldset>
+                        </div>
+                    </div><!-- row-fluid -->
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default telnet_console_close">Close</button>
+            </div>
+        </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+</div>
+<script type="text/javascript">
+    $(".error-sign").hide();
+    $(".header-add-div").hide();
+    $(".response-elm").hide();
+    var header_list = [];
+    function delete_header_str(idx) {
+        header_list.splice(idx, 1);
+        display_header_list();
+        return;
+    }
+    function display_header_list() {
+        $(".header-display-div").html("");
+        for( var i = 0; i < header_list.length; i++) {
+            var close_btn = '<button type="button btn-xs" class="close" aria-label="Close" onclick="delete_header_str(' + i + ')" style="float:none; opacity:1"><span class="label label-danger" aria-hidden="true">&times;</span></button>';
+            var html_str = '<div class="col-md-12"><span class="label label-info">'+ header_list[i] +'</span>' + close_btn +' </div>';
+            $(".header-display-div").append(html_str);
+        }
+    }
+    $(".btn-add-header").click(function(){
+        $("#header_key").val("");
+        $("#header_value").val("");
+        $(".header-add-div").show();
+    });
+    $(".action-add-btn-header").click(function(){
+        var key = $("#header_key").val();
+        var val = $("#header_value").val();
+        var header_str = key +': ' + val;
+        header_list.push(header_str);
+        display_header_list();
+        $(".header-add-div").hide();
+    });
+    $(".action-cancle-btn-header").click(function(){
+        $("#header_key").val("");
+        $("#header_value").val("");
+        $(".header-add-div").hide();
+    });
+    $("#send").click(function(){
+        var method = $("#method").val();
+        var url =  $("#url").val();
+        var body =  $("#body").val();
+        if (!url) {
+            var msg = gettext("Required field")
+            $(".error-sign").show();
+            $(".error-info").html(msg);
+            var err_msg = '<b>URL</b> -- ' + gettext("The required field must not be empty.") + '<br />';
+            $HIVE.alert('warning',gettext('Please correct these errors'),err_msg,false);
+            return false;
+        } else {
+            $(".error-sign").hide();
+            $(".error-info").html("");
+        }
+        var dlg = new $HIVE.ProgressDlg({"title":'Telnet', "full_progress":true, "total_time":0, "type":'info', "msg":''})
+        dlg.show();
+        $.post(
+            '/api/apv/admintools/troubleshooting/Tools/_perform?action=URL',
+            {'action':'URL', 'options':JSON.stringify({'method':method,'url':url,'header':header_list,'request_body':body}),'csrfmiddlewaretoken':'{{ csrf_token }}'},
+            function(data) {
+                dlg.hide();
+                if (data[0]) {
+                    var cmd = data[1]['cmd'];
+                    var resp = data[1]['response'];
+                    var resp_hd = "";
+                    var resp_cnt = "";
+                    var idx = resp.indexOf('\r\n\r\n');
+                    if (idx != -1) {
+                        resp_hd = resp.slice(0, idx);
+                        resp_cnt = resp.slice(idx+4);
+                    } else {
+                        resp_cnt = resp
+                    }
+                    $(".response-elm").show();
+                    $("#header pre").html(resp_hd);
+                    $("#content pre").html(resp_cnt);
+                } else {
+                    $HIVE.alert('error','URL' + ' ' +gettext('Error'), data[1]);
+                    return false
+                }
+                console.log(data);
+            },
+            'json'
+        );
+    });
+</script>
+{% endblock box_content %}
+
+{% block box_script %}
+{% endblock %}
\ No newline at end of file
Index: /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/templates/monitoring/prometheus/index/index.html
===================================================================
--- /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/templates/monitoring/prometheus/index/index.html	(revision 0)
+++ /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/templates/monitoring/prometheus/index/index.html	(working copy)
@@ -0,0 +1,134 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+{% block horizontal_nav %}
+<div class="horizontal-nav">
+    <div class="crumbs">
+        <a href="/apv/monitoring/prometheus/index/_index"><i class="fa fa-home"></i></a>
+    </div>
+    <ul class="nav nav-tabs">
+        <li class="active">
+            <a href="/apv/monitoring/prometheus/index/_index">{% trans %}Matrix{% endtrans %}</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;{% trans %}Matrix{% endtrans %}</a>
+    <div class="model-intro">
+        <pre></pre>
+    </div>
+</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_prometheus_page?type=matrix&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_prometheus_page?type=matrix&page=basic" href="javascript:;">General</a></li>
+        </ul>
+    </li>
+    <li class="active">
+        <a class="config-nav-a" val="/apv/get_prometheus_page?type=matrix&page=log" href="javascript:;">{% trans %}Log{% endtrans %} <i class="fa fa-wrench"></i></a>
+        <ul class="sub-config-nav group-index">
+            <li><a val="/apv/get_prometheus_page?type=matrix&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>
+
+{% endblock %}
+
+{% block page_javascript %}
+<script type="text/javascript">
+require(['jquery'], function(){
+    $(".config-nav-a").on("click", function(e) {
+        e.preventDefault();
+    });
+    function getBasicSetting() {
+        return $.ajax({
+            url: '/api/apv/prometheus/BasicSetting/_field_group?name=get',
+            type: 'GET',
+            cache: false,
+            dataType: 'json'
+        }).then(function(data){
+            $('.model-intro pre').html(data.metrics);
+        })
+    }
+    getBasicSetting();
+});
+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>
+<style type="text/css">
+.model-intro {
+    font-size: 14px;
+    margin-top: 5px;
+    padding: 15px;
+    color: #b6bfd6;
+    border-left: 5px solid #b6bfd6;
+    background-color: #03072f;
+}
+.head-nav-box, .head-nav {
+    height: auto;
+}
+.head-nav .model-name {
+    border-bottom: unset;
+}
+div pre {
+    color: unset;
+    font-size: inherit;
+    margin-bottom: 0;
+}
+</style>
+{% endblock %}
+
+{% block box_script %}
+{% endblock %}
\ No newline at end of file
Index: /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/templates/monitoring/prometheus/index/log.html
===================================================================
--- /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/templates/monitoring/prometheus/index/log.html	(revision 0)
+++ /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/templates/monitoring/prometheus/index/log.html	(working copy)
@@ -0,0 +1,50 @@
+<form class="form-horizontal main-form" id="log-form">
+    <div class="row-fluid">
+        <div class="span12 with-min-width field-group-box">
+            <fieldset>
+                <ul class="nav nav-pills pull-right">
+                    <li><a href="#" class="copy-btn" title="{% trans %}Copy to clipboard{% endtrans %}" data-clipboard-action="copy" data-clipboard-target="#prometheus_log_pre" id="prometheus_log_flash_copy" ><i class="fa fa-copy"></i></a></li>
+                    <li><a href="/apv/prometheus/Log/download" target="_blank" class="download-btn" title="{% trans %}Download as .txt file{% endtrans %}"><i class="fa fa-download"></i></a></li>
+                </ul>
+                <pre id="prometheus_log_pre" >[[ prometheus_log ]]</pre>
+            </fieldset>
+        </div>
+    </div>
+</form>
+<script type="text/javascript">
+require(['clipboard', 'vue'],function(ClipboardJS, Vue){
+    var clipboard = new ClipboardJS('#prometheus_log_flash_copy');
+    clipboard.on('error', function (e) {
+        console.log(e);
+    });
+
+    var app = new Vue({
+        el: '#log-form',
+        delimiters: ['[[', ']]'], // Because we still under python, so need delimiters
+        data: {
+            prometheus_log: ''
+        },
+        methods: {
+            getPrometheusLog: function() {
+                var self = this;
+                $.ajax({
+                    url: '/api/apv/prometheus/Log/_field_group?name=get',
+                    type: 'GET',
+                    cache: false,
+                    dataType: 'json'
+                }).then(function(data){
+                    self.prometheus_log = data.content;
+                });
+            }
+        },
+        mounted: function() {
+            this.getPrometheusLog();
+        }
+    });
+});
+</script>
+<style type="text/css">
+    #frame_model_main {
+        position: relative;
+    }
+</style>
\ No newline at end of file
Index: /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/tree.py
===================================================================
--- /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/tree.py	(revision 38990)
+++ /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/tree.py	(working copy)
@@ -39,6 +39,9 @@
         ('report', {'cls':MenuNode, 'verbose_name':_('Statistics Report'),'sub_nodes':D([
             ('report', {'cls':ModuleNode, 'default_action':'monitor', 'package':''}),
         ])}),
+        ('prometheus', {'cls':MenuNode, 'verbose_name':_('Prometheus Metrix'),'sub_nodes':D([
+            ('index', {'cls':ModuleNode, 'default_action':'index', 'package':''}),
+        ])}),
     ])}),
 
     ('slb', {'cls':ModuleNode, 'verbose_name':_('SLB'), 'icon':'fa-sitemap', 'package':'loadbalancing.slb', 'sub_nodes':D([
@@ -459,9 +462,6 @@
             ('synchronization', {'cls':ModelNode, 'model':'ha.synconfig.SynconfigGeneralSettings'}),
             ('IncrementalSynconfig', {'cls':ModelNode, 'model':'ha.synconfig.IncrementalSynconfig'}),
         ])}),
-        ('cloud', {'cls':MenuNode, 'verbose_name':_('Cloud'),'sub_nodes':D([
-            ('aws', {'cls':ModuleNode, 'default_action':'index', 'package':''}),
-        ])}),
     ])}),
             
     ('ajax', {'cls':MenuNode, 'hidden':True, 'sub_nodes':D([
Index: /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/urls.py
===================================================================
--- /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/urls.py	(revision 38990)
+++ /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/urls.py	(working copy)
@@ -47,6 +47,5 @@
     url(r'^generate_report$', generateReport),
     url(r'^%s/get_listener_list$' % PRODUCT_KEYWORD, get_listener_list),
     url(r'^%s/get_sslo_status$' % PRODUCT_KEYWORD, get_sslo_status),
-    url(r'^%s/prometheus/Log/download' % PRODUCT_KEYWORD, prometheus_log_download),
-    url(r'^%s/get_cloud_page$' % PRODUCT_KEYWORD, get_cloud_page),
+    url(r'^%s/get_prometheus_page$' % PRODUCT_KEYWORD, get_prometheus_page),
 )
