Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-analysis-slb-elaborate/log-analysis-slb-elaborate.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-analysis-slb-elaborate/log-analysis-slb-elaborate.html (revision 2820) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-analysis-slb-elaborate/log-analysis-slb-elaborate.html (working copy) @@ -1,129 +1,175 @@ - - - - - - Log Analysis - - - - -
-
-
- - - - -
+
+ + +
+ +
+ Log Analysis Detail + + Service: {{serviceName}} + VIP: {{vip}} + +
+
+ + -
- - - - - - today - - - -
- -
- - - - - - today - - - -
- - -
- Example -
    -
  • http_status_code=200(200/400/401/403/404/500/504...) -
    • -
  • http_method=GET(GET/POST/PUT...) -
    • -
  • http_method=GET&http_status_code=200 -
    • -
  • virtual_ip=10.1.1.1
    • -
-
- @if (totalRecordPoints > 0) { - - - - -
- - Total Records - {{ totalRecordPoints }} - -
-
-
-
- - - - - } - + -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
No. {{ i | globalSerial }} Timestamp{{ element?.timestamp | date: 'medium' }} Source IP{{ element?.client_ip }} User Agent{{ element?.useragent?.device?.name +', '+ - element?.useragent?.os?.full +', '+ element?.useragent?.name +', '+ element?.useragent?.version }} Method{{ element?.http_method }} Server IP{{ element?.virtual_ip }} Status Code{{ element?.http_status_code }} RTT{{ element?.duration }}
No results found.
- - -
+
+
+ + Filter Query + +
+ +
+ + + + Start Time + + + + + + + + End Time + + + + + + + +
+
+ + + + + + + + +
+ + + Traffic Overview +
Total Records: {{ totalRecordPoints }}
+ + +
+ + + + + +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
# {{ i | globalSerial }} Timestamp {{ element?.timestamp | date: 'medium' }} Source IP {{ element?.client_ip }} User Agent +
+ {{ element?.useragent?.device?.name }} {{ element?.useragent?.os?.name }} {{ element?.useragent?.name + }} +
+ 		Method + {{ element?.http_request_method }} + Message +
{{ element?.message }}
+ 		Status + + {{ element?.http_status_code }} + +
+
+ + No logs found matching criteria. +
+
+
+ + + +
\ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-analysis-slb-elaborate/log-analysis-slb-elaborate.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-analysis-slb-elaborate/log-analysis-slb-elaborate.scss (revision 2820) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-analysis-slb-elaborate/log-analysis-slb-elaborate.scss (working copy) @@ -1,193 +1,320 @@ -.filter-row { +.page-container { display: flex; - gap: 15px; // Reduced gap - flex-wrap: wrap; - margin-top: 0; // Removed top margin - align-items: center; - padding: 12px 16px; // Reduced padding + flex-direction: column; + gap: 16px; + padding: 16px; + background-color: #f8f9fa; + height: calc(100vh - 64px); // Subtract header height if necessary, or just 100vh if under main shell + height: 100%; // Assuming parent container manages height, otherwise 100vh + overflow: hidden; +} - .filter-field { - min-width: 180px; - flex: 1; +.content-grid { + flex: 1; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 16px; + padding-right: 4px; // Avoid scrollbar covering content +} + +// Ensure header and filter don't shrink +.header-card, +.filter-card { + flex-shrink: 0; +} + +// Common Card Styles +mat-card { + border-radius: 8px; + background: #fff; + border: none; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; + + &.appearance-outlined { + border: 1px solid #e0e0e0; + box-shadow: none !important; } } -.page-card-1 { +// Header Section +.header-card { .mat-mdc-card-header { + padding: 12px 16px; + } + + .header-content { display: flex; - justify-content: space-between; align-items: center; - padding: 12px 16px; - // Removed border-bottom + gap: 16px; + width: 100%; + } - .mat-mdc-card-title { - font-size: 18px; - font-weight: 500; + .title-section { + display: flex; + flex-direction: column; + gap: 4px; + + mat-card-title { + font-size: 20px; + font-weight: 600; margin: 0; + line-height: 1.2; + } - .back-to-main-page { - color: #1170cf; - text-decoration: none; - cursor: pointer; - display: flex; - align-items: center; - gap: 8px; - font-size: 16px; + mat-card-subtitle { + font-size: 14px; + color: #666; + margin: 0; - &:hover { - text-decoration: underline; + .subtitle-item { + margin-right: 16px; + + strong { + color: #333; + font-weight: 500; } } } } +} +// Filter Section +.filter-card { .mat-mdc-card-content { - padding: 0; // Removed padding to let children handle it + padding: 16px; } -} -.table-container { - border: 1px solid #e0e0e0; // Restored border - border-radius: 4px; - margin-top: 0; // Removed margin - - table.an-table { + .filter-form { width: 100%; + } - th.mat-header-cell { - font-weight: 600; - color: #444; - background-color: #f9fafb; - padding: 10px 12px; // Reduced padding - font-size: 14px; - border-bottom: 1px solid #e0e0e0; - } + .filter-grid { + display: flex; + align-items: center; + gap: 16px; + flex-wrap: wrap; - td.mat-cell { - padding: 10px 12px; // Reduced padding - color: #333; - font-size: 14px; - border-bottom: 1px solid #f0f0f0; + .filter-input { + flex: 2; + min-width: 250px; } - tr.mat-row { - &:hover { - background-color: #f5f7fa; + mat-form-field { + flex: 1; + min-width: 180px; + margin-bottom: 0; + + // Compact form field density + .mat-mdc-text-field-wrapper { + padding-bottom: 0; } - &:last-child td { - border-bottom: none; + .mat-mdc-form-field-subscript-wrapper { + display: none; // Hide if not using hints/errors for cleaner look } } - } -} -.example-section { - padding: 0 16px 16px 16px; + button[type="submit"] { + height: 48px; // Reduced from 56px + min-width: 120px; + border-radius: 4px; + margin-bottom: 2px; // Align visually with inputs - b { - display: block; - margin-bottom: 8px; - color: #444; - font-size: 14px; + mat-spinner { + margin-right: 8px; + display: inline-block; + } + + fa-icon { + margin-right: 8px; // Add spacing between icon and text + } + } } - ul { - list-style-type: none; - padding: 0; - margin: 0; + .help-icon-wrapper { display: flex; - flex-direction: column; - gap: 4px; + align-items: center; + justify-content: center; + cursor: pointer; + margin-right: 8px; // Add spacing from right edge + } - li { - font-size: 13px; - color: #666; + .help-icon { + font-size: 16px; // Slightly smaller + color: #757575; - .a-link-color { - color: #1976d2; - cursor: pointer; - - &:hover { - text-decoration: underline; - } - } + &:hover { + color: #1976d2; } } } -.dashboard-card { - width: 100%; - height: 100%; - border-radius: 8px; - background-color: inherit; -} +// Chart Section +.chart-card { + margin-bottom: 16px; -.card-content-wrapper { - margin-top: 2px; - padding: 0 !important; - display: flex; - flex-direction: column; - height: 100%; - width: 100%; -} + .mat-mdc-card-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 16px; + border-bottom: 1px solid #f0f0f0; -.card-header-row { - display: flex; - align-items: center; - gap: 6px; - margin-bottom: 8px; - padding: 0 8px; -} + mat-card-title { + font-size: 16px; + font-weight: 500; + } -.card-title { - font-size: 14px; - font-weight: 500; - color: #555; - margin: 0; - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; -} + .record-badge { + background: #e3f2fd; + color: #1565c0; + padding: 4px 12px; + border-radius: 16px; + font-size: 12px; + font-weight: 500; + } + } -.chart-flex-container { - display: flex; - justify-content: space-around; - align-items: center; - height: 100%; - width: 100%; - flex-grow: 1; -} + .chart-content { + padding: 16px; + height: 300px; + } -.chart-container { - width: 100%; - height: 100%; - max-width: none; - max-height: none; + .echart-container { + width: 100%; + height: 100%; + } } -.chart-flex-container .chart-container { - width: 100%; - height: 100%; -} +// Table Section +.table-card { + padding: 0; -mat-grid-list { - height: 100%; - width: 100%; -} + .mat-mdc-card-content { + padding: 0; + } -.a-link-color { - color: #1976d2; - cursor: pointer; - text-decoration: none; - font-weight: 500; + .table-wrapper { + position: relative; + overflow: auto; - &:hover { - text-decoration: underline; + .loading-shade { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: rgba(255, 255, 255, 0.7); + z-index: 10; + display: flex; + align-items: center; + justify-content: center; + } } -} -.w-10 { - width: 10%; + table.modern-table { + width: 100%; + + th.mat-header-cell { + background-color: #f8f9fa; + color: #5f6368; + font-weight: 600; + font-size: 13px; + text-transform: uppercase; + padding: 0 16px; + height: 48px; + border-bottom: 1px solid #e0e0e0; + } + + td.mat-cell { + padding: 0 16px; + font-size: 14px; + color: #3c4043; + height: 48px; + border-bottom: 1px solid #f1f3f4; + } + + tr.mat-row:hover { + background-color: #f8f9fa; + } + + // Status Badges + .status-badge { + padding: 2px 8px; + border-radius: 4px; + font-size: 12px; + font-weight: 500; + + &.status-2xx { + background-color: #e6f4ea; + color: #137333; + } + + &.status-3xx { + background-color: #e8f0fe; + color: #1967d2; + } + + &.status-4xx { + background-color: #fce8e6; + color: #c5221f; + } + + &.status-5xx { + background-color: #fef7e0; + color: #ea8600; + } + } + + // Method Badges + .method-badge { + font-weight: 600; + font-size: 12px; + + &.GET { + color: #1967d2; + } + + &.POST { + color: #137333; + } + + &.PUT { + color: #ea8600; + } + + &.DELETE { + color: #c5221f; + } + } + + .ua-cell { + max-width: 250px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + // No Data Row + .no-data-cell { + text-align: center; + padding: 48px 0; + + .no-data-content { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + color: #757575; + + mat-icon { + font-size: 48px; + height: 48px; + width: 48px; + opacity: 0.5; + } + } + } + } } \ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-analysis-slb-elaborate/log-analysis-slb-elaborate.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-analysis-slb-elaborate/log-analysis-slb-elaborate.ts (revision 2820) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/log-analysis-slb-elaborate/log-analysis-slb-elaborate.ts (working copy) @@ -1,19 +1,37 @@ -import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core'; -import {SharedModule} from '../../../shared/shared-module'; -import {ActivatedRoute, Router} from '@angular/router'; -import {FormBuilder, FormControl, FormGroup} from '@angular/forms'; -import {NgxMatDatepickerToggle} from '@ngxmc/datetime-picker'; -import {OpenSearch} from '../../../services/open-search'; -import {take} from 'rxjs/operators'; -import {NotificationService} from '../../../services/notification'; -import {EChartsOption} from 'echarts'; -import {MatTableDataSource} from '@angular/material/table'; -import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe'; -import {MatPaginator, PageEvent} from '@angular/material/paginator'; +import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; +import { SharedModule } from '../../../shared/shared-module'; +import { ActivatedRoute, Router } from '@angular/router'; +import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; +import { NgxMatDatepickerToggle } from '@ngxmc/datetime-picker'; +import { OpenSearch } from '../../../services/open-search'; +import { take } from 'rxjs/operators'; +import { NotificationService } from '../../../services/notification'; +import { EChartsOption } from 'echarts'; +import { MatTableDataSource } from '@angular/material/table'; +import { GlobalSerialPipe } from '../../../pipes/global-serial-pipe'; +import { MatPaginator, PageEvent } from '@angular/material/paginator'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { MatMenuModule } from '@angular/material/menu'; +import { MAT_DATE_FORMATS, MatDateFormats } from '@angular/material/core'; +export const CUSTOM_DATE_FORMATS: MatDateFormats = { + parse: { + dateInput: { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' } + }, + display: { + dateInput: { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false }, + monthYearLabel: { year: 'numeric', month: 'short' }, + dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' }, + monthYearA11yLabel: { year: 'numeric', month: 'long' }, + } +}; + @Component({ selector: 'app-log-analysis-slb-elaborate', - imports: [SharedModule, NgxMatDatepickerToggle, GlobalSerialPipe], + imports: [SharedModule, NgxMatDatepickerToggle, GlobalSerialPipe, MatProgressSpinnerModule, MatMenuModule], + providers: [ + { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS } + ], templateUrl: './log-analysis-slb-elaborate.html', styleUrl: './log-analysis-slb-elaborate.scss' }) @@ -22,6 +40,7 @@ serviceName: string = ''; vip: string = ''; searchForm!: FormGroup; + isLoading: boolean = false; endTimeMillis!: number; startTimeMillis!: number; @@ -29,7 +48,7 @@ chartOption1: EChartsOption = {}; dataSource: MatTableDataSource = new MatTableDataSource(); - dataColumns: Array = ['serial', 'timestamp', 'srcIp', 'useragent', 'method', 'serverIp', 'statusCode', 'rtt']; + dataColumns: Array = ['serial', 'timestamp', 'srcIp', 'useragent', 'method', 'statusCode', 'message']; // 'rtt', totalRecords = 0; @ViewChild(MatPaginator) paginator!: MatPaginator; @@ -111,18 +130,21 @@ getFilteredLogs(payload: any) { this.totalRecordPoints = 0; + this.isLoading = true; this._opensearch.queryOSLogs(payload).pipe(take(1)).subscribe({ next: (result: any) => { + this.isLoading = false; if (result && result?.aggregations && result.aggregations?.log_over_time && result.aggregations.log_over_time?.buckets) { let buckets = result.aggregations.log_over_time?.buckets; if (buckets.length > 0) { - this.totalRecordPoints = buckets?.length; + this.totalRecordPoints = result?.hits?.total?.value || 0; this.updateChart(buckets); } } }, error: (error: any) => { + this.isLoading = false; this._notification.showError(`Error: ${error?.message || 'Failed to fetch the logs'}`); } }); @@ -206,11 +228,8 @@ 'http_method', ]); - updateLogFilters() { - this.dataSource.data = []; - this.startTimeMillis = new Date(this.searchForm.value?.start).getTime(); - this.endTimeMillis = new Date(this.searchForm.value?.end).getTime(); - let _filters: any = [ + getFilterClauses(start: number, end: number): any[] { + let _filters: any[] = [ { "term": { "virtual_ip": this.vip @@ -219,26 +238,43 @@ { "range": { "@timestamp": { - "gte": this.startTimeMillis, - "lte": this.endTimeMillis + "gte": start, + "lte": end } } } - ] + ]; + let _keyword = this.searchForm.value?.filter; - _keyword = _keyword.split('&'); - _keyword?.forEach((item: any) => { - let _term = item.split('='); - if (_term.length > 1) { - let x = { 'term': {} }; - if (this.keywordFields.has(_term[0])) { - x['term'] = {[_term[0] + '.keyword']: _term[1]} - } else { - x['term'] = {[_term[0]]: _term[1]} + if (_keyword) { + _keyword = _keyword.split('&'); + _keyword?.forEach((item: any) => { + let _term = item.split('='); + if (_term.length > 1) { + let x: any = { 'term': {} }; + if (this.keywordFields.has(_term[0])) { + x['term'] = { [_term[0] + '.keyword']: _term[1] } + } else { + x['term'] = { [_term[0]]: _term[1] } + } + _filters.push(x); } - _filters.push(x); - } - }) + }); + } + return _filters; + } + + updateLogFilters() { + this.dataSource.data = []; + this.startTimeMillis = new Date(this.searchForm.value?.start).getTime(); + this.endTimeMillis = new Date(this.searchForm.value?.end).getTime(); + + // Sync table time range with search time range + this.tableStartTime = this.startTimeMillis; + this.tableEndTime = this.endTimeMillis; + + let _filters = this.getFilterClauses(this.startTimeMillis, this.endTimeMillis); + let payload: any = { "size": 0, "query": { @@ -261,35 +297,38 @@ } }; this.getFilteredLogs(payload); + + // Reset pagination to first page + this.pageStart = 0; + if (this.paginator) { + this.paginator.pageIndex = 0; + } + this.updateDataTable(); } pageStart: number = 0; pageSize: number = 10; updateDataTable() { + let _filters = this.getFilterClauses(this.tableStartTime, this.tableEndTime); let payload: any = { "size": this.pageSize, "from": this.pageStart, - "sort": [{"@timestamp": {"order": "desc", "unmapped_type": "boolean"}}], - "_source": ["client_ip", "http_status_code", "http_method", "virtual_ip", "duration", "useragent"], + "sort": [{ "@timestamp": { "order": "desc", "unmapped_type": "boolean" } }], + "_source": ["client_ip", "http_status_code", "http_request_method", "virtual_ip", "duration", "useragent", "message"], "query": { "constant_score": { "filter": { "bool": { - "must": [{"term": {"virtual_ip": this.vip}}, { - "range": { - "@timestamp": { - "gte": this.tableStartTime, - "lte": this.tableEndTime, - } - } - }] + "must": _filters } } } } } + this.isLoading = true; this._opensearch.queryOSLogs(payload).pipe(take(1)).subscribe({ next: (result: any) => { + this.isLoading = false; if (result && result?.hits && result?.hits?.hits) { let _hits: any = result?.hits?.hits; let newData: any[] = []; @@ -303,20 +342,24 @@ http_method: _source?.http_method, virtual_ip: _source?.virtual_ip, duration: _source?.duration, - useragent: _source?.useragent + useragent: _source?.useragent, + message: _source?.message, + http_request_method: _source?.http_request_method }) }) this.totalRecords = result?.hits?.total?.value; if (this.paginator) { this.paginator.length = result?.hits?.total?.value; - this.paginator.pageIndex = Math.floor(payload?.start / payload?.size); + this.paginator.pageIndex = Math.floor(payload?.from / payload?.size); this.paginator.pageSize = payload?.size || 10; } this.dataSource.data = newData; - this.dataSource.paginator = this.paginator; + // For server-side pagination, we don't set the paginator on the dataSource + // this.dataSource.paginator = this.paginator; } }, error: (error: any) => { + this.isLoading = false; this._notification.showError(`Error: ${error?.message || 'Failed to fetch the logs'}`); this.totalRecords = 0; if (this.paginator) {