Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.html	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.html	(working copy)
@@ -0,0 +1,101 @@
+<div class="time-filter-container">
+  <div class="header">
+    <span>Please select a time range</span>
+    <button
+      mat-button
+      color="basic"
+      (click)="close()">
+      Close
+    </button>
+  </div>
+
+  <div class="content">
+    <div class="custom-range-section">
+      <h3>Custom range</h3>
+      <div class="date-inputs">
+        <mat-form-field appearance="outline" class="time-input">
+          <mat-label>From</mat-label>
+          <input
+            matInput
+            [(ngModel)]="customFrom"
+            name="customFrom"
+            placeholder="Date or relative time (e.g., now-15m)"
+            [ngxMatDatetimePicker]="startDatePicker"
+            autocomplete="off">
+
+          <ngx-mat-datepicker-toggle matSuffix [for]="startDatePicker"></ngx-mat-datepicker-toggle>
+
+          <ngx-mat-datetime-picker
+            #startDatePicker
+            [showSpinners]="true"
+            [showSeconds]="true"
+            [touchUi]="false"
+            [stepHour]="1"
+            [stepMinute]="1"
+            [stepSecond]="1"
+            [disableMinute]="false"
+          >
+            <mat-icon
+              ngxMatDatetimePickerToday
+              (click)="startDatePicker.close()"
+            >today
+            </mat-icon>
+          </ngx-mat-datetime-picker>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" class="time-input">
+          <mat-label>To</mat-label>
+          <input
+            matInput
+            [(ngModel)]="customTo"
+            name="customTo"
+            placeholder="Date or 'now'"
+            [ngxMatDatetimePicker]="endDatePicker"
+            autocomplete="off">
+
+          <ngx-mat-datepicker-toggle matSuffix [for]="endDatePicker"></ngx-mat-datepicker-toggle>
+
+          <ngx-mat-datetime-picker
+            #endDatePicker
+            [showSpinners]="true"
+            [showSeconds]="true"
+            [touchUi]="false"
+            [stepHour]="1"
+            [stepMinute]="1"
+            [stepSecond]="1"
+            [disableMinute]="false"
+          >
+            <mat-icon
+              ngxMatDatetimePickerToday
+              (click)="endDatePicker.close()"
+            >today
+            </mat-icon>
+          </ngx-mat-datetime-picker>
+        </mat-form-field>
+
+      </div>
+
+      <mat-form-field appearance="outline" class="interval-input">
+        <mat-label>Refreshing every (Seconds)</mat-label>
+        <input matInput type="number" [(ngModel)]="refreshInterval" name="refreshInterval" placeholder="e.g., 10s, 1m">
+      </mat-form-field>
+
+      <button mat-flat-button color="primary" (click)="applyCustomRange()" class="apply-button">Apply</button>
+    </div>
+    <p>Current Range: {{customFrom}} - {{customTo}} (Refresh every {{refreshInterval}} seconds)</p>
+    <mat-divider></mat-divider>
+
+    <div class="quick-ranges-section">
+      <h3>Quick ranges</h3>
+      <div class="quick-ranges-grid">
+        @for (range of quickRanges; track range.label) {
+          <a (click)="selectQuickRange(range)" class="quick-range-link">
+            {{ range.label }}
+          </a>
+        } @empty {
+          <p>No quick ranges defined.</p>
+        }
+      </div>
+    </div>
+  </div>
+</div>
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.scss	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.scss	(working copy)
@@ -0,0 +1,87 @@
+.time-filter-container {
+  background-color: var(--mat-dialog-container-background-color, #fff); // Match dialog bg
+  color: var(--mat-dialog-content-color, rgba(0, 0, 0, 0.87));
+  border-radius: var(--mat-dialog-container-border-radius, 4px);
+  box-shadow: var(--mat-dialog-container-box-shadow, 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12));
+  padding: 16px;
+  //width: 600px; // Adjust as needed
+  max-width: 90vw; // Ensure responsiveness
+  display: flex;
+  flex-direction: column;
+  position: relative; // For the close button positioning
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 16px;
+    border-bottom: 1px solid var(--mat-divider-color, rgba(0, 0, 0, 0.12));
+    margin-bottom: 16px;
+
+    span {
+      font-size: 1.25rem; // Equivalent to h2/h3
+      font-weight: 500;
+    }
+
+    .close-button {
+      margin-left: auto; // Pushes it to the right
+    }
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+
+    h3 {
+      font-size: 1rem;
+      font-weight: 500;
+      margin-top: 0;
+      margin-bottom: 10px;
+    }
+
+    .custom-range-section {
+      margin-bottom: 20px;
+
+      .date-inputs {
+        display: flex;
+        gap: 16px; // Space between "From" and "To"
+        margin-bottom: 16px;
+
+        .time-input {
+          flex: 1; // Makes them take equal width
+        }
+      }
+
+      .interval-input {
+        width: 150px; // Adjust width as needed
+        margin-right: 16px;
+      }
+
+      .apply-button {
+        float: right; // Aligns to the right
+      }
+    }
+
+    mat-divider {
+      margin: 20px 0;
+    }
+
+    .quick-ranges-section {
+      .quick-ranges-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); // Responsive grid
+        gap: 8px 16px; // Vertical and horizontal gap
+
+        .quick-range-link {
+          color: var(--mat-text-link-color, #1976d2); // Standard link color
+          cursor: pointer;
+          text-decoration: none;
+          padding: 4px 0;
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+  }
+}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.spec.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.spec.ts	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.spec.ts	(working copy)
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TimeFilter } from './time-filter';
+
+describe('TimeFilter', () => {
+  let component: TimeFilter;
+  let fixture: ComponentFixture<TimeFilter>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TimeFilter]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TimeFilter);
+    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/common/time-filter/time-filter.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.ts	(nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.ts	(working copy)
@@ -0,0 +1,86 @@
+import {Component, EventEmitter, inject, Input, OnInit, Output} from '@angular/core';
+import {SharedModule} from '../../../shared/shared-module';
+
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {NgxMatDatepickerToggle} from '@ngxmc/datetime-picker';
+
+export interface TimeRange {
+  from: string | Date;
+  to: string | Date;
+  interval?: number;
+}
+
+interface QuickRange {
+  label: string;
+  from: string;
+  to: string;
+}
+
+@Component({
+  selector: 'app-time-filter',
+  standalone: true,
+  imports: [SharedModule, NgxMatDatepickerToggle],
+  templateUrl: './time-filter.html',
+  styleUrl: './time-filter.scss'
+})
+export class TimeFilter implements OnInit {
+
+  @Input() initialRange: TimeRange | undefined;
+  @Output() applyRange = new EventEmitter<TimeRange>();
+  @Output() closeDialog = new EventEmitter<void>();
+
+  customFrom: string | Date = 'now-15m';
+  customTo: string | Date = 'now';
+  refreshInterval: number = 10;
+
+  quickRanges = [
+    {label: 'Last 10 minutes', from: 'now-10m', to: 'now'},
+    {label: 'Last 15 minutes', from: 'now-15m', to: 'now'},
+    {label: 'Last 30 minutes', from: 'now-30m', to: 'now'},
+    {label: 'Last 1 hour', from: 'now-1h', to: 'now'},
+    {label: 'Last 3 hours', from: 'now-3h', to: 'now'},
+    {label: 'Last 6 hours', from: 'now-6h', to: 'now'},
+    {label: 'Last 12 hours', from: 'now-12h', to: 'now'},
+    {label: 'Last 24 hours', from: 'now-24h', to: 'now'},
+    {label: 'Last 2 days', from: 'now-2d', to: 'now'},
+    {label: 'Last 7 days', from: 'now-7d', to: 'now'},
+    {label: 'Last 30 days', from: 'now-30d', to: 'now'},
+    {label: 'Last 90 days', from: 'now-90d', to: 'now'},
+    {label: 'Last 6 months', from: 'now-6M', to: 'now'},
+    {label: 'Last 1 year', from: 'now-1y', to: 'now'},
+    {label: 'Last 2 years', from: 'now-2y', to: 'now'},
+    {label: 'Last 5 years', from: 'now-5y', to: 'now'},
+  ];
+  readonly data = inject(MAT_DIALOG_DATA);
+
+  constructor(
+    private _dialogRef: MatDialogRef<TimeFilter>,
+  ) {
+  }
+
+  ngOnInit() {
+    this.customFrom = this.data.initialFrom;
+    this.customTo = this.data.initialTo;
+    this.refreshInterval = this.data.initialInterval || 10;
+  }
+
+  applyCustomRange(): void {
+    const timeRange: TimeRange = {
+      from: this.customFrom,
+      to: this.customTo,
+      interval: this.refreshInterval
+    };
+    this.applyRange.emit(timeRange);
+    this.close();
+  }
+
+  selectQuickRange(range: QuickRange): void {
+    this.customFrom = range.from;
+    this.customTo = range.to;
+    this.applyCustomRange();
+  }
+
+  close(): void {
+    this._dialogRef.close(false);
+  }
+}
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	(revision 2726)
+++ /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)
@@ -12,6 +12,10 @@
                (selectedTabChange)="onTabChange($event)">
   <mat-tab label="Basic Monitoring">
     <ng-template matTabContent>
+      <div class="button-container time-filter">
+        <a class="a-link a-link-color" (click)="openTimeFilterDialog()">Current Range: {{ currentFrom }}
+          to {{ currentTo }} (Refresh: {{ currentInterval }})</a>
+      </div>
       <div class="tab-content">
         <mat-grid-list cols="3" rowHeight="100px">
           <mat-grid-tile colspan="1" rowspan="3">
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	(revision 2726)
+++ /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)
@@ -1,9 +1,14 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, DestroyRef, inject, 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 {startWith, take, tap} from 'rxjs/operators';
 import {EChartsOption} from 'echarts';
+import {ChartOptions} from '../../../services/chart-options';
+import {MatDialog} from '@angular/material/dialog';
+import {TimeFilter, TimeRange} from '../../common/time-filter/time-filter';
+import {interval} from 'rxjs';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'app-resource-monitoring-device-details',
@@ -33,17 +38,34 @@
   requestsChartOptions: EChartsOption = {};
   sslCoreChartOptions: EChartsOption = {};
 
+  currentFrom: string | Date = 'now-15m';
+  currentTo: string | Date = 'now';
+  currentInterval: number = 10;
+  private destroyRef = inject(DestroyRef);
+
   constructor(
     private _route: ActivatedRoute,
     private _router: Router,
     private _device: DeviceService,
+    private _chartOptions: ChartOptions,
+    private _dialog: MatDialog,
   ) {
   }
 
   ngOnInit() {
     this.deviceName = this._route.snapshot.paramMap.get('deviceName');
     this.deviceIp = this._route.snapshot.paramMap.get('deviceIp');
-    this.getBasicMonitoringMetrics()
+    // setTimeout(()=>{
+    //   interval(this.currentInterval * 1000)
+    //     .pipe(
+    //       startWith(0),
+    //       tap(() => this.getBasicMonitoringMetrics()),
+    //       takeUntilDestroyed(this.destroyRef)
+    //     )
+    //     .subscribe();
+    // })
+    // ToDo: Enable auto-refresh
+    this.getBasicMonitoringMetrics();
   }
 
   navigateMonitoringDevices() {
@@ -63,64 +85,64 @@
       "metric_name": "cpu_usage",
       "agent_host": this.deviceIp,
       "interval": "10s",
-      "from": "now-15m",
-      "to": "now"
+      "from": this.currentFrom,
+      "to": this.currentTo,
     });
 
     this.getDeviceMonitoringMetrics({
       "metric_name": "memory_usage",
       "agent_host": this.deviceIp,
       "interval": "10s",
-      "from": "now-15m",
-      "to": "now"
+      "from": this.currentFrom,
+      "to": this.currentTo,
     })
 
     this.getDeviceMonitoringMetrics({
       "metric_name": "disk_usage",
       "agent_host": this.deviceIp,
       "interval": "10s",
-      "from": "now-15m",
-      "to": "now"
+      "from": this.currentFrom,
+      "to": this.currentTo,
     })
 
     this.getDeviceMonitoringMetrics({
       "metric_name": "network_throughput",
       "agent_host": this.deviceIp,
       "interval": "10s",
-      "from": "now-15m",
-      "to": "now"
+      "from": this.currentFrom,
+      "to": this.currentTo,
     })
 
     this.getDeviceMonitoringMetrics({
       "metric_name": "ssl_connections",
       "agent_host": this.deviceIp,
       "interval": "10s",
-      "from": "now-15m",
-      "to": "now"
+      "from": this.currentFrom,
+      "to": this.currentTo,
     })
 
     this.getDeviceMonitoringMetrics({
       "metric_name": "connections",
       "agent_host": this.deviceIp,
       "interval": "10s",
-      "from": "now-15m",
-      "to": "now"
+      "from": this.currentFrom,
+      "to": this.currentTo,
     })
 
     this.getDeviceMonitoringMetrics({
       "metric_name": "requests",
       "agent_host": this.deviceIp,
       "interval": "10s",
-      "from": "now-15m",
-      "to": "now"
+      "from": this.currentFrom,
+      "to": this.currentTo,
     })
 
     this.getDeviceMonitoringMetrics({
       "metric_name": "ssl_core_utilization",
       "agent_host": this.deviceIp,
       "interval": "10s",
-      "from": "now-15m",
-      "to": "now"
+      "from": this.currentFrom,
+      "to": this.currentTo,
     })
   }
 
@@ -128,365 +150,36 @@
     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
-              }
-            ]
-          };
+          const cpu_data_formatted: any = result?.data.map((d: any) => [d.ts, d.cpu]);
+          this.cpuChartOptions = this._chartOptions.plotSingleLineChartOptions({label: 'CPU', unit: 'Percentage'}, cpu_data_formatted);
         } 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
-              }
-            ]
-          };
+          const memory_data_formatted: any = result?.data.map((d: any) => [d.ts, d.memory_usage]);
+          this.memoryChartOptions = this._chartOptions.plotSingleLineChartOptions({label: 'Memory', unit: 'Percentage'}, memory_data_formatted);
         } 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
-              }
-            ]
-          };
+          const disk_data_formatted: any = result?.data.map((d: any) => [d.ts, d.disk_usage]);
+          this.diskUsageChartOptions = this._chartOptions.plotSingleLineChartOptions({label: 'Disk', unit: 'Percentage'}, disk_data_formatted);
         } 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
-              }
-            ]
-          };
+          const factor: any = 1024 * 1024;
+          const sent_data_formatted: any = result?.data.map((d: any) => [d.ts, d.sent / factor]);
+          const received_data_formatted: any = result?.data.map((d: any) => [d.ts, d.received / factor]);
+          this.throughputChartOptions = this._chartOptions.historicalThroughputChartOptions(received_data_formatted, sent_data_formatted);
         } 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
-              }
-            ]
-          };
+          const data_formatted: any = result?.data.map((d: any) => [d.ts, d.ssl_connection]);
+          this.sslConnectionsChartOptions = this._chartOptions.plotSingleLineChartOptions({label: 'SSL Connections', unit: '#'}, data_formatted);
         } 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
-              }
-            ]
-          };
+          const data_formatted: any = result?.data.map((d: any) => [d.ts, d.connection]);
+          this.connectionsChartOptions = this._chartOptions.plotSingleLineChartOptions({label: 'Connections', unit: '#'}, data_formatted);
         } 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
-              }
-            ]
-          };
+          const data_formatted: any = result?.data.map((d: any) => [d.ts, d.requests]);
+          this.requestsChartOptions = this._chartOptions.plotSingleLineChartOptions({label: 'Requests', unit: '#'}, data_formatted);
         } else if (payload?.metric_name === 'ssl_core_utilization') {
-          let network = result?.data;
-          const ae_core_formatted = network?.data
+          const ae_core_formatted = result?.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
+          const se_core_formatted = result?.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
-              }
-            ]
-          };
+          this.sslCoreChartOptions = this._chartOptions.plotDoubleLineChartOptions({label: ['AE Core', 'SE Core'], unit: 'Percentage'}, ae_core_formatted, se_core_formatted)
        }
       },
       error: (error: any) => {
@@ -494,4 +187,26 @@
       }
     });
   }
+
+  openTimeFilterDialog(): void {
+    const dialogRef = this._dialog.open(TimeFilter, {
+      width: '600px',
+      data: {
+        initialFrom: this.currentFrom,
+        initialTo: this.currentTo,
+        initialInterval: this.currentInterval
+      }
+    });
+
+    dialogRef.componentInstance.applyRange.subscribe((result: TimeRange) => {
+      if (result) {
+        this.currentFrom = result.from;
+        this.currentTo = result.to;
+        this.currentInterval = result.interval || 10;
+        this.getBasicMonitoringMetrics()
+      }
+    });
+
+    dialogRef.afterClosed().subscribe(() => {});
+  }
 }
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 2726)
+++ /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)
@@ -30,11 +30,11 @@
             <td mat-cell *matCellDef="let element">
               @if (element?.snmp_general?.snmp_enable) {
                 <span class="success-icon">
-                  <fa-icon [icon]="['far', 'check-circle']" matTooltip="SNMP Enabled"></fa-icon>
+                  <fa-icon [icon]="['far', 'check-circle']" matTooltip="Monitoring(SNMP) Enabled"></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="Monitoring(SNMP) Disabled"></fa-icon>
                 </span>
               }
             </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 2726)
+++ /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)
@@ -46,19 +46,16 @@
       .pipe(take(1))
       .subscribe({
         next: (data: any) => {
-          let groups = data.groups;
-          groups.forEach((group: any) => {
-            this.groups.push(group?.group_name);
-            group?.device_list.forEach((device: any) => {
-              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.groups = data.groupNames;
+          data.devices.forEach((device: any) => {
+            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;
@@ -78,7 +75,7 @@
       "to": "now"
     }).pipe(take(1)).subscribe({
       next: (result: any) => {
-        this.deviceMetrics = result?.data?.device_stats;
+        this.deviceMetrics = result?.device_stats;
         this.getDeviceGroups();
       },
       error: (error: { message: string; }) => {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb/resource-monitoring-llb.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb/resource-monitoring-llb.ts	(revision 2726)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb/resource-monitoring-llb.ts	(working copy)
@@ -43,13 +43,15 @@
       .pipe(take(1))
       .subscribe({
         next: (data: any) => {
+          let devices: string[] = [];
           this.devices = data.devices;
           this.groups = data.groups;
           this.devices.forEach((device: any) => {
             if ((device?.type.toLowerCase() === 'apv' || device?.type.toLowerCase() === 'vapv') && device?.connection) {
-              this.getTopAPVLLBMetrics(device)
+              devices.push(device?.ip);
             }
           })
+          this.getLLBMonitoringMetrics(devices);
         }, error: (error: { message: string; }) => {
           console.log(error);
           this._notification.showError(error.message);
@@ -57,15 +59,15 @@
       })
   }
 
-  getTopAPVLLBMetrics(device: any) {
-    let payload = {agent_host: device?.ip}
-    this._system.getTopAPVLLBMetrics(payload)
+  getLLBMonitoringMetrics(devices: any) {
+    let payload = {agent_host: devices, stat_name: 'summary_data'}
+    this._device.getLLBMonitoringMetrics(payload)
       .pipe(take(1))
       .subscribe({
         next: (result: any) => {
-          // console.log(result);
-          let llbMetrics = this._device.mapDeviceDetails([device], result);
-          console.log(llbMetrics);
+          console.log(result);
+          // let llbMetrics = this._device.mapDeviceDetails([device], result);
+          // console.log(llbMetrics);
         },
         error: (error: { message: string; }) => {
           console.log(error);
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	(revision 2726)
+++ /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)
@@ -12,6 +12,10 @@
                (selectedTabChange)="onTabChange($event)">
   <mat-tab label="Basic Monitoring">
     <ng-template matTabContent>
+      <div class="button-container time-filter">
+        <a class="a-link a-link-color" (click)="openTimeFilterDialog()">Current Range: {{ currentFrom }}
+          to {{ currentTo }} (Refresh: {{ currentInterval }})</a>
+      </div>
       <div class="tab-content">
         <mat-grid-list cols="3" rowHeight="100px">
           <mat-grid-tile colspan="1" rowspan="3">
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	(revision 2726)
+++ /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)
@@ -1,10 +1,13 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, DestroyRef, inject, 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';
+import {ChartOptions} from '../../../services/chart-options';
+import {TimeFilter, TimeRange} from '../../common/time-filter/time-filter';
+import {MatDialog} from '@angular/material/dialog';
 
 @Component({
   selector: 'app-resource-monitoring-slb-real-details',
@@ -23,21 +26,34 @@
     'Audit Monitoring',
   ];
 
-  startTime: string = "now-15m";
-  endTime: string = "now";
+  currentFrom: string | Date = 'now-15m';
+  currentTo: string | Date = 'now';
+  currentInterval: number = 10;
+  private destroyRef = inject(DestroyRef);
 
   constructor(
     private _router: Router,
     private _route: ActivatedRoute,
     private _device: DeviceService,
     private _notification: NotificationService,
+    private _chartOptions: ChartOptions,
+    private _dialog: MatDialog,
   ) {
   }
 
   ngOnInit() {
     this.deviceIp = this._route.snapshot.paramMap.get('deviceIp') || '';
     this.serviceName = this._route.snapshot.paramMap.get('serviceName') || '';
-
+    // setTimeout(()=>{
+    //   interval(this.currentInterval * 1000)
+    //     .pipe(
+    //       startWith(0),
+    //       tap(() => this.getBasicMonitoringMetrics()),
+    //       takeUntilDestroyed(this.destroyRef)
+    //     )
+    //     .subscribe();
+    // })
+    // ToDo: Enable auto-refresh
     this.getBasicMonitoringMetrics()
   }
 
@@ -57,36 +73,36 @@
     this.getAPVRSMonitoringMetrics({
       agent_host: this.deviceIp,
       server_id: this.serviceName,
-      from: this.startTime,
-      to: this.endTime,
+      from: this.currentFrom,
+      to: this.currentTo,
       stat_name: 'network_throughput'
     })
     this.getAPVRSMonitoringMetrics({
       agent_host: this.deviceIp,
       server_id: this.serviceName,
-      from: this.startTime,
-      to: this.endTime,
+      from: this.currentFrom,
+      to: this.currentTo,
       stat_name: 'outstanding_requests'
     })
     this.getAPVRSMonitoringMetrics({
       agent_host: this.deviceIp,
       server_id: this.serviceName,
-      from: this.startTime,
-      to: this.endTime,
+      from: this.currentFrom,
+      to: this.currentTo,
       stat_name: 'connection_count'
     })
     this.getAPVRSMonitoringMetrics({
       agent_host: this.deviceIp,
       server_id: this.serviceName,
-      from: this.startTime,
-      to: this.endTime,
+      from: this.currentFrom,
+      to: this.currentTo,
       stat_name: 'hits'
     })
     this.getAPVRSMonitoringMetrics({
       agent_host: this.deviceIp,
       server_id: this.serviceName,
-      from: this.startTime,
-      to: this.endTime,
+      from: this.currentFrom,
+      to: this.currentTo,
       stat_name: 'connections_per_sec'
     })
   }
@@ -111,239 +127,62 @@
             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
-                }
-              ]
-            };
+            this.throughputChartOptions = this._chartOptions.historicalThroughputChartOptions(received_formatted, sent_formatted);
           } 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
-                }
-              ]
-            };
+            this.outstandingRequestsChartOptions = this._chartOptions.plotSingleLineChartOptions({label: 'Requests', unit: '#'}, data_formatted);
           } 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
-                }
-              ]
-            };
+            this.requestsChartOptions = this._chartOptions.plotSingleLineChartOptions({label: 'Requests', unit: '#'}, 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_per_sec !== null ? parseInt(d.connections_per_sec) : 0,
+              d.connections_per_sec !== null ? parseInt(d.real_conn_cnt) : 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
-                }
-              ]
-            };
+            this.openConnectionsChartOptions = this._chartOptions.plotSingleLineChartOptions({label: 'Connections', unit: '#'}, data_formatted);
           }  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
-                }
-              ]
-            };
+            this.connectionChartOptions = this._chartOptions.plotSingleLineChartOptions({label: 'Connections', unit: '#'}, data_formatted);
           }
         },
         error: (err) => {
+          console.error(err);
         }
       })
   }
+
+  openTimeFilterDialog(): void {
+    const dialogRef = this._dialog.open(TimeFilter, {
+      width: '600px',
+      data: {
+        initialFrom: this.currentFrom,
+        initialTo: this.currentTo,
+        initialInterval: this.currentInterval
+      }
+    });
+
+    dialogRef.componentInstance.applyRange.subscribe((result: TimeRange) => {
+      if (result) {
+        this.currentFrom = result.from;
+        this.currentTo = result.to;
+        this.currentInterval = result.interval || 10;
+        this.getBasicMonitoringMetrics()
+      }
+    });
+
+    dialogRef.afterClosed().subscribe(() => {});
+  }
 }
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	(revision 2726)
+++ /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)
@@ -12,6 +12,10 @@
                (selectedTabChange)="onTabChange($event)">
   <mat-tab label="Basic Monitoring">
     <ng-template matTabContent>
+      <div class="button-container time-filter">
+        <a class="a-link a-link-color" (click)="openTimeFilterDialog()">Current Range: {{ currentFrom }}
+          to {{ currentTo }} (Refresh: {{ currentInterval }})</a>
+      </div>
       <div class="tab-content">
         <mat-grid-list cols="3" rowHeight="100px">
           <mat-grid-tile colspan="1" rowspan="3">
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	(revision 2726)
+++ /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)
@@ -1,10 +1,13 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, DestroyRef, inject, 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';
+import {ChartOptions} from '../../../services/chart-options';
+import {TimeFilter, TimeRange} from '../../common/time-filter/time-filter';
+import {MatDialog} from '@angular/material/dialog';
 
 @Component({
   selector: 'app-resource-monitoring-slb-virtual-details',
@@ -25,18 +28,34 @@
     'Audit Monitoring',
   ];
 
+  currentFrom: string | Date = 'now-15m';
+  currentTo: string | Date = 'now';
+  currentInterval: number = 10;
+  private destroyRef = inject(DestroyRef);
+
   constructor(
     private _route: ActivatedRoute,
     private _router: Router,
     private _device: DeviceService,
     private _notification: NotificationService,
+    private _chartOptions: ChartOptions,
+    private _dialog: MatDialog,
   ) {
   }
 
   ngOnInit() {
     this.deviceIp = this._route.snapshot.paramMap.get('deviceIp') || '';
     this.serviceName = this._route.snapshot.paramMap.get('serviceName') || '';
-
+    // setTimeout(()=>{
+    //   interval(this.currentInterval * 1000)
+    //     .pipe(
+    //       startWith(0),
+    //       tap(() => this.getBasicMonitoringMetrics()),
+    //       takeUntilDestroyed(this.destroyRef)
+    //     )
+    //     .subscribe();
+    // })
+    // ToDo: Enable auto-refresh
     this.getBasicMonitoringMetrics()
   }
 
@@ -52,43 +71,40 @@
     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,
+      from: this.currentFrom,
+      to: this.currentTo,
       stat_name: 'network_throughput'
     })
     this.getAPVVSMonitoringMetrics({
       agent_host: this.deviceIp,
       server_id: this.serviceName,
-      from: this.startTime,
-      to: this.endTime,
+      from: this.currentFrom,
+      to: this.currentTo,
       stat_name: 'total_hits'
     })
     this.getAPVVSMonitoringMetrics({
       agent_host: this.deviceIp,
       server_id: this.serviceName,
-      from: this.startTime,
-      to: this.endTime,
+      from: this.currentFrom,
+      to: this.currentTo,
       stat_name: 'hits_distribution'
     })
     this.getAPVVSMonitoringMetrics({
       agent_host: this.deviceIp,
       server_id: this.serviceName,
-      from: this.startTime,
-      to: this.endTime,
+      from: this.currentFrom,
+      to: this.currentTo,
       stat_name: 'connection_count'
     })
     this.getAPVVSMonitoringMetrics({
       agent_host: this.deviceIp,
       server_id: this.serviceName,
-      from: this.startTime,
-      to: this.endTime,
+      from: this.currentFrom,
+      to: this.currentTo,
       stat_name: 'connections_per_sec'
     })
   }
@@ -105,116 +121,17 @@
       .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
-                }
-              ]
-            };
+            const factor: any = 1024 * 1024;
+            const sent_data_formatted: any = result?.data.map((d: any) => [d.ts, d.sent / factor]);
+            const received_data_formatted: any = result?.data.map((d: any) => [d.ts, d.received / factor]);
+            this.throughputChartOptions = this._chartOptions.historicalThroughputChartOptions(received_data_formatted, sent_data_formatted);
           } 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
-                }
-              ]
-            };
+            this.totalHitsChartOptions = this._chartOptions.plotSingleLineChartOptions({label: 'Total Hits', unit: '#'}, data_formatted);
           } else if (payload?.stat_name === 'hits_distribution') {
             let hits: any = {};
             if (result?.data.length > 0) {
@@ -230,110 +147,21 @@
                 });
               }
             }
-
-            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
-                }
-              ]
-            };
+            this.hitsDistributionChartOptions = this._chartOptions.distributionChartOptions('Hits', 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,
+              d.connections !== null ? parseInt(d.conn_cnt) : 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
-                }
-              ]
-            };
+            this.connectionsChartOptions = this._chartOptions.plotSingleLineChartOptions({label: 'Connections', unit: '#'}, data_formatted);
           } 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
-                }
-              ]
-            };
+            this.connectionPerSecondChartOptions = this._chartOptions.plotSingleLineChartOptions({label: 'Connections', unit: '#'}, data_formatted);
           }
         },
         error: (error: { message: string; }) => {
@@ -342,4 +170,26 @@
         }
       })
   }
+
+  openTimeFilterDialog(): void {
+    const dialogRef = this._dialog.open(TimeFilter, {
+      width: '600px',
+      data: {
+        initialFrom: this.currentFrom,
+        initialTo: this.currentTo,
+        initialInterval: this.currentInterval
+      }
+    });
+
+    dialogRef.componentInstance.applyRange.subscribe((result: TimeRange) => {
+      if (result) {
+        this.currentFrom = result.from;
+        this.currentTo = result.to;
+        this.currentInterval = result.interval || 10;
+        this.getBasicMonitoringMetrics()
+      }
+    });
+
+    dialogRef.afterClosed().subscribe(() => {});
+  }
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn-details/resource-monitoring-ssl-vpn-details.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn-details/resource-monitoring-ssl-vpn-details.html	(revision 2726)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn-details/resource-monitoring-ssl-vpn-details.html	(working copy)
@@ -12,6 +12,10 @@
                (selectedTabChange)="onTabChange($event)">
   <mat-tab label="Basic Monitoring">
     <ng-template matTabContent>
+      <div class="button-container time-filter">
+        <a class="a-link a-link-color" (click)="openTimeFilterDialog()">Current Range: {{ currentFrom }}
+          to {{ currentTo }} (Refresh: {{ currentInterval }})</a>
+      </div>
       <div class="tab-content">
         <mat-grid-list cols="3" rowHeight="100px">
           <mat-grid-tile colspan="1" rowspan="3">
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn-details/resource-monitoring-ssl-vpn-details.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn-details/resource-monitoring-ssl-vpn-details.ts	(revision 2726)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn-details/resource-monitoring-ssl-vpn-details.ts	(working copy)
@@ -1,10 +1,13 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, DestroyRef, inject, OnInit} from '@angular/core';
 import {SharedModule} from '../../../shared/shared-module';
 import {ActivatedRoute, Router} from '@angular/router';
 import {DeviceService} from '../../../services/device-service';
 import {NotificationService} from '../../../services/notification';
 import {EChartsOption} from 'echarts';
 import {take} from 'rxjs/operators';
+import {ChartOptions} from '../../../services/chart-options';
+import {TimeFilter, TimeRange} from '../../common/time-filter/time-filter';
+import {MatDialog} from '@angular/material/dialog';
 
 @Component({
   selector: 'app-resource-monitoring-ssl-vpn-details',
@@ -24,11 +27,18 @@
     'Audit Monitoring',
   ];
 
+  currentFrom: string | Date = 'now-15m';
+  currentTo: string | Date = 'now';
+  currentInterval: number = 10;
+  private destroyRef = inject(DestroyRef);
+
   constructor(
     private _route: ActivatedRoute,
     private _router: Router,
     private _device: DeviceService,
     private _notification: NotificationService,
+    private _chartOptions: ChartOptions,
+    private _dialog: MatDialog,
   ) {
   }
 
@@ -51,64 +61,61 @@
     this._router.navigate(['/monitoring/resources'], {state: {}});
   }
 
-  startTime: string = "now-15m";
-  endTime: string = "now";
-
   getBasicMonitoringMetrics() {
     this.getSSLVPNMonitoringMetrics({
       agent_host: this.deviceIp,
       vsite_id: this.serviceName,
-      from: this.startTime,
-      to: this.endTime,
+      from: this.currentFrom,
+      to: this.currentTo,
       stat_name: 'login_status'
     })
     this.getSSLVPNMonitoringMetrics({
       agent_host: this.deviceIp,
       vsite_id: this.serviceName,
-      from: this.startTime,
-      to: this.endTime,
+      from: this.currentFrom,
+      to: this.currentTo,
       stat_name: 'net_throughput'
     })
     this.getSSLVPNMonitoringMetrics({
       agent_host: this.deviceIp,
       vsite_id: this.serviceName,
-      from: this.startTime,
-      to: this.endTime,
+      from: this.currentFrom,
+      to: this.currentTo,
       stat_name: 'tunnel_status'
     })
     this.getSSLVPNMonitoringMetrics({
       agent_host: this.deviceIp,
       vsite_id: this.serviceName,
-      from: this.startTime,
-      to: this.endTime,
+      from: this.currentFrom,
+      to: this.currentTo,
       stat_name: 'l3_vpn_throughput'
     })
     this.getSSLVPNMonitoringMetrics({
       agent_host: this.deviceIp,
       vsite_id: this.serviceName,
-      from: this.startTime,
-      to: this.endTime,
+      from: this.currentFrom,
+      to: this.currentTo,
       stat_name: 'l3_client_app_throughput'
     })
     this.getSSLVPNMonitoringMetrics({
       agent_host: this.deviceIp,
       vsite_id: this.serviceName,
-      from: this.startTime,
-      to: this.endTime,
+      from: this.currentFrom,
+      to: this.currentTo,
       stat_name: 'l7_request_status'
     })
     this.getSSLVPNMonitoringMetrics({
       agent_host: this.deviceIp,
       vsite_id: this.serviceName,
-      from: this.startTime,
-      to: this.endTime,
+      from: this.currentFrom,
+      to: this.currentTo,
       stat_name: 'l7_client_throughput'
     })
     this.getSSLVPNMonitoringMetrics({
       agent_host: this.deviceIp,
       vsite_id: this.serviceName,
-      from: this.startTime,
-      to: this.endTime,
+      from: this.currentFrom,
+      to: this.currentTo,
       stat_name: 'l7_server_throughput'
     })
   }
@@ -147,26 +154,7 @@
                 });
               }
             }
-
-            this.loginStatusChartOptions = {
-              tooltip: {
-                trigger: 'item',
-                formatter: '{a} <br/>{b}: {c}'
-              },
-              series: [
-                {
-                  name: 'Status',
-                  type: 'pie',
-                  radius: [25, 75],
-                  center: ['50%', '50%'],
-                  roseType: 'area',
-                  itemStyle: {
-                    borderRadius: 8
-                  },
-                  data: data_formatted
-                }
-              ]
-            };
+            this.loginStatusChartOptions = this._chartOptions.distributionChartOptions('Status', data_formatted)
           } else if (payload?.stat_name === 'tunnel_status') {
             let hits: any = {};
             if (result?.data.length > 0) {
@@ -182,220 +170,34 @@
                 });
               }
             }
-            this.l3TunnelStatusChartOptions = {
-              tooltip: {
-                trigger: 'item',
-                formatter: '{a} <br/>{b}: {c}'
-              },
-              series: [
-                {
-                  name: 'Status',
-                  type: 'pie',
-                  radius: [25, 75],
-                  center: ['50%', '50%'],
-                  roseType: 'area',
-                  itemStyle: {
-                    borderRadius: 8
-                  },
-                  data: data_formatted
-                }
-              ]
-            };
+            this.l3TunnelStatusChartOptions = this._chartOptions.distributionChartOptions('Status', data_formatted)
           } else if (payload?.stat_name === 'net_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)]);
+              .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.nw_sent)]);
             const received_formatted = network
               .filter((d: any) => d.received !== null)
-              .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.received)]);
-
-            this.clientThroughputChartOptions = {
-              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
-                }
-              ]
-            };
+              .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.nw_recv)]);
+            this.serverThroughputChartOptions = this._chartOptions.historicalThroughputChartOptions(received_formatted, sent_formatted);
           } else if (payload?.stat_name === 'l3_vpn_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)]);
+              .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.vpn_sent)]);
             const received_formatted = network
               .filter((d: any) => d.received !== null)
-              .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.received)]);
-
-            this.l3VPNThroughputChartOptions = {
-              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
-                }
-              ]
-            };
+              .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.vpn_recv)]);
+            this.l3VPNThroughputChartOptions = this._chartOptions.historicalThroughputChartOptions(received_formatted, sent_formatted);
           } else if (payload?.stat_name === 'l3_client_app_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)]);
+              .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.client_app_sent)]);
             const received_formatted = network
               .filter((d: any) => d.received !== null)
-              .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.received)]);
-
-            this.l3ClientThroughputChartOptions = {
-              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
-                }
-              ]
-            };
+              .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.client_app_recv)]);
+            this.l3ClientThroughputChartOptions = this._chartOptions.historicalThroughputChartOptions(received_formatted, sent_formatted);
           } else if (payload?.stat_name === 'l7_request_status') {
             let request_stats = result?.data;
             let hits: any = {};
@@ -412,155 +214,27 @@
                 });
               }
             }
-            this.l7RequestStatusChartOptions = {
-              tooltip: {
-                trigger: 'item',
-                formatter: '{a} <br/>{b}: {c}'
-              },
-              series: [
-                {
-                  name: 'Status',
-                  type: 'pie',
-                  radius: [25, 75],
-                  center: ['50%', '50%'],
-                  roseType: 'area',
-                  itemStyle: {
-                    borderRadius: 8
-                  },
-                  data: data_formatted
-                }
-              ]
-            };
+            this.l7RequestStatusChartOptions = this._chartOptions.distributionChartOptions('Status', data_formatted);
           } else if (payload?.stat_name === 'l7_client_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)]);
+              .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.client_sent)]);
             const received_formatted = network
               .filter((d: any) => d.received !== null)
-              .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.received)]);
+              .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.client_recv)]);
 
-            this.l7ClientThroughputChartOptions = {
-              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
-                }
-              ]
-            };
+            this.l7ClientThroughputChartOptions = this._chartOptions.historicalThroughputChartOptions(received_formatted, sent_formatted);
           } else if (payload?.stat_name === 'l7_server_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)]);
+              .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.server_sent)]);
             const received_formatted = network
               .filter((d: any) => d.received !== null)
-              .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.received)]);
+              .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.server_recv)]);
 
-            this.l7ServerThroughputChartOptions = {
-              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
-                }
-              ]
-            };
+            this.l7ServerThroughputChartOptions = this._chartOptions.historicalThroughputChartOptions(received_formatted, sent_formatted);
           }
         },
         error: (error: { message: string; }) => {
@@ -569,4 +243,26 @@
         }
       })
   }
+
+  openTimeFilterDialog(): void {
+    const dialogRef = this._dialog.open(TimeFilter, {
+      width: '600px',
+      data: {
+        initialFrom: this.currentFrom,
+        initialTo: this.currentTo,
+        initialInterval: this.currentInterval
+      }
+    });
+
+    dialogRef.componentInstance.applyRange.subscribe((result: TimeRange) => {
+      if (result) {
+        this.currentFrom = result.from;
+        this.currentTo = result.to;
+        this.currentInterval = result.interval || 10;
+        this.getBasicMonitoringMetrics()
+      }
+    });
+
+    dialogRef.afterClosed().subscribe(() => {});
+  }
 }
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 2726)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/api_urls.ts	(working copy)
@@ -170,6 +170,7 @@
   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`,
+  GET_LLB_MONITORING_METRICS_URL: `${PREFIX}/llb_stats`,
   GET_STORAGE_URL: `${PREFIX}/log/storage`,
   GET_STORAGE_CLEANUP_CONFIG_URL: `${PREFIX}/storage/crontab`,
   UPDATE_STORAGE_CLEANUP_CONFIG_URL: `${PREFIX}/storage/crontab`,
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/chart-options.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/chart-options.ts	(revision 2726)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/chart-options.ts	(working copy)
@@ -234,11 +234,15 @@
           name: 'Sent',
           type: 'line',
           data: outbound,
+          showSymbol: false,
+          smooth: true
         },
         {
           name: 'Received',
           type: 'line',
           data: inbound,
+          showSymbol: false,
+          smooth: true
         }
       ]
     }
@@ -297,6 +301,109 @@
     }
   }
 
+  plotSingleLineChartOptions(labels: any, data: any, color: any = '#008ac5'): EChartsOption {
+    return {
+      grid: {
+        left: '7%',
+        right: '1%',
+        bottom: '1%',
+        containLabel: true
+      },
+      tooltip: {
+        trigger: 'axis',
+        formatter: (params: any) => {
+          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: [labels?.label]
+      },
+      xAxis: {
+        type: 'time',
+        name: 'Time'
+      },
+      yAxis: {
+        type: 'value',
+        name: labels?.unit,
+        min: 0
+      },
+      series: [
+        {
+          name: labels?.label,
+          type: 'line',
+          data: data,
+          color: color,
+          showSymbol: false,
+          smooth: true
+        }
+      ]
+    }
+  }
+
+  plotDoubleLineChartOptions(labels: any, data: any, colors: any[] = ['#008ac5', '#E0E0E0']): EChartsOption {
+    return {
+      grid: {
+        left: '7%',
+        right: '1%',
+        bottom: '1%',
+        containLabel: true
+      },
+      tooltip: {
+        trigger: 'axis',
+        formatter: (params: any) => {
+          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: [labels?.label[0], labels?.label[1]]
+      },
+      xAxis: {
+        type: 'time',
+        name: 'Time'
+      },
+      yAxis: {
+        type: 'value',
+        name: labels?.unit
+      },
+      series: [
+        {
+          name: labels?.label[0],
+          type: 'line',
+          data: data,
+          color: colors[0],
+        },
+        {
+          name: labels?.label[1],
+          type: 'line',
+          data: data,
+          color: colors[1]
+        }
+      ]
+    }
+  }
+
   historicalDiskIOChartOptions(disk_io_data: any): EChartsOption {
     return {
       grid: {
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 2726)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/device-service.ts	(working copy)
@@ -642,4 +642,13 @@
       ]
     );
   }
+
+  getLLBMonitoringMetrics(payload: any) {
+    return this.http.post(URLS.GET_LLB_MONITORING_METRICS_URL, payload, {
+        csrf: true,
+        isFormData: false,
+        csrfInFormData: true
+      }
+    );
+  }
 }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/shared/shared-module.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/shared/shared-module.ts	(revision 2726)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/shared/shared-module.ts	(working copy)
@@ -3,6 +3,7 @@
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 
+
 // FontAwesome Imports
 import {FaIconLibrary, FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import * as solidIcons from '@fortawesome/free-solid-svg-icons';
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/styles.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/styles.scss	(revision 2726)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/styles.scss	(working copy)
@@ -427,3 +427,8 @@
 mat-card-title {
   font-size: medium !important;
 }
+
+.time-filter {
+  margin-top: 8px !important;
+  margin-bottom: 8px !important;
+}
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 2726)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/db/ssl_vpn_stat_queries.py	(working copy)
@@ -1,5 +1,4 @@
 from hive.db.db_client import DBClient
-from hive.utils import andebug
 from hive.db.utils import cast_fields
 
 
@@ -14,6 +13,7 @@
         if agent_host:
             query = f"""
                 SELECT DISTINCT ON (id, agent_host, ip)
+                   id as vsite_name, agent_host, 
                    CAST(active_sessions AS BIGINT)
                 FROM ag_virtual_site_stats
                 WHERE agent_host = '{agent_host}'
@@ -23,6 +23,7 @@
         else:
             query = f"""
                 SELECT DISTINCT ON (id, agent_host, ip)
+                    id as vsite_name, agent_host, 
                     CAST(active_sessions AS BIGINT)
                 FROM ag_virtual_site_stats
                 WHERE time > now() - interval '20 seconds'
@@ -33,6 +34,8 @@
         response = DBClient.execute_query(req)
 
         field_casts = {
+            "id": str,
+            "agent_host": str,
             "active_sessions": int
         }
         response["data"] = cast_fields(response["data"], field_casts)
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/services/device_metrics_service.py
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/services/device_metrics_service.py	(revision 2726)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/services/device_metrics_service.py	(working copy)
@@ -1,37 +1,35 @@
 from hive.db.device_metric_queries import DeviceMetrics
 from hive.services.utils import construct_json_response, convert_time
-from hive.utils import andebug
 
 
 def fetch_device_metrics(agent_host, interval, metric_name, time_from, time_to):
     time_from = convert_time(time_from, "now() - interval '15 minutes'")
     time_to = convert_time(time_to, "now()")
 
-    json_response = {}
     if metric_name and metric_name == 'cpu_usage':
         metrics = DeviceMetrics.get_cpu_usage_metrics(agent_host, interval, time_from, time_to)
-        json_response = construct_json_response(json_response, metrics)
+        json_response = construct_json_response(metrics)
     elif metric_name and metric_name == 'memory_usage':
         metrics = DeviceMetrics.get_mem_usage_metrics(agent_host, interval, time_from, time_to)
-        json_response = construct_json_response(json_response, metrics)
+        json_response = construct_json_response(metrics)
     elif metric_name and metric_name == 'disk_usage':
         metrics = DeviceMetrics.get_disk_usage_metrics(agent_host, interval, time_from, time_to)
-        json_response = construct_json_response(json_response, metrics)
+        json_response = construct_json_response(metrics)
     elif metric_name and metric_name == 'network_throughput':
         metrics = DeviceMetrics.get_network_throughput(agent_host, interval, time_from, time_to)
-        json_response = construct_json_response(json_response, metrics)
+        json_response = construct_json_response(metrics)
     elif metric_name == "ssl_connections":
         metrics = DeviceMetrics.get_ssl_connections(agent_host, interval, time_from, time_to)
-        json_response = construct_json_response(json_response, metrics)
+        json_response = construct_json_response(metrics)
     elif metric_name == "connections":
         metrics = DeviceMetrics.get_connections(agent_host, interval, time_from, time_to)
-        json_response = construct_json_response(json_response, metrics)
+        json_response = construct_json_response(metrics)
     elif metric_name == "requests":
         metrics = DeviceMetrics.get_requests(agent_host, interval, time_from, time_to)
-        json_response = construct_json_response(json_response, metrics)
+        json_response = construct_json_response(metrics)
     elif metric_name == "ssl_core_utilization":
         metrics = DeviceMetrics.get_ssl_core_utilization(agent_host, interval, time_from, time_to)
-        json_response = construct_json_response(json_response, metrics)
+        json_response = construct_json_response(metrics)
     else:
         device_stats = DeviceMetrics.get_device_stats(time_from, time_to)['data']
         net_throughput = DeviceMetrics.get_throughput_data(interval, time_from, time_to)['data']
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 2726)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/services/ssl_vpn_stat_service.py	(working copy)
@@ -1,13 +1,11 @@
 from hive.db.ssl_vpn_stat_queries import SSLVpnStatQueries
 from hive.services.utils import construct_json_response, convert_time
-from hive.utils import andebug
 
 
 def fetch_ssl_vpn_stats(agent_host, vsite_id, interval, stat_name, time_from, time_to):
     time_from = convert_time(time_from, "now() - interval '15 minutes'")
     time_to = convert_time(time_to, "now()")
 
-    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_throughput':
@@ -26,5 +24,5 @@
         stats = SSLVpnStatQueries.get_l7_server_throughput(agent_host, vsite_id, interval, time_from, time_to)
     else:
         stats = SSLVpnStatQueries.get_active_sessions(agent_host)
-    json_response = construct_json_response(json_response, stats)
-    return json_response
\ No newline at end of file
+    json_response = construct_json_response(stats)
+    return json_response
