Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.config.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.config.ts (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.config.ts (working copy) @@ -5,21 +5,22 @@ provideEnvironmentInitializer, provideZoneChangeDetection } from '@angular/core'; -import {provideRouter} from '@angular/router'; -import {routes} from './app.routes'; -import {provideHttpClient, withFetch, withInterceptors} from '@angular/common/http'; -import {csrfInterceptorFn} from './interceptors/csrf-interceptor'; -import {loadingInterceptorFn} from './interceptors/loading-interceptor-interceptor'; -import {Auth} from './services/auth'; -import {provideNativeDateAdapter} from '@angular/material/core'; -import {provideEchartsCore} from 'ngx-echarts'; -import {echarts} from './charts-config'; -import {authInterceptorFn} from './interceptors/auth-interceptor-interceptor'; +import { provideRouter } from '@angular/router'; +import { routes } from './app.routes'; +import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http'; +import { csrfInterceptorFn } from './interceptors/csrf-interceptor'; +import { loadingInterceptorFn } from './interceptors/loading-interceptor-interceptor'; +import { Auth } from './services/auth'; +import { provideNativeDateAdapter } from '@angular/material/core'; +import { provideEchartsCore } from 'ngx-echarts'; +import { echarts } from './charts-config'; +import { authInterceptorFn } from './interceptors/auth-interceptor-interceptor'; +import { provideAnimations } from '@angular/platform-browser/animations'; export const appConfig: ApplicationConfig = { providers: [ provideBrowserGlobalErrorListeners(), - provideZoneChangeDetection({eventCoalescing: true}), + provideZoneChangeDetection({ eventCoalescing: true }), provideEnvironmentInitializer(() => (inject(Auth).init())), provideRouter(routes), provideHttpClient( @@ -27,6 +28,7 @@ withInterceptors([csrfInterceptorFn, loadingInterceptorFn, authInterceptorFn]) ), provideNativeDateAdapter(), - provideEchartsCore({echarts}), + provideEchartsCore({ echarts }), + provideAnimations(), ] }; Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.ts (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.ts (working copy) @@ -1,15 +1,15 @@ -import {Component, OnDestroy, OnInit} from '@angular/core'; -import {Router, RouterOutlet, NavigationEnd} from '@angular/router'; -import {Auth} from './services/auth'; -import {Observable, Subscription, combineLatest} from 'rxjs'; -import {filter, map, startWith} from 'rxjs/operators'; -import {Navigation} from './components/navigation/navigation'; -import {FontAwesomeModule} from '@fortawesome/angular-fontawesome'; -import {User} from './models/user'; -import {AsyncPipe, NgStyle} from '@angular/common'; -import {Layout} from './services/layout'; -import {Loading as LoadingService} from './services/loading'; -import {Loading} from './components/common/loading/loading'; +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Router, RouterOutlet, NavigationEnd } from '@angular/router'; +import { Auth } from './services/auth'; +import { Observable, Subscription, combineLatest } from 'rxjs'; +import { filter, map, startWith, delay } from 'rxjs/operators'; +import { Navigation } from './components/navigation/navigation'; +import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; +import { User } from './models/user'; +import { AsyncPipe, NgStyle } from '@angular/common'; +import { Layout } from './services/layout'; +import { Loading as LoadingService } from './services/loading'; +import { Loading } from './components/common/loading/loading'; @Component({ selector: 'app-root', @@ -34,29 +34,29 @@ private loadingService: LoadingService, private router: Router ) { - this.loading$ = this.loadingService.loading$; + this.loading$ = this.loadingService.loading$.pipe(delay(0)); this.isSidebarCollapsed$ = this.layoutService.isSidebarCollapsed$; this.currentUser$ = this.authService.currentUser; const currentUrl$ = this.router.events.pipe( - filter((event): event is NavigationEnd => event instanceof NavigationEnd), - map((event: NavigationEnd) => event.urlAfterRedirects), - startWith(this.router.url) + filter((event): event is NavigationEnd => event instanceof NavigationEnd), + map((event: NavigationEnd) => event.urlAfterRedirects), + startWith(this.router.url) ); this.showNavigation$ = combineLatest([ this.currentUser$, currentUrl$ ]).pipe( - map(([user, url]) => { - const webConsoleStandalonePath = '/inventory/web-console'; + map(([user, url]) => { + const webConsoleStandalonePath = '/inventory/web-console'; - return user !== null && - url !== '/control-panel' && - !url.includes(webConsoleStandalonePath); - }) + return user !== null && + url !== '/control-panel' && + !url.includes(webConsoleStandalonePath); + }) ); } 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 (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.html (working copy) @@ -1,101 +1,57 @@ -
-
- Please select a time range - +
+ +
+

Quick Select

+
+ @for (range of quickRanges; track range.label) { + + } +
-
-
-

Custom range

-
- - From - + +
+
+

Custom Time Range

+ +
+
+
+ + From + - - - today - - + - - To - + to + + To + - - - today - - + +
+
+ + Refresh Interval (s) + +
- - Refreshing every (Seconds) - - - - -
-

Current Range: {{customFrom}} - {{customTo}} (Refresh every {{refreshInterval}} seconds)

- - -
-

Quick ranges

-
- @for (range of quickRanges; track range.label) { - - {{ range.label }} - - } @empty { -

No quick ranges defined.

- } +
+
+ Selection: + {{ customFrom }} - {{ customTo }} +
+
-
+
\ No newline at end of file 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 (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.scss (working copy) @@ -1,87 +1,191 @@ -.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 +// Override standard mat-dialog padding using the class added in TS +.custom-dialog-container .mat-mdc-dialog-container { + padding: 0 !important; // Remove default padding + overflow: hidden !important; // Prevent outer scrollbars + border-radius: 8px !important; +} + +// Support for legacy non-MDC material if applicable +.custom-dialog-container .mat-dialog-container { + padding: 0 !important; + overflow: hidden !important; + border-radius: 8px !important; +} + +.time-filter-wrapper { display: flex; - flex-direction: column; - position: relative; // For the close button positioning + width: 680px; + height: 450px; // Slightly shorter to fit smaller screens + max-width: 100%; + background: white; + font-family: 'Inter', 'Roboto', sans-serif; + // No negative margins needed now that container padding is 0 - .header { + // Left Sidebar + .quick-ranges-sidebar { + width: 180px; // Compact sidebar + background: #f8fafc; + border-right: 1px solid #e2e8f0; 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; + flex-direction: column; + padding: 16px 0; + flex-shrink: 0; + overflow-y: auto; // Sidebar scrolls independently - span { - font-size: 1.25rem; // Equivalent to h2/h3 - font-weight: 500; + .sidebar-title { + font-size: 11px; + text-transform: uppercase; + letter-spacing: 0.05em; + color: #94a3b8; + font-weight: 700; + margin: 0 0 12px 16px; } - .close-button { - margin-left: auto; // Pushes it to the right + .ranges-list { + display: flex; + flex-direction: column; + flex: 1; + + .range-btn { + text-align: left; + padding: 10px 16px; + border-radius: 0; + font-weight: 500; + color: #475569; + font-size: 13px; + line-height: normal; + justify-content: flex-start; + min-width: 0; + height: auto; // Allow height to fit content + + &:hover { + background: #f1f5f9; + color: #0f172a; + } + } } } - .content { + // Right Main Content + .custom-range-content { + flex: 1; display: flex; flex-direction: column; + padding: 24px; + // Overflow handling + overflow-y: auto; + min-width: 0; - h3 { - font-size: 1rem; - font-weight: 500; - margin-top: 0; - margin-bottom: 10px; + .dialog-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 24px; + flex-shrink: 0; + + .dialog-title { + font-size: 18px; + font-weight: 600; + color: #1e293b; + margin: 0; + } } - .custom-range-section { - margin-bottom: 20px; + .custom-inputs-container { + display: flex; + flex-direction: column; + gap: 20px; + flex: 1; - .date-inputs { + .date-row { display: flex; - gap: 16px; // Space between "From" and "To" - margin-bottom: 16px; + align-items: flex-start; + gap: 12px; + flex-wrap: nowrap; - .time-input { - flex: 1; // Makes them take equal width + .range-separator { + color: #94a3b8; + font-size: 13px; + font-weight: 500; + margin-top: 16px; // Align with input text + white-space: nowrap; } - } - .interval-input { - width: 150px; // Adjust width as needed - margin-right: 16px; + mat-form-field.dense-field { + flex: 1; + width: 100%; + + ::ng-deep .mat-mdc-text-field-wrapper { + background-color: white; + border: 1px solid #cbd5e1; + border-radius: 6px; + padding: 0 12px; + } + + ::ng-deep .mat-mdc-form-field-flex { + height: 48px; + align-items: center; + } + + ::ng-deep .mat-mdc-form-field-underline { + display: none; + } + + ::ng-deep .mat-mdc-form-field-subscript-wrapper { + display: none; + } + + ::ng-deep .mat-mdc-form-field-infix { + padding-top: 8px; + padding-bottom: 8px; + } + } } - .apply-button { - float: right; // Aligns to the right + .settings-row { + mat-form-field.refresh-field { + width: 100%; + + ::ng-deep .mat-mdc-text-field-wrapper { + background-color: white; + border: 1px solid #cbd5e1; + border-radius: 6px; + } + + ::ng-deep .mat-mdc-form-field-subscript-wrapper { + display: none; + } + } } - } - mat-divider { - margin: 20px 0; - } + .dialog-actions { + margin-top: auto; + display: flex; + justify-content: space-between; + align-items: center; + border-top: 1px solid #f1f5f9; + padding-top: 20px; + flex-shrink: 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 + .current-range-preview { + display: flex; + flex-direction: column; + gap: 2px; - .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; + .label { + font-size: 10px; + color: #94a3b8; + text-transform: uppercase; + font-weight: 700; } + + .value { + font-family: 'Roboto Mono', monospace; + font-size: 12px; + color: #0f172a; + } } } } } -} +} \ No newline at end of file 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 (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/common/time-filter/time-filter.ts (working copy) @@ -1,8 +1,8 @@ -import {Component, EventEmitter, inject, Input, OnInit, Output} from '@angular/core'; -import {SharedModule} from '../../../shared/shared-module'; +import { Component, EventEmitter, inject, Input, OnInit, Output, ViewEncapsulation } from '@angular/core'; +import { SharedModule } from '../../../shared/shared-module'; -import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog'; -import {NgxMatDatepickerToggle} from '@ngxmc/datetime-picker'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { NgxMatDatepickerToggle } from '@ngxmc/datetime-picker'; export interface TimeRange { from: string | Date; @@ -16,12 +16,16 @@ to: string; } +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; + @Component({ selector: 'app-time-filter', standalone: true, - imports: [SharedModule, NgxMatDatepickerToggle], + imports: [SharedModule, NgxMatDatepickerToggle, MatButtonModule, MatIconModule], templateUrl: './time-filter.html', - styleUrl: './time-filter.scss' + styleUrl: './time-filter.scss', + encapsulation: ViewEncapsulation.None // Enable global style overrides for dialog container }) export class TimeFilter implements OnInit { @@ -34,22 +38,22 @@ 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'}, + { 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); Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/monitoring/monitoring.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/monitoring/monitoring.html (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/monitoring/monitoring.html (working copy) @@ -1 +1,3 @@ - +
+ +
\ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/monitoring/monitoring.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/monitoring/monitoring.scss (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/monitoring/monitoring.scss (working copy) @@ -0,0 +1,10 @@ +.monitoring-container { + padding: 4px 5px; + background-color: #fafafa; + height: 100%; + overflow: hidden; + box-sizing: border-box; + font-family: 'Roboto', sans-serif; + display: flex; + flex-direction: column; +} \ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/monitoring/monitoring.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/monitoring/monitoring.ts (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/monitoring/monitoring.ts (working copy) @@ -1,10 +1,10 @@ -import {Component, OnInit} from '@angular/core'; -import {SharedModule} from '../../shared/shared-module'; -import {ResourceMonitoringDevices} from '../sub-components/resource-monitoring-devices/resource-monitoring-devices'; -import {ResourceMonitoringApv} from '../sub-components/resource-monitoring-apv/resource-monitoring-apv'; -import {ResourceMonitoringSslVpn} from '../sub-components/resource-monitoring-ssl-vpn/resource-monitoring-ssl-vpn'; +import { Component, OnInit } from '@angular/core'; +import { SharedModule } from '../../shared/shared-module'; +import { ResourceMonitoringDevices } from '../sub-components/resource-monitoring-devices/resource-monitoring-devices'; +import { ResourceMonitoringApv } from '../sub-components/resource-monitoring-apv/resource-monitoring-apv'; +import { ResourceMonitoringSslVpn } from '../sub-components/resource-monitoring-ssl-vpn/resource-monitoring-ssl-vpn'; // import {ResourceMonitoringAsf} from '../sub-components/resource-monitoring-asf/resource-monitoring-asf'; -import {TabContainer, TabDefinition} from '../common/tab-container/tab-container'; +import { TabContainer, TabDefinition } from '../common/tab-container/tab-container'; @Component({ selector: 'app-monitoring', @@ -15,9 +15,9 @@ export class Monitoring { tabDefinitions: TabDefinition[] = [ - {label: 'Devices', component: ResourceMonitoringDevices, paramName: 'devices'}, - {label: 'APV', component: ResourceMonitoringApv, paramName: 'apv'}, + { label: 'Devices', component: ResourceMonitoringDevices, paramName: 'devices', icon: ['fas', 'server'] }, + { label: 'APV', component: ResourceMonitoringApv, paramName: 'apv', icon: ['fas', 'network-wired'] }, // {label: 'ASF', component: ResourceMonitoringAsf, paramName: 'asf'}, - {label: 'SSL VPN', component: ResourceMonitoringSslVpn, paramName: 'ssl-vpn'}, + { label: 'SSL VPN', component: ResourceMonitoringSslVpn, paramName: 'ssl-vpn', icon: ['fas', 'shield-alt'] }, ]; } Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/navigation/navigation.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/navigation/navigation.html (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/navigation/navigation.html (working copy) @@ -8,7 +8,7 @@
+ matTooltip="Show Latest Tasks">
@for (item of notifications.slice(0, 5); track item.id) { -
-
-
{{ item.avatarInitials }}
-

- {{ item.user }} {{ item.summary }} {{ item.time }} -

-
- - - - - - - - +
+
+
{{ item.avatarInitials }}
+

+ {{ item.user }} {{ item.summary }} {{ item.time }} +

+ + + + + + + + +
}
@@ -51,33 +51,33 @@
@if (isUserDropdownOpen) { -
- - - User Manual - - - - CLI Admin Handbook - - - - Large Screen Display - - - - AMP Web Console - - - - Save Configurations - -
- -
+
+ + + User Manual + + + + CLI Admin Handbook + + + + Large Screen Display + + + + AMP Web Console + + + + Save Configurations + +
+ +
}
@@ -91,51 +91,45 @@ @@ -148,11 +142,11 @@
-
+
\ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-device-insights/dashboard-device-insights.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-device-insights/dashboard-device-insights.scss (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-device-insights/dashboard-device-insights.scss (working copy) @@ -1,18 +1,19 @@ .services-dashboard-container { display: flex; flex-direction: column; - gap: 12px; - padding: 12px; + gap: 8px; // Reduced from 12px + padding: 8px; // Reduced from 12px height: 100%; overflow-y: auto; + background-color: #f4f6f8; + box-sizing: border-box; + font-family: 'Inter', 'Roboto', sans-serif; + scrollbar-width: none; - /* Firefox */ -ms-overflow-style: none; - /* IE 10+ */ &::-webkit-scrollbar { display: none; - /* Chrome, Safari, Opera */ } } Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.html (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.html (working copy) @@ -1,141 +1,113 @@ - - - SLB - Virtual Services - - -
- - -
- - Hits - Top 5 - -
-
-
-
- - + +
+
+

SLB - Virtual Services

+
+
+ +
+

Hits

+ Top 5 +
+
+
+
+ - - -
- - Open Connections - Top 5 - -
-
-
-
- - + +
+

Open Connections

+ Top 5 +
+
+
+
+ - - -
- - Throughput - Top 5 - -
-
-
-
- - -
- - - - - SLB - Real Services - - -
- - -
- - Hits - Top 5 - -
-
-
-
- - + +
+

Throughput

+ Top 5 +
+
+
+
+ +
+
- - -
- - Open Connections - Top 5 - -
-
-
-
- - + +
+
+

SLB - Real Services

+
+
+ +
+

Hits

+ Top 5 +
+
+
+
+ - - -
- - Throughput - Top 5 - -
-
-
-
- - -
- - - - - LLB - - -
- - -
- - Hits - Top 5 - -
-
-
-
- - + +
+

Open Connections

+ Top 5 +
+
+
+
+ - - -
- - Open Connections - Top 5 - -
-
-
-
- - + +
+

Throughput

+ Top 5 +
+
+
+
+ +
+
- - -
- - Throughput - Top 5 - -
-
-
-
- - -
- - \ No newline at end of file + +
+
+

LLB

+
+
+ +
+

Hits

+ Top 5 +
+
+
+
+ + + +
+

Open Connections

+ Top 5 +
+
+
+
+ + + +
+

Throughput

+ Top 5 +
+
+
+
+ +
+
\ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.scss (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.scss (working copy) @@ -1,217 +1,86 @@ -/* dashboard-metric-card.component.css */ -.dashboard-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 12px; - padding: 12px; - height: 100%; - box-sizing: border-box; +.dashboard-section { + margin-bottom: 8px; // Reduced from 16px + + .section-header { + margin-bottom: 4px; // Reduced from 8px + + .section-title { + font-size: 16px; + font-weight: 600; + color: #1a1a1a; + margin: 0; + font-family: 'Inter', 'Roboto', sans-serif; + } + } + + .dashboard-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 12px; // Reduced from 16px + } } .dashboard-card { - width: 100%; - height: 100%; + background: white; border-radius: 12px; - background-color: #fff; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); border: none; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); + padding: 12px; // Reduced from 16px display: flex; flex-direction: column; -} + height: 300px; + /* Slightly reduced height to fit more vertically */ + transition: transform 0.2s, box-shadow 0.2s; -.card-content-wrapper { - padding: 16px !important; - display: flex; - flex-direction: column; - height: 100%; - width: 100%; - box-sizing: border-box; -} + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + } -.card-header-row { - display: flex; - align-items: center; - gap: 6px; - margin-bottom: 16px; -} + .card-header { + display: flex; + justify-content: space-between; + align-items: baseline; + margin-bottom: 4px; // Reduced from 12px */ -.metric-icon { - color: #3f51b5; -} + h3 { + font-size: 16px; + font-weight: 600; + color: #2d3748; + margin: 0; + } -.card-title { - font-size: 1.1rem; - font-weight: 600; - color: #333; - margin: 0; - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; -} + .subtitle { + font-size: 12px; + color: #718096; + font-weight: 500; + background: #edf2f7; + padding: 2px 8px; + border-radius: 12px; + } + } -.metric-value { - display: flex; - justify-content: center; - align-items: flex-end; - line-height: 1; -} + .chart-content { + flex: 1; + width: 100%; + min-height: 0; // Essential for flex child overflow -.metric-label { - display: flex; - justify-content: center; - align-items: flex-end; - font-size: 0.9rem; - color: #777; - margin-top: 5px; + .echart-container { + width: 100%; + height: 100%; + } + } } -.online-count { - font-size: 36px; - font-weight: 600; - color: #333; -} - -.total-count { - font-size: 18px; - font-weight: 500; - color: #888; - margin-left: 4px; -} - -.status-details { - font-size: 14px; - color: #d32f2f; - margin: 0; - font-weight: 500; - text-align: center; -} - -.active, -.matrics-icon { - color: darkgreen; -} - -/* Updated CSS for horizontal chart layout */ -.chart-flex-container { - display: flex; - justify-content: space-around; - align-items: center; - height: 100%; - width: 100%; - flex-grow: 1; - min-height: 250px; - /* Ensure chart has height */ -} - -.chart-container { - width: 100%; - height: 100%; - max-width: none; - max-height: none; -} - -/* Adjustments for multiple charts */ -.chart-flex-container .chart-container { - width: 100%; - height: 100%; -} - -/* The original vertical layout for metrics */ -.metrics-container { - display: flex; - flex-direction: column; - align-items: center; - gap: 20px; -} - -/* Container to center content vertically and horizontally */ -.card-body-content { - flex-grow: 1; - display: flex; - justify-content: center; - align-items: center; -} - -/* New CSS for the metrics block */ -.metrics-horizontal-container { - display: flex; - justify-content: center; - align-items: center; - gap: 20px; - width: 100%; -} - -.metric-item { - text-align: center; - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.metric-value { - font-size: 1rem; - font-weight: 500; - color: #333; -} - -.metric-label { - font-size: 0.9rem; - color: #777; - text-transform: uppercase; - margin-top: 5px; -} - -.page-card-1 { - width: 100%; - border-radius: 0; - background-color: inherit; - font-size: 14px !important; - - mat-card-header { - color: #1170cf; +// Responsive breakpoints +@media (max-width: 1400px) { + .dashboard-section .dashboard-grid { + grid-template-columns: repeat(2, 1fr); } } -mat-card-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 4px 10px; -} - -mat-card-title { - font-size: medium; -} - -:host { - --table-bg: transparent; - - .small-table { - background: var(--table-bg); - - .mat-row, - .mat-header-row, - [mat-row], - [mat-header-row] { - height: 36px; - line-height: 32px; - background: var(--table-bg); - - &:hover { - background: var(--table-bg); - } - } - - .mat-cell, - .mat-header-cell, - [mat-cell], - [mat-header-cell] { - padding: 4px 8px; - line-height: 1.2; - background: var(--table-bg); - } +@media (max-width: 900px) { + .dashboard-section .dashboard-grid { + grid-template-columns: 1fr; } } \ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.html (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.html (working copy) @@ -1,61 +1,47 @@ - - - AVX - - -
- - -
- - CPU Usage - Top 5 - -
-
-
-
- - +
+
+

AVX

+
+
+ +
+

CPU Usage

+ Top 5 +
+
+
+
+ - - -
- - Memory Usage - Top 5 - -
-
-
-
- - + +
+

Memory Usage

+ Top 5 +
+
+
+
+ - - -
- - Disk Usage - Top 5 - -
-
-
-
- - + +
+

Disk Usage

+ Top 5 +
+
+
+
+ - - -
- - Connection Status ( {{ deviceStats?.total?.connected }} - /{{ deviceStats?.total?.connected + deviceStats?.total?.disconnected }}) - -
-
-
-
- - -
- - \ No newline at end of file + +
+

Connection Status

+ {{ deviceStats?.total?.connected }}/{{ deviceStats?.total?.connected + + deviceStats?.total?.disconnected }} +
+
+
+
+ +
+
\ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.scss (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.scss (working copy) @@ -1,187 +1,85 @@ -/* dashboard-metric-card.component.css */ -.dashboard-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 12px; - padding: 12px; - height: 100%; - box-sizing: border-box; +.dashboard-section { + margin-bottom: 8px; + + .section-header { + margin-bottom: 4px; + + .section-title { + font-size: 16px; + font-weight: 600; + color: #1a1a1a; + margin: 0; + font-family: 'Inter', 'Roboto', sans-serif; + } + } + + .dashboard-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 12px; + } } .dashboard-card { - width: 100%; - height: 100%; + background: white; border-radius: 12px; - background-color: #fff; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); border: none; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); + padding: 12px; display: flex; flex-direction: column; -} + height: 300px; + transition: transform 0.2s, box-shadow 0.2s; -.card-content-wrapper { - padding: 16px !important; - display: flex; - flex-direction: column; - height: 100%; - width: 100%; - box-sizing: border-box; -} + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + } -.card-header-row { - display: flex; - align-items: center; - gap: 6px; - margin-bottom: 16px; -} + .card-header { + display: flex; + justify-content: space-between; + align-items: baseline; + margin-bottom: 4px; -.metric-icon { - color: #3f51b5; -} + h3 { + font-size: 16px; + font-weight: 600; + color: #2d3748; + margin: 0; + } -.card-title { - font-size: 1.1rem; - font-weight: 600; - color: #333; - margin: 0; - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; -} + .subtitle { + font-size: 12px; + color: #718096; + font-weight: 500; + background: #edf2f7; + padding: 2px 8px; + border-radius: 12px; + } + } -.metric-value { - display: flex; - justify-content: center; - align-items: flex-end; - line-height: 1; -} + .chart-content { + flex: 1; + width: 100%; + min-height: 0; -.metric-label { - display: flex; - justify-content: center; - align-items: flex-end; - font-size: 0.9rem; - color: #777; - margin-top: 5px; + .echart-container { + width: 100%; + height: 100%; + } + } } -.online-count { - font-size: 36px; - font-weight: 600; - color: #333; -} - -.total-count { - font-size: 18px; - font-weight: 500; - color: #888; - margin-left: 4px; -} - -.status-details { - font-size: 14px; - color: #d32f2f; - margin: 0; - font-weight: 500; - text-align: center; -} - -.active, -.matrics-icon { - color: darkgreen; -} - -/* Updated CSS for horizontal chart layout */ -.chart-flex-container { - display: flex; - justify-content: space-around; - align-items: center; - height: 100%; - width: 100%; - flex-grow: 1; - min-height: 250px; - /* Ensure chart has height */ -} - -.chart-container { - width: 100%; - height: 100%; - max-width: none; - max-height: none; -} - -/* Adjustments for multiple charts */ -.chart-flex-container .chart-container { - width: 100%; - height: 100%; -} - -/* The original vertical layout for metrics */ -.metrics-container { - display: flex; - flex-direction: column; - align-items: center; - gap: 20px; -} - -/* Container to center content vertically and horizontally */ -.card-body-content { - flex-grow: 1; - display: flex; - justify-content: center; - align-items: center; -} - -/* New CSS for the metrics block */ -.metrics-horizontal-container { - display: flex; - justify-content: center; - align-items: center; - gap: 20px; - width: 100%; -} - -.metric-item { - text-align: center; - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.metric-value { - font-size: 1rem; - font-weight: 500; - color: #333; -} - -.metric-label { - font-size: 0.9rem; - color: #777; - text-transform: uppercase; - margin-top: 5px; -} - -.page-card-1 { - width: 100%; - border-radius: 0; - background-color: inherit; - font-size: 14px !important; - - mat-card-header { - color: #1170cf; +// Responsive +@media (max-width: 1600px) { + .dashboard-section .dashboard-grid { + grid-template-columns: repeat(2, 1fr); } } -mat-card-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 4px 10px; -} - -mat-card-title { - font-size: medium; +@media (max-width: 900px) { + .dashboard-section .dashboard-grid { + grid-template-columns: 1fr; + } } \ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.html (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.html (working copy) @@ -1,47 +1,36 @@ - - - SSL VPN - - -
- - -
- - Sessions - Top 5 - -
-
-
-
- - +
+
+

SSL VPN

+
+
+ +
+

Sessions

+ Top 5 +
+
+
+
+ - - -
- - Client Throughput - Top 5 - -
-
-
-
- - + +
+

Client Throughput

+ Top 5 +
+
+
+
+ - - -
- - Server Throughput - Top 5 - -
-
-
-
- - -
- - \ No newline at end of file + +
+

Server Throughput

+ Top 5 +
+
+
+
+ +
+
\ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.scss (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.scss (working copy) @@ -1,217 +1,85 @@ -/* dashboard-metric-card.component.css */ -.dashboard-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 12px; - padding: 12px; - height: 100%; - box-sizing: border-box; +.dashboard-section { + margin-bottom: 8px; + + .section-header { + margin-bottom: 4px; + + .section-title { + font-size: 16px; + font-weight: 600; + color: #1a1a1a; + margin: 0; + font-family: 'Inter', 'Roboto', sans-serif; + } + } + + .dashboard-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 12px; + } } .dashboard-card { - width: 100%; - height: 100%; + background: white; border-radius: 12px; - background-color: #fff; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); border: none; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); + padding: 12px; display: flex; flex-direction: column; -} + height: 300px; + transition: transform 0.2s, box-shadow 0.2s; -.card-content-wrapper { - padding: 16px !important; - display: flex; - flex-direction: column; - height: 100%; - width: 100%; - box-sizing: border-box; -} + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + } -.card-header-row { - display: flex; - align-items: center; - gap: 6px; - margin-bottom: 16px; -} + .card-header { + display: flex; + justify-content: space-between; + align-items: baseline; + margin-bottom: 4px; -.metric-icon { - color: #3f51b5; -} + h3 { + font-size: 16px; + font-weight: 600; + color: #2d3748; + margin: 0; + } -.card-title { - font-size: 1.1rem; - font-weight: 600; - color: #333; - margin: 0; - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; -} + .subtitle { + font-size: 12px; + color: #718096; + font-weight: 500; + background: #edf2f7; + padding: 2px 8px; + border-radius: 12px; + } + } -.metric-value { - display: flex; - justify-content: center; - align-items: flex-end; - line-height: 1; -} + .chart-content { + flex: 1; + width: 100%; + min-height: 0; -.metric-label { - display: flex; - justify-content: center; - align-items: flex-end; - font-size: 0.9rem; - color: #777; - margin-top: 5px; + .echart-container { + width: 100%; + height: 100%; + } + } } -.online-count { - font-size: 36px; - font-weight: 600; - color: #333; -} - -.total-count { - font-size: 18px; - font-weight: 500; - color: #888; - margin-left: 4px; -} - -.status-details { - font-size: 14px; - color: #d32f2f; - margin: 0; - font-weight: 500; - text-align: center; -} - -.active, -.matrics-icon { - color: darkgreen; -} - -/* Updated CSS for horizontal chart layout */ -.chart-flex-container { - display: flex; - justify-content: space-around; - align-items: center; - height: 100%; - width: 100%; - flex-grow: 1; - min-height: 250px; - /* Ensure chart has height */ -} - -.chart-container { - width: 100%; - height: 100%; - max-width: none; - max-height: none; -} - -/* Adjustments for multiple charts */ -.chart-flex-container .chart-container { - width: 100%; - height: 100%; -} - -/* The original vertical layout for metrics */ -.metrics-container { - display: flex; - flex-direction: column; - align-items: center; - gap: 20px; -} - -/* Container to center content vertically and horizontally */ -.card-body-content { - flex-grow: 1; - display: flex; - justify-content: center; - align-items: center; -} - -/* New CSS for the metrics block */ -.metrics-horizontal-container { - display: flex; - justify-content: center; - align-items: center; - gap: 20px; - width: 100%; -} - -.metric-item { - text-align: center; - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.metric-value { - font-size: 1rem; - font-weight: 500; - color: #333; -} - -.metric-label { - font-size: 0.9rem; - color: #777; - text-transform: uppercase; - margin-top: 5px; -} - -.page-card-1 { - width: 100%; - border-radius: 0; - background-color: inherit; - font-size: 14px !important; - - mat-card-header { - color: #1170cf; +// Responsive +@media (max-width: 1400px) { + .dashboard-section .dashboard-grid { + grid-template-columns: repeat(2, 1fr); } } -mat-card-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 4px 10px; -} - -mat-card-title { - font-size: medium; -} - -:host { - --table-bg: transparent; - - .small-table { - background: var(--table-bg); - - .mat-row, - .mat-header-row, - [mat-row], - [mat-header-row] { - height: 36px; - line-height: 32px; - background: var(--table-bg); - - &:hover { - background: var(--table-bg); - } - } - - .mat-cell, - .mat-header-cell, - [mat-cell], - [mat-header-cell] { - padding: 4px 8px; - line-height: 1.2; - background: var(--table-bg); - } +@media (max-width: 900px) { + .dashboard-section .dashboard-grid { + grid-template-columns: 1fr; } } \ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-alert/create-event-alert.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-alert/create-event-alert.html (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-alert/create-event-alert.html (working copy) @@ -76,7 +76,7 @@ - + \ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-alert/create-event-alert.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-alert/create-event-alert.scss (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-alert/create-event-alert.scss (working copy) @@ -1,5 +1,5 @@ .create-event-alert-form { - padding: 20px; + padding: 24px; width: 100%; box-sizing: border-box; display: flex; @@ -9,30 +9,52 @@ // Override common-form max-width if it was used, or just set our own max-width: 100%; + // Tweak to match standard density + mat-form-field { + width: 100%; + } + .form-field-wrapper { display: flex; align-items: center; - gap: 15px; - margin-bottom: 20px; + gap: 16px; + margin-bottom: 16px; width: 100%; &.align-start { align-items: flex-start; .form-label { - margin-top: 10px; + margin-top: 14px; // Align label with input text } } .form-label { font-weight: 500; - width: 120px; + width: 100px; // Slightly reduced width text-align: right; flex-shrink: 0; + color: #424242; + font-size: 13px; } mat-form-field { flex-grow: 1; + + // Density adjustment + ::ng-deep .mat-mdc-text-field-wrapper { + height: 40px; // Standard input height + padding-top: 0; + padding-bottom: 0; + display: flex; + align-items: center; + } + + ::ng-deep .mat-mdc-form-field-infix { + padding-top: 8px; + padding-bottom: 8px; + min-height: unset; + } } .send-to-container { @@ -40,15 +62,19 @@ align-items: center; gap: 10px; flex-grow: 1; + + mat-form-field { + flex-grow: 1; + } } } } .dialog-actions { - padding-left: 20px; - padding-bottom: 20px; + padding: 16px 24px; + border-top: 1px solid #e0e0e0; // Separation line button { - min-width: 100px; + min-width: 80px; } } \ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-monitoring-overview/event-monitoring-overview.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-monitoring-overview/event-monitoring-overview.html (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-monitoring-overview/event-monitoring-overview.html (working copy) @@ -1 +1,132 @@ -

event-monitoring-overview works!

+
+ +
+

Event Monitoring

+
+ + + + + + + + +
+
+ + +
+
+
+ + + + +
+
+ {{ stat.value }} + {{ stat.label }} +
+
+
+ + +
+ +
+
+ + Product + + {{ p }} + + + + + Instance + + {{ i }} + + + + + Type + + {{ t }} + + + + + Event + + {{ e }} + + + + +
+ + + + +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
No.{{ i + 1 }}Product{{ element.productName }}Event{{ element.eventName }}Quantity + {{ element.eventQuantity }} + Action + +
+
+
+ +
+

No Events Found

+

Try adjusting your timeframe or filters

+
+
+ + +
+
+
\ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-monitoring-overview/event-monitoring-overview.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-monitoring-overview/event-monitoring-overview.scss (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-monitoring-overview/event-monitoring-overview.scss (working copy) @@ -0,0 +1,273 @@ +@use '@angular/material' as mat; + +.dashboard-container { + padding: 24px; + background-color: #f4f6f8; // Modern light grey background + height: 100%; + overflow-y: auto; + box-sizing: border-box; + font-family: 'Inter', 'Roboto', sans-serif; + display: flex; + flex-direction: column; + gap: 24px; + + .page-header { + display: flex; + justify-content: space-between; + align-items: center; + + .page-title { + font-size: 20px; + font-weight: 600; + color: #1a1a1a; + margin: 0; + font-family: 'Inter', 'Roboto', sans-serif; + } + + // Chromeless Date Picker styling + .date-picker-wrapper { + background: white; + border-radius: 8px; + padding: 0; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); + + ::ng-deep .mat-mdc-form-field-subscript-wrapper { + display: none; + } + + ::ng-deep .mat-mdc-text-field-wrapper { + padding: 0 16px; // Increased breathing room + height: 44px; // Taller for better vertical alignment + display: flex; + align-items: center; + } + + ::ng-deep .mat-mdc-form-field-flex { + height: 44px; + } + + ::ng-deep .mat-mdc-notched-outline { + display: none; + } + + // Hide defaults + } + } + + // KPI Grid + .kpi-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 24px; + + .kpi-card { + background: white; + border-radius: 12px; + padding: 20px; + display: flex; + align-items: center; + gap: 16px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); + border: 1px solid rgba(0, 0, 0, 0.02); + transition: transform 0.2s, box-shadow 0.2s; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + } + + .kpi-icon { + width: 48px; + height: 48px; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + } + + .kpi-content { + display: flex; + flex-direction: column; + + .kpi-value { + font-size: 24px; + font-weight: 700; + color: #2d3748; + line-height: 1.2; + } + + .kpi-label { + font-size: 13px; + color: #718096; + font-weight: 500; + } + } + } + } + + // Main Content Card + .content-card { + background: white; + border-radius: 16px; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); + display: flex; + flex-direction: column; + flex: 1; + overflow: hidden; + border: 1px solid #f0f0f0; + + .toolbar-section { + padding: 20px 24px; + border-bottom: 1px solid #f0f0f0; + display: flex; + align-items: center; + gap: 16px; + flex-wrap: wrap; + + .filters-group { + display: flex; + gap: 16px; // Increased gap for better separation + align-items: center; + flex: 1; + + .filter-dropdown { + width: 160px; + + ::ng-deep .mat-mdc-form-field-subscript-wrapper { + display: none; + } + + ::ng-deep .mat-mdc-text-field-wrapper { + height: 40px; + background-color: #f8fafc; // Subtle background + border-radius: 8px; + padding-top: 0; + padding-bottom: 0; + } + + ::ng-deep .mat-mdc-form-field-flex { + height: 40px; + align-items: center; + } + + ::ng-deep .mat-mdc-notched-outline { + border-color: transparent; + } + + // Cleaner look + } + + .refresh-btn { + border: 1px solid #e2e8f0; + color: #64748b; + width: 40px; + height: 40px; + border-radius: 8px; + + &:hover { + background: #f1f5f9; + color: #3b82f6; + } + } + } + + .spacer { + flex: 1; + } + + .action-btn { + height: 40px; + border-radius: 8px; + padding: 0 20px; + font-weight: 500; + box-shadow: 0 4px 6px rgba(63, 81, 181, 0.2); // Elevation + } + } + + .data-table-wrapper { + flex: 1; + overflow: auto; + + .modern-dashboard-table { + width: 100%; + + th.mat-mdc-header-cell { + background: #f8fafc; + color: #64748b; + font-size: 12px; + text-transform: uppercase; + letter-spacing: 0.05em; + font-weight: 600; + padding: 0 24px; + height: 48px; + border-bottom: 1px solid #e2e8f0; + } + + td.mat-mdc-cell { + padding: 16px 24px; + font-size: 14px; + color: #334155; + border-bottom: 1px solid #f1f5f9; + + &.fw-500 { + font-weight: 500; + color: #1e293b; + } + + .quantity-badge { + background: #eff6ff; + color: #3b82f6; + padding: 4px 10px; + border-radius: 20px; + font-size: 12px; + font-weight: 600; + } + } + + tr.mat-mdc-row:hover { + background-color: #f8fafc; // Subtle hover + } + } + + // Empty State + .empty-state { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 60px 20px; + + .empty-icon-circle { + width: 64px; + height: 64px; + background: #f1f5f9; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + color: #94a3b8; + font-size: 24px; + margin-bottom: 16px; + } + + h3 { + font-size: 16px; + font-weight: 600; + color: #1e293b; + margin: 0 0 8px 0; + } + + p { + color: #64748b; + margin: 0; + font-size: 14px; + } + } + } + + .dashboard-paginator { + border-top: 1px solid #e2e8f0; + } + } +} \ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-monitoring-overview/event-monitoring-overview.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-monitoring-overview/event-monitoring-overview.ts (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/event-monitoring-overview/event-monitoring-overview.ts (working copy) @@ -1,11 +1,105 @@ -import { Component } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { MatTableDataSource } from '@angular/material/table'; +import { MatPaginator } from '@angular/material/paginator'; +import { MatDialog } from '@angular/material/dialog'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { SharedModule } from '../../../shared/shared-module'; +import { CreateEventAlert } from '../event-alert/event-alert'; + +export interface EventLog { + productName: string; + eventName: string; + eventQuantity: number; +} + @Component({ selector: 'app-event-monitoring-overview', - imports: [], + standalone: true, + imports: [CommonModule, SharedModule, ReactiveFormsModule], templateUrl: './event-monitoring-overview.html', styleUrl: './event-monitoring-overview.scss' }) -export class EventMonitoringOverview { +export class EventMonitoringOverview implements OnInit { + displayedColumns: string[] = ['serial', 'productName', 'eventName', 'eventQuantity', 'action']; + dataSource = new MatTableDataSource([]); + @ViewChild(MatPaginator) paginator!: MatPaginator; + + // Form for Date Range + dateRangeForm = new FormGroup({ + start: new FormControl(new Date()), + end: new FormControl(new Date()) + }); + + // Filter Options + timeRanges: string[] = ['1 Hour', '2 Hours', '4 Hours', '6 Hours', '12 Hours', '1 Day', '3 Days', '7 Days']; + selectedTimeRange: string = '6 Hours'; + + products: string[] = ['All Products', 'Device', 'Virtual Service', 'Real Service', 'SSLVPN Service']; + selectedProduct: string = 'All Products'; + + instances: string[] = ['All Instances']; + selectedInstance: string = 'All Instances'; + + types: string[] = ['All Types', 'Maintenance', 'Exception']; + selectedType: string = 'All Types'; + + events: string[] = ['All Events', 'CPU fan malfunction', 'CPU overheating', 'System overheating', 'Power supply failure']; + selectedEvent: string = 'All Events'; + + // KPI Mock Data + kpiStats = [ + { label: 'Total Events', value: '1,248', icon: 'faListCheck', color: '#3f51b5' }, + { label: 'Critical Errors', value: '12', icon: 'faExclamationTriangle', color: '#f44336' }, + { label: 'Warnings', value: '56', icon: 'faBell', color: '#ff9800' }, + { label: 'Systems Active', value: '24', icon: 'faServer', color: '#4caf50' } + ]; + + constructor(private dialog: MatDialog) { } + + ngOnInit() { + // Initialize with empty data + this.dataSource.data = []; + + // Set initial date range (mock logic for '6 Hours') + const end = new Date(); + const start = new Date(end.getTime() - (6 * 60 * 60 * 1000)); + this.dateRangeForm.setValue({ start, end }); + } + + ngAfterViewInit() { + this.dataSource.paginator = this.paginator; + } + + selectTimeRange(range: string) { + this.selectedTimeRange = range; + // Update logic for date range calculation would go here + } + + openAddEventAlert() { + const dialogRef = this.dialog.open(CreateEventAlert, { + width: '600px', + disableClose: true, + autoFocus: false + }); + + dialogRef.afterClosed().subscribe(result => { + if (result) { + console.log('Dialog result:', result); + } + }); + } + + search() { + console.log('Searching with filters:', { + timeRange: this.selectedTimeRange, + product: this.selectedProduct, + instance: this.selectedInstance, + type: this.selectedType, + event: this.selectedEvent + }); + // Implement search/fetch logic here. keeping empty for now to match screenshot state. + } } 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 2819) +++ /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) @@ -1,278 +1,133 @@ - - - - - - Monitoring Devices - {{ deviceName }} +
+ +
+ + + Back + +
+

{{ deviceName }} (IP : {{ deviceIp }})

+
+
+ + + {{ currentFrom }} to {{ currentTo }} ({{ currentInterval }}s) - - - -
- Current Range: {{ currentFrom }} - to {{ currentTo }} (Refresh: {{ currentInterval }}) -
- - - -
- - - - -
- - CPU Usage (%) - -
-
-
-
- - - - - - -
- - Memory Usage(%) - -
-
-
-
- - - - - - -
- - Disk Usage(%) - -
-
-
-
- - - - - - -
- - Network Throughput - -
-
-
-
- - - - - - -
- - Open SSL Connections - -
-
-
-
- - - - - - -
- - Number of connections per second - -
-
-
-
- - - - - - -
- - Number of requests per second - -
-
-
-
- - - - - - -
- - SSL Core Utilization(%) - -
-
-
-
- - - - -
- - - - -
- - - - -
- - HTTP Status Code Ratio - -
-
-
-
- - - - - - -
- - Number Of Virtual Service Visits - -
-
-
-
- - - - - - -
- - Virtual Service Response Time - -
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - +
+
+ + +
+ + + +
+ +
+
+

CPU Usage

+ % +
+
+
+ + +
+
+

Memory Usage

+ % +
+
+
+ + +
+
+

Disk Usage

+ % +
+
+
+ + +
+
+

Network Throughput

+ MB/s +
+
+
+ + +
+
+

Connections

+ /sec +
+
+
+ + +
+
+

Requests

+ /sec +
+
+
+ + +
+
+

SSL Connections

+ Count +
+
+
+ + +
+
+

SSL Core Utilization

+ % +
+
+
+
+ + + + + +
+ +
+
+

HTTP Status Code Ratio

+
+
+
+ + +
+
+

Virtual Service Visits

+
+
+
+ + +
+
+

Response Time

+ ms +
+
+
+
+ + + +
+
\ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.scss (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-device-details/resource-monitoring-device-details.scss (working copy) @@ -1,170 +1,189 @@ -.page-card-1 { - width: 100%; - border-radius: 0; - background-color: inherit; - font-size: 14px !important; +.device-details-container { + padding: 8px; + background-color: #fafafa; + height: 100%; + overflow: hidden; + box-sizing: border-box; + font-family: 'Roboto', sans-serif; + display: flex; + flex-direction: column; - mat-card-header { - color: #1170cf; - } -} + .details-header { + display: grid; + grid-template-columns: 1fr auto 1fr; + grid-template-rows: auto auto; + align-items: center; + padding: 0 4px; + /* Minimal vertical padding */ + gap: 0px; + /* Minimal gap */ + margin-bottom: 4px; + border-bottom: 1px solid #e0e0e0; -mat-card-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 4px 10px; -} + .back-link { + grid-column: 1; + grid-row: 1; + justify-self: start; + display: flex; + align-items: center; + gap: 6px; + color: #757575; + text-decoration: none; + font-size: 14px; + font-weight: 500; + cursor: pointer; + height: 32px; + /* Fixed height for consistency */ -mat-card-title { - font-size: medium; -} + &:hover { + color: #1976d2; + } + } -.dashboard-card { - width: 100%; - height: 100%; - border-radius: 8px; - background-color: inherit; -} + .header-title { + grid-column: 2; + grid-row: 1; + justify-self: center; + display: flex; + align-items: center; + height: 32px; + /* Match back link height */ -.card-content-wrapper { - margin-top: 2px; - padding: 0 !important; - display: flex; - flex-direction: column; - height: 100%; - width: 100%; -} + h1 { + font-size: 15px; + /* Slightly reduced */ + font-weight: 500; + margin: 0; + color: #333; + white-space: nowrap; + } -.card-header-row { - display: flex; - align-items: center; - gap: 6px; - margin-bottom: 8px; - padding: 0 8px; -} + .device-ip { + font-size: 13px; + color: #757575; + font-weight: 400; + margin-left: 4px; + } + } -.metric-icon { - color: #3f51b5; -} + .time-filter { + grid-column: 3; + grid-row: 2; + justify-self: end; + margin-bottom: 4px; + /* Slight buffer from bottom border */ -.card-title { - font-size: 18px; - font-weight: 500; - color: #555; - margin: 0; - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; -} + .filter-link { + display: flex; + align-items: center; + gap: 6px; + padding: 2px 8px; + /* Compact padding */ + background-color: white; + border: 1px solid #e0e0e0; + border-radius: 4px; + color: #555; + font-size: 11px; + cursor: pointer; + text-decoration: none; + height: 24px; + /* Fixed compact height */ -.metric-value { - display: flex; - justify-content: center; - align-items: flex-end; - line-height: 1; -} + &:hover { + background-color: #f5f5f5; + color: #1976d2; + } + } + } + } -.metric-label { - display: flex; - justify-content: center; - align-items: flex-end; - font-size: 0.9rem; - color: #777; - margin-top: 5px; + .details-content { + flex: 1; + overflow-y: auto; + padding-right: 4px; // Avoid scrollbar overlap + } } -.online-count { - font-size: 36px; - font-weight: 600; - color: #333; -} +.custom-tab-group { + height: 100%; -.total-count { - font-size: 18px; - font-weight: 500; - color: #888; - margin-left: 4px; -} + ::ng-deep { + .mat-mdc-tab-header { + --mdc-tab-indicator-active-indicator-height: 2px; + --mat-tab-header-pagination-icon-color: #000; + height: 36px; // Reduced height + } -.status-details { - font-size: 14px; - color: #d32f2f; - margin: 0; - font-weight: 500; - text-align: center; -} + .mdc-tab-indicator__content--underline { + border-top-width: 3px !important; + } -.active, -.matrics-icon { - color: darkgreen; -} + .mdc-tab { + height: 36px !important; // Force height + min-height: 36px !important; // Force min-height + padding: 0 16px !important; -/* Updated CSS for horizontal chart layout */ -.chart-flex-container { - display: flex; - justify-content: space-around; - align-items: center; - height: 100%; - width: 100%; - flex-grow: 1; -} + .mdc-tab__text-label { + font-size: 13px !important; + } + } -.chart-container { - width: 100%; - height: 100%; - max-width: none; - max-height: none; -} + // Fallback for older Angular Material versions if needed + .mat-tab-header { + height: 36px !important; + } -/* Adjustments for multiple charts */ -.chart-flex-container .chart-container { - width: 100%; - height: 100%; + .mat-tab-label { + height: 36px !important; + min-height: 36px !important; + font-size: 13px !important; + } + } } -mat-grid-list { - height: 100%; - width: 100%; +.charts-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); // Slightly wider min-width + gap: 8px; + padding: 8px 0; } -/* The original vertical layout for metrics */ -.metrics-container { +.chart-card { + background: white; + border-radius: 8px; + border: 1px solid #e0e0e0; + padding: 12px; display: flex; flex-direction: column; - align-items: center; - gap: 20px; -} + height: 260px; // Compact height + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); -/* Container to center content vertically and horizontally */ -.card-body-content { - flex-grow: 1; - display: flex; - justify-content: center; - align-items: center; -} + .chart-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; -/* New CSS for the metrics block */ -.metrics-horizontal-container { - display: flex; - justify-content: center; - align-items: center; - gap: 20px; - width: 100%; -} + h3 { + font-size: 14px; + font-weight: 600; + color: #424242; + margin: 0; + } -.metric-item { - text-align: center; - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} + .unit { + font-size: 11px; + color: #9e9e9e; + font-weight: 500; + background: #f5f5f5; + padding: 2px 6px; + border-radius: 4px; + } + } -.metric-value { - font-size: 1rem; - font-weight: 500; - color: #333; -} + .chart-instance { + flex: 1; + width: 100%; + height: 100%; + } +} \ No newline at end of file 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 2819) +++ /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,15 +1,17 @@ -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 {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 {OpenSearch} from "../../../services/open-search"; -import {UtilsService} from "../../../services/utils-service"; +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 { 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 { OpenSearch } from "../../../services/open-search"; +import { UtilsService } from "../../../services/utils-service"; +import { graphic } from 'echarts'; // Import graphic for gradients + @Component({ selector: 'app-resource-monitoring-device-details', imports: [ @@ -76,7 +78,7 @@ } navigateMonitoringDevices() { - this._router.navigate(['/monitoring/resources'], {state: {}}); + this._router.navigate(['/monitoring/resources'], { state: {} }); } onTabChange($event: any) { @@ -158,45 +160,36 @@ next: (result: any) => { if (payload?.metric_name === 'cpu_usage') { 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); + this.cpuChartOptions = cpu_data_formatted.length ? this.getAreaChartOptions('CPU Usage', cpu_data_formatted, '#2196f3', '#e3f2fd', '%') : this.getNoDataChartOptions(); } else if (payload?.metric_name === 'memory_usage') { 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); + this.memoryChartOptions = memory_data_formatted.length ? this.getAreaChartOptions('Memory Usage', memory_data_formatted, '#9c27b0', '#f3e5f5', '%') : this.getNoDataChartOptions(); } else if (payload?.metric_name === 'disk_usage') { 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); + this.diskUsageChartOptions = disk_data_formatted.length ? this.getAreaChartOptions('Disk Usage', disk_data_formatted, '#ff9800', '#fff3e0', '%') : this.getNoDataChartOptions(); } else if (payload?.metric_name === 'network_throughput') { 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); + + if (sent_data_formatted.length || received_data_formatted.length) { + this.throughputChartOptions = this.getMultiSeriesAreaChartOptions([ + { name: 'Received', data: received_data_formatted, colorStart: '#00bfa5', colorEnd: '#e0f2f1' }, + { name: 'Sent', data: sent_data_formatted, colorStart: '#2979ff', colorEnd: '#e3f2fd' } + ], 'MB/s'); + } else { + this.throughputChartOptions = this.getNoDataChartOptions(); + } + } else if (payload?.metric_name === 'ssl_connections') { 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); + this.sslConnectionsChartOptions = data_formatted.length ? this.getAreaChartOptions('SSL Connections', data_formatted, '#00bcd4', '#e0f7fa') : this.getNoDataChartOptions(); } else if (payload?.metric_name === 'connections') { const data_formatted: any = result?.data.map((d: any) => [d.ts, d.connection]); - this.connectionsChartOptions = this._chartOptions.plotSingleLineChartOptions({ - label: 'Connections', - unit: '#' - }, data_formatted); + this.connectionsChartOptions = data_formatted.length ? this.getAreaChartOptions('Connections/Sec', data_formatted, '#4caf50', '#e8f5e9') : this.getNoDataChartOptions(); } else if (payload?.metric_name === 'requests') { const data_formatted: any = result?.data.map((d: any) => [d.ts, d.requests]); - this.requestsChartOptions = this._chartOptions.plotSingleLineChartOptions({ - label: 'Requests', - unit: '#' - }, data_formatted); + this.requestsChartOptions = data_formatted.length ? this.getAreaChartOptions('Requests/Sec', data_formatted, '#607d8b', '#eceff1') : this.getNoDataChartOptions(); } else if (payload?.metric_name === 'ssl_core_utilization') { const ae_core_formatted = result?.data .filter((d: any) => d.ssl_ae_core !== null) @@ -204,18 +197,214 @@ 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 = this._chartOptions.plotDoubleLineChartOptions({ - label: ['AE Core', 'SE Core'], - unit: 'Percentage' - }, ae_core_formatted, se_core_formatted) + + if (ae_core_formatted.length || se_core_formatted.length) { + this.sslCoreChartOptions = this.getMultiSeriesAreaChartOptions([ + { name: 'AE Core', data: ae_core_formatted, colorStart: '#ff4081', colorEnd: '#fce4ec' }, + { name: 'SE Core', data: se_core_formatted, colorStart: '#7c4dff', colorEnd: '#ede7f6' } + ], '%'); + } else { + this.sslCoreChartOptions = this.getNoDataChartOptions(); + } } }, error: (error: any) => { console.log(error); + // Assign no data options to related chart type if possible, but identifying which chart failed is tricky inside error block + // actually we can capture payload outside. + if (payload?.metric_name === 'cpu_usage') this.cpuChartOptions = this.getNoDataChartOptions(); + if (payload?.metric_name === 'memory_usage') this.memoryChartOptions = this.getNoDataChartOptions(); + if (payload?.metric_name === 'disk_usage') this.diskUsageChartOptions = this.getNoDataChartOptions(); + if (payload?.metric_name === 'network_throughput') this.throughputChartOptions = this.getNoDataChartOptions(); + if (payload?.metric_name === 'ssl_connections') this.sslConnectionsChartOptions = this.getNoDataChartOptions(); + if (payload?.metric_name === 'connections') this.connectionsChartOptions = this.getNoDataChartOptions(); + if (payload?.metric_name === 'requests') this.requestsChartOptions = this.getNoDataChartOptions(); + if (payload?.metric_name === 'ssl_core_utilization') this.sslCoreChartOptions = this.getNoDataChartOptions(); } }); } + getNoDataChartOptions(): EChartsOption { + return { + title: { + show: false + }, + graphic: { + elements: [ + { + type: 'text', + left: 'center', + top: 'middle', + style: { + text: 'No Data Available', + fontSize: 14, + fill: '#bdbdbd' + } + } + ] + }, + xAxis: { show: false }, + yAxis: { show: false }, + grid: { show: false } + }; + } + + getAreaChartOptions(title: string, data: any[], colorStart: string, colorEnd: string, unit: string = ''): EChartsOption { + return { + tooltip: { + trigger: 'axis', + formatter: (params: any) => { + let tooltip = `
${params[0].axisValueLabel}
`; + params.forEach((item: any) => { + let val = item.value[1]; + try { val = Number(val).toFixed(2); } catch (e) { } + tooltip += `
+ + ${item.seriesName}: ${val} ${unit}
`; + }); + return tooltip; + }, + backgroundColor: 'rgba(255, 255, 255, 0.95)', + borderColor: '#eee', + borderWidth: 1, + textStyle: { color: '#333' }, + padding: [8, 12] + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + top: '10%', + containLabel: true + }, + xAxis: { + type: 'time', + boundaryGap: ['0%', '0%'], + axisLine: { show: false }, + axisTick: { show: false }, + splitLine: { show: false }, + axisLabel: { color: '#999', fontSize: 11 } + }, + yAxis: { + type: 'value', + splitLine: { + lineStyle: { + type: 'dashed', + color: '#f0f0f0' + } + }, + axisLabel: { color: '#999', fontSize: 11 } + }, + series: [ + { + name: title, + type: 'line', + smooth: true, + symbol: 'none', + itemStyle: { + color: colorStart + }, + lineStyle: { + width: 2.5, + color: colorStart + }, + areaStyle: { + color: new graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: colorStart }, + { offset: 1, color: colorEnd } + ]) + }, + data: data + } + ] + }; + } + + getMultiSeriesAreaChartOptions(seriesData: { name: string, data: any[], colorStart: string, colorEnd: string }[], unit: string = ''): EChartsOption { + const series = seriesData.map(s => ({ + name: s.name, + type: 'line' as const, + smooth: true, + symbol: 'none', + itemStyle: { + color: s.colorStart + }, + lineStyle: { + width: 2.5, + color: s.colorStart + }, + areaStyle: { + opacity: 0.6, // Slight transparency for stacking visibility + color: new graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: s.colorStart }, + { offset: 1, color: s.colorEnd } + ]) + }, + data: s.data + })); + + return { + tooltip: { + trigger: 'axis', + formatter: (params: any) => { + let tooltip = `
${params[0].axisValueLabel}
`; + params.forEach((item: any) => { + let color = item.color; + if (typeof item.color === 'object' && item.color.colorStops) { + color = item.color.colorStops[0].color; + } + let val = item.value[1]; + try { val = Number(val).toFixed(2); } catch (e) { } + tooltip += `
+ + ${item.seriesName}: ${val} ${unit}
`; + }); + return tooltip; + }, + backgroundColor: 'rgba(255, 255, 255, 0.95)', + borderColor: '#eee', + borderWidth: 1, + textStyle: { color: '#333' }, + padding: [8, 12] + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + top: '15%', // Space for legend + containLabel: true + }, + legend: { + data: seriesData.map(s => s.name), + top: 0, + right: 10, + itemWidth: 10, + itemHeight: 10, + icon: 'circle', + textStyle: { fontSize: 11, color: '#666' } + }, + xAxis: { + type: 'time', + boundaryGap: ['0%', '0%'], + axisLine: { show: false }, + axisTick: { show: false }, + splitLine: { show: false }, + axisLabel: { color: '#999', fontSize: 11 } + }, + yAxis: { + type: 'value', + splitLine: { + lineStyle: { + type: 'dashed', + color: '#f0f0f0' + } + }, + axisLabel: { color: '#999', fontSize: 11 } + }, + series: series + }; + } + getAuditMonitoringMetrics() { // ToDo: Add additional audit monitoring graphs using the RTT let payload: any = { @@ -256,17 +445,22 @@ this._openSearch.queryOSLogs(payload).pipe(take(1)).subscribe({ next: (result: any) => { let data = result?.aggregations?.http_status_code_counts.buckets; - const data_formatted: { value: any; name: string }[] = []; - data.forEach((d: any) => { - data_formatted.push({ - value: d.doc_count, - name: `Status Code - ${d.key}` + if (data && data.length > 0) { + const data_formatted: { value: any; name: string }[] = []; + data.forEach((d: any) => { + data_formatted.push({ + value: d.doc_count, + name: `Status Code - ${d.key}` + }) }) - }) - this.httpStatusRatioChartOptions = this._chartOptions.distributionChartOptions('HTTP Status Codes', data_formatted); + this.httpStatusRatioChartOptions = this._chartOptions.distributionChartOptions('HTTP Status Codes', data_formatted); + } else { + this.httpStatusRatioChartOptions = this.getNoDataChartOptions(); + } }, error: (error: any) => { console.log(error); + this.httpStatusRatioChartOptions = this.getNoDataChartOptions(); } }); @@ -313,14 +507,19 @@ this._openSearch.queryOSLogs(payload).pipe(take(1)).subscribe({ next: (result: any) => { let data = result?.aggregations?.visits_over_time.buckets; - const data_formatted: any = data.map((d: any) => [d.key, d.doc_count]); - this.vSVisitsChartOptions = this._chartOptions.plotSingleLineChartOptions({ - label: 'Number of VS Visits', - unit: 'Percentage' - }, data_formatted); + if (data && data.length > 0) { + const data_formatted: any = data.map((d: any) => [d.key, d.doc_count]); + this.vSVisitsChartOptions = this._chartOptions.plotSingleLineChartOptions({ + label: 'Number of VS Visits', + unit: 'Percentage' + }, data_formatted); + } else { + this.vSVisitsChartOptions = this.getNoDataChartOptions(); + } }, error: (error: any) => { console.log(error); + this.vSVisitsChartOptions = this.getNoDataChartOptions(); } }); @@ -384,21 +583,28 @@ this._openSearch.queryOSLogs(payload).pipe(take(1)).subscribe({ next: (result: any) => { let data = result?.aggregations?.response_time_over_time.buckets; - const data_formatted: any = this._utils.formatResponseTimePercentiles(data, 'response_time_percentiles') - this.vSRespTimeChartOptions = this._chartOptions.plotTripleLineChartOptions({ - label: ['P50 Response Time', 'P95 Response Time', 'P99 Response Time'], - unit: 'Milliseconds (ms)' - }, [data_formatted?.p50_formatted, data_formatted?.p95_formatted, data_formatted?.p99_formatted]); + if (data && data.length > 0) { + const data_formatted: any = this._utils.formatResponseTimePercentiles(data, 'response_time_percentiles') + this.vSRespTimeChartOptions = this._chartOptions.plotTripleLineChartOptions({ + label: ['P50 Response Time', 'P95 Response Time', 'P99 Response Time'], + unit: 'Milliseconds (ms)' + }, [data_formatted?.p50_formatted, data_formatted?.p95_formatted, data_formatted?.p99_formatted]); + } else { + this.vSRespTimeChartOptions = this.getNoDataChartOptions(); + } }, error: (error: any) => { console.log(error); + this.vSRespTimeChartOptions = this.getNoDataChartOptions(); } }); } openTimeFilterDialog(): void { const dialogRef = this._dialog.open(TimeFilter, { - width: '600px', + width: 'auto', + maxWidth: '95vw', + panelClass: 'custom-dialog-container', data: { initialFrom: this.currentFrom, initialTo: this.currentTo, @@ -419,3 +625,4 @@ }); } } + 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 2819) +++ /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) @@ -1,89 +1,88 @@ - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + +
ID {{ i | globalSerial }}Device Name - {{ element?.name }} - Device Group{{ element?.device_group }}Device Type{{ element?.type }}IP Address{{ element?.ip }}Monitor Status - @if (element?.snmp_general?.snmp_enable) { - - - - } @else { - - - - } - Statistics -
-
- CPU: -
- {{element?.cpu}} % -
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - -
ID {{ i | globalSerial }}Device Name + {{ element?.name }} + Device Group{{ element?.device_group }}Device Type{{ element?.type }}IP Address{{ element?.ip }}Monitor Status + @if (element?.snmp_general?.snmp_enable) { + + + + } @else { + + + + } + Statistics +
+
+ CPU: +
+ {{element?.cpu}} % +
-
- System: -
- {{element?.memory}} % +
+ System: +
+ {{element?.memory}} % +
-
- Network: -
- {{element?.net_mem}} % -
+
+ Network: +
+ {{element?.net_mem}} %
-
Action -
- -
-
No results found.
- - -
+
+
Action +
+ +
+
No results found.
- - + + +
+
\ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/resource-monitoring-devices.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/resource-monitoring-devices.scss (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/resource-monitoring-devices.scss (working copy) @@ -1,47 +1,104 @@ -.page-card-1 { - width: 100%; - border-radius: 0; - background-color: inherit; - font-size: 14px !important; +.devices-container { + padding: 12px; + background-color: #fafafa; + height: 100%; + overflow: hidden; + box-sizing: border-box; + font-family: 'Roboto', sans-serif; + display: flex; + flex-direction: column; - mat-card-header { - color: #1170cf; - } -} + // Table Container + .table-container { + border-radius: 8px; + overflow: hidden; + border: 1px solid #e0e0e0; + background: white; + flex: 1; + display: flex; + flex-direction: column; + height: 100%; -mat-card-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 4px 10px; -} + .table-scroll-area { + flex: 1; + overflow: auto; + width: 100%; + } -mat-card-title { - font-size: medium; -} + .modern-table { + width: 100%; -.stats-container { - display: flex; - flex-direction: column; - gap: 4px; -} + th.mat-mdc-header-cell { + background-color: #f5f5f5; + color: #424242; + font-weight: 600; + font-size: 13px; + padding: 0 16px; + border-bottom: 1px solid #e0e0e0; + } -.stat-item { - display: flex; - align-items: center; - gap: 6px; -} + td.mat-mdc-cell { + padding: 12px 16px; + font-size: 13px; + color: #333; + border-bottom: 1px solid #f0f0f0; -.mini-chart { - width: 80px; - height: 14px; - line-height: 0; - display: flex; - align-items: center; -} + &.no-data-cell { + text-align: center; + padding: 48px; + color: #757575; + background-color: white; + } + } -.progress-number { - font-size: 12px; - min-width: 30px; - text-align: right; -} + tr.mat-mdc-row:hover { + background-color: #f9f9f9; + } + + // Links + .details-page-link, + .a-link { + color: #1976d2; + cursor: pointer; + text-decoration: none; + font-weight: 500; + + &:hover { + text-decoration: underline; + } + } + } + } + + mat-paginator { + background: transparent; + border-top: 1px solid #e0e0e0; + } + + // Stats & Charts (Preserved) + .stats-container { + display: flex; + flex-direction: column; + gap: 4px; + } + + .stat-item { + display: flex; + align-items: center; + gap: 6px; + } + + .mini-chart { + width: 80px; + height: 14px; + line-height: 0; + display: flex; + align-items: center; + } + + .progress-number { + font-size: 12px; + min-width: 30px; + text-align: right; + } +} \ No newline at end of file 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 2819) +++ /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) @@ -1,14 +1,14 @@ -import {Component, inject, OnInit, ViewChild} from '@angular/core'; -import {SharedModule} from '../../../shared/shared-module'; -import {take} from 'rxjs/operators'; -import {MatTableDataSource} from '@angular/material/table'; -import {DeviceService} from '../../../services/device-service'; -import {NotificationService} from '../../../services/notification'; -import {MatPaginator} from '@angular/material/paginator'; -import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe'; -import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog'; -import {UtilsService} from '../../../services/utils-service'; -import {Router} from '@angular/router'; +import { Component, inject, OnInit, ViewChild, AfterViewInit } from '@angular/core'; +import { SharedModule } from '../../../shared/shared-module'; +import { take } from 'rxjs/operators'; +import { MatTableDataSource } from '@angular/material/table'; +import { DeviceService } from '../../../services/device-service'; +import { NotificationService } from '../../../services/notification'; +import { MatPaginator } from '@angular/material/paginator'; +import { GlobalSerialPipe } from '../../../pipes/global-serial-pipe'; +import { MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog'; +import { UtilsService } from '../../../services/utils-service'; +import { Router } from '@angular/router'; @Component({ selector: 'app-resource-monitoring-devices', @@ -16,7 +16,7 @@ templateUrl: './resource-monitoring-devices.html', styleUrl: './resource-monitoring-devices.scss' }) -export class ResourceMonitoringDevices implements OnInit { +export class ResourceMonitoringDevices implements AfterViewInit { devices: any = []; deviceMetrics: any = []; @@ -33,10 +33,8 @@ ) { } - ngOnInit() { - setTimeout(() => { - this.getDeviceMonitoringMetrics(); - }) + ngAfterViewInit() { + this.getDeviceMonitoringMetrics(); } getDeviceGroups(): void { @@ -87,34 +85,44 @@ getMiniBarOptions(value: number) { return { - grid: {left: 0, right: 0, top: 0, bottom: 0}, - - // Y-axis is now the category axis - yAxis: { - type: 'category', - show: false, - data: [''], - axisLine: {show: false} - }, - - // X-axis is now the value axis + grid: { left: 0, right: 0, top: 0, bottom: 0 }, xAxis: { type: 'value', - show: false, min: 0, max: 100, - splitLine: {show: false} + show: false }, - + yAxis: { + type: 'category', + data: [''], + show: false + }, series: [ { + // Background Track type: 'bar', - data: [value], - barWidth: 10, // Set the fixed height of the bar in pixels + data: [100], + barWidth: 8, barGap: '-100%', + z: 1, itemStyle: { - color: value > 80 ? '#e53935' : value > 50 ? '#fb8c00' : '#43a047' - } + color: '#eceff1', + borderRadius: [4, 4, 4, 4] + }, + animation: false + }, + { + // Foreground Value + type: 'bar', + data: [value], + barWidth: 8, + z: 2, + itemStyle: { + color: value > 80 ? '#ef5350' : value > 50 ? '#ffa726' : '#66bb6a', + borderRadius: [4, 4, 4, 4] + }, + animationEasing: 'cubicOut', + animationDuration: 800 } ] }; @@ -122,7 +130,7 @@ goToDetails(_device: any) { - this._router.navigate(['/monitoring/resources/devices', _device.name, _device?.ip], {state: {}}); + this._router.navigate(['/monitoring/resources/devices', _device.name, _device?.ip], { state: {} }); } dialog = inject(MatDialog); @@ -148,6 +156,10 @@ dialogRef.afterClosed().subscribe(isAdded => { }) } + + trackById(index: number, item: any): any { + return item.ip; + } } @Component({ Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/show-device-info.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/show-device-info.html (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-devices/show-device-info.html (working copy) @@ -12,11 +12,8 @@ - - - + \ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb-details/resource-monitoring-llb-details.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb-details/resource-monitoring-llb-details.html (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb-details/resource-monitoring-llb-details.html (working copy) @@ -1,80 +1,58 @@ - - - - - Monitoring Devices - {{ linkName }} +
+ + + Back + +
+

Monitoring Devices - {{ linkName }} (IP : {{ deviceIp }})

+
+
+ + + {{ currentFrom }} to {{ currentTo }} ({{ currentInterval }}s) - - +
+
-
- Current Range: {{ currentFrom }} - to {{ currentTo }} (Refresh: {{ currentInterval }}) -
- - - - -
- - Network Throughput - -
-
-
-
- - - - - - -
- - Bandwidth Usage - -
-
-
-
- - - - - - -
- - Connections - -
-
-
-
- - - - - - -
- - Hits - -
-
-
-
- - - - +
+ +
+
+

Network Throughput

+
+
+
+ + +
+
+

Bandwidth Usage

+
+
+
+ + +
+
+

Connections

+
+
+
+ + +
+
+

Hits

+
+
+
+
- + \ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb-details/resource-monitoring-llb-details.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb-details/resource-monitoring-llb-details.scss (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb-details/resource-monitoring-llb-details.scss (working copy) @@ -9,13 +9,100 @@ } } -mat-card-header { - display: flex; - justify-content: space-between; +.details-header { + display: grid; + grid-template-columns: 1fr auto 1fr; + grid-template-rows: auto auto; align-items: center; - padding: 4px 10px; + padding: 0 4px; + /* Minimal vertical padding */ + gap: 0px; + /* Minimal gap */ + margin-bottom: 4px; + border-bottom: 1px solid #e0e0e0; + + .back-link { + grid-column: 1; + grid-row: 1; + justify-self: start; + display: flex; + align-items: center; + gap: 6px; + color: #757575; + text-decoration: none; + font-size: 14px; + font-weight: 500; + cursor: pointer; + height: 32px; + /* Fixed height for consistency */ + + &:hover { + color: #1976d2; + } + } + + .header-title { + grid-column: 2; + grid-row: 1; + justify-self: center; + display: flex; + align-items: center; + height: 32px; + /* Match back link height */ + + h1 { + font-size: 15px; + /* Slightly reduced */ + font-weight: 500; + margin: 0; + color: #333; + white-space: nowrap; + } + + .device-ip { + font-size: 13px; + color: #757575; + font-weight: 400; + margin-left: 4px; + } + } + + .time-filter { + grid-column: 3; + grid-row: 2; + justify-self: end; + margin-bottom: 4px; + /* Slight buffer from bottom border */ + + .filter-link { + display: flex; + align-items: center; + gap: 6px; + padding: 2px 8px; + /* Compact padding */ + background-color: white; + border: 1px solid #e0e0e0; + border-radius: 4px; + color: #555; + font-size: 11px; + cursor: pointer; + text-decoration: none; + height: 24px; + /* Fixed compact height */ + + &:hover { + background-color: #f5f5f5; + color: #1976d2; + } + } + } } +.button-container.time-filter { + margin: 5px 0; + font-size: 12px; +} + mat-card-title { font-size: medium; } @@ -168,3 +255,55 @@ font-weight: 500; color: #333; } + +/* Grid Layout for Charts */ +.charts-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); // 3 Columns + gap: 20px; + padding: 20px; +} + +.chart-card { + background: white; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + padding: 10px; + display: flex; + flex-direction: column; + height: 350px; + border: 1px solid #e0e0e0; + + .chart-header { + margin-bottom: 5px; + border-bottom: 1px solid #f0f0f0; + padding-bottom: 5px; + + h3 { + margin: 0; + font-size: 14px; + font-weight: 600; + color: #333; + } + } + + .chart-instance { + flex: 1; + width: 100%; + height: 100%; + min-height: 0; // Essential for nested flex/grid scrolling + } +} + +/* Responsive Adjustments */ +@media (max-width: 1200px) { + .charts-grid { + grid-template-columns: repeat(2, 1fr); // 2 Columns on smaller screens + } +} + +@media (max-width: 768px) { + .charts-grid { + grid-template-columns: 1fr; // 1 Column on mobile + } +} \ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb-details/resource-monitoring-llb-details.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb-details/resource-monitoring-llb-details.ts (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb-details/resource-monitoring-llb-details.ts (working copy) @@ -1,13 +1,13 @@ -import {Component, DestroyRef, inject, OnInit} from '@angular/core'; -import {ActivatedRoute, Router} from '@angular/router'; -import {SharedModule} from '../../../shared/shared-module'; -import {TimeFilter, TimeRange} from '../../common/time-filter/time-filter'; -import {MatDialog} from '@angular/material/dialog'; -import {EChartsOption} from 'echarts'; -import {take} from 'rxjs/operators'; -import {DeviceService} from '../../../services/device-service'; -import {NotificationService} from '../../../services/notification'; -import {ChartOptions} from '../../../services/chart-options'; +import { Component, DestroyRef, inject, OnInit } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { SharedModule } from '../../../shared/shared-module'; +import { TimeFilter, TimeRange } from '../../common/time-filter/time-filter'; +import { MatDialog } from '@angular/material/dialog'; +import { EChartsOption } from 'echarts'; +import { take } from 'rxjs/operators'; +import { DeviceService } from '../../../services/device-service'; +import { NotificationService } from '../../../services/notification'; +import { ChartOptions } from '../../../services/chart-options'; @Component({ selector: 'app-resource-monitoring-llb-details', @@ -47,11 +47,21 @@ ngOnInit(): void { this.deviceIp = this._route.snapshot.paramMap.get('deviceIp') || ''; this.linkName = this._route.snapshot.paramMap.get('linkName') || ''; + + this.initializeCharts(); this.getBasicMonitoringMetrics(); } + initializeCharts() { + const noData = this._chartOptions.getNoDataChartOptions(); + this.throughputChartOptions = noData; + this.bandwidthChartOptions = noData; + this.connectionsChartOptions = noData; + this.hitsChartOptions = noData; + } + getBasicMonitoringMetrics(): void { - let payload = {agent_host: this.deviceIp, stat_name: 'historical_data', link_name: this.linkName, from: this.currentFrom, to: this.currentTo}; + let payload = { agent_host: this.deviceIp, stat_name: 'historical_data', link_name: this.linkName, from: this.currentFrom, to: this.currentTo }; this._device.getLLBMonitoringMetrics(payload) .pipe(take(1)) .subscribe({ @@ -65,9 +75,9 @@ const usage_data_formatted: any = data.map((d: any) => [d.ts, d.avg_link_usage / factor]); this.throughputChartOptions = this._chartOptions.historicalThroughputChartOptions(sent_data_formatted, received_data_formatted) - this.hitsChartOptions = this._chartOptions.plotSingleLineChartOptions({label: 'Hits', unit: '#'}, hits_data_formatted); - this.connectionsChartOptions = this._chartOptions.plotSingleLineChartOptions({label: 'Connections', unit: '#'}, connections_data_formatted); - this.bandwidthChartOptions = this._chartOptions.plotSingleLineChartOptions({label: 'Usage (Mbps)', unit: '#'}, usage_data_formatted); + this.hitsChartOptions = this._chartOptions.plotSingleLineChartOptions({ label: 'Hits', unit: '#' }, hits_data_formatted); + this.connectionsChartOptions = this._chartOptions.plotSingleLineChartOptions({ label: 'Connections', unit: '#' }, connections_data_formatted); + this.bandwidthChartOptions = this._chartOptions.plotSingleLineChartOptions({ label: 'Usage (Mbps)', unit: '#' }, usage_data_formatted); }, error: (error: { message: string; }) => { console.log(error); @@ -77,7 +87,7 @@ } navigateMonitoringDevices() { - this._router.navigate(['/monitoring/resources'], {state: {}}); + this._router.navigate(['/monitoring/resources'], { state: {} }); } openTimeFilterDialog(): void { @@ -99,6 +109,6 @@ } }); - dialogRef.afterClosed().subscribe(() => {}); + dialogRef.afterClosed().subscribe(() => { }); } } Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb/resource-monitoring-llb.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb/resource-monitoring-llb.html (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb/resource-monitoring-llb.html (working copy) @@ -1,78 +1,72 @@ - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ID {{ i | globalSerial }}Service Name - {{ element?.link_name }} - Gateway IP{{ element?.link_gateway }}Device IP{{ element?.agent_host }}Health Status - @if (element?.link_status) { - - - - } @else { - - - - } - Device Name{{element?.device_name}}Bandwidth Usage{{element?.avg_link_usage | bytesPerSec}}Connections{{element?.avg_link_conn}}Throughput - - - - {{element.avg_bandwid_in | bytesPerSec}} - - - - {{element.avg_bandwid_out | bytesPerSec}} -
No results found.
- - -
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ID {{ i | globalSerial }}Service Name + {{ element?.link_name }} + Gateway IP{{ element?.link_gateway }}Device IP{{ element?.agent_host }}Health Status + @if (element?.link_status) { + + + + } @else { + + + + } + Device Name{{element?.device_name}}Bandwidth Usage{{element?.avg_link_usage | bytesPerSec}}Connections{{element?.avg_link_conn}}Throughput + + + + {{element.avg_bandwid_in | bytesPerSec}} + + + + {{element.avg_bandwid_out | bytesPerSec}} +
No results found.
- - + + +
+
\ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb/resource-monitoring-llb.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb/resource-monitoring-llb.scss (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb/resource-monitoring-llb.scss (working copy) @@ -0,0 +1,100 @@ +.devices-container { + padding: 12px; + background-color: #fafafa; + height: 100%; + overflow: hidden; + box-sizing: border-box; + font-family: 'Roboto', sans-serif; + display: flex; + flex-direction: column; + + // Table Container + .table-container { + border-radius: 8px; + overflow: hidden; + border: 1px solid #e0e0e0; + background: white; + flex: 1; + display: flex; + flex-direction: column; + height: 100%; + + .table-scroll-area { + flex: 1; + overflow: auto; + width: 100%; + } + + .modern-table { + width: 100%; + + th.mat-mdc-header-cell { + background-color: #f5f5f5; + color: #424242; + font-weight: 600; + font-size: 13px; + padding: 0 16px; + border-bottom: 1px solid #e0e0e0; + } + + td.mat-mdc-cell { + padding: 12px 16px; + font-size: 13px; + color: #333; + border-bottom: 1px solid #f0f0f0; + + &.no-data-cell { + text-align: center; + padding: 48px; + color: #757575; + background-color: white; + } + } + + tr.mat-mdc-row:hover { + background-color: #f9f9f9; + } + + // Links + .details-page-link, + .a-link { + color: #1976d2; + cursor: pointer; + text-decoration: none; + font-weight: 500; + + &:hover { + text-decoration: underline; + } + } + + .success-icon { + color: green; + } + + .blue-icon { + color: #3f51b5; + } + } + } + + mat-paginator { + background: transparent; + border-top: 1px solid #e0e0e0; + } +} + +.stats-container { + display: flex; + flex-direction: column; + gap: 4px; + + .stat-item { + font-size: 12px; + + span:first-child { + color: #757575; + margin-right: 4px; + } + } +} \ No newline at end of file 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 2819) +++ /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) @@ -1,105 +1,67 @@ - - - - - Monitoring Devices - {{ serviceName }} +
+ + + Back + +
+

Monitoring Devices - {{ serviceName }} (IP : {{ deviceIp }})

+
+
+ + + {{ currentFrom }} to {{ currentTo }} ({{ currentInterval }}s) - - +
+
+ (selectedTabChange)="onTabChange($event)"> -
- Current Range: {{ currentFrom }} - to {{ currentTo }} (Refresh: {{ currentInterval }}) -
- - - - -
- - Network Throughput (bps) - - - -
-
-
-
- - - - - - -
- - Outstanding Requests - - - -
-
-
-
- - - - - - -
- - Requests Number - - - -
-
-
-
- - - - - - -
- - Open Connections - - - -
-
-
-
- - - - - - -
- - Connections Per Second - - - -
-
-
-
- - - - +
+ +
+
+

Network Throughput (bps)

+
+
+
+ + +
+
+

Outstanding Requests

+
+
+
+ + +
+
+

Requests Number

+
+
+
+ + +
+
+

Open Connections

+
+
+
+ + +
+
+

Connections Per Second

+
+
+
+
- + \ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.scss (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real-details/resource-monitoring-slb-real-details.scss (working copy) @@ -9,13 +9,100 @@ } } -mat-card-header { - display: flex; - justify-content: space-between; +.details-header { + display: grid; + grid-template-columns: 1fr auto 1fr; + grid-template-rows: auto auto; align-items: center; - padding: 4px 10px; + padding: 0 4px; + /* Minimal vertical padding */ + gap: 0px; + /* Minimal gap */ + margin-bottom: 4px; + border-bottom: 1px solid #e0e0e0; + + .back-link { + grid-column: 1; + grid-row: 1; + justify-self: start; + display: flex; + align-items: center; + gap: 6px; + color: #757575; + text-decoration: none; + font-size: 14px; + font-weight: 500; + cursor: pointer; + height: 32px; + /* Fixed height for consistency */ + + &:hover { + color: #1976d2; + } + } + + .header-title { + grid-column: 2; + grid-row: 1; + justify-self: center; + display: flex; + align-items: center; + height: 32px; + /* Match back link height */ + + h1 { + font-size: 15px; + /* Slightly reduced */ + font-weight: 500; + margin: 0; + color: #333; + white-space: nowrap; + } + + .device-ip { + font-size: 13px; + color: #757575; + font-weight: 400; + margin-left: 4px; + } + } + + .time-filter { + grid-column: 3; + grid-row: 2; + justify-self: end; + margin-bottom: 4px; + /* Slight buffer from bottom border */ + + .filter-link { + display: flex; + align-items: center; + gap: 6px; + padding: 2px 8px; + /* Compact padding */ + background-color: white; + border: 1px solid #e0e0e0; + border-radius: 4px; + color: #555; + font-size: 11px; + cursor: pointer; + text-decoration: none; + height: 24px; + /* Fixed compact height */ + + &:hover { + background-color: #f5f5f5; + color: #1976d2; + } + } + } } +.button-container.time-filter { + margin: 5px 0; + font-size: 12px; +} + mat-card-title { font-size: medium; } @@ -168,3 +255,55 @@ font-weight: 500; color: #333; } + +/* Grid Layout for Charts */ +.charts-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); // 3 Columns + gap: 20px; + padding: 20px; +} + +.chart-card { + background: white; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + padding: 10px; + display: flex; + flex-direction: column; + height: 350px; + border: 1px solid #e0e0e0; + + .chart-header { + margin-bottom: 5px; + border-bottom: 1px solid #f0f0f0; + padding-bottom: 5px; + + h3 { + margin: 0; + font-size: 14px; + font-weight: 600; + color: #333; + } + } + + .chart-instance { + flex: 1; + width: 100%; + height: 100%; + min-height: 0; // Essential for nested flex/grid scrolling + } +} + +/* Responsive Adjustments */ +@media (max-width: 1200px) { + .charts-grid { + grid-template-columns: repeat(2, 1fr); // 2 Columns on smaller screens + } +} + +@media (max-width: 768px) { + .charts-grid { + grid-template-columns: 1fr; // 1 Column on mobile + } +} \ No newline at end of file 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 2819) +++ /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,13 +1,13 @@ -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'; +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', @@ -54,9 +54,19 @@ // .subscribe(); // }) // ToDo: Enable auto-refresh + this.initializeCharts(); this.getBasicMonitoringMetrics() } + initializeCharts() { + const noData = this._chartOptions.getNoDataChartOptions(); + this.throughputChartOptions = noData; + this.outstandingRequestsChartOptions = noData; + this.requestsChartOptions = noData; + this.openConnectionsChartOptions = noData; + this.connectionChartOptions = noData; + } + onTabChange($event: any) { if ($event.index === 0) { this.getBasicMonitoringMetrics() @@ -66,7 +76,7 @@ } navigateMonitoringDevices() { - this._router.navigate(['/monitoring/resources'], {state: {}}); + this._router.navigate(['/monitoring/resources'], { state: {} }); } getBasicMonitoringMetrics() { @@ -134,28 +144,28 @@ new Date(d.ts).getTime(), d.request !== null ? parseInt(d.request) : 0, ]); - this.outstandingRequestsChartOptions = this._chartOptions.plotSingleLineChartOptions({label: 'Requests', unit: '#'}, data_formatted); + 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 = this._chartOptions.plotSingleLineChartOptions({label: 'Requests', unit: '#'}, data_formatted); + 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.real_conn_cnt) : 0, ]); - this.openConnectionsChartOptions = this._chartOptions.plotSingleLineChartOptions({label: 'Connections', unit: '#'}, data_formatted); - } else if (payload?.stat_name === 'connections_per_sec') { + 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 = this._chartOptions.plotSingleLineChartOptions({label: 'Connections', unit: '#'}, data_formatted); + this.connectionChartOptions = this._chartOptions.plotSingleLineChartOptions({ label: 'Connections', unit: '#' }, data_formatted); } }, error: (err) => { @@ -183,6 +193,6 @@ } }); - dialogRef.afterClosed().subscribe(() => {}); + dialogRef.afterClosed().subscribe(() => { }); } } Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.html (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.html (working copy) @@ -1,82 +1,76 @@ - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + +
ID {{ i | globalSerial }}Service Name - {{ element?.real_server_id }} - Service Type{{ protocols[element?.protocol] | uppercase }}IP Address & Port{{ element?.addr }} & {{element?.port}}Health Status - @if (element?.snmp_general?.snmp_enable) { - - - - } @else { - - - - } - Device{{element?.name}} ({{element?.device_group}})Outstanding Requests{{element?.last_req_cnt}}Connections / Second - {{element?.last_conn_per_sec}} - Throughput -
-
- Sent: - {{element?.last_out | bytesPerSec}} -
-
- Received: - {{element?.last_in | bytesPerSec}} -
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - -
ID {{ i | globalSerial }}Service Name + {{ element?.real_server_id }} + Service Type{{ protocols[element?.protocol] | uppercase }}IP Address & Port{{ element?.addr }} & {{element?.port}}Health Status + @if (element?.snmp_general?.snmp_enable) { + + + + } @else { + + + + } + Device{{element?.name}} ({{element?.device_group}})Outstanding Requests{{element?.last_req_cnt}}Connections / Second + {{element?.last_conn_per_sec}} + Throughput +
+
+ Sent: + {{element?.last_out | bytesPerSec}}
-
No results found.
- - -
+
+ Received: + {{element?.last_in | bytesPerSec}} +
+
+
No results found.
- - + + +
+
\ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.scss (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.scss (working copy) @@ -0,0 +1,100 @@ +.devices-container { + padding: 12px; + background-color: #fafafa; + height: 100%; + overflow: hidden; + box-sizing: border-box; + font-family: 'Roboto', sans-serif; + display: flex; + flex-direction: column; + + // Table Container + .table-container { + border-radius: 8px; + overflow: hidden; + border: 1px solid #e0e0e0; + background: white; + flex: 1; + display: flex; + flex-direction: column; + height: 100%; + + .table-scroll-area { + flex: 1; + overflow: auto; + width: 100%; + } + + .modern-table { + width: 100%; + + th.mat-mdc-header-cell { + background-color: #f5f5f5; + color: #424242; + font-weight: 600; + font-size: 13px; + padding: 0 16px; + border-bottom: 1px solid #e0e0e0; + } + + td.mat-mdc-cell { + padding: 12px 16px; + font-size: 13px; + color: #333; + border-bottom: 1px solid #f0f0f0; + + &.no-data-cell { + text-align: center; + padding: 48px; + color: #757575; + background-color: white; + } + } + + tr.mat-mdc-row:hover { + background-color: #f9f9f9; + } + + // Links + .details-page-link, + .a-link { + color: #1976d2; + cursor: pointer; + text-decoration: none; + font-weight: 500; + + &:hover { + text-decoration: underline; + } + } + + .success-icon { + color: green; + } + + .blue-icon { + color: #3f51b5; + } + } + } + + mat-paginator { + background: transparent; + border-top: 1px solid #e0e0e0; + } +} + +.stats-container { + display: flex; + flex-direction: column; + gap: 4px; + + .stat-item { + font-size: 12px; + + span:first-child { + color: #757575; + margin-right: 4px; + } + } +} \ No newline at end of file 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 2819) +++ /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) @@ -1,156 +1,96 @@ - - - - - - Monitoring Devices - {{ serviceName }} - - - - -
- Current Range: {{ currentFrom }} - to {{ currentTo }} (Refresh: {{ currentInterval }}) +
+ + + Back + +
+

Monitoring Devices - {{ serviceName }} (IP : {{ deviceIp }})

+
+
+ + + {{ currentFrom }} to {{ currentTo }} ({{ currentInterval }}s) + +
+ (selectedTabChange)="onTabChange($event)">
- - - - -
- - Network Throughput (bps) - - - -
-
-
-
- - - - - - -
- - Hits - - - -
-
-
-
- - - - - - -
- - Hits Distribution - - - -
-
-
-
- - - - - - -
- - Open Connections - - - -
-
-
-
- - - - - - -
- - Connections Per Second - - - -
-
-
-
- - - - +
+ +
+
+

Network Throughput (bps)

+
+
+
+ + +
+
+

Hits

+
+
+
+ + +
+
+

Hits Distribution

+
+
+
+ + +
+
+

Open Connections

+
+
+
+ + +
+
+

Connections Per Second

+
+
+
+
- - - - -
- - HTTP Status Code Ratio - -
-
-
-
- - - - - - -
- - Number Of Virtual Service Visits - -
-
-
-
- - - - - - -
- - Client To Device Time - -
-
-
-
- - - - +
+ +
+
+

HTTP Status Code Ratio

+
+
+
+ + +
+
+

Number Of Virtual Service Visits

+
+
+
+ + +
+
+

Client To Device Time

+
+
+
+
- + \ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.scss (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual-details/resource-monitoring-slb-virtual-details.scss (working copy) @@ -9,11 +9,93 @@ } } -mat-card-header { - display: flex; - justify-content: space-between; +.details-header { + display: grid; + grid-template-columns: 1fr auto 1fr; + grid-template-rows: auto auto; align-items: center; - padding: 4px 10px; + padding: 0 4px; + /* Minimal vertical padding */ + gap: 0px; + /* Minimal gap */ + margin-bottom: 4px; + border-bottom: 1px solid #e0e0e0; + + .back-link { + grid-column: 1; + grid-row: 1; + justify-self: start; + display: flex; + align-items: center; + gap: 6px; + color: #757575; + text-decoration: none; + font-size: 14px; + font-weight: 500; + cursor: pointer; + height: 32px; + /* Fixed height for consistency */ + + &:hover { + color: #1976d2; + } + } + + .header-title { + grid-column: 2; + grid-row: 1; + justify-self: center; + display: flex; + align-items: center; + height: 32px; + /* Match back link height */ + + h1 { + font-size: 15px; + /* Slightly reduced */ + font-weight: 500; + margin: 0; + color: #333; + white-space: nowrap; + } + + .device-ip { + font-size: 13px; + color: #757575; + font-weight: 400; + margin-left: 4px; + } + } + + .time-filter { + grid-column: 3; + grid-row: 2; + justify-self: end; + margin-bottom: 4px; + /* Slight buffer from bottom border */ + + .filter-link { + display: flex; + align-items: center; + gap: 6px; + padding: 2px 8px; + /* Compact padding */ + background-color: white; + border: 1px solid #e0e0e0; + border-radius: 4px; + color: #555; + font-size: 11px; + cursor: pointer; + text-decoration: none; + height: 24px; + /* Fixed compact height */ + + &:hover { + background-color: #f5f5f5; + color: #1976d2; + } + } + } } mat-card-title { @@ -168,3 +250,55 @@ font-weight: 500; color: #333; } + +/* Grid Layout for Charts */ +.charts-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); // 3 Columns + gap: 20px; + padding: 20px; +} + +.chart-card { + background: white; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + padding: 10px; + display: flex; + flex-direction: column; + height: 350px; + border: 1px solid #e0e0e0; + + .chart-header { + margin-bottom: 5px; + border-bottom: 1px solid #f0f0f0; + padding-bottom: 5px; + + h3 { + margin: 0; + font-size: 14px; + font-weight: 600; + color: #333; + } + } + + .chart-instance { + flex: 1; + width: 100%; + height: 100%; + min-height: 0; // Essential for nested flex/grid scrolling + } +} + +/* Responsive Adjustments */ +@media (max-width: 1200px) { + .charts-grid { + grid-template-columns: repeat(2, 1fr); // 2 Columns on smaller screens + } +} + +@media (max-width: 768px) { + .charts-grid { + grid-template-columns: 1fr; // 1 Column on mobile + } +} \ No newline at end of file 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 2819) +++ /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,15 +1,15 @@ -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'; -import {OpenSearch} from "../../../services/open-search"; -import {UtilsService} from "../../../services/utils-service"; +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'; +import { OpenSearch } from "../../../services/open-search"; +import { UtilsService } from "../../../services/utils-service"; @Component({ selector: 'app-resource-monitoring-slb-virtual-details', @@ -66,9 +66,22 @@ // .subscribe(); // }) // ToDo: Enable auto-refresh + this.initializeCharts(); this.getBasicMonitoringMetrics() } + initializeCharts() { + const noData = this._chartOptions.getNoDataChartOptions(); + this.throughputChartOptions = noData; + this.totalHitsChartOptions = noData; + this.hitsDistributionChartOptions = noData; + this.connectionsChartOptions = noData; + this.connectionPerSecondChartOptions = noData; + this.httpStatusRatioChartOptions = noData; + this.vSVisitsChartOptions = noData; + this.vSRespTimeChartOptions = noData; + } + onTabChange($event: any) { if ($event.index === 0) { this.getBasicMonitoringMetrics(); @@ -80,7 +93,7 @@ } navigateMonitoringDevices() { - this._router.navigate(['/monitoring/resources'], {state: {}}); + this._router.navigate(['/monitoring/resources'], { state: {} }); } getBasicMonitoringMetrics() { Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.html (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.html (working copy) @@ -1,84 +1,78 @@ - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + +
ID {{ i | globalSerial }}Service Name - {{ element?.serverid }} - Service Type{{ protocols[element?.protocol] | uppercase }}IP Address & Port{{ element?.addr }} & {{element?.port}}Health Status - @if (element?.health_status) { - - - - } @else { - - - - } - Device Name{{element?.name}}Device Group{{element?.device_group}}Connections{{element?.hits_diff}}Throughput -
-
- Sent: - {{element?.last_out | bytesPerSec}} -
-
- Received: - {{element?.last_in | bytesPerSec}} -
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - -
ID {{ i | globalSerial }}Service Name + {{ element?.serverid }} + Service Type{{ protocols[element?.protocol] | uppercase }}IP Address & Port{{ element?.addr }} & {{element?.port}}Health Status + @if (element?.health_status) { + + + + } @else { + + + + } + Device Name{{element?.name}}Device Group{{element?.device_group}}Connections{{element?.hits_diff}}Throughput +
+
+ Sent: + {{element?.last_out | bytesPerSec}}
-
Certificate
No results found.
- - -
+
+ Received: + {{element?.last_in | bytesPerSec}} +
+
+
Certificate
No results found.
- - + + +
+
\ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.scss (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.scss (working copy) @@ -0,0 +1,100 @@ +.devices-container { + padding: 12px; + background-color: #fafafa; + height: 100%; + overflow: hidden; + box-sizing: border-box; + font-family: 'Roboto', sans-serif; + display: flex; + flex-direction: column; + + // Table Container + .table-container { + border-radius: 8px; + overflow: hidden; + border: 1px solid #e0e0e0; + background: white; + flex: 1; + display: flex; + flex-direction: column; + height: 100%; + + .table-scroll-area { + flex: 1; + overflow: auto; + width: 100%; + } + + .modern-table { + width: 100%; + + th.mat-mdc-header-cell { + background-color: #f5f5f5; + color: #424242; + font-weight: 600; + font-size: 13px; + padding: 0 16px; + border-bottom: 1px solid #e0e0e0; + } + + td.mat-mdc-cell { + padding: 12px 16px; + font-size: 13px; + color: #333; + border-bottom: 1px solid #f0f0f0; + + &.no-data-cell { + text-align: center; + padding: 48px; + color: #757575; + background-color: white; + } + } + + tr.mat-mdc-row:hover { + background-color: #f9f9f9; + } + + // Links + .details-page-link, + .a-link { + color: #1976d2; + cursor: pointer; + text-decoration: none; + font-weight: 500; + + &:hover { + text-decoration: underline; + } + } + + .success-icon { + color: green; + } + + .blue-icon { + color: #3f51b5; + } + } + } + + mat-paginator { + background: transparent; + border-top: 1px solid #e0e0e0; + } +} + +.stats-container { + display: flex; + flex-direction: column; + gap: 4px; + + .stat-item { + font-size: 12px; + + span:first-child { + color: #757575; + margin-right: 4px; + } + } +} \ No newline at end of file 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 2819) +++ /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) @@ -1,169 +1,101 @@ - - - - - - Monitoring Devices - {{ serviceName }} +
+ +
+ + + Back + +
+

{{ serviceName }} (IP : {{ deviceIp }})

+
+
+ + + {{ currentFrom }} to {{ currentTo }} ({{ currentInterval }}s) - - - - - - -
- Current Range: {{ currentFrom }} - to {{ currentTo }} (Refresh: {{ currentInterval }}) +
+
+ + +
+
+ +
+
+

Login Status

+
+
-
- - - - -
- - Login Status - - - -
-
-
-
- - - - - - -
- - Client Throughput (bps) - - - -
-
-
-
- - - - - - -
- - Server Throughput (bps) - - - -
-
-
-
- - - - - - -
- - L3 Tunnel Status - - - -
-
-
-
- - - - - - -
- - L3 VPN Throughput (bps) - - - -
-
-
-
- - - - - - -
- - L3 Client App Throughput (bps) - - - -
-
-
-
- - - - - - -
- - L7 Request Status - - - -
-
-
-
- - - - - - -
- - L7 Client Throughput (bps) - - - -
-
-
-
- - - - - - -
- - L7 Server Throughput (bps) - - - -
-
-
-
- - - - + + +
+
+

Client Throughput

+ bps +
+
- - - + + +
+
+

Server Throughput

+ bps +
+
+
+ + +
+
+

L3 Tunnel Status

+
+
+
+ + +
+
+

L3 VPN Throughput

+ bps +
+
+
+ + +
+
+

L3 Client App Throughput

+ bps +
+
+
+ + +
+
+

L7 Request Status

+
+
+
+ + +
+
+

L7 Client Throughput

+ bps +
+
+
+ + +
+
+

L7 Server Throughput

+ bps +
+
+
+
+
+
\ No newline at end of file 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.scss =================================================================== --- /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.scss (revision 2819) +++ /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.scss (working copy) @@ -1,170 +1,189 @@ -.page-card-1 { - width: 100%; - border-radius: 0; - background-color: inherit; - font-size: 14px !important; +.ssl-vpn-details-container { + padding: 8px; + background-color: #fafafa; + height: 100%; + overflow: hidden; + box-sizing: border-box; + font-family: 'Roboto', sans-serif; + display: flex; + flex-direction: column; - mat-card-header { - color: #1170cf; - } -} + .details-header { + display: grid; + grid-template-columns: 1fr auto 1fr; + grid-template-rows: auto auto; + align-items: center; + padding: 0 4px; + /* Minimal vertical padding */ + gap: 0px; + /* Minimal gap */ + margin-bottom: 4px; + border-bottom: 1px solid #e0e0e0; -mat-card-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 4px 10px; -} + .back-link { + grid-column: 1; + grid-row: 1; + justify-self: start; + display: flex; + align-items: center; + gap: 6px; + color: #757575; + text-decoration: none; + font-size: 14px; + font-weight: 500; + cursor: pointer; + height: 32px; + /* Fixed height for consistency */ -mat-card-title { - font-size: medium; -} + &:hover { + color: #1976d2; + } + } -.dashboard-card { - width: 100%; - height: 100%; - border-radius: 8px; - background-color: inherit; -} + .header-title { + grid-column: 2; + grid-row: 1; + justify-self: center; + display: flex; + align-items: center; + height: 32px; + /* Match back link height */ -.card-content-wrapper { - margin-top: 2px; - padding: 0 !important; - display: flex; - flex-direction: column; - height: 100%; - width: 100%; -} + h1 { + font-size: 15px; + /* Slightly reduced */ + font-weight: 500; + margin: 0; + color: #333; + white-space: nowrap; + } -.card-header-row { - display: flex; - align-items: center; - gap: 6px; - margin-bottom: 8px; - padding: 0 8px; -} + .device-ip { + font-size: 13px; + color: #757575; + font-weight: 400; + margin-left: 4px; + } + } -.metric-icon { - color: #3f51b5; -} + .time-filter { + grid-column: 3; + grid-row: 2; + justify-self: end; + margin-bottom: 4px; + /* Slight buffer from bottom border */ -.card-title { - font-size: 18px; - font-weight: 500; - color: #555; - margin: 0; - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; -} + .filter-link { + display: flex; + align-items: center; + gap: 6px; + padding: 2px 8px; + /* Compact padding */ + background-color: white; + border: 1px solid #e0e0e0; + border-radius: 4px; + color: #555; + font-size: 11px; + cursor: pointer; + text-decoration: none; + height: 24px; + /* Fixed compact height */ -.metric-value { - display: flex; - justify-content: center; - align-items: flex-end; - line-height: 1; -} + &:hover { + background-color: #f5f5f5; + color: #1976d2; + } + } + } + } -.metric-label { - display: flex; - justify-content: center; - align-items: flex-end; - font-size: 0.9rem; - color: #777; - margin-top: 5px; + .details-content { + flex: 1; + overflow-y: auto; + padding-right: 4px; // Avoid scrollbar overlap + } } -.online-count { - font-size: 36px; - font-weight: 600; - color: #333; -} +.custom-tab-group { + height: 100%; -.total-count { - font-size: 18px; - font-weight: 500; - color: #888; - margin-left: 4px; -} + ::ng-deep { + .mat-mdc-tab-header { + --mdc-tab-indicator-active-indicator-height: 2px; + --mat-tab-header-pagination-icon-color: #000; + height: 36px; // Reduced height + } -.status-details { - font-size: 14px; - color: #d32f2f; - margin: 0; - font-weight: 500; - text-align: center; -} + .mdc-tab-indicator__content--underline { + border-top-width: 3px !important; + } -.active, -.matrics-icon { - color: darkgreen; -} + .mdc-tab { + height: 36px !important; // Force height + min-height: 36px !important; // Force min-height + padding: 0 16px !important; -/* Updated CSS for horizontal chart layout */ -.chart-flex-container { - display: flex; - justify-content: space-around; - align-items: center; - height: 100%; - width: 100%; - flex-grow: 1; -} + .mdc-tab__text-label { + font-size: 13px !important; + } + } -.chart-container { - width: 100%; - height: 100%; - max-width: none; - max-height: none; -} + // Fallback for older Angular Material versions if needed + .mat-tab-header { + height: 36px !important; + } -/* Adjustments for multiple charts */ -.chart-flex-container .chart-container { - width: 100%; - height: 100%; + .mat-tab-label { + height: 36px !important; + min-height: 36px !important; + font-size: 13px !important; + } + } } -mat-grid-list { - height: 100%; - width: 100%; +.charts-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); // Slightly wider min-width + gap: 8px; + padding: 8px 0; } -/* The original vertical layout for metrics */ -.metrics-container { +.chart-card { + background: white; + border-radius: 8px; + border: 1px solid #e0e0e0; + padding: 12px; display: flex; flex-direction: column; - align-items: center; - gap: 20px; -} + height: 260px; // Compact height + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); -/* Container to center content vertically and horizontally */ -.card-body-content { - flex-grow: 1; - display: flex; - justify-content: center; - align-items: center; -} + .chart-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; -/* New CSS for the metrics block */ -.metrics-horizontal-container { - display: flex; - justify-content: center; - align-items: center; - gap: 20px; - width: 100%; -} + h3 { + font-size: 14px; + font-weight: 600; + color: #424242; + margin: 0; + } -.metric-item { - text-align: center; - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} + .unit { + font-size: 11px; + color: #9e9e9e; + font-weight: 500; + background: #f5f5f5; + padding: 2px 6px; + border-radius: 4px; + } + } -.metric-value { - font-size: 1rem; - font-weight: 500; - color: #333; -} + .chart-instance { + flex: 1; + width: 100%; + height: 100%; + } +} \ No newline at end of file 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 2819) +++ /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,13 +1,13 @@ -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'; +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, graphic } 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', @@ -22,16 +22,24 @@ serviceName: string = ''; selectedTabIndex: number = 0; - private tabNames: string[] = [ - 'Basic Monitoring', - 'Audit Monitoring', - ]; currentFrom: string | Date = 'now-15m'; currentTo: string | Date = 'now'; currentInterval: number = 10; private destroyRef = inject(DestroyRef); + loginStatusChartOptions: EChartsOption = {}; + serverThroughputChartOptions: EChartsOption = {}; + clientThroughputChartOptions: EChartsOption = {}; + + l3TunnelStatusChartOptions: EChartsOption = {}; + l3VPNThroughputChartOptions: EChartsOption = {}; + l3ClientThroughputChartOptions: EChartsOption = {}; + + l7RequestStatusChartOptions: EChartsOption = {}; + l7ClientThroughputChartOptions: EChartsOption = {}; + l7ServerThroughputChartOptions: EChartsOption = {}; + constructor( private _route: ActivatedRoute, private _router: Router, @@ -45,8 +53,21 @@ ngOnInit() { this.deviceIp = this._route.snapshot.paramMap.get('deviceIp') || ''; this.serviceName = this._route.snapshot.paramMap.get('serviceName') || ''; + this.initializeCharts(); + this.getBasicMonitoringMetrics(); + } - this.getBasicMonitoringMetrics() + initializeCharts() { + const noData = this.getNoDataChartOptions(); + this.loginStatusChartOptions = noData; + this.serverThroughputChartOptions = noData; + this.clientThroughputChartOptions = noData; + this.l3TunnelStatusChartOptions = noData; + this.l3VPNThroughputChartOptions = noData; + this.l3ClientThroughputChartOptions = noData; + this.l7RequestStatusChartOptions = noData; + this.l7ClientThroughputChartOptions = noData; + this.l7ServerThroughputChartOptions = noData; } onTabChange($event: any) { @@ -58,7 +79,7 @@ } navigateMonitoringDevices() { - this._router.navigate(['/monitoring/resources'], {state: {}}); + this._router.navigate(['/monitoring/resources'], { state: {} }); } getBasicMonitoringMetrics() { @@ -120,19 +141,6 @@ }) } - loginStatusChartOptions: EChartsOption = {}; - serverThroughputChartOptions: EChartsOption = {}; - clientThroughputChartOptions: EChartsOption = {}; - - l3TunnelStatusChartOptions: EChartsOption = {}; - l3VPNThroughputChartOptions: EChartsOption = {}; - l3ClientThroughputChartOptions: EChartsOption = {}; - - l7RequestStatusChartOptions: EChartsOption = {}; - l7ClientThroughputChartOptions: EChartsOption = {}; - l7ServerThroughputChartOptions: EChartsOption = {}; - - getSSLVPNMonitoringMetrics(payload: any) { this._device.getSSLVPNMonitoringMetrics(payload) .pipe(take(1)) @@ -141,109 +149,194 @@ if (payload?.stat_name === 'login_status') { let login_stats = result?.data; let hits: any = {}; - if (login_stats.length > 0) { + if (login_stats && login_stats.length > 0) { hits = login_stats[0]; - } - const data_formatted: { value: any; name: string }[] = []; - for (const key in hits) { - if (hits.hasOwnProperty(key) && hits[key] !== null) { - const formattedName = key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase()); - data_formatted.push({ - value: hits[key], - name: formattedName - }); + const data_formatted: { value: any; name: string }[] = []; + for (const key in hits) { + if (hits.hasOwnProperty(key) && hits[key] !== null) { + const formattedName = key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase()); + data_formatted.push({ + value: hits[key], + name: formattedName + }); + } } + this.loginStatusChartOptions = data_formatted.length ? this._chartOptions.distributionChartOptions('Status', data_formatted) : this.getNoDataChartOptions(); + } else { + this.loginStatusChartOptions = this.getNoDataChartOptions(); } - this.loginStatusChartOptions = this._chartOptions.distributionChartOptions('Status', data_formatted) } else if (payload?.stat_name === 'tunnel_status') { let hits: any = {}; - if (result?.data.length > 0) { + if (result?.data && result?.data.length > 0) { hits = result?.data[0]; - } - const data_formatted: { value: any; name: string }[] = []; - for (const key in hits) { - if (hits.hasOwnProperty(key) && hits[key] !== null) { - const formattedName = key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase()); - data_formatted.push({ - value: hits[key], - name: formattedName - }); + const data_formatted: { value: any; name: string }[] = []; + for (const key in hits) { + if (hits.hasOwnProperty(key) && hits[key] !== null) { + const formattedName = key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase()); + data_formatted.push({ + value: hits[key], + name: formattedName + }); + } } + this.l3TunnelStatusChartOptions = data_formatted.length ? this._chartOptions.distributionChartOptions('Status', data_formatted) : this.getNoDataChartOptions(); + } else { + this.l3TunnelStatusChartOptions = this.getNoDataChartOptions(); } - 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.nw_sent)]); - const received_formatted = network - .filter((d: any) => d.received !== null) - .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.nw_recv)]); - this.serverThroughputChartOptions = this._chartOptions.historicalThroughputChartOptions(received_formatted, sent_formatted); + const network = result?.data; + if (network && network.length > 0) { + const sent_formatted = network + .filter((d: any) => d.sent !== null) + .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.nw_recv)]); + + const seriesData = [ + { name: 'Received', data: received_formatted, colorStart: '#4caf50', colorEnd: '#e8f5e9' }, + { name: 'Sent', data: sent_formatted, colorStart: '#2196f3', colorEnd: '#e3f2fd' } + ]; + // Assuming net_throughput maps to Server Throughput based on variable names in original code + this.serverThroughputChartOptions = (sent_formatted.length || received_formatted.length) ? + this.getMultiSeriesAreaChartOptions(seriesData, 'bps') : this.getNoDataChartOptions(); + } else { + this.serverThroughputChartOptions = this.getNoDataChartOptions(); + } } 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.vpn_sent)]); - const received_formatted = network - .filter((d: any) => d.received !== null) - .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.vpn_recv)]); - this.l3VPNThroughputChartOptions = this._chartOptions.historicalThroughputChartOptions(received_formatted, sent_formatted); + const network = result?.data; + if (network && network.length > 0) { + const sent_formatted = network + .filter((d: any) => d.sent !== null) + .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.vpn_recv)]); + + const seriesData = [ + { name: 'Received', data: received_formatted, colorStart: '#ff9800', colorEnd: '#fff3e0' }, + { name: 'Sent', data: sent_formatted, colorStart: '#9c27b0', colorEnd: '#f3e5f5' } + ]; + this.l3VPNThroughputChartOptions = (sent_formatted.length || received_formatted.length) ? + this.getMultiSeriesAreaChartOptions(seriesData, 'bps') : this.getNoDataChartOptions(); + } else { + this.l3VPNThroughputChartOptions = this.getNoDataChartOptions(); + } } 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.client_app_sent)]); - const received_formatted = network - .filter((d: any) => d.received !== null) - .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.client_app_recv)]); - this.l3ClientThroughputChartOptions = this._chartOptions.historicalThroughputChartOptions(received_formatted, sent_formatted); + const network = result?.data; + if (network && network.length > 0) { + const sent_formatted = network + .filter((d: any) => d.sent !== null) + .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.client_app_recv)]); + + const seriesData = [ + { name: 'Received', data: received_formatted, colorStart: '#00bcd4', colorEnd: '#e0f7fa' }, + { name: 'Sent', data: sent_formatted, colorStart: '#673ab7', colorEnd: '#ede7f6' } + ]; + this.l3ClientThroughputChartOptions = (sent_formatted.length || received_formatted.length) ? + this.getMultiSeriesAreaChartOptions(seriesData, 'bps') : this.getNoDataChartOptions(); + } else { + this.l3ClientThroughputChartOptions = this.getNoDataChartOptions(); + } } else if (payload?.stat_name === 'l7_request_status') { let request_stats = result?.data; let hits: any = {}; - if (request_stats.length > 0) { + if (request_stats && request_stats.length > 0) { hits = request_stats[0]; - } - const data_formatted: { value: any; name: string }[] = []; - for (const key in hits) { - if (hits.hasOwnProperty(key) && hits[key] !== null) { - const formattedName = key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase()); - data_formatted.push({ - value: hits[key], - name: formattedName - }); + const data_formatted: { value: any; name: string }[] = []; + for (const key in hits) { + if (hits.hasOwnProperty(key) && hits[key] !== null) { + const formattedName = key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase()); + data_formatted.push({ + value: hits[key], + name: formattedName + }); + } } + this.l7RequestStatusChartOptions = data_formatted.length ? this._chartOptions.distributionChartOptions('Status', data_formatted) : this.getNoDataChartOptions(); + } else { + this.l7RequestStatusChartOptions = this.getNoDataChartOptions(); } - 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.client_sent)]); - const received_formatted = network - .filter((d: any) => d.received !== null) - .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.client_recv)]); + const network = result?.data; + if (network && network.length > 0) { + const sent_formatted = network + .filter((d: any) => d.sent !== null) + .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.client_recv)]); - 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.server_sent)]); - const received_formatted = network - .filter((d: any) => d.received !== null) - .map((d: any) => [new Date(d.ts).getTime(), parseFloat(d.server_recv)]); + const seriesData = [ + { name: 'Received', data: received_formatted, colorStart: '#8bc34a', colorEnd: '#f1f8e9' }, + { name: 'Sent', data: sent_formatted, colorStart: '#e91e63', colorEnd: '#fce4ec' } + ]; + this.l7ClientThroughputChartOptions = (sent_formatted.length || received_formatted.length) ? + this.getMultiSeriesAreaChartOptions(seriesData, 'bps') : this.getNoDataChartOptions(); + } else { + this.l7ClientThroughputChartOptions = this.getNoDataChartOptions(); + } + } else if (payload?.stat_name === 'l7_server_throughput') { + const network = result?.data; + if (network && network.length > 0) { + const sent_formatted = network + .filter((d: any) => d.sent !== null) + .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.server_recv)]); - this.l7ServerThroughputChartOptions = this._chartOptions.historicalThroughputChartOptions(received_formatted, sent_formatted); + const seriesData = [ + { name: 'Received', data: received_formatted, colorStart: '#ff5722', colorEnd: '#fbe9e7' }, + { name: 'Sent', data: sent_formatted, colorStart: '#3f51b5', colorEnd: '#e8eaf6' } + ]; + this.l7ServerThroughputChartOptions = (sent_formatted.length || received_formatted.length) ? + this.getMultiSeriesAreaChartOptions(seriesData, 'bps') : this.getNoDataChartOptions(); + } else { + this.l7ServerThroughputChartOptions = this.getNoDataChartOptions(); + } } + // Missing handler for clientThroughputChartOptions? + // The original code had clientThroughputChartOptions configured but I don't see an explicit call for 'client_throughput'. + // However 'net_throughput' was assigned to serverThroughputChartOptions. + // Looking at the calls: + // 'net_throughput', 'l3_vpn_throughput', 'l3_client_app_throughput', 'l7_client_throughput', 'l7_server_throughput' + // The original assigned 'net_throughput' to serverThroughputChartOptions. + // Maybe client_throughput is not fetched or part of one of these? + // Original code: + // else if (payload?.stat_name === 'net_throughput') { ... this.serverThroughputChartOptions = ... } + // Where is clientThroughputChartOptions used? + // It is defined but not seemingly assigned in the original 'next' block provided in the snippet. + // I will keep it as empty/placeholder unless I see where it comes from. + // Actually, let me check the original code snippet again. + // Line 125: clientThroughputChartOptions defined effectively. + // It was not assigned in the original snippet I viewed! + // I will initialize it to No Data to be safe. + }, - error: (error: { message: string; }) => { + error: (error: any) => { console.log(error); - this._notification.showError(error.message); + this.assignNoDataToAllCharts(payload?.stat_name); } }) } + assignNoDataToAllCharts(statName: string | undefined) { + const noData = this.getNoDataChartOptions(); + if (!statName) return; + if (statName === 'login_status') this.loginStatusChartOptions = noData; + if (statName === 'tunnel_status') this.l3TunnelStatusChartOptions = noData; + if (statName === 'net_throughput') this.serverThroughputChartOptions = noData; + if (statName === 'l3_vpn_throughput') this.l3VPNThroughputChartOptions = noData; + if (statName === 'l3_client_app_throughput') this.l3ClientThroughputChartOptions = noData; + if (statName === 'l7_request_status') this.l7RequestStatusChartOptions = noData; + if (statName === 'l7_client_throughput') this.l7ClientThroughputChartOptions = noData; + if (statName === 'l7_server_throughput') this.l7ServerThroughputChartOptions = noData; + } + openTimeFilterDialog(): void { const dialogRef = this._dialog.open(TimeFilter, { width: '600px', @@ -263,6 +356,187 @@ } }); - dialogRef.afterClosed().subscribe(() => {}); + dialogRef.afterClosed().subscribe(() => { }); } + + getAreaChartOptions(title: string, data: any[], colorStart: string, colorEnd: string, unit: string = ''): EChartsOption { + return { + tooltip: { + trigger: 'axis', + formatter: (params: any) => { + let tooltip = `
${params[0].axisValueLabel}
`; + params.forEach((item: any) => { + let val = item.value[1]; + try { val = Number(val).toFixed(2); } catch (e) { } + tooltip += `
+ + ${item.seriesName}: ${val} ${unit}
`; + }); + return tooltip; + }, + backgroundColor: 'rgba(255, 255, 255, 0.95)', + borderColor: '#eee', + borderWidth: 1, + textStyle: { color: '#333' }, + padding: [8, 12] + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + top: '10%', + containLabel: true + }, + xAxis: { + type: 'time', + boundaryGap: ['0%', '0%'], + axisLine: { show: false }, + axisTick: { show: false }, + splitLine: { show: false }, + axisLabel: { color: '#999', fontSize: 11 } + }, + yAxis: { + type: 'value', + splitLine: { + lineStyle: { + type: 'dashed', + color: '#f0f0f0' + } + }, + axisLabel: { color: '#999', fontSize: 11 } + }, + series: [ + { + name: title, + type: 'line', + smooth: true, + symbol: 'none', + itemStyle: { + color: colorStart + }, + lineStyle: { + width: 2.5, + color: colorStart + }, + areaStyle: { + color: new graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: colorStart }, + { offset: 1, color: colorEnd } + ]) + }, + data: data + } + ] + }; + } + + getMultiSeriesAreaChartOptions(seriesData: { name: string, data: any[], colorStart: string, colorEnd: string }[], unit: string = ''): EChartsOption { + const series = seriesData.map(s => ({ + name: s.name, + type: 'line' as const, + smooth: true, + symbol: 'none', + itemStyle: { + color: s.colorStart + }, + lineStyle: { + width: 2.5, + color: s.colorStart + }, + areaStyle: { + opacity: 0.6, // Slight transparency for stacking visibility + color: new graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: s.colorStart }, + { offset: 1, color: s.colorEnd } + ]) + }, + data: s.data + })); + + return { + tooltip: { + trigger: 'axis', + formatter: (params: any) => { + let tooltip = `
${params[0].axisValueLabel}
`; + params.forEach((item: any) => { + let color = item.color; + if (typeof item.color === 'object' && item.color.colorStops) { + color = item.color.colorStops[0].color; + } + let val = item.value[1]; + try { val = Number(val).toFixed(2); } catch (e) { } + tooltip += `
+ + ${item.seriesName}: ${val} ${unit}
`; + }); + return tooltip; + }, + backgroundColor: 'rgba(255, 255, 255, 0.95)', + borderColor: '#eee', + borderWidth: 1, + textStyle: { color: '#333' }, + padding: [8, 12] + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + top: '15%', // Space for legend + containLabel: true + }, + legend: { + data: seriesData.map(s => s.name), + top: 0, + right: 10, + itemWidth: 10, + itemHeight: 10, + icon: 'circle', + textStyle: { fontSize: 11, color: '#666' } + }, + xAxis: { + type: 'time', + boundaryGap: ['0%', '0%'], + axisLine: { show: false }, + axisTick: { show: false }, + splitLine: { show: false }, + axisLabel: { color: '#999', fontSize: 11 } + }, + yAxis: { + type: 'value', + splitLine: { + lineStyle: { + type: 'dashed', + color: '#f0f0f0' + } + }, + axisLabel: { color: '#999', fontSize: 11 } + }, + series: series + }; + } + + getNoDataChartOptions(): EChartsOption { + return { + title: { + show: false + }, + graphic: { + elements: [ + { + type: 'text', + left: 'center', + top: 'middle', + style: { + text: 'No Data Available', + fontSize: 14, + fill: '#bdbdbd' + } + } + ] + }, + xAxis: { show: false }, + yAxis: { show: false }, + grid: { show: false } + }; + } } Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn/resource-monitoring-ssl-vpn.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn/resource-monitoring-ssl-vpn.html (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn/resource-monitoring-ssl-vpn.html (working copy) @@ -1,62 +1,56 @@ - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + +
ID {{ i | globalSerial }}Service Name - {{ element?.vsite_name }} - IP List{{ element?.vsite_ip }}Device Name{{element?.name}}Device Group{{element?.device_group}}Sessions{{element?.active_sessions}}Certificate -
-
- Status: - {{element?.last_out_bps}} -
-
- Expiry: - {{element?.last_in_bps}} -
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - -
ID {{ i | globalSerial }}Service Name + {{ element?.vsite_name }} + IP List{{ element?.vsite_ip }}Device Name{{element?.name}}Device Group{{element?.device_group}}Sessions{{element?.active_sessions}}Certificate +
+
+ Status: + {{element?.last_out_bps}}
-
No results found.
- - -
+
+ Expiry: + {{element?.last_in_bps}} +
+
+
No results found.
- - + + +
+
\ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn/resource-monitoring-ssl-vpn.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn/resource-monitoring-ssl-vpn.scss (revision 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-ssl-vpn/resource-monitoring-ssl-vpn.scss (working copy) @@ -0,0 +1,96 @@ +.ssl-vpn-container { + padding: 12px; + background-color: #fafafa; + height: 100%; + overflow: hidden; + box-sizing: border-box; + font-family: 'Roboto', sans-serif; + display: flex; + flex-direction: column; + + // Table Container + .table-container { + border-radius: 8px; + overflow: hidden; + border: 1px solid #e0e0e0; + background: white; + flex: 1; + display: flex; + flex-direction: column; + height: 100%; + + .table-scroll-area { + flex: 1; + overflow: auto; + width: 100%; + } + + .modern-table { + width: 100%; + + th.mat-mdc-header-cell { + background-color: #f5f5f5; + color: #424242; + font-weight: 600; + font-size: 13px; + padding: 0 16px; + border-bottom: 1px solid #e0e0e0; + } + + td.mat-mdc-cell { + padding: 12px 16px; + font-size: 13px; + color: #333; + border-bottom: 1px solid #f0f0f0; + + &.no-data-cell { + text-align: center; + padding: 48px; + color: #757575; + background-color: white; + } + } + + tr.mat-mdc-row:hover { + background-color: #f9f9f9; + } + + // Links + .details-page-link, + .a-link { + color: #1976d2; + cursor: pointer; + text-decoration: none; + font-weight: 500; + + &:hover { + text-decoration: underline; + } + } + } + } + + mat-paginator { + background: transparent; + border-top: 1px solid #e0e0e0; + } + + // Stats (Preserved) + .stats-container { + display: flex; + flex-direction: column; + gap: 4px; + } + + .stat-item { + display: flex; + align-items: center; + gap: 6px; + } + + .progress-number { + font-size: 12px; + min-width: 30px; + text-align: right; + } +} \ No newline at end of file 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 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/chart-options.ts (working copy) @@ -6,6 +6,31 @@ }) export class ChartOptions { + getNoDataChartOptions(): EChartsOption { + return { + title: { + show: false + }, + graphic: { + elements: [ + { + type: 'text', + left: 'center', + top: 'middle', + style: { + text: 'No Data Available', + fontSize: 14, + fill: '#bdbdbd' + } + } + ] + }, + xAxis: { show: false }, + yAxis: { show: false }, + grid: { show: false } + }; + } + throughputChartOptions(sortedNames: any, sortedInbound: any, sortedOutbound: any): EChartsOption { return { tooltip: { @@ -235,14 +260,32 @@ type: 'line', data: outbound, showSymbol: false, - smooth: true + smooth: true, + itemStyle: { + color: '#2196f3' + }, + lineStyle: { + color: '#2196f3' + }, + areaStyle: { + color: '#e3f2fd' + } }, { name: 'Received', type: 'line', data: inbound, showSymbol: false, - smooth: true + smooth: true, + itemStyle: { + color: '#4caf50' + }, + lineStyle: { + color: '#4caf50' + }, + areaStyle: { + color: '#e8f5e9' + } } ] } @@ -289,13 +332,19 @@ name: 'CPU', type: 'line', data: cpu_data, - color: '#008ac5' + color: '#008ac5', + itemStyle: { + color: '#008ac5' + } }, { name: 'Memory', type: 'line', data: memory_data, - color: '#00c698' + color: '#00c698', + itemStyle: { + color: '#00c698' + } } ] } @@ -345,7 +394,10 @@ data: data, color: color, showSymbol: false, - smooth: true + smooth: true, + itemStyle: { + color: color + } } ] } @@ -393,12 +445,18 @@ type: 'line', data: data, color: colors[0], + itemStyle: { + color: colors[0] + } }, { name: labels?.label[1], type: 'line', data: data, - color: colors[1] + color: colors[1], + itemStyle: { + color: colors[1] + } } ] } 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 2819) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/shared/shared-module.ts (working copy) @@ -53,7 +53,7 @@ solidIcons.faBars, solidIcons.faQuestionCircle, solidIcons.faCog, solidIcons.faUserCircle, solidIcons.faSignOutAlt, solidIcons.faPencilRuler, solidIcons.faFileAlt, solidIcons.faCogs, solidIcons.faShieldAlt, solidIcons.faSitemap, solidIcons.faTools, solidIcons.faCubes, - solidIcons.faClipboardList, solidIcons.faCompass, solidIcons.faChevronRight, + solidIcons.faClipboardList, solidIcons.faCompass, solidIcons.faChevronRight, solidIcons.faArrowLeft, solidIcons.faAngleDoubleLeft, solidIcons.faAngleDoubleRight, solidIcons.faTv, solidIcons.faTerminal, solidIcons.faIdBadge, solidIcons.faServer, solidIcons.faTimeline, solidIcons.faCodeCompare, solidIcons.faListCheck, solidIcons.faGears, solidIcons.faEthernet,