Index: /branches/amp_4_0/platform/config/telegraf/apv.toml
===================================================================
--- /branches/amp_4_0/platform/config/telegraf/apv.toml	(revision 2708)
+++ /branches/amp_4_0/platform/config/telegraf/apv.toml	(working copy)
@@ -17,7 +17,7 @@
 oid = ".1.3.6.1.4.1.7564.4.2.0"
 
 [[inputs.snmp.field]]
-name = "totalopensslconns"
+name = "total_openssl_conns"
 oid = ".1.3.6.1.4.1.7564.20.2.1.0"
 
 [[inputs.snmp.field]]
@@ -44,11 +44,11 @@
 timeout = "2s"
 
 [[inputs.snmp.field]]
-name = "sslaecoreutilization"
+name = "ssl_ae_core_utilization"
 oid = ".1.3.6.1.4.1.7564.30.9.0"
 
 [[inputs.snmp.field]]
-name = "sslsecoreutilization"
+name = "ssl_se_core_utilization"
 oid = ".1.3.6.1.4.1.7564.30.10.0"
 
 
@@ -94,87 +94,87 @@
 
 [[inputs.snmp.table.field]]
 is_tag = true
-name = "healthstatus"
+name = "health_status"
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.36"
 
 [[inputs.snmp.table.field]]
-name = "urlhits"
+name = "url_hits"
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.5"
 
 [[inputs.snmp.table.field]]
-name = "hostnamehits"
+name = "hostname_hits"
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.6"
 
 [[inputs.snmp.table.field]]
-name = "perstntcookiehits"
+name = "perstnt_cookie_hits"
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.7"
 
 [[inputs.snmp.table.field]]
-name = "qoscookiehits"
+name = "qos_cookie_hits"
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.8"
 
 [[inputs.snmp.table.field]]
-name = "defaulthits"
+name = "default_hits"
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.9"
 
 [[inputs.snmp.table.field]]
-name = "perstnturlhits"
+name = "perstnt_url_hits"
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.10"
 
 [[inputs.snmp.table.field]]
-name = "statichits"
+name = "static_hits"
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.11"
 
 [[inputs.snmp.table.field]]
-name = "qosnetworkhits"
+name = "qos_network_hits"
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.12"
 
 [[inputs.snmp.table.field]]
-name = "qosurlhits"
+name = "qos_url_hits"
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.13"
 
 [[inputs.snmp.table.field]]
-name = "backuphits"
+name = "backup__hits"
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.14"
 
 [[inputs.snmp.table.field]]
-name = "cachehits"
+name = "cache_hits"
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.15"
 
 [[inputs.snmp.table.field]]
-name = "regexhits"
+name = "regex_hits"
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.16"
 
 [[inputs.snmp.table.field]]
-name = "rcookiehits"
+name = "rcookie_hits"
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.17"
 
 [[inputs.snmp.table.field]]
-name = "icookiehits"
+name = "icookie_hits"
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.18"
 
 [[inputs.snmp.table.field]]
-name = "conncnt"
+name = "conn_cnt"
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.19"
 
 [[inputs.snmp.table.field]]
-name = "qosclientporthits"
+name = "qos_client_port_hits"
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.22"
 
 [[inputs.snmp.table.field]]
-name = "qosbodyhits"
+name = "qos_body_hits"
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.23"
 
 [[inputs.snmp.table.field]]
-name = "headerhits"
+name = "header_hits"
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.24"
 
 [[inputs.snmp.table.field]]
-name = "hashurlhits"
+name = "hashurl_hits"
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.25"
 
 [[inputs.snmp.table.field]]
-name = "redirecthits"
+name = "redirect_hits"
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.26"
 
 [[inputs.snmp.table.field]]
@@ -182,19 +182,19 @@
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.31"
 
 [[inputs.snmp.table.field]]
-name = "inbytepersec"
+name = "in_byte_per_sec"
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.32"
 
 [[inputs.snmp.table.field]]
-name = "outbytepersec"
+name = "out_byte_per_sec"
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.33"
 
 [[inputs.snmp.table.field]]
-name = "inpacketpersec"
+name = "in_packet_per_sec"
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.34"
 
 [[inputs.snmp.table.field]]
-name = "outpacketpersec"
+name = "out_packet_per_sec"
 oid = ".1.3.6.1.4.1.7564.19.2.2.1.1.35"
 
 
@@ -241,7 +241,7 @@
 oid = ".1.3.6.1.4.1.7564.19.2.1.1.1.6"
 
 [[inputs.snmp.table.field]]
-name = "rs_total_hits"
+name = "rs_total__hits"
 oid = ".1.3.6.1.4.1.7564.19.2.1.1.1.7"
 
 [[inputs.snmp.table.field]]
@@ -270,63 +270,63 @@
 name = "apv_llb_stats"
 
 [[inputs.snmp.table.field]]
-name = "linkindex"
+name = "link_index"
 oid = ".1.3.6.1.4.1.7564.34.2.1.2.1.1"
 
 [[inputs.snmp.table.field]]
 is_tag = true
-name = "linkname"
+name = "link_name"
 oid = ".1.3.6.1.4.1.7564.34.2.1.2.1.2"
 
 [[inputs.snmp.table.field]]
-name = "linkgateway"
+name = "link_gateway"
 oid = ".1.3.6.1.4.1.7564.34.2.1.2.1.3"
 
 [[inputs.snmp.table.field]]
 is_tag = true
-name = "linkstatus"
+name = "link_status"
 oid = ".1.3.6.1.4.1.7564.34.2.1.2.1.4"
 
 [[inputs.snmp.table.field]]
-name = "linkresptime"
+name = "link_resp_time"
 oid = ".1.3.6.1.4.1.7564.34.2.1.2.1.5"
 
 [[inputs.snmp.table.field]]
-name = "linkuptime"
+name = "link_up_time"
 oid = ".1.3.6.1.4.1.7564.34.2.1.2.1.6"
 
 [[inputs.snmp.table.field]]
-name = "linkdowntime"
+name = "link_down_time"
 oid = ".1.3.6.1.4.1.7564.34.2.1.2.1.7"
 
 [[inputs.snmp.table.field]]
-name = "linkdowncount"
+name = "link_down_count"
 oid = ".1.3.6.1.4.1.7564.34.2.1.2.1.8"
 
 [[inputs.snmp.table.field]]
-name = "linkdownevent"
+name = "link_down_event"
 oid = ".1.3.6.1.4.1.7564.34.2.1.2.1.9"
 
 [[inputs.snmp.table.field]]
-name = "linkbandwidin"
+name = "link_bandwid_in"
 oid = ".1.3.6.1.4.1.7564.34.2.1.2.1.10"
 
 [[inputs.snmp.table.field]]
-name = "linkbandwidout"
+name = "link_bandwid_out"
 oid = ".1.3.6.1.4.1.7564.34.2.1.2.1.11"
 
 [[inputs.snmp.table.field]]
-name = "linkthresh"
+name = "link_thresh"
 oid = ".1.3.6.1.4.1.7564.34.2.1.2.1.12"
 
 [[inputs.snmp.table.field]]
-name = "linkhits"
+name = "link_hits"
 oid = ".1.3.6.1.4.1.7564.34.2.1.2.1.13"
 
 [[inputs.snmp.table.field]]
-name = "linkconn"
+name = "link_conn"
 oid = ".1.3.6.1.4.1.7564.34.2.1.2.1.14"
 
 [[inputs.snmp.table.field]]
-name = "linkusage"
+name = "link_usage"
 oid = ".1.3.6.1.4.1.7564.34.2.1.2.1.15"
Index: /branches/amp_4_0/platform/tools/configure_telegraf_timescale.sh
===================================================================
--- /branches/amp_4_0/platform/tools/configure_telegraf_timescale.sh	(revision 2708)
+++ /branches/amp_4_0/platform/tools/configure_telegraf_timescale.sh	(working copy)
@@ -139,7 +139,7 @@
         return None
     if metric.name == 'asf_syslog_history' and 'idx' not in metric.fields:
         return None
-    if metric.name not in ['ag_virtual_site_stats', 'ag_vpn_stats', 'apv_real_stats']:
+    if metric.name not in ['apv_real_stats']:
         return metric
     if 'real_server_id' in metric.tags or 'serverid' in metric.fields:
         return metric
@@ -159,7 +159,62 @@
     return metric
 '''
 
+[[processors.starlark]]
+  namepass = ["apv_llb_stats"]
+  source = '''
+def apply(metric):
+    if metric.name != "apv_llb_stats":
+        return metric
 
+    # Fields that must remain as strings
+    string_fields = ["link_resp_time", "link_up_time", "link_down_time",
+                     "link_bandwid_in", "link_bandwid_out", "link_thresh",
+                     "link_status", "link_down_event", "link_name",
+                     "link_gateway", "host"]
+
+    # Fields that must be integers
+    int_fields = ["link_index", "link_hits", "link_conn", "link_usage",
+                  "link_down_count"]
+
+    # Convert string fields safely
+    for f in string_fields:
+        if f in metric.fields:
+            if metric.fields[f] == None:
+                metric.fields[f] = ""
+            else:
+                metric.fields[f] = str(metric.fields[f])
+
+    # Convert int fields safely
+    for f in int_fields:
+        if f in metric.fields:
+            val = metric.fields[f]
+            # Convert numeric strings to int, keep actual int, else 0
+            if val == None:
+                metric.fields[f] = 0
+            elif type(val) == int:
+                metric.fields[f] = val
+            elif type(val) == float:
+                metric.fields[f] = int(val)
+            elif type(val) == str:
+                # remove non-digit characters like 'kbps' or 'ms'
+                digits = ""
+                for c in val:
+                    if c in "0123456789.":
+                        digits += c
+                if digits == "":
+                    metric.fields[f] = 0
+                else:
+                    metric.fields[f] = int(float(digits))
+            else:
+                metric.fields[f] = 0
+
+    if "host" in metric.tags:
+        metric.tags.pop("host")
+
+    return metric
+'''
+
+
 EOF
 
 # --- test config (outputs are skipped in test mode) ---
Index: /branches/amp_4_0/platform/tools/telegraf_snmp_timescale.sql
===================================================================
--- /branches/amp_4_0/platform/tools/telegraf_snmp_timescale.sql	(revision 2708)
+++ /branches/amp_4_0/platform/tools/telegraf_snmp_timescale.sql	(working copy)
@@ -119,25 +119,25 @@
 
 -- 6) TABLE: apv_llb_stats
 -- Note: several fields arrive as strings (e.g., "7.502ms", "7+00:33:52"); keep TEXT.
-CREATE TABLE IF NOT EXISTS apv_llb_stats (
-    time TIMESTAMPTZ NOT NULL,
-    agent_host TEXT NOT NULL,
-    link_index BIGINT,
-    link_name TEXT NOT NULL,
-    link_gateway TEXT,
-    link_status TEXT NOT NULL,
-    link_resp_time TEXT,
-    link_up_time TEXT,
-    link_down_time TEXT,
-    link_down_count BIGINT,
-    link_down_event TEXT,
-    link_bandwid_in BIGINT,
-    link_bandwid_out BIGINT,
-    link_thresh BIGINT,
-    link_hits BIGINT,
-    link_conn BIGINT,
-    link_usage BIGINT,
-    PRIMARY KEY (time, agent_host, link_name)
+CREATE TABLE public.apv_llb_stats (
+    "time" timestamptz NOT NULL,
+    agent_host text NOT NULL,
+    host text NULL,
+    link_gateway text NULL,
+    link_resp_time text NULL,
+    link_down_event text NULL,
+    link_hits int8 NULL,
+    link_index int8 NULL,
+    link_name text NOT NULL,
+    link_up_time int8 NULL,
+    link_down_count int8 NULL,
+    link_bandwid_out int8 NULL,
+    link_conn int8 NULL,
+    link_usage int8 NULL,
+    link_status text NOT NULL,
+    link_bandwid_in int8 NULL,
+    link_thresh int8 NULL,
+    link_down_time int8 NULL
 );
 SELECT create_hypertable('apv_llb_stats','time','agent_host', number_partitions => 4, if_not_exists => TRUE);
 CREATE INDEX IF NOT EXISTS idx_llb_linkname ON apv_llb_stats (link_name);
@@ -269,7 +269,7 @@
     time TIMESTAMPTZ NOT NULL,
     agent_host TEXT NOT NULL,
     id TEXT NOT NULL,
-    ip TEXT NOT NULL,
+    ip TEXT NULL,
     active_sessions BIGINT,
     success_login BIGINT,
     failure_login BIGINT,
@@ -281,7 +281,7 @@
     rejected_login BIGINT,
     server_bytes_in BIGINT,
     server_bytes_out BIGINT,
-    PRIMARY KEY (time, agent_host, id, ip)
+    PRIMARY KEY (time, agent_host, id)
 );
 SELECT create_hypertable('ag_virtual_site_stats','time','agent_host',
                          number_partitions => 8, if_not_exists => TRUE);
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.routes.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.routes.ts	(revision 2708)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.routes.ts	(working copy)
@@ -39,6 +39,18 @@
 import {
   LogAnalysisSlbElaborate
 } from './components/sub-components/log-analysis-slb-elaborate/log-analysis-slb-elaborate';
+import {
+  ResourceMonitoringDeviceDetails
+} from './components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details';
+import {
+  ResourceMonitoringSlbVirtualDetails
+} from './components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details';
+import {
+  ResourceMonitoringSlbRealDetails
+} from './components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details';
+import {
+  ResourceMonitoringSslVpnDetails
+} from './components/sub-components/resource-monitoring-ssl-vpn-details/resource-monitoring-ssl-vpn-details';
 
 
 export const routes: Routes = [
@@ -224,6 +236,10 @@
         data: {roles: ['super_admin', 'device_admin', 'common_admin'],},
         children: [
           {path: 'resources', component: Monitoring},
+          {path: 'resources/devices/:deviceName/:deviceIp', component: ResourceMonitoringDeviceDetails},
+          {path: 'resources/slb-virtual/:deviceIp/:serviceName', component: ResourceMonitoringSlbVirtualDetails},
+          {path: 'resources/slb-real/:deviceIp/:serviceName', component: ResourceMonitoringSlbRealDetails},
+          {path: 'resources/ssl-vpn/:deviceIp/:serviceName', component: ResourceMonitoringSslVpnDetails},
         ]
       },
       {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.ts	(revision 2708)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.ts	(working copy)
@@ -155,6 +155,7 @@
             result.forEach((_metric: any) => {
               if (_metric?.agent_host === _device?.ip) {
                 _metric.device_name = _device?.name;
+                _metric.service_name = _metric?.link_name;
                 _metric.device_type = _device?.type;
               }
             })
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-base-settings/device-ha-base-settings.scss	(added)
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-base-settings/device-ha-base-settings.scss	(revision 0)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-base-settings/device-ha-base-settings.scss	(revision 0)
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-unit/device-ha-unit.scss	(added)
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-unit/device-ha-unit.scss	(revision 0)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/device-ha-unit/device-ha-unit.scss	(revision 0)
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.html	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.html	(working copy)
@@ -0,0 +1,326 @@
+<mat-card class="page-card-1" appearance="filled">
+  <mat-card-header>
+    <mat-card-title>
+      <a class="back-to-main-page" (click)="navigateMonitoringDevices()">
+        <fa-icon [icon]="['far', 'circle-left']"></fa-icon>
+        Monitoring Devices - {{ deviceName }}
+      </a>
+    </mat-card-title>
+  </mat-card-header>
+</mat-card>
+<mat-tab-group mat-stretch-tabs="false" animationDuration="0ms" [selectedIndex]="selectedTabIndex"
+               (selectedTabChange)="onTabChange($event)">
+  <mat-tab label="Basic Monitoring">
+    <ng-template matTabContent>
+      <div class="tab-content">
+        <mat-grid-list cols="3" rowHeight="100px">
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">CPU Usage (%)</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <div echarts [options]="cpuChartOptions" class="chart-container"></div>
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">Memory Usage(%)</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <div echarts [options]="memoryChartOptions" class="chart-container"></div>
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">Disk Usage(%)</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <div echarts [options]="diskUsageChartOptions" class="chart-container"></div>
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">Network Throughput</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <div echarts [options]="throughputChartOptions" class="chart-container"></div>
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">Open SSL Connections</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <div echarts [options]="sslConnectionsChartOptions" class="chart-container"></div>
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">Number of connections per second</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <div echarts [options]="connectionsChartOptions" class="chart-container"></div>
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">Number of requests per second</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <div echarts [options]="requestsChartOptions" class="chart-container"></div>
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">SSL Core Utilization(%)</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <div echarts [options]="sslCoreChartOptions" class="chart-container"></div>
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+        </mat-grid-list>
+      </div>
+    </ng-template>
+  </mat-tab>
+  <mat-tab label="Audit Monitoring">
+    <ng-template matTabContent>
+      <div class="tab-content">
+        <mat-grid-list cols="3" rowHeight="100px">
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text"> HTTP Status Code Ratio</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">Number Of Virtual Service Visits</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <!--          <div echarts [options]="chartOption1" class="chart-container"></div>-->
+                  <!--          <div echarts [options]="chartOption2" class="chart-container"></div>-->
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">Virtual Service Response Time</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <!--          <div echarts [options]="chartOption1" class="chart-container"></div>-->
+                  <!--          <div echarts [options]="chartOption2" class="chart-container"></div>-->
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">Client To Device Time</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <!--          <div echarts [options]="chartOption1" class="chart-container"></div>-->
+                  <!--          <div echarts [options]="chartOption2" class="chart-container"></div>-->
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">Device Processing Request Time</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <!--          <div echarts [options]="chartOption1" class="chart-container"></div>-->
+                  <!--          <div echarts [options]="chartOption2" class="chart-container"></div>-->
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">Server Response Time</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <!--          <div echarts [options]="chartOption1" class="chart-container"></div>-->
+                  <!--          <div echarts [options]="chartOption2" class="chart-container"></div>-->
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">Device Processing Response Time</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <!--          <div echarts [options]="chartOption1" class="chart-container"></div>-->
+                  <!--          <div echarts [options]="chartOption2" class="chart-container"></div>-->
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">SSL Handshake Success/Failure Ratio</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <!--          <div echarts [options]="chartOption1" class="chart-container"></div>-->
+                  <!--          <div echarts [options]="chartOption2" class="chart-container"></div>-->
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">SSL Handshake Failure Reason Statistics</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <!--          <div echarts [options]="chartOption1" class="chart-container"></div>-->
+                  <!--          <div echarts [options]="chartOption2" class="chart-container"></div>-->
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">SSL Handshake Time</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <!--          <div echarts [options]="chartOption1" class="chart-container"></div>-->
+                  <!--          <div echarts [options]="chartOption2" class="chart-container"></div>-->
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+        </mat-grid-list>
+      </div>
+    </ng-template>
+  </mat-tab>
+</mat-tab-group>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.scss	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.scss	(working copy)
@@ -0,0 +1,170 @@
+.page-card-1 {
+  width: 100%;
+  border-radius: 0;
+  background-color: inherit;
+  font-size: 14px !important;
+
+  mat-card-header {
+    color: #1170cf;
+  }
+}
+
+mat-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 10px;
+}
+
+mat-card-title {
+  font-size: medium;
+}
+
+.dashboard-card {
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  background-color: inherit;
+}
+
+.card-content-wrapper {
+  margin-top: 2px;
+  padding: 0 !important;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.card-header-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 8px;
+  padding: 0 8px;
+}
+
+.metric-icon {
+  color: #3f51b5;
+}
+
+.card-title {
+  font-size: 18px;
+  font-weight: 500;
+  color: #555;
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.metric-value {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  line-height: 1;
+}
+
+.metric-label {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  font-size: 0.9rem;
+  color: #777;
+  margin-top: 5px;
+}
+
+.online-count {
+  font-size: 36px;
+  font-weight: 600;
+  color: #333;
+}
+
+.total-count {
+  font-size: 18px;
+  font-weight: 500;
+  color: #888;
+  margin-left: 4px;
+}
+
+.status-details {
+  font-size: 14px;
+  color: #d32f2f;
+  margin: 0;
+  font-weight: 500;
+  text-align: center;
+}
+
+.active,
+.matrics-icon {
+  color: darkgreen;
+}
+
+/* Updated CSS for horizontal chart layout */
+.chart-flex-container {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  flex-grow: 1;
+}
+
+.chart-container {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+}
+
+/* Adjustments for multiple charts */
+.chart-flex-container .chart-container {
+  width: 100%;
+  height: 100%;
+}
+
+mat-grid-list {
+  height: 100%;
+  width: 100%;
+}
+
+/* The original vertical layout for metrics */
+.metrics-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+/* Container to center content vertically and horizontally */
+.card-body-content {
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* New CSS for the metrics block */
+.metrics-horizontal-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  width: 100%;
+}
+
+.metric-item {
+  text-align: center;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.metric-value {
+  font-size: 1rem;
+  font-weight: 500;
+  color: #333;
+}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.spec.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.spec.ts	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.spec.ts	(working copy)
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ResourceMonitoringDeviceDetails } from './resource-monitoring-device-details';
+
+describe('ResourceMonitoringDeviceDetails', () => {
+  let component: ResourceMonitoringDeviceDetails;
+  let fixture: ComponentFixture<ResourceMonitoringDeviceDetails>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ResourceMonitoringDeviceDetails]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ResourceMonitoringDeviceDetails);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.ts	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.ts	(working copy)
@@ -0,0 +1,497 @@
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {SharedModule} from '../../../shared/shared-module';
+import {DeviceService} from '../../../services/device-service';
+import {take} from 'rxjs/operators';
+import {EChartsOption} from 'echarts';
+
+@Component({
+  selector: 'app-resource-monitoring-device-details',
+  imports: [
+    SharedModule,
+  ],
+  templateUrl: './resource-monitoring-device-details.html',
+  styleUrl: './resource-monitoring-device-details.scss'
+})
+export class ResourceMonitoringDeviceDetails implements OnInit {
+
+  deviceName: any = '';
+  deviceIp: any = '';
+
+  selectedTabIndex: number = 0;
+  private tabNames: string[] = [
+    'Basic Monitoring',
+    'Audit Monitoring',
+  ];
+
+  cpuChartOptions: EChartsOption = {};
+  memoryChartOptions: EChartsOption = {};
+  diskUsageChartOptions: EChartsOption = {};
+  throughputChartOptions: EChartsOption = {};
+  sslConnectionsChartOptions: EChartsOption = {};
+  connectionsChartOptions: EChartsOption = {};
+  requestsChartOptions: EChartsOption = {};
+  sslCoreChartOptions: EChartsOption = {};
+
+  constructor(
+    private _route: ActivatedRoute,
+    private _router: Router,
+    private _device: DeviceService,
+  ) {
+  }
+
+  ngOnInit() {
+    this.deviceName = this._route.snapshot.paramMap.get('deviceName');
+    this.deviceIp = this._route.snapshot.paramMap.get('deviceIp');
+    this.getBasicMonitoringMetrics()
+  }
+
+  navigateMonitoringDevices() {
+    this._router.navigate(['/monitoring/resources'], {state: {}});
+  }
+
+  onTabChange($event: any) {
+    if ($event.index === 0) {
+      this.getBasicMonitoringMetrics()
+    } else if ($event.index === 1) {
+
+    }
+  }
+
+  getBasicMonitoringMetrics() {
+    this.getDeviceMonitoringMetrics({
+      "metric_name": "cpu_usage",
+      "agent_host": this.deviceIp,
+      "interval": "10s",
+      "from": "now-15m",
+      "to": "now"
+    });
+
+    this.getDeviceMonitoringMetrics({
+      "metric_name": "memory_usage",
+      "agent_host": this.deviceIp,
+      "interval": "10s",
+      "from": "now-15m",
+      "to": "now"
+    })
+
+    this.getDeviceMonitoringMetrics({
+      "metric_name": "disk_usage",
+      "agent_host": this.deviceIp,
+      "interval": "10s",
+      "from": "now-15m",
+      "to": "now"
+    })
+
+    this.getDeviceMonitoringMetrics({
+      "metric_name": "network_throughput",
+      "agent_host": this.deviceIp,
+      "interval": "10s",
+      "from": "now-15m",
+      "to": "now"
+    })
+
+    this.getDeviceMonitoringMetrics({
+      "metric_name": "ssl_connections",
+      "agent_host": this.deviceIp,
+      "interval": "10s",
+      "from": "now-15m",
+      "to": "now"
+    })
+
+    this.getDeviceMonitoringMetrics({
+      "metric_name": "connections",
+      "agent_host": this.deviceIp,
+      "interval": "10s",
+      "from": "now-15m",
+      "to": "now"
+    })
+
+    this.getDeviceMonitoringMetrics({
+      "metric_name": "requests",
+      "agent_host": this.deviceIp,
+      "interval": "10s",
+      "from": "now-15m",
+      "to": "now"
+    })
+
+    this.getDeviceMonitoringMetrics({
+      "metric_name": "ssl_core_utilization",
+      "agent_host": this.deviceIp,
+      "interval": "10s",
+      "from": "now-15m",
+      "to": "now"
+    })
+  }
+
+  getDeviceMonitoringMetrics(payload: any) {
+    this._device.getDeviceMonitoringMetrics(payload).pipe(take(1)).subscribe({
+      next: (result: any) => {
+        if (payload?.metric_name === 'cpu_usage') {
+          let cpu = result?.data;
+          const data_formatted = cpu?.data
+            .filter((d: any) => d.cpu !== null)
+            .map((d: any) => [new Date(d.ts).getTime(), d.cpu]);
+
+          this.cpuChartOptions = {
+            tooltip: {
+              trigger: 'axis',
+              formatter: (params: any) => {
+                if (!params.length) return '';
+                const date = new Date(params[0].value[0]);
+                const formattedTime = date.toLocaleTimeString('en-US', {
+                  hour: '2-digit',
+                  minute: '2-digit',
+                  second: '2-digit',
+                  hour12: false
+                });
+                let tooltipContent = `Time: ${formattedTime}<br/>`;
+                params.forEach((item: any) => {
+                  tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1].toFixed(2)} %<br/>`;
+                });
+                return tooltipContent;
+              }
+            },
+            legend: {data: ['CPU']},
+            xAxis: {type: 'time', name: 'Time'},
+            yAxis: {type: 'value', name: '%'},
+            series: [
+              {
+                name: 'CPU',
+                type: 'line',
+                data: data_formatted,
+                showSymbol: false,
+                smooth: true
+              }
+            ]
+          };
+        } else if (payload?.metric_name === 'memory_usage') {
+          let memory = result?.data;
+          const data_formatted = memory?.data
+            .filter((d: any) => d.memory_usage !== null)
+            .map((d: any) => [new Date(d.ts).getTime(), d.memory_usage]);
+
+          this.memoryChartOptions = {
+            tooltip: {
+              trigger: 'axis',
+              formatter: (params: any) => {
+                if (!params.length) return '';
+                const date = new Date(params[0].value[0]);
+                const formattedTime = date.toLocaleTimeString('en-US', {
+                  hour: '2-digit',
+                  minute: '2-digit',
+                  second: '2-digit',
+                  hour12: false
+                });
+                let tooltipContent = `Time: ${formattedTime}<br/>`;
+                params.forEach((item: any) => {
+                  tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1].toFixed(2)} %<br/>`;
+                });
+                return tooltipContent;
+              }
+            },
+            legend: {data: ['Memory']},
+            xAxis: {type: 'time', name: 'Time'},
+            yAxis: {type: 'value', name: '%'},
+            series: [
+              {
+                name: 'Memory',
+                type: 'line',
+                data: data_formatted,
+                showSymbol: false,
+                smooth: true
+              }
+            ]
+          };
+        } else if (payload?.metric_name === 'disk_usage') {
+          let disk = result?.data;
+          const data_formatted = disk?.data
+            .filter((d: any) => d.disk_usage !== null)
+            .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.disk_usage)]);
+
+          this.diskUsageChartOptions = {
+            tooltip: {
+              trigger: 'axis',
+              formatter: (params: any) => {
+                if (!params.length) return '';
+                const date = new Date(params[0].value[0]);
+                const formattedTime = date.toLocaleTimeString('en-US', {
+                  hour: '2-digit',
+                  minute: '2-digit',
+                  second: '2-digit',
+                  hour12: false
+                });
+                let tooltipContent = `Time: ${formattedTime}<br/>`;
+                params.forEach((item: any) => {
+                  tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1].toFixed(2)} %<br/>`;
+                });
+                return tooltipContent;
+              }
+            },
+            legend: {data: ['Disk']},
+            xAxis: {type: 'time', name: 'Time'},
+            yAxis: {type: 'value', name: '%'},
+            series: [
+              {
+                name: 'Disk',
+                type: 'line',
+                data: data_formatted,
+                showSymbol: false,
+                smooth: true
+              }
+            ]
+          };
+        } else if (payload?.metric_name === 'network_throughput') {
+          let network = result?.data;
+          const sent_formatted = network?.data
+            .filter((d: any) => d.sent !== null)
+            .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.sent)]);
+          const received_formatted = network?.data
+            .filter((d: any) => d.received !== null)
+            .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.received)]);
+
+          this.throughputChartOptions = {
+            tooltip: {
+              trigger: 'axis',
+              formatter: (params: any) => {
+                if (!params.length) return '';
+                const date = new Date(params[0].value[0]);
+                const formattedTime = date.toLocaleTimeString('en-US', {
+                  hour: '2-digit',
+                  minute: '2-digit',
+                  second: '2-digit',
+                  hour12: false
+                });
+                let tooltipContent = `Time: ${formattedTime}<br/>`;
+                params.forEach((item: any) => {
+                  tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1].toFixed(2)} bps<br/>`;
+                });
+                return tooltipContent;
+              }
+            },
+            grid: {
+              containLabel: true
+            },
+            legend: {data: ['Sent', 'Received']},
+            xAxis: {type: 'time', name: 'Time'},
+            yAxis: {
+              type: 'value',
+              name: 'bps',
+              axisLabel: {
+                formatter: (value: number) => {
+                  if (value >= 1000000000) {
+                    return (value / 1000000000).toFixed(1) + 'B';
+                  }
+                  if (value >= 1000000) {
+                    return (value / 1000000).toFixed(1) + 'M';
+                  }
+                  if (value >= 1000) {
+                    return (value / 1000).toFixed(1) + 'K';
+                  }
+                  return value.toString();
+                }
+              }
+            },
+            series: [
+              {
+                name: 'Sent',
+                type: 'line',
+                data: sent_formatted,
+                showSymbol: false,
+                smooth: true
+              },
+              {
+                name: 'Received',
+                type: 'line',
+                data: received_formatted,
+                showSymbol: false,
+                smooth: true
+              }
+            ]
+          };
+        } else if (payload?.metric_name === 'ssl_connections') {
+          let ssl = result?.data;
+          const data_formatted = ssl?.data.map((d: any) => [
+            new Date(d.ts).getTime(),
+            d.ssl_connection !== null ? parseInt(d.ssl_connection) : 0,
+          ]);
+
+          this.sslConnectionsChartOptions = {
+            tooltip: {
+              trigger: 'axis',
+              formatter: (params: any) => {
+                if (!params.length) return '';
+                const date = new Date(params[0].value[0]);
+                const formattedTime = date.toLocaleTimeString('en-US', {
+                  hour: '2-digit',
+                  minute: '2-digit',
+                  second: '2-digit',
+                  hour12: false
+                });
+                let tooltipContent = `Time: ${formattedTime}<br/>`;
+                params.forEach((item: any) => {
+                  tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1]}<br/>`;
+                });
+                return tooltipContent;
+              }
+            },
+            legend: {data: ['SSL Connections']},
+            xAxis: {type: 'time', name: 'Time'},
+            yAxis: {
+              type: 'value',
+              name: '',
+              min: 0,
+            },
+            series: [
+              {
+                name: 'SSL Connections',
+                type: 'line',
+                data: data_formatted,
+                showSymbol: false,
+                smooth: true
+              }
+            ]
+          };
+        } else if (payload?.metric_name === 'connections') {
+          let connections = result?.data;
+          const data_formatted = connections?.data.map((d: any) => [
+            new Date(d.ts).getTime(),
+            d.connection !== null ? parseInt(d.connection) : 0,
+          ]);
+
+          this.connectionsChartOptions = {
+            tooltip: {
+              trigger: 'axis',
+              formatter: (params: any) => {
+                if (!params.length) return '';
+                const date = new Date(params[0].value[0]);
+                const formattedTime = date.toLocaleTimeString('en-US', {
+                  hour: '2-digit',
+                  minute: '2-digit',
+                  second: '2-digit',
+                  hour12: false
+                });
+                let tooltipContent = `Time: ${formattedTime}<br/>`;
+                params.forEach((item: any) => {
+                  tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1]}<br/>`;
+                });
+                return tooltipContent;
+              }
+            },
+            legend: {data: ['Connections']},
+            xAxis: {type: 'time', name: 'Time'},
+            yAxis: {
+              type: 'value',
+              name: '',
+              min: 0,
+            },
+            series: [
+              {
+                name: 'Connections',
+                type: 'line',
+                data: data_formatted,
+                showSymbol: false,
+                smooth: true
+              }
+            ]
+          };
+        } else if (payload?.metric_name === 'requests') {
+          let requests = result?.data;
+          const data_formatted = requests?.data.map((d: any) => [
+            new Date(d.ts).getTime(),
+            d.connection !== null ? parseInt(d.connection) : 0,
+          ]);
+          this.requestsChartOptions = {
+            tooltip: {
+              trigger: 'axis',
+              formatter: (params: any) => {
+                if (!params.length) return '';
+                const date = new Date(params[0].value[0]);
+                const formattedTime = date.toLocaleTimeString('en-US', {
+                  hour: '2-digit',
+                  minute: '2-digit',
+                  second: '2-digit',
+                  hour12: false
+                });
+                let tooltipContent = `Time: ${formattedTime}<br/>`;
+                params.forEach((item: any) => {
+                  tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1]}<br/>`;
+                });
+                return tooltipContent;
+              }
+            },
+            legend: {data: ['Requests']},
+            xAxis: {type: 'time', name: 'Time'},
+            yAxis: {
+              type: 'value',
+              name: '',
+              min: 0,
+            },
+            series: [
+              {
+                name: 'Requests',
+                type: 'line',
+                data: data_formatted,
+                showSymbol: false,
+                smooth: true
+              }
+            ]
+          };
+        } else if (payload?.metric_name === 'ssl_core_utilization') {
+          let network = result?.data;
+          const ae_core_formatted = network?.data
+            .filter((d: any) => d.ssl_ae_core !== null)
+            .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.ssl_ae_core)]);
+          const se_core_formatted = network?.data
+            .filter((d: any) => d.ssl_se_core !== null)
+            .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.ssl_se_core)]);
+
+          this.sslCoreChartOptions = {
+            tooltip: {
+              trigger: 'axis',
+              formatter: (params: any) => {
+                if (!params.length) return '';
+                const date = new Date(params[0].value[0]);
+                const formattedTime = date.toLocaleTimeString('en-US', {
+                  hour: '2-digit',
+                  minute: '2-digit',
+                  second: '2-digit',
+                  hour12: false
+                });
+                let tooltipContent = `Time: ${formattedTime}<br/>`;
+                params.forEach((item: any) => {
+                  tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1]}<br/>`;
+                });
+                return tooltipContent;
+              }
+            },
+            legend: {data: ['AE Core', 'SE Core']},
+            xAxis: {type: 'time', name: 'Time'},
+            yAxis: {
+              type: 'value',
+            },
+            series: [
+              {
+                name: 'Sent',
+                type: 'line',
+                data: ae_core_formatted,
+                showSymbol: false,
+                smooth: true
+              },
+              {
+                name: 'Received',
+                type: 'line',
+                data: se_core_formatted,
+                showSymbol: false,
+                smooth: true
+              }
+            ]
+          };
+       }
+      },
+      error: (error: any) => {
+        console.log(error);
+      }
+    });
+  }
+}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/resource-monitoring-devices.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/resource-monitoring-devices.html	(revision 2708)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/resource-monitoring-devices.html	(working copy)
@@ -45,20 +45,20 @@
               <div class="stats-container">
                 <div class="stat-item">
                   <span>CPU:</span>
-                  <div echarts [options]="getMiniBarOptions(30)" class="mini-chart" matTooltip="CPU"></div>
-                  <span class="progress-number">30 %</span>
+                  <div echarts [options]="getMiniBarOptions(element?.cpu)" class="mini-chart" matTooltip="CPU"></div>
+                  <span class="progress-number">{{element?.cpu}} %</span>
                 </div>
 
                 <div class="stat-item">
                   <span>System:</span>
-                  <div echarts [options]="getMiniBarOptions(60)" class="mini-chart" matTooltip="System Memory"></div>
-                  <span class="progress-number">60 %</span>
+                  <div echarts [options]="getMiniBarOptions(element?.memory)" class="mini-chart" matTooltip="System Memory"></div>
+                  <span class="progress-number">{{element?.memory}} %</span>
                 </div>
 
                 <div class="stat-item">
                   <span>Network:</span>
-                  <div echarts [options]="getMiniBarOptions(90)" class="mini-chart" matTooltip="Network Memory"></div>
-                  <span class="progress-number">90 %</span>
+                  <div echarts [options]="getMiniBarOptions(element?.net_mem)" class="mini-chart" matTooltip="Network Memory"></div>
+                  <span class="progress-number">{{element?.net_mem}} %</span>
                 </div>
               </div>
             </td>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/resource-monitoring-devices.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/resource-monitoring-devices.ts	(revision 2708)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/resource-monitoring-devices.ts	(working copy)
@@ -8,6 +8,7 @@
 import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe';
 import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';
 import {UtilsService} from '../../../services/utils-service';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-resource-monitoring-devices',
@@ -18,6 +19,7 @@
 export class ResourceMonitoringDevices implements OnInit {
 
   devices: any = [];
+  deviceMetrics: any = [];
   groups: any = [];
   totalRecords: number = 0;
   dataSource: MatTableDataSource<any> = new MatTableDataSource();
@@ -26,13 +28,14 @@
 
   constructor(
     private _device: DeviceService,
+    private _router: Router,
     private _notification: NotificationService,
   ) {
   }
 
   ngOnInit() {
     setTimeout(() => {
-      this.getDeviceGroups();
+      this.getDeviceMonitoringMetrics();
     })
   }
 
@@ -54,7 +57,15 @@
               groups.forEach((group: any) => {
                 this.groups.push(group?.group_name);
                 group?.device_list.forEach((device: any) => {
-                  this.devices.push(device);
+                  this.deviceMetrics.forEach((d: any) => {
+                    if (d?.agent_host === device?.ip) {
+                      device.cpu = d.cpu !== null ? d.cpu : 0;
+                      device.memory = d.mem !== null ? d.mem : 0;
+                      device.net_mem = d.net_mem !== null ? d.net_mem : 0;
+                      device.connections = d.connections !== null ? d.connections : 0;
+                      this.devices.push(device);
+                    }
+                  })
                 })
               })
               this.dataSource.data = this.devices;
@@ -69,6 +80,23 @@
       })
   }
 
+  getDeviceMonitoringMetrics(): void {
+    this._device.getDeviceMonitoringMetrics({
+      "interval": "10s",
+      "from": "now-15m",
+      "to": "now"
+    }).pipe(take(1)).subscribe({
+      next: (result: any) => {
+        this.deviceMetrics = result?.data?.device_stats;
+        this.getDeviceGroups();
+      },
+      error: (error: { message: string; }) => {
+        this._notification.showError(error.message);
+        this.getDeviceGroups();
+      }
+    })
+  }
+
   getMiniBarOptions(value: number) {
     return {
       grid: {left: 0, right: 0, top: 0, bottom: 0},
@@ -106,7 +134,7 @@
 
 
   goToDetails(_device: any) {
-
+    this._router.navigate(['/monitoring/resources/devices', _device.name, _device?.ip], {state: {}});
   }
 
   dialog = inject(MatDialog);
@@ -122,7 +150,7 @@
         'Serial Number': _device.serial_number,
         'LicenseKey': _device?.license_key,
         'Expiration Date': _device?.license_date,
-        'Connections Per Second': 0,
+        'Connections Per Second': _device?.connections,
         'Throughput - Received': '',
         'Throughput - Sent': '',
       }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.html	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.html	(working copy)
@@ -0,0 +1,101 @@
+<mat-card class="page-card-1" appearance="filled">
+  <mat-card-header>
+    <mat-card-title>
+      <a class="back-to-main-page" (click)="navigateMonitoringDevices()">
+        <fa-icon [icon]="['far', 'circle-left']"></fa-icon>
+        Monitoring Devices - {{ serviceName }}
+      </a>
+    </mat-card-title>
+  </mat-card-header>
+</mat-card>
+<mat-tab-group mat-stretch-tabs="false" animationDuration="0ms" [selectedIndex]="selectedTabIndex"
+               (selectedTabChange)="onTabChange($event)">
+  <mat-tab label="Basic Monitoring">
+    <ng-template matTabContent>
+      <div class="tab-content">
+        <mat-grid-list cols="3" rowHeight="100px">
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text"> Network Throughput (bps)</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <div echarts [options]="throughputChartOptions" class="chart-container"></div>
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">Outstanding Requests</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <div echarts [options]="outstandingRequestsChartOptions" class="chart-container"></div>
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">Requests Number</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <div echarts [options]="requestsChartOptions" class="chart-container"></div>
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">Open Connections</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <div echarts [options]="openConnectionsChartOptions" class="chart-container"></div>
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">Connections Per Second</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <div echarts [options]="connectionChartOptions" class="chart-container"></div>
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+        </mat-grid-list>
+      </div>
+    </ng-template>
+  </mat-tab>
+</mat-tab-group>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.scss	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.scss	(working copy)
@@ -0,0 +1,170 @@
+.page-card-1 {
+  width: 100%;
+  border-radius: 0;
+  background-color: inherit;
+  font-size: 14px !important;
+
+  mat-card-header {
+    color: #1170cf;
+  }
+}
+
+mat-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 10px;
+}
+
+mat-card-title {
+  font-size: medium;
+}
+
+.dashboard-card {
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  background-color: inherit;
+}
+
+.card-content-wrapper {
+  margin-top: 2px;
+  padding: 0 !important;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.card-header-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 8px;
+  padding: 0 8px;
+}
+
+.metric-icon {
+  color: #3f51b5;
+}
+
+.card-title {
+  font-size: 18px;
+  font-weight: 500;
+  color: #555;
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.metric-value {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  line-height: 1;
+}
+
+.metric-label {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  font-size: 0.9rem;
+  color: #777;
+  margin-top: 5px;
+}
+
+.online-count {
+  font-size: 36px;
+  font-weight: 600;
+  color: #333;
+}
+
+.total-count {
+  font-size: 18px;
+  font-weight: 500;
+  color: #888;
+  margin-left: 4px;
+}
+
+.status-details {
+  font-size: 14px;
+  color: #d32f2f;
+  margin: 0;
+  font-weight: 500;
+  text-align: center;
+}
+
+.active,
+.matrics-icon {
+  color: darkgreen;
+}
+
+/* Updated CSS for horizontal chart layout */
+.chart-flex-container {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  flex-grow: 1;
+}
+
+.chart-container {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+}
+
+/* Adjustments for multiple charts */
+.chart-flex-container .chart-container {
+  width: 100%;
+  height: 100%;
+}
+
+mat-grid-list {
+  height: 100%;
+  width: 100%;
+}
+
+/* The original vertical layout for metrics */
+.metrics-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+/* Container to center content vertically and horizontally */
+.card-body-content {
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* New CSS for the metrics block */
+.metrics-horizontal-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  width: 100%;
+}
+
+.metric-item {
+  text-align: center;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.metric-value {
+  font-size: 1rem;
+  font-weight: 500;
+  color: #333;
+}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.spec.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.spec.ts	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.spec.ts	(working copy)
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ResourceMonitoringSlbRealDetails } from './resource-monitoring-slb-real-details';
+
+describe('ResourceMonitoringSlbRealDetails', () => {
+  let component: ResourceMonitoringSlbRealDetails;
+  let fixture: ComponentFixture<ResourceMonitoringSlbRealDetails>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ResourceMonitoringSlbRealDetails]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ResourceMonitoringSlbRealDetails);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.ts	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.ts	(working copy)
@@ -0,0 +1,349 @@
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {DeviceService} from '../../../services/device-service';
+import {NotificationService} from '../../../services/notification';
+import {SharedModule} from '../../../shared/shared-module';
+import {take} from 'rxjs/operators';
+import {EChartsOption} from 'echarts';
+
+@Component({
+  selector: 'app-resource-monitoring-slb-real-details',
+  imports: [SharedModule,],
+  templateUrl: './resource-monitoring-slb-real-details.html',
+  styleUrl: './resource-monitoring-slb-real-details.scss'
+})
+export class ResourceMonitoringSlbRealDetails implements OnInit {
+
+  deviceIp: string = '';
+  serviceName: string = '';
+
+  selectedTabIndex: number = 0;
+  private tabNames: string[] = [
+    'Basic Monitoring',
+    'Audit Monitoring',
+  ];
+
+  startTime: string = "now-15m";
+  endTime: string = "now";
+
+  constructor(
+    private _router: Router,
+    private _route: ActivatedRoute,
+    private _device: DeviceService,
+    private _notification: NotificationService,
+  ) {
+  }
+
+  ngOnInit() {
+    this.deviceIp = this._route.snapshot.paramMap.get('deviceIp') || '';
+    this.serviceName = this._route.snapshot.paramMap.get('serviceName') || '';
+
+    this.getBasicMonitoringMetrics()
+  }
+
+  onTabChange($event: any) {
+    if ($event.index === 0) {
+      this.getBasicMonitoringMetrics()
+    } else if ($event.index === 1) {
+
+    }
+  }
+
+  navigateMonitoringDevices() {
+    this._router.navigate(['/monitoring/resources'], {state: {}});
+  }
+
+  getBasicMonitoringMetrics() {
+    this.getAPVRSMonitoringMetrics({
+      agent_host: this.deviceIp,
+      server_id: this.serviceName,
+      from: this.startTime,
+      to: this.endTime,
+      stat_name: 'network_throughput'
+    })
+    this.getAPVRSMonitoringMetrics({
+      agent_host: this.deviceIp,
+      server_id: this.serviceName,
+      from: this.startTime,
+      to: this.endTime,
+      stat_name: 'outstanding_requests'
+    })
+    this.getAPVRSMonitoringMetrics({
+      agent_host: this.deviceIp,
+      server_id: this.serviceName,
+      from: this.startTime,
+      to: this.endTime,
+      stat_name: 'connection_count'
+    })
+    this.getAPVRSMonitoringMetrics({
+      agent_host: this.deviceIp,
+      server_id: this.serviceName,
+      from: this.startTime,
+      to: this.endTime,
+      stat_name: 'hits'
+    })
+    this.getAPVRSMonitoringMetrics({
+      agent_host: this.deviceIp,
+      server_id: this.serviceName,
+      from: this.startTime,
+      to: this.endTime,
+      stat_name: 'connections_per_sec'
+    })
+  }
+
+  throughputChartOptions: EChartsOption = {};
+  outstandingRequestsChartOptions: EChartsOption = {};
+  requestsChartOptions: EChartsOption = {};
+  openConnectionsChartOptions: EChartsOption = {};
+  connectionChartOptions: EChartsOption = {};
+
+
+  getAPVRSMonitoringMetrics(payload: any) {
+    this._device.getAPVRSMonitoringMetrics(payload)
+      .pipe(take(1))
+      .subscribe({
+        next: (result: any) => {
+          if (payload?.stat_name === 'network_throughput') {
+            let network = result?.data;
+            const sent_formatted = network
+              .filter((d: any) => d.sent !== null)
+              .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.sent)]);
+            const received_formatted = network
+              .filter((d: any) => d.received !== null)
+              .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.received)]);
+
+            this.throughputChartOptions = {
+              tooltip: {
+                trigger: 'axis',
+                formatter: (params: any) => {
+                  if (!params.length) return '';
+                  const date = new Date(params[0].value[0]);
+                  const formattedTime = date.toLocaleTimeString('en-US', {
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    second: '2-digit',
+                    hour12: false
+                  });
+                  let tooltipContent = `Time: ${formattedTime}<br/>`;
+                  params.forEach((item: any) => {
+                    tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1].toFixed(2)} bps<br/>`;
+                  });
+                  return tooltipContent;
+                }
+              },
+              legend: {data: ['Sent', 'Received']},
+              xAxis: {type: 'time', name: 'Time'},
+              yAxis: {
+                type: 'value',
+                name: 'bps',
+                axisLabel: {
+                  formatter: (value: number) => {
+                    if (value >= 1000000000) {
+                      return (value / 1000000000).toFixed(1) + 'B';
+                    }
+                    if (value >= 1000000) {
+                      return (value / 1000000).toFixed(1) + 'M';
+                    }
+                    if (value >= 1000) {
+                      return (value / 1000).toFixed(1) + 'K';
+                    }
+                    return value.toString();
+                  }
+                }
+              },
+              series: [
+                {
+                  name: 'Sent',
+                  type: 'line',
+                  data: sent_formatted,
+                  showSymbol: false,
+                  smooth: true
+                },
+                {
+                  name: 'Received',
+                  type: 'line',
+                  data: received_formatted,
+                  showSymbol: false,
+                  smooth: true
+                }
+              ]
+            };
+          } else if (payload?.stat_name === 'outstanding_requests') {
+            let requests = result?.data;
+            const data_formatted = requests.map((d: any) => [
+              new Date(d.ts).getTime(),
+              d.request !== null ? parseInt(d.request) : 0,
+            ]);
+
+            this.outstandingRequestsChartOptions = {
+              tooltip: {
+                trigger: 'axis',
+                formatter: (params: any) => {
+                  if (!params.length) return '';
+                  const date = new Date(params[0].value[0]);
+                  const formattedTime = date.toLocaleTimeString('en-US', {
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    second: '2-digit',
+                    hour12: false
+                  });
+                  let tooltipContent = `Time: ${formattedTime}<br/>`;
+                  params.forEach((item: any) => {
+                    tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1]}<br/>`;
+                  });
+                  return tooltipContent;
+                }
+              },
+              legend: {data: ['Requests']},
+              xAxis: {type: 'time', name: 'Time'},
+              yAxis: {
+                type: 'value',
+                name: '',
+                min: 0,
+              },
+              series: [
+                {
+                  name: 'Requests',
+                  type: 'line',
+                  data: data_formatted,
+                  showSymbol: false,
+                  smooth: true
+                }
+              ]
+            };
+          } else if (payload?.stat_name === 'hits') {
+            let hits = result?.data;
+            const data_formatted = hits.map((d: any) => [
+              new Date(d.ts).getTime(),
+              d.hits !== null ? parseInt(d.hits) : 0,
+            ]);
+
+            this.requestsChartOptions = {
+              tooltip: {
+                trigger: 'axis',
+                formatter: (params: any) => {
+                  if (!params.length) return '';
+                  const date = new Date(params[0].value[0]);
+                  const formattedTime = date.toLocaleTimeString('en-US', {
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    second: '2-digit',
+                    hour12: false
+                  });
+                  let tooltipContent = `Time: ${formattedTime}<br/>`;
+                  params.forEach((item: any) => {
+                    tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1]}<br/>`;
+                  });
+                  return tooltipContent;
+                }
+              },
+              legend: {data: ['Total Hits']},
+              xAxis: {type: 'time', name: 'Time'},
+              yAxis: {
+                type: 'value',
+                name: '',
+                min: 0,
+              },
+              series: [
+                {
+                  name: 'Total Hits',
+                  type: 'line',
+                  data: data_formatted,
+                  showSymbol: false,
+                  smooth: true
+                }
+              ]
+            };
+          } else if (payload?.stat_name === 'connection_count') {
+            let connections = result?.data;
+            const data_formatted = connections.map((d: any) => [
+              new Date(d.ts).getTime(),
+              d.connections_per_sec !== null ? parseInt(d.connections_per_sec) : 0,
+            ]);
+
+            this.openConnectionsChartOptions = {
+              tooltip: {
+                trigger: 'axis',
+                formatter: (params: any) => {
+                  if (!params.length) return '';
+                  const date = new Date(params[0].value[0]);
+                  const formattedTime = date.toLocaleTimeString('en-US', {
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    second: '2-digit',
+                    hour12: false
+                  });
+                  let tooltipContent = `Time: ${formattedTime}<br/>`;
+                  params.forEach((item: any) => {
+                    tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1]}<br/>`;
+                  });
+                  return tooltipContent;
+                }
+              },
+              legend: {data: ['Total Hits']},
+              xAxis: {type: 'time', name: 'Time'},
+              yAxis: {
+                type: 'value',
+                name: '',
+                min: 0,
+              },
+              series: [
+                {
+                  name: 'Total Hits',
+                  type: 'line',
+                  data: data_formatted,
+                  showSymbol: false,
+                  smooth: true
+                }
+              ]
+            };
+          }  else if (payload?.stat_name === 'connections_per_sec') {
+            let connections = result?.data;
+            const data_formatted = connections.map((d: any) => [
+              new Date(d.ts).getTime(),
+              d.connections !== null ? parseInt(d.connections) : 0,
+            ]);
+
+            this.connectionChartOptions = {
+              tooltip: {
+                trigger: 'axis',
+                formatter: (params: any) => {
+                  if (!params.length) return '';
+                  const date = new Date(params[0].value[0]);
+                  const formattedTime = date.toLocaleTimeString('en-US', {
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    second: '2-digit',
+                    hour12: false
+                  });
+                  let tooltipContent = `Time: ${formattedTime}<br/>`;
+                  params.forEach((item: any) => {
+                    tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1]}<br/>`;
+                  });
+                  return tooltipContent;
+                }
+              },
+              legend: {data: ['Total Hits']},
+              xAxis: {type: 'time', name: 'Time'},
+              yAxis: {
+                type: 'value',
+                name: '',
+                min: 0,
+              },
+              series: [
+                {
+                  name: 'Total Hits',
+                  type: 'line',
+                  data: data_formatted,
+                  showSymbol: false,
+                  smooth: true
+                }
+              ]
+            };
+          }
+        },
+        error: (err) => {
+        }
+      })
+  }
+}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.html	(revision 2708)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.html	(working copy)
@@ -10,16 +10,16 @@
           <ng-container matColumnDef="serviceName">
             <th mat-header-cell *matHeaderCellDef>Service Name</th>
             <td mat-cell *matCellDef="let element">
-              <a class="details-page-link" (click)="goToDetails(element)">{{ element?.name }}</a>
+              <a class="details-page-link" (click)="goToDetails(element)">{{ element?.real_server_id }}</a>
             </td>
           </ng-container>
           <ng-container matColumnDef="serviceType">
             <th mat-header-cell *matHeaderCellDef>Service Type</th>
-            <td mat-cell *matCellDef="let element">{{ element?.device_group }}</td>
+            <td mat-cell *matCellDef="let element">{{ protocols[element?.protocol] | uppercase }}</td>
           </ng-container>
           <ng-container matColumnDef="ip">
             <th mat-header-cell *matHeaderCellDef>IP Address & Port</th>
-            <td mat-cell *matCellDef="let element">{{ element }}</td>
+            <td mat-cell *matCellDef="let element">{{ element?.addr }} & {{element?.port}}</td>
           </ng-container>
           <ng-container matColumnDef="healthStatus">
             <th mat-header-cell *matHeaderCellDef>Health Status</th>
@@ -36,20 +36,33 @@
             </td>
           </ng-container>
           <ng-container matColumnDef="deviceName">
-            <th mat-header-cell *matHeaderCellDef>Device Name</th>
-            <td mat-cell *matCellDef="let element"></td>
+            <th mat-header-cell *matHeaderCellDef>Device</th>
+            <td mat-cell *matCellDef="let element">{{element?.name}} ({{element?.device_group}})</td>
           </ng-container>
           <ng-container matColumnDef="deviceGroup">
-            <th mat-header-cell *matHeaderCellDef>Device Group</th>
-            <td mat-cell *matCellDef="let element"></td>
+            <th mat-header-cell *matHeaderCellDef>Outstanding Requests</th>
+            <td mat-cell *matCellDef="let element">{{element?.last_req_cnt}}</td>
           </ng-container>
           <ng-container matColumnDef="connections">
-            <th mat-header-cell *matHeaderCellDef>Connections</th>
-            <td mat-cell *matCellDef="let element"></td>
+            <th mat-header-cell *matHeaderCellDef>Connections / Second</th>
+            <td mat-cell *matCellDef="let element">
+                  {{element?.last_conn_per_sec}}
+            </td>
           </ng-container>
           <ng-container matColumnDef="throughput">
             <th mat-header-cell *matHeaderCellDef>Throughput</th>
-            <td mat-cell *matCellDef="let element"></td>
+            <td mat-cell *matCellDef="let element">
+              <div class="stats-container">
+                <div class="stat-item">
+                  <span>Sent:</span>
+                  <span class="progress-number">{{element?.last_out_bps | bytes}}</span>
+                </div>
+                <div class="stat-item">
+                  <span>Received:</span>
+                  <span class="progress-number">{{element?.last_in_bps | bytes}}</span>
+                </div>
+              </div>
+            </td>
           </ng-container>
           <tr mat-header-row *matHeaderRowDef="dataColumns"></tr>
           <tr mat-row *matRowDef="let row; columns: dataColumns;"></tr>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.ts	(revision 2708)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.ts	(working copy)
@@ -6,10 +6,13 @@
 import {NotificationService} from '../../../services/notification';
 import {take} from 'rxjs/operators';
 import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe';
+import {Router} from '@angular/router';
+import {UtilsService} from '../../../services/utils-service';
+import {BytesPipe} from '../../../pipes/bytes-pipe';
 
 @Component({
   selector: 'app-resource-monitoring-slb-real',
-  imports: [SharedModule, GlobalSerialPipe],
+  imports: [SharedModule, GlobalSerialPipe, BytesPipe],
   templateUrl: './resource-monitoring-slb-real.html',
   styleUrl: './resource-monitoring-slb-real.scss'
 })
@@ -22,15 +25,19 @@
   dataColumns: string[] = ['serial', 'serviceName', 'serviceType', 'ip', 'healthStatus', 'deviceName', 'deviceGroup', 'connections', 'throughput'];
   @ViewChild(MatPaginator) paginator!: MatPaginator;
 
+  protocols: any = {};
   constructor(
+    private _router: Router,
     private _device: DeviceService,
     private _notification: NotificationService,
+    private _utils: UtilsService,
   ) {
+    this.protocols = _utils.getProtocolRepo();
   }
 
   ngOnInit() {
     setTimeout(() => {
-      this.getDeviceGroups();
+      this.getAPVRSMonitoringMetrics();
     })
   }
 
@@ -50,11 +57,22 @@
             if (result[1] && 'result' in result[1]) {
               let groups = result[1].result;
               groups.forEach((group: any) => {
-                this.groups.push(group?.group_name);
+                const deviceMap = new Map();
                 group?.device_list.forEach((device: any) => {
-                  this.devices.push(device);
-                })
+                  if (device?.ip) {
+                    deviceMap.set(device.ip, device);
+                  }
+                });
+                this.realServiceStats = this.realServiceStats.map((rs: any) => {
+                  const matchingDevice = deviceMap.get(rs?.agent_host);
+                  if (matchingDevice) {
+                    return {...matchingDevice, ...rs};
+                  }
+                  return rs;
+                });
+                this.devices = group?.device_list;
               })
+              this.dataSource.data = this.realServiceStats;
             }
           }
         }, error: (error: { message: string; }) => {
@@ -64,6 +82,29 @@
       })
   }
 
-  goToDetails(_service: any) {
+  realServiceStats: any = [];
+
+  getAPVRSMonitoringMetrics() {
+    let payload: any = {
+      query: {
+        agent_host: null
+      }
+    }
+    this._device.getAPVRSMonitoringMetrics(payload)
+      .pipe(take(1))
+      .subscribe({
+        next: (result: any) => {
+          this.realServiceStats = result?.data;
+          this.getDeviceGroups();
+        },
+        error: (error: { message: string; }) => {
+          console.log(error);
+          this._notification.showError(error.message);
+        }
+      })
   }
+
+  goToDetails(_device: any) {
+    this._router.navigate(['/monitoring/resources/slb-real', _device.ip, _device?.real_server_id], {state: {}});
+  }
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.html	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.html	(working copy)
@@ -0,0 +1,157 @@
+<mat-card class="page-card-1" appearance="filled">
+  <mat-card-header>
+    <mat-card-title>
+      <a class="back-to-main-page" (click)="navigateMonitoringDevices()">
+        <fa-icon [icon]="['far', 'circle-left']"></fa-icon>
+        Monitoring Devices - {{ serviceName }}
+      </a>
+    </mat-card-title>
+  </mat-card-header>
+</mat-card>
+<mat-tab-group mat-stretch-tabs="false" animationDuration="0ms" [selectedIndex]="selectedTabIndex"
+               (selectedTabChange)="onTabChange($event)">
+  <mat-tab label="Basic Monitoring">
+    <ng-template matTabContent>
+      <div class="tab-content">
+        <mat-grid-list cols="3" rowHeight="100px">
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text"> Network Throughput (bps)</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <div echarts [options]="throughputChartOptions" class="chart-container"></div>
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">Hits</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <div echarts [options]="totalHitsChartOptions" class="chart-container"></div>
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">Hits Distribution</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <div echarts [options]="hitsDistributionChartOptions" class="chart-container"></div>
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">Open Connections</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <div echarts [options]="connectionsChartOptions" class="chart-container"></div>
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">Connections Per Second</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <div echarts [options]="connectionPerSecondChartOptions" class="chart-container"></div>
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+        </mat-grid-list>
+      </div>
+    </ng-template>
+  </mat-tab>
+  <mat-tab label="Audit Monitoring">
+    <ng-template matTabContent>
+      <div class="tab-content">
+        <mat-grid-list cols="3" rowHeight="100px">
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">HTTP Status Code Ratio</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <!--                  <div echarts [options]="cpuChartOptions" class="chart-container"></div>-->
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">Number Of Virtual Service Visits</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <!--                  <div echarts [options]="cpuChartOptions" class="chart-container"></div>-->
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+          <mat-grid-tile colspan="1" rowspan="3">
+            <mat-card class="dashboard-card" appearance="outlined">
+              <mat-card-content class="card-content-wrapper">
+                <div class="card-header-row">
+                  <mat-card-title class="card-title">
+                    <span class="card-title-text">Client To Device Time</span>
+                    <!--            <fa-icon [icon]="['fas', 'expand']" class="fa-1x a-link" matTooltip="Expand"-->
+                    <!--                     (click)="enlargeSystemLoad()"></fa-icon>-->
+                  </mat-card-title>
+                </div>
+                <div class="chart-flex-container">
+                  <!--                  <div echarts [options]="cpuChartOptions" class="chart-container"></div>-->
+                </div>
+              </mat-card-content>
+            </mat-card>
+          </mat-grid-tile>
+        </mat-grid-list>
+      </div>
+    </ng-template>
+  </mat-tab>
+</mat-tab-group>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.scss	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.scss	(working copy)
@@ -0,0 +1,170 @@
+.page-card-1 {
+  width: 100%;
+  border-radius: 0;
+  background-color: inherit;
+  font-size: 14px !important;
+
+  mat-card-header {
+    color: #1170cf;
+  }
+}
+
+mat-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 10px;
+}
+
+mat-card-title {
+  font-size: medium;
+}
+
+.dashboard-card {
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  background-color: inherit;
+}
+
+.card-content-wrapper {
+  margin-top: 2px;
+  padding: 0 !important;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.card-header-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 8px;
+  padding: 0 8px;
+}
+
+.metric-icon {
+  color: #3f51b5;
+}
+
+.card-title {
+  font-size: 18px;
+  font-weight: 500;
+  color: #555;
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.metric-value {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  line-height: 1;
+}
+
+.metric-label {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  font-size: 0.9rem;
+  color: #777;
+  margin-top: 5px;
+}
+
+.online-count {
+  font-size: 36px;
+  font-weight: 600;
+  color: #333;
+}
+
+.total-count {
+  font-size: 18px;
+  font-weight: 500;
+  color: #888;
+  margin-left: 4px;
+}
+
+.status-details {
+  font-size: 14px;
+  color: #d32f2f;
+  margin: 0;
+  font-weight: 500;
+  text-align: center;
+}
+
+.active,
+.matrics-icon {
+  color: darkgreen;
+}
+
+/* Updated CSS for horizontal chart layout */
+.chart-flex-container {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  flex-grow: 1;
+}
+
+.chart-container {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+}
+
+/* Adjustments for multiple charts */
+.chart-flex-container .chart-container {
+  width: 100%;
+  height: 100%;
+}
+
+mat-grid-list {
+  height: 100%;
+  width: 100%;
+}
+
+/* The original vertical layout for metrics */
+.metrics-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+/* Container to center content vertically and horizontally */
+.card-body-content {
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* New CSS for the metrics block */
+.metrics-horizontal-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  width: 100%;
+}
+
+.metric-item {
+  text-align: center;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.metric-value {
+  font-size: 1rem;
+  font-weight: 500;
+  color: #333;
+}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.spec.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.spec.ts	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.spec.ts	(working copy)
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ResourceMonitoringSlbVirtualDetails } from './resource-monitoring-slb-virtual-details';
+
+describe('ResourceMonitoringSlbVirtualDetails', () => {
+  let component: ResourceMonitoringSlbVirtualDetails;
+  let fixture: ComponentFixture<ResourceMonitoringSlbVirtualDetails>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ResourceMonitoringSlbVirtualDetails]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ResourceMonitoringSlbVirtualDetails);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.ts	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.ts	(working copy)
@@ -0,0 +1,345 @@
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {SharedModule} from '../../../shared/shared-module';
+import {take} from 'rxjs/operators';
+import {DeviceService} from '../../../services/device-service';
+import {NotificationService} from '../../../services/notification';
+import {EChartsOption} from 'echarts';
+
+@Component({
+  selector: 'app-resource-monitoring-slb-virtual-details',
+  imports: [
+    SharedModule
+  ],
+  templateUrl: './resource-monitoring-slb-virtual-details.html',
+  styleUrl: './resource-monitoring-slb-virtual-details.scss'
+})
+export class ResourceMonitoringSlbVirtualDetails implements OnInit {
+
+  deviceIp: string = '';
+  serviceName: string = '';
+
+  selectedTabIndex: number = 0;
+  private tabNames: string[] = [
+    'Basic Monitoring',
+    'Audit Monitoring',
+  ];
+
+  constructor(
+    private _route: ActivatedRoute,
+    private _router: Router,
+    private _device: DeviceService,
+    private _notification: NotificationService,
+  ) {
+  }
+
+  ngOnInit() {
+    this.deviceIp = this._route.snapshot.paramMap.get('deviceIp') || '';
+    this.serviceName = this._route.snapshot.paramMap.get('serviceName') || '';
+
+    this.getBasicMonitoringMetrics()
+  }
+
+  onTabChange($event: any) {
+    if ($event.index === 0) {
+      this.getBasicMonitoringMetrics()
+    } else if ($event.index === 1) {
+
+    }
+  }
+
+  navigateMonitoringDevices() {
+    this._router.navigate(['/monitoring/resources'], {state: {}});
+  }
+
+  startTime: string = "now-15m";
+  endTime: string = "now";
+
+  getBasicMonitoringMetrics() {
+    this.getAPVVSMonitoringMetrics({
+      agent_host: this.deviceIp,
+      server_id: this.serviceName,
+      from: this.startTime,
+      to: this.endTime,
+      stat_name: 'network_throughput'
+    })
+    this.getAPVVSMonitoringMetrics({
+      agent_host: this.deviceIp,
+      server_id: this.serviceName,
+      from: this.startTime,
+      to: this.endTime,
+      stat_name: 'total_hits'
+    })
+    this.getAPVVSMonitoringMetrics({
+      agent_host: this.deviceIp,
+      server_id: this.serviceName,
+      from: this.startTime,
+      to: this.endTime,
+      stat_name: 'hits_distribution'
+    })
+    this.getAPVVSMonitoringMetrics({
+      agent_host: this.deviceIp,
+      server_id: this.serviceName,
+      from: this.startTime,
+      to: this.endTime,
+      stat_name: 'connection_count'
+    })
+    this.getAPVVSMonitoringMetrics({
+      agent_host: this.deviceIp,
+      server_id: this.serviceName,
+      from: this.startTime,
+      to: this.endTime,
+      stat_name: 'connections_per_sec'
+    })
+  }
+
+  throughputChartOptions: EChartsOption = {};
+  totalHitsChartOptions: EChartsOption = {};
+  hitsDistributionChartOptions: EChartsOption = {};
+  connectionsChartOptions: EChartsOption = {};
+  connectionPerSecondChartOptions: EChartsOption = {};
+
+  getAPVVSMonitoringMetrics(payload: any) {
+    this._device.getAPVVSMonitoringMetrics(payload)
+      .pipe(take(1))
+      .subscribe({
+        next: (result: any) => {
+          if (payload?.stat_name === 'network_throughput') {
+            let network = result?.data;
+            const sent_formatted = network
+              .filter((d: any) => d.sent !== null)
+              .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.sent)]);
+            const received_formatted = network
+              .filter((d: any) => d.received !== null)
+              .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.received)]);
+
+            this.throughputChartOptions = {
+              tooltip: {
+                trigger: 'axis',
+                formatter: (params: any) => {
+                  if (!params.length) return '';
+                  const date = new Date(params[0].value[0]);
+                  const formattedTime = date.toLocaleTimeString('en-US', {
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    second: '2-digit',
+                    hour12: false
+                  });
+                  let tooltipContent = `Time: ${formattedTime}<br/>`;
+                  params.forEach((item: any) => {
+                    tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1].toFixed(2)} bps<br/>`;
+                  });
+                  return tooltipContent;
+                }
+              },
+              // grid: {
+              // containLabel: true
+              // },
+              legend: {data: ['Sent', 'Received']},
+              xAxis: {type: 'time', name: 'Time'},
+              yAxis: {
+                type: 'value',
+                name: 'bps',
+                axisLabel: {
+                  formatter: (value: number) => {
+                    if (value >= 1000000000) {
+                      return (value / 1000000000).toFixed(1) + 'B';
+                    }
+                    if (value >= 1000000) {
+                      return (value / 1000000).toFixed(1) + 'M';
+                    }
+                    if (value >= 1000) {
+                      return (value / 1000).toFixed(1) + 'K';
+                    }
+                    return value.toString();
+                  }
+                }
+              },
+              series: [
+                {
+                  name: 'Sent',
+                  type: 'line',
+                  data: sent_formatted,
+                  showSymbol: false,
+                  smooth: true
+                },
+                {
+                  name: 'Received',
+                  type: 'line',
+                  data: received_formatted,
+                  showSymbol: false,
+                  smooth: true
+                }
+              ]
+            };
+          } else if (payload?.stat_name === 'total_hits') {
+            let hits = result?.data;
+            const data_formatted = hits.map((d: any) => [
+              new Date(d.ts).getTime(),
+              d.hit_diff !== null ? parseInt(d.hit_diff) : 0,
+            ]);
+
+            this.totalHitsChartOptions = {
+              tooltip: {
+                trigger: 'axis',
+                formatter: (params: any) => {
+                  if (!params.length) return '';
+                  const date = new Date(params[0].value[0]);
+                  const formattedTime = date.toLocaleTimeString('en-US', {
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    second: '2-digit',
+                    hour12: false
+                  });
+                  let tooltipContent = `Time: ${formattedTime}<br/>`;
+                  params.forEach((item: any) => {
+                    tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1]}<br/>`;
+                  });
+                  return tooltipContent;
+                }
+              },
+              legend: {data: ['Total Hits']},
+              xAxis: {type: 'time', name: 'Time'},
+              yAxis: {
+                type: 'value',
+                name: '',
+                min: 0,
+              },
+              series: [
+                {
+                  name: 'Total Hits',
+                  type: 'line',
+                  data: data_formatted,
+                  showSymbol: false,
+                  smooth: true
+                }
+              ]
+            };
+          } else if (payload?.stat_name === 'hits_distribution') {
+            let hits: any = {};
+            if (result?.data.length > 0) {
+              hits = result?.data[0];
+            }
+            const data_formatted: { value: any; name: string }[] = [];
+            for (const key in hits) {
+              if (hits.hasOwnProperty(key) && hits[key] !== null) {
+                const formattedName = key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+                data_formatted.push({
+                  value: hits[key],
+                  name: formattedName
+                });
+              }
+            }
+
+            this.hitsDistributionChartOptions = {
+              tooltip: {
+                trigger: 'item',
+                formatter: '{a} <br/>{b}: {c}'
+              },
+              series: [
+                {
+                  name: 'Hits',
+                  type: 'pie',
+                  radius: [25, 75],
+                  center: ['50%', '50%'],
+                  roseType: 'area',
+                  itemStyle: {
+                    borderRadius: 8
+                  },
+                  data: data_formatted
+                }
+              ]
+            };
+          } else if (payload?.stat_name === 'connection_count') {
+            let connections = result?.data;
+            const data_formatted = connections.map((d: any) => [
+              new Date(d.ts).getTime(),
+              d.connections !== null ? parseInt(d.connections) : 0,
+            ]);
+            this.connectionsChartOptions = {
+              tooltip: {
+                trigger: 'axis',
+                formatter: (params: any) => {
+                  if (!params.length) return '';
+                  const date = new Date(params[0].value[0]);
+                  const formattedTime = date.toLocaleTimeString('en-US', {
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    second: '2-digit',
+                    hour12: false
+                  });
+                  let tooltipContent = `Time: ${formattedTime}<br/>`;
+                  params.forEach((item: any) => {
+                    tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1]}<br/>`;
+                  });
+                  return tooltipContent;
+                }
+              },
+              legend: {data: ['Connections']},
+              xAxis: {type: 'time', name: 'Time'},
+              yAxis: {
+                type: 'value',
+                name: '',
+                min: 0,
+              },
+              series: [
+                {
+                  name: 'Connections',
+                  type: 'line',
+                  data: data_formatted,
+                  showSymbol: false,
+                  smooth: true
+                }
+              ]
+            };
+          } else if (payload?.stat_name === 'connections_per_sec') {
+            let connections = result?.data;
+            const data_formatted = connections.map((d: any) => [
+              new Date(d.ts).getTime(),
+              d.connection !== null ? parseInt(d.connection) : 0,
+            ]);
+            this.connectionPerSecondChartOptions = {
+              tooltip: {
+                trigger: 'axis',
+                formatter: (params: any) => {
+                  if (!params.length) return '';
+                  const date = new Date(params[0].value[0]);
+                  const formattedTime = date.toLocaleTimeString('en-US', {
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    second: '2-digit',
+                    hour12: false
+                  });
+                  let tooltipContent = `Time: ${formattedTime}<br/>`;
+                  params.forEach((item: any) => {
+                    tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1]}<br/>`;
+                  });
+                  return tooltipContent;
+                }
+              },
+              legend: {data: ['Connections']},
+              xAxis: {type: 'time', name: 'Time'},
+              yAxis: {
+                type: 'value',
+                name: '',
+                min: 0,
+              },
+              series: [
+                {
+                  name: 'Connections',
+                  type: 'line',
+                  data: data_formatted,
+                  showSymbol: false,
+                  smooth: true
+                }
+              ]
+            };
+          }
+        },
+        error: (error: { message: string; }) => {
+          console.log(error);
+          this._notification.showError(error.message);
+        }
+      })
+  }
+}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.html	(revision 2708)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.html	(working copy)
@@ -10,46 +10,57 @@
           <ng-container matColumnDef="serviceName">
             <th mat-header-cell *matHeaderCellDef>Service Name</th>
             <td mat-cell *matCellDef="let element">
-              <a class="details-page-link" (click)="goToDetails(element)">{{ element?.name }}</a>
+              <a class="details-page-link" (click)="goToDetails(element)">{{ element?.serverid }}</a>
             </td>
           </ng-container>
           <ng-container matColumnDef="serviceType">
             <th mat-header-cell *matHeaderCellDef>Service Type</th>
-            <td mat-cell *matCellDef="let element">{{ element?.device_group }}</td>
+            <td mat-cell *matCellDef="let element">{{ protocols[element?.protocol] | uppercase }}</td>
           </ng-container>
           <ng-container matColumnDef="ip">
             <th mat-header-cell *matHeaderCellDef>IP Address & Port</th>
-            <td mat-cell *matCellDef="let element">{{ element }}</td>
+            <td mat-cell *matCellDef="let element">{{ element?.addr }} & {{element?.port}}</td>
           </ng-container>
           <ng-container matColumnDef="healthStatus">
             <th mat-header-cell *matHeaderCellDef>Health Status</th>
             <td mat-cell *matCellDef="let element">
-              @if (element?.snmp_general?.snmp_enable) {
+              @if (element?.health_status) {
                 <span class="success-icon">
-                  <fa-icon [icon]="['far', 'check-circle']" matTooltip="SNMP Enabled"></fa-icon>
+                  <fa-icon [icon]="['far', 'check-circle']" matTooltip="Active"></fa-icon>
                 </span>
               } @else {
                 <span class="blue-icon">
-                  <fa-icon [icon]="['far', 'xmark-circle']" matTooltip="SNMP Disabled"></fa-icon>
+                  <fa-icon [icon]="['far', 'xmark-circle']" matTooltip="Inactive"></fa-icon>
                 </span>
               }
             </td>
           </ng-container>
           <ng-container matColumnDef="deviceName">
             <th mat-header-cell *matHeaderCellDef>Device Name</th>
-            <td mat-cell *matCellDef="let element"></td>
+            <td mat-cell *matCellDef="let element">{{element?.name}}</td>
           </ng-container>
           <ng-container matColumnDef="deviceGroup">
             <th mat-header-cell *matHeaderCellDef>Device Group</th>
-            <td mat-cell *matCellDef="let element"></td>
+            <td mat-cell *matCellDef="let element">{{element?.device_group}}</td>
           </ng-container>
           <ng-container matColumnDef="connections">
             <th mat-header-cell *matHeaderCellDef>Connections</th>
-            <td mat-cell *matCellDef="let element"></td>
+            <td mat-cell *matCellDef="let element">{{element?.hits_diff}}</td>
           </ng-container>
           <ng-container matColumnDef="throughput">
             <th mat-header-cell *matHeaderCellDef>Throughput</th>
-            <td mat-cell *matCellDef="let element"></td>
+            <td mat-cell *matCellDef="let element">
+              <div class="stats-container">
+                <div class="stat-item">
+                  <span>Sent:</span>
+                  <span class="progress-number">{{element?.last_out_bps}}</span>
+                </div>
+                <div class="stat-item">
+                  <span>Received:</span>
+                  <span class="progress-number">{{element?.last_in_bps}}</span>
+                </div>
+              </div>
+            </td>
           </ng-container>
           <ng-container matColumnDef="certificate">
             <th mat-header-cell *matHeaderCellDef>Certificate</th>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.ts	(revision 2708)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.ts	(working copy)
@@ -6,6 +6,8 @@
 import {NotificationService} from '../../../services/notification';
 import {take} from 'rxjs/operators';
 import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe';
+import {Router} from '@angular/router';
+import {UtilsService} from '../../../services/utils-service';
 
 @Component({
   selector: 'app-resource-monitoring-slb-virtual',
@@ -22,21 +24,26 @@
   dataColumns: string[] = ['serial', 'serviceName', 'serviceType', 'ip', 'healthStatus', 'deviceName', 'deviceGroup', 'connections', 'throughput', 'certificate'];
   @ViewChild(MatPaginator) paginator!: MatPaginator;
 
+  protocols: any = {}
   constructor(
+    private _router: Router,
     private _device: DeviceService,
     private _notification: NotificationService,
+    private _utils: UtilsService,
   ) {
+    this.protocols = _utils.getProtocolRepo();
   }
 
   ngOnInit() {
     setTimeout(() => {
-      this.getDeviceGroups();
+      this.getAPVVSMonitoringMetrics();
     })
   }
 
   getDeviceGroups(): void {
     this.devices = [];
     this.groups = [];
+    this.dataSource.data = [];
     // ToDo: Update with actual RoleId
     let roleId = "0"
     let rawPayload = new FormData();
@@ -50,11 +57,22 @@
             if (result[1] && 'result' in result[1]) {
               let groups = result[1].result;
               groups.forEach((group: any) => {
-                this.groups.push(group?.group_name);
+                const deviceMap = new Map();
                 group?.device_list.forEach((device: any) => {
-                  this.devices.push(device);
-                })
+                  if (device?.ip) {
+                    deviceMap.set(device.ip, device);
+                  }
+                });
+                this.virtualServiceStats = this.virtualServiceStats.map((vs: any) => {
+                  const matchingDevice = deviceMap.get(vs?.agent_host);
+                  if (matchingDevice) {
+                    return {...matchingDevice, ...vs};
+                  }
+                  return vs;
+                });
+                this.devices = group?.device_list;
               })
+              this.dataSource.data = this.virtualServiceStats;
             }
           }
         }, error: (error: { message: string; }) => {
@@ -64,7 +82,29 @@
       })
   }
 
-  goToDetails(_service: any) {
+  virtualServiceStats: any = [];
+
+  getAPVVSMonitoringMetrics() {
+    let payload: any = {
+      query: {
+        agent_host: null
+      }
+    }
+    this._device.getAPVVSMonitoringMetrics(payload)
+      .pipe(take(1))
+      .subscribe({
+        next: (result: any) => {
+          this.virtualServiceStats = result?.data;
+          this.getDeviceGroups();
+        },
+        error: (error: { message: string; }) => {
+          console.log(error);
+          this._notification.showError(error.message);
+        }
+      })
   }
 
+  goToDetails(_device: any) {
+    this._router.navigate(['/monitoring/resources/slb-virtual', _device.ip, _device?.serverid], {state: {}});
+  }
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn/resource-monitoring-ssl-vpn.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn/resource-monitoring-ssl-vpn.html	(revision 2708)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn/resource-monitoring-ssl-vpn.html	(working copy)
@@ -10,28 +10,39 @@
           <ng-container matColumnDef="serviceName">
             <th mat-header-cell *matHeaderCellDef>Service Name</th>
             <td mat-cell *matCellDef="let element">
-              <a class="details-page-link" (click)="goToDetails(element)">{{ element?.name }}</a>
+              <a class="details-page-link" (click)="goToDetails(element)">{{ element?.vsite_name }}</a>
             </td>
           </ng-container>
           <ng-container matColumnDef="ipList">
             <th mat-header-cell *matHeaderCellDef>IP List</th>
-            <td mat-cell *matCellDef="let element">{{ element?.device_group }}</td>
+            <td mat-cell *matCellDef="let element">{{ element?.vsite_ip }}</td>
           </ng-container>
           <ng-container matColumnDef="deviceName">
             <th mat-header-cell *matHeaderCellDef>Device Name</th>
-            <td mat-cell *matCellDef="let element"></td>
+            <td mat-cell *matCellDef="let element">{{element?.name}}</td>
           </ng-container>
           <ng-container matColumnDef="deviceGroup">
             <th mat-header-cell *matHeaderCellDef>Device Group</th>
-            <td mat-cell *matCellDef="let element"></td>
+            <td mat-cell *matCellDef="let element">{{element?.device_group}}</td>
           </ng-container>
           <ng-container matColumnDef="sessions">
             <th mat-header-cell *matHeaderCellDef>Sessions</th>
-            <td mat-cell *matCellDef="let element"></td>
+            <td mat-cell *matCellDef="let element">{{element?.active_sessions}}</td>
           </ng-container>
           <ng-container matColumnDef="certificate">
             <th mat-header-cell *matHeaderCellDef>Certificate</th>
-            <td mat-cell *matCellDef="let element"></td>
+            <td mat-cell *matCellDef="let element">
+              <div class="stats-container">
+                <div class="stat-item">
+                  <span>Status:</span>
+                  <span class="progress-number">{{element?.last_out_bps}}</span>
+                </div>
+                <div class="stat-item">
+                  <span>Expiry:</span>
+                  <span class="progress-number">{{element?.last_in_bps}}</span>
+                </div>
+              </div>
+            </td>
           </ng-container>
           <tr mat-header-row *matHeaderRowDef="dataColumns"></tr>
           <tr mat-row *matRowDef="let row; columns: dataColumns;"></tr>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn/resource-monitoring-ssl-vpn.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn/resource-monitoring-ssl-vpn.ts	(revision 2708)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn/resource-monitoring-ssl-vpn.ts	(working copy)
@@ -6,6 +6,7 @@
 import {NotificationService} from '../../../services/notification';
 import {take} from 'rxjs/operators';
 import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-resource-monitoring-ssl-vpn',
@@ -25,12 +26,13 @@
   constructor(
     private _device: DeviceService,
     private _notification: NotificationService,
+    private _router: Router,
   ) {
   }
 
   ngOnInit() {
     setTimeout(() => {
-      this.getDeviceGroups();
+      this.getSSLVPNMonitoringMetrics();
     })
   }
 
@@ -50,11 +52,22 @@
             if (result[1] && 'result' in result[1]) {
               let groups = result[1].result;
               groups.forEach((group: any) => {
-                this.groups.push(group?.group_name);
+                const deviceMap = new Map();
                 group?.device_list.forEach((device: any) => {
-                  this.devices.push(device);
-                })
+                  if (device?.ip) {
+                    deviceMap.set(device.ip, device);
+                  }
+                });
+                this.sslVPNStats = this.sslVPNStats.map((rs: any) => {
+                  const matchingDevice = deviceMap.get(rs?.agent_host);
+                  if (matchingDevice) {
+                    return {...matchingDevice, ...rs};
+                  }
+                  return rs;
+                });
+                this.devices = group?.device_list;
               })
+              this.dataSource.data = this.sslVPNStats;
             }
           }
         }, error: (error: { message: string; }) => {
@@ -64,6 +77,29 @@
       })
   }
 
-  goToDetails(_service: any) {
+  sslVPNStats: any = [];
+
+  getSSLVPNMonitoringMetrics() {
+    let payload: any = {
+      query: {
+        agent_host: null
+      }
+    }
+    this._device.getSSLVPNMonitoringMetrics(payload)
+      .pipe(take(1))
+      .subscribe({
+        next: (result: any) => {
+          this.sslVPNStats = result?.data;
+          this.getDeviceGroups();
+        },
+        error: (error: { message: string; }) => {
+          console.log(error);
+          this._notification.showError(error.message);
+        }
+      })
   }
+
+  goToDetails(_device: any) {
+    this._router.navigate(['/monitoring/resources/ssl-vpn', _device.ip, _device?.vsite_name], {state: {}});
+  }
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/api_urls.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/api_urls.ts	(revision 2708)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/api_urls.ts	(working copy)
@@ -163,6 +163,10 @@
   GET_TOP_APV_VIRTUAL_METRICS_URL: `${PREFIX}/top-apv-virtual-metrics`,
   GET_TOP_APV_REAL_METRICS_URL: `${PREFIX}/top-apv-real-metrics`,
   GET_TOP_APV_LLB_METRICS_URL: `${PREFIX}/top-apv-llb-metrics`,
+  GET_DEVICE_MONITORING_METRICS_URL: `${PREFIX}/device_metrics`,
+  GET_APV_VS_MONITORING_METRICS_URL: `${PREFIX}/apv/slb/virtual_stats`,
+  GET_APV_RS_MONITORING_METRICS_URL: `${PREFIX}/apv/slb/real_stats`,
+  GET_SSL_VPN_MONITORING_METRICS_URL: `${PREFIX}/ssl_vpn_stats`,
   // AVX
   GET_AVX_DEVICES_URL: `${PREFIX}/api/cm/virtualization/Host/_get_list_data`,
   ADD_AVX_DEVICE_URL: `${PREFIX}/api/cm/virtualization/Host/_add`,
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/device-service.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/device-service.ts	(revision 2708)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/device-service.ts	(working copy)
@@ -488,8 +488,44 @@
     return this.http.post(URLS.UPDATE_SLB_REAL_SERVICE_URL, payload, {
         csrf: true,
         isFormData: true,
+        csrfInFormData: true
+      }
+    );
+  }
+
+  getDeviceMonitoringMetrics(payload: any) {
+    return this.http.post(URLS.GET_DEVICE_MONITORING_METRICS_URL, payload, {
+        csrf: true,
+        isFormData: false,
+        csrfInFormData: true
+      }
+    );
+  }
+
+  getAPVVSMonitoringMetrics(payload: any) {
+    return this.http.post(URLS.GET_APV_VS_MONITORING_METRICS_URL, payload, {
+        csrf: true,
+        isFormData: false,
+        csrfInFormData: true
+      }
+    );
+  }
+
+  getAPVRSMonitoringMetrics(payload: any) {
+    return this.http.post(URLS.GET_APV_RS_MONITORING_METRICS_URL, payload, {
+        csrf: true,
+        isFormData: false,
         csrfInFormData: true
       }
     );
   }
+
+  getSSLVPNMonitoringMetrics(payload: any) {
+    return this.http.post(URLS.GET_SSL_VPN_MONITORING_METRICS_URL, payload, {
+        csrf: true,
+        isFormData: false,
+        csrfInFormData: true
+      }
+    );
+  }
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/utils-service.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/utils-service.ts	(revision 2708)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/utils-service.ts	(working copy)
@@ -65,4 +65,27 @@
 
     return formattedKey;
   }
+
+  getProtocolRepo() {
+    return {
+      "0": "tcp",
+      "1": "udp",
+      "2": "ftp",
+      "3": "ftps",
+      "4": "http",
+      "5": "https",
+      "6": "tcps",
+      "7": "dns",
+      "8": "l2ip",
+      "9": "l2mac",
+      "10": "ip",
+      "11": "siptcp",
+      "12": "sipudp",
+      "13": "radacct",
+      "14": "radauth",
+      "15": "rtsp",
+      "16": "vlink",
+      "17": "rdp",
+    }
+  }
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/db/ssl_vpn_stat_queries.py
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/db/ssl_vpn_stat_queries.py	(revision 2708)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/db/ssl_vpn_stat_queries.py	(working copy)
@@ -13,6 +13,9 @@
         if agent_host:
             query = f"""
                 SELECT DISTINCT ON (id, agent_host, ip)
+                   agent_host,
+                   id as vsite_name,
+                   ip as vsite_ip,
                    CAST(active_sessions AS BIGINT)
                 FROM ag_virtual_site_stats
                 WHERE agent_host = '{agent_host}'
@@ -22,6 +25,9 @@
         else:
             query = f"""
                 SELECT DISTINCT ON (id, agent_host, ip)
+                   agent_host,
+                   id as vsite_name,
+                   ip as vsite_ip,
                     CAST(active_sessions AS BIGINT)
                 FROM ag_virtual_site_stats
                 WHERE time > now() - interval '20 seconds'
@@ -42,7 +48,7 @@
             SELECT
                 time_bucket_gapfill('{interval}', time, {time_from}, {time_to}) AS ts,
                 agent_host,
-                id,
+                id as vsite_name,
                 CAST(COALESCE(MAX(success_login) - MIN(success_login), 0) AS BIGINT) AS success,
                 CAST(COALESCE(MAX(failure_login) - MIN(failure_login), 0) AS BIGINT) AS failure,
                 CAST(COALESCE(MAX(error_login) - MIN(error_login), 0) AS BIGINT) AS error,
@@ -72,17 +78,17 @@
                 SELECT
                     time_bucket_gapfill('{interval}', time, {time_from}, {time_to}) AS ts,
                     agent_host,
-                    id,
+                    id as vsite_name,
                     ROUND(COALESCE(
                         (MAX("client_bytes_out") - MIN("client_bytes_out")) * 8 
                         / GREATEST(EXTRACT(EPOCH FROM (MAX(time) - MIN(time))), 1)
                         )::numeric, 2
-                    ) AS nw_sent_bps,
+                    ) AS sent,
                     ROUND(COALESCE(
                         (MAX("client_bytes_in") - MIN("client_bytes_in")) * 8
                         / GREATEST(EXTRACT(EPOCH FROM (MAX(time) - MIN(time))), 1)
                         )::numeric, 2
-                    ) AS nw_recv_bps
+                    ) AS received
                 FROM ag_virtual_site_stats
                 WHERE time >= {time_from}
                   AND time <= {time_to}
@@ -135,12 +141,12 @@
                     (MAX(bytes_out) - MIN(bytes_out)) * 8 /
                     GREATEST(1, EXTRACT(EPOCH FROM MAX(time) - MIN(time)))
                     )
-                ::numeric, 2) AS vpn_sent_bps,
+                ::numeric, 2) AS sent,
                 ROUND((
                     (MAX(bytes_in) - MIN(bytes_in)) * 8 /
                     GREATEST(1, EXTRACT(EPOCH FROM MAX(time) - MIN(time)))
                     )
-                ::numeric, 2) AS vpn_recv_bps
+                ::numeric, 2) AS received
             FROM ag_vpn_stats
             WHERE time >= {time_from}
               AND time <= {time_to}
@@ -169,12 +175,12 @@
                     (MAX(client_app_bytes_out) - MIN(client_app_bytes_out)) * 8 /
                     GREATEST(1, EXTRACT(EPOCH FROM MAX(time) - MIN(time)))
                     )
-                ::numeric, 2) AS client_app_sent_bps,
+                ::numeric, 2) AS sent,
                 ROUND((
                     (MAX(client_app_bytes_in) - MIN(client_app_bytes_in)) * 8 /
                     GREATEST(1, EXTRACT(EPOCH FROM MAX(time) - MIN(time)))
                     )
-                ::numeric, 2) AS client_app_recv_bps
+                ::numeric, 2) AS received
             FROM ag_vpn_stats
             WHERE time >= {time_from}
               AND time <= {time_to}
@@ -204,12 +210,12 @@
                        (MAX(client_bytes_out) - MIN(client_bytes_out)) * 8 /
                        GREATEST(1, EXTRACT(EPOCH FROM MAX(time) - MIN(time)))
                        )
-                   ::numeric, 2) AS sent_bps,
+                   ::numeric, 2) AS sent,
                    ROUND((
                        (MAX(client_bytes_in) - MIN(client_bytes_in)) * 8 /
                        GREATEST(1, EXTRACT(EPOCH FROM MAX(time) - MIN(time)))
                        )
-                   ::numeric, 2) AS recv_bps
+                   ::numeric, 2) AS received
                FROM ag_web_stats
                WHERE time >= {time_from}
                  AND time <= {time_to}
@@ -238,12 +244,12 @@
                     ROUND((
                         (MAX(client_bytes_out) - MIN(client_bytes_out)) * 8 /
                         GREATEST(1, EXTRACT(EPOCH FROM MAX(time) - MIN(time)))
-                    )::numeric, 2) AS client_sent_bps,
+                    )::numeric, 2) AS sent,
                     ROUND((
                         (MAX(client_bytes_in) - MIN(client_bytes_in)) * 8 /
                         GREATEST(1, EXTRACT(EPOCH FROM MAX(time) - MIN(time)))
                         )
-                    ::numeric, 2) AS client_recv_bps
+                    ::numeric, 2) AS received
                 FROM ag_web_stats
                 WHERE time >= {time_from}
                   AND time <= {time_to}
@@ -272,12 +278,12 @@
                     (MAX(server_bytes_out) - MIN(server_bytes_out)) * 8 /
                     GREATEST(1, EXTRACT(EPOCH FROM MAX(time) - MIN(time)))
                     )
-                ::numeric, 2) AS server_sent_bps,
+                ::numeric, 2) AS sent,
                 ROUND((
                     (MAX(server_bytes_in) - MIN(server_bytes_in)) * 8 /
                     GREATEST(1, EXTRACT(EPOCH FROM MAX(time) - MIN(time)))
                     )
-                ::numeric, 2) AS server_recv_bps
+                ::numeric, 2) AS received
             FROM ag_web_stats
             WHERE time >= {time_from}
               AND time <= {time_to}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/repositories/apv_services_metrics.py
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/repositories/apv_services_metrics.py	(revision 2708)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/repositories/apv_services_metrics.py	(working copy)
@@ -266,7 +266,7 @@
             SELECT 
                 link_name,
                 agent_host,
-                MAX(link_hits) - MIN(link_hits) AS hits
+                MAX(CAST(link_hits AS BIGINT)) - MIN(CAST(link_hits AS BIGINT)) AS hits
             FROM apv_llb_stats
             WHERE time >= NOW() - INTERVAL '%(interval)s seconds' {host_filter}
             GROUP BY link_name, agent_host
@@ -277,8 +277,8 @@
                 agent_host,
                 link_name,
                 hits AS value,
-                NULL::bigint AS received,
-                NULL::bigint AS sent
+                NULL::BIGINT AS received,
+                NULL::BIGINT AS sent
             FROM HitsDeltas
             ORDER BY hits DESC
             LIMIT %(limit)s
@@ -287,7 +287,7 @@
             SELECT DISTINCT ON (link_name, agent_host)
                 link_name,
                 agent_host,
-                link_conn AS conn
+                CAST(link_conn AS BIGINT) AS conn
             FROM apv_llb_stats
             WHERE time >= NOW() - INTERVAL '%(interval)s seconds' {host_filter}
             ORDER BY link_name, agent_host, time DESC
@@ -298,8 +298,8 @@
                 agent_host,
                 link_name,
                 conn AS value,
-                NULL::bigint AS received,
-                NULL::bigint AS sent
+                NULL::BIGINT AS received,
+                NULL::BIGINT AS sent
             FROM ConnLatest
             ORDER BY conn DESC
             LIMIT %(limit)s
@@ -308,16 +308,17 @@
             SELECT DISTINCT ON (link_name, agent_host)
                 link_name,
                 agent_host,
-                (link_bandwid_in * 8) AS received,
-                (link_bandwid_out * 8) AS sent,
-                ((link_bandwid_in * 8) + (link_bandwid_out * 8)) AS total
+                CAST(REGEXP_REPLACE(link_bandwid_in, '\\D', '', 'g') AS BIGINT) * 8 AS received,
+                CAST(REGEXP_REPLACE(link_bandwid_out, '\\D', '', 'g') AS BIGINT) * 8 AS sent,
+                (CAST(REGEXP_REPLACE(link_bandwid_in, '\\D', '', 'g') AS BIGINT) * 8 +
+                 CAST(REGEXP_REPLACE(link_bandwid_out, '\\D', '', 'g') AS BIGINT) * 8) AS total
             FROM apv_llb_stats
             WHERE time >= NOW() - INTERVAL '%(interval)s seconds' {host_filter}
             ORDER BY link_name, agent_host, time DESC
         ),
         NetTop AS (
             SELECT
-                'throughput' AS metric,
+                'network' AS metric,
                 agent_host,
                 link_name,
                 total AS value,
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/services/ssl_vpn_stat_service.py
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/services/ssl_vpn_stat_service.py	(revision 2708)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/services/ssl_vpn_stat_service.py	(working copy)
@@ -6,7 +6,7 @@
     json_response = {}
     if stat_name == 'login_status':
         stats = SSLVpnStatQueries.get_login_stats(agent_host, vsite_id, interval, time_from, time_to)
-    elif stat_name == 'net_thoughput':
+    elif stat_name == 'net_throughput':
         stats = SSLVpnStatQueries.get_net_throughput_stats(agent_host, vsite_id, interval, time_from, time_to)
     elif stat_name == 'l3_tunnel_status':
         stats = SSLVpnStatQueries.get_l3_tunnel_stats(agent_host, vsite_id, time_from, time_to)