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 39993)
+++ /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/templates/monitoring/prometheus/index/basic.html	(working copy)
@@ -58,7 +58,7 @@
             <button type="button" class="btn btn-default btn-cancel-action">{% trans %}Cancel{% endtrans %}</button>
         </div>
     </div>
-    <div id="basic-setting-table">
+    <div id="basic-setting-table" class="box-list">
         <div class="box-header" id="25db1b5a-6eae-43a0-972b-2df786ddaf74_header">
             <div class="box-bg-spe">
                 <div class="box-icon-title">
@@ -68,16 +68,11 @@
             <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>{% trans %}ADD{% endtrans %}</button>
                 <button type="button" class="btn btn-action delete-btn disabled"><i class="fa fa-minus-circle"></i>{% trans %}DELETE{% endtrans %}</button>
-                <select class="expired-filter" id="25db1b5a-6eae-43a0-972b-2df786ddaf74_expired_filter">
-                    <option value="all">{% trans %}All{% endtrans %}</option>
-                    <option value="expired">{% trans %}Expired{% endtrans %}</option>
-                    <option value="not_expired">{% trans %}Not Expired{% endtrans %}</option>
-                </select>
             </div>
             <div class="pull-right filter-control-group">
             </div>
         </div>
-        <table id="prometheus_token" class="display" style="width:100%">
+        <table id="prometheus_token" class="table table-hover display" style="width:100%">
             <thead>
                 <tr>
                     <th></th>
@@ -87,7 +82,6 @@
                     <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>
@@ -405,6 +399,9 @@
     </div>
 </div>
 <style type="text/css">
+    #frame_model_main .main-form {
+        padding-bottom: 50px;
+    }
     #frame_model_main {
         position: relative;
     }
@@ -473,6 +470,9 @@
     }
 </style>
 <style type="text/css">
+    #prometheus_token {
+        margin-bottom: 15px;
+    }
     .custom-lightbox {
         display: none;
         position: fixed;
@@ -507,18 +507,6 @@
         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(){
@@ -547,6 +535,7 @@
         var enableHttpsSwitch = $("input[name='switch_https_btn']").bootstrapSwitch();
 
         enableSwitch.on('switch-change', async function(e, data) {
+            if (isInitializing) return;
             formState.enable = data.value;
             toggleControl();
             await updateEnableSetting();
@@ -613,34 +602,43 @@
         $('.select-level').selectpicker();
 
         function getBasicSetting() {
+            const cachedData = localStorage.getItem('basicSettingData');
+            if (cachedData) {
+                const data = JSON.parse(cachedData);
+                updateFormStateByData(data);
+                return;
+            }
             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;
+                updateFormStateByData(data);
             });
         }
 
+        function updateFormStateByData(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);
+            enableSwitch.bootstrapSwitch('setState', formState.enable);
+            enableHttpsSwitch.bootstrapSwitch('setState', formState.enable_https);
+            $("input[name='port_number']").val(formState.port);
+            $("input[name='ttl']").val(formState.ttl);
+            toggleControl();
+            isInitializing = false;
+        }
+
         async function updateEnableSetting() {
             try {
+                const params = {
+                    'enable': formState.enable,
+                };
                 const data = {
-                    post_data: JSON.stringify({
-                        'enable': formState.enable,
-                    })
+                    post_data: JSON.stringify(params)
                 };
                 const response = await $.ajax({
                     url: '/api/apv/prometheus/BasicSetting/_update',
@@ -649,6 +647,7 @@
                     contentType: 'application/x-www-form-urlencoded',
                     dataType: 'json'
                 });
+                updateLocalStorageBasicSetting(params);
                 console.log('Upload successful:', response);
             } catch (error) {
                 console.error('API call failed:', error);
@@ -657,12 +656,13 @@
 
         async function updateBasicSetting() {
             try {
+                const params = {
+                    'port': parseInt(formState.port),
+                    'enable_https': formState.enable_https,
+                    'ttl': parseInt(formState.ttl)
+                };
                 const data = {
-                    post_data: JSON.stringify({
-                        'port': parseInt(formState.port),
-                        'enable_https': formState.enable_https,
-                        'ttl': parseInt(formState.ttl)
-                    })
+                    post_data: JSON.stringify(params)
                 };
                 const response = await $.ajax({
                     url: '/api/apv/prometheus/BasicSetting/_update',
@@ -671,82 +671,24 @@
                     contentType: 'application/x-www-form-urlencoded',
                     dataType: 'json'
                 });
+                updateLocalStorageBasicSetting(params);
                 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 {
-                var tokenLength = await getPrometheusTokenLength(status);
-                var tokenData = await getPrometheusToken(status, tokenLength.recordsTotal);
-                console.log('Token Data:', tokenData);
-                await $('#prometheus_token').DataTable().destroy();
-                await populateDataTable(tokenData.data);
-            } catch (error) {
-                console.error('Error fetching Prometheus tokens:', error);
+        function updateLocalStorageBasicSetting(data) {
+            const cachedData = localStorage.getItem('basicSettingData');
+            let mergedData = {};
+            if (cachedData) {
+                const existingData = JSON.parse(cachedData);
+                mergedData = { ...existingData, ...data };
+            } else {
+                mergedData = data;
             }
-        });
+            localStorage.setItem('basicSettingData', JSON.stringify(mergedData));
+        }
 
         async function addPrometheusToken() {
             try {
@@ -777,7 +719,6 @@
                     type: 'POST',
                     data: $.param(data),
                     contentType: 'application/x-www-form-urlencoded',
-                    dataType: 'json'
                 });
                 console.log('Upload successful:', response);
             } catch (error) {
@@ -786,9 +727,24 @@
 
         }
 
-        function populateDataTable(data) {
+        function populateDataTable() {
             $('#prometheus_token').DataTable({
-                data: data,
+                serverSide: true,
+                ajax: {
+                    url: "/api/apv/prometheus/Token/_config_table",
+                    type: "POST",
+                    data: function(data) {
+                        data.initial_filter = encodeURIComponent(`{"is_expired":false}`);
+                    },
+                    contentType: "application/x-www-form-urlencoded",
+                    dataType: "json",
+                    error: function(xhr, error, thrown) {
+                        console.log(xhr, error, thrown);
+                    }
+                },
+                dom: 'frtlp',
+                pageLength: 10,
+                lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                 columns: [
                     {
                         title: "<input type='checkbox' id='select-all' />",
@@ -798,13 +754,12 @@
                         },
                         orderable: false
                     },
-                    { title: "ID", data: "id" },
-                    { title: "{% trans %}User Name{% endtrans %}", data: "username" },
-                    { title: "{% trans %}Token{% endtrans %}", data: "token" },
-                    { title: "{% trans %}Created Date{% endtrans %}", data: "created" },
-                    { title: "{% trans %}Expired Date{% endtrans %}", data: "expired" },
-                    { title: "{% trans %}Last Used Date{% endtrans %}", data: "last_used" },
-                    { title: "{% trans %}Is Expired{% endtrans %}", data: "is_expired" }
+                    { title: "ID", data: "id", name: "id" },
+                    { title: "{% trans %}User Name{% endtrans %}", data: "username", name: "username" },
+                    { title: "{% trans %}Token{% endtrans %}", data: "token", name: "token" },
+                    { title: "{% trans %}Created Date{% endtrans %}", data: "created", name: "created" },
+                    { title: "{% trans %}Expired Date{% endtrans %}", data: "expired", name: "expired" },
+                    { title: "{% trans %}Last Used Date{% endtrans %}", data: "last_used", name: "last_used" }
                 ],
                 language: {
                     search: "{% trans %}Search{% endtrans %}:",
@@ -820,24 +775,26 @@
                     },
                     zeroRecords: "{% trans %}No matching records found{% endtrans %}",
                     emptyTable: "{% trans %}No data available in table{% endtrans %}"
-                }
-            });
-            // select all toggle
-            $('#select-all').on('click', function() {
-                var rows = $('#prometheus_token').DataTable().rows({ 'search': 'applied' }).nodes();
-                $('input[type="checkbox"]', rows).prop('checked', this.checked);
-                updateSelectedTokens();
-            });
+                },
+                drawCallback: function() {
+                    // select all toggle
+                    $('#select-all').off('click').on('click', function() {
+                        var rows = $('#prometheus_token').DataTable().rows({ 'search': 'applied' }).nodes();
+                        $('input[type="checkbox"]', rows).prop('checked', this.checked);
+                        updateSelectedTokens();
+                    });
 
-            // select simple
-            $('#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;
-                    }
+                    // select simple
+                    $('#prometheus_token tbody').off('change', 'input[type="checkbox"]').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();
+                    });
                 }
-                updateSelectedTokens();
             });
         }
 
@@ -870,10 +827,7 @@
 
         async function initialize() {
             await getBasicSetting();
-            tokenLength = await getPrometheusTokenLength();
-            const tokenData = await getPrometheusToken('', tokenLength.recordsTotal);
-            console.log('Token Data:', tokenData);
-            populateDataTable(tokenData.data);
+            populateDataTable();
         }
 
         $('.btn-submit').click(async function() {
@@ -881,22 +835,12 @@
             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();
+            initialize();
         });
 
         function toggleLightbox() {
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 39993)
+++ /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/templates/monitoring/prometheus/index/index.html	(working copy)
@@ -88,6 +88,7 @@
             cache: false,
             dataType: 'json'
         }).then(function(data){
+            localStorage.setItem('basicSettingData', JSON.stringify(data));
             $('.model-intro pre').html(translateMetrics(data.metrics));
         })
     }