aril 1.2.7 → 1.2.8

package/theme/layout/app/site-map/site-map-sidebar.component.html

@@ -1,121 +1,121 @@
-<p-sidebar
-	[(visible)]="visible"
-	position="right"
-	[transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'"
-	styleClass="layout-sitemap-sidebar w-full sm:w-30rem"
-	*transloco="let t; read: 'siteMap'">
-	<ng-template pTemplate="header">
-		<div class="flex align-items-center justify-content-between gap-2 w-full">
-			<div class="flex align-items-center gap-2">
-				<i class="pi pi-sitemap text-primary text-xl"></i>
-				<span class="font-bold text-lg">{{ t('siteMap') }}</span>
-				<span class="total-pages">{{ totalPages() }} {{ t('pages') }}</span>
-			</div>
-		</div>
-	</ng-template>
-
-	<div class="sitemap-content">
-		<div class="search-section grid p-fluid m-0">
-			<aril-text
-				[placeholder]="t('searchPages')"
-				[(ngModel)]="searchTerm"
-				(ngModelChange)="onSearchChange()"
-				class="col-10 m-0">
-			</aril-text>
-			@if (filteredNodes().length > 0) {
-			<div class="col-2 flex align-items-center m-0 p-0">
-					<fa-icon
-						[icon]="solidIcons.faAnglesDown"
-						size="xl"
-						style="color: var(--primary-color)"
-						class="col-1 cursor-pointer"
-						[pTooltip]="t('expandAll')"
-						tooltipPosition="top"
-						(click)="expandAll()">
-					</fa-icon>
-					<fa-icon
-						[icon]="solidIcons.faAnglesUp"
-						size="xl"
-						style="color: var(--red-500)"
-						class="col-1 ml-3 cursor-pointer"
-						[pTooltip]="t('collapseAll')"
-						tooltipPosition="top"
-						(click)="collapseAll()">
-					</fa-icon>
-				</div>
-			}
-		</div>
-
-		<!-- Site Map Tree -->
-		@if (filteredNodes().length > 0) {
-			<div class="sitemap-tree">
-				<p-scrollPanel [style]="{ width: '100%', height: '100%' }">
-					<div class="tree-container">
-						@for (node of filteredNodes(); track trackByKey($index, node)) {
-							<ng-container *ngTemplateOutlet="treeNodeTemplate; context: { $implicit: node, level: 0 }"></ng-container>
-						}
-					</div>
-				</p-scrollPanel>
-			</div>
-		} @else {
-			<div class="empty-state">
-				<div class="empty-content">
-					<i class="pi pi-sitemap empty-icon"></i>
-					<h3 class="empty-title">
-						{{ searchTerm() ? t('noSearchResults') : t('noPages') }}
-					</h3>
-					<p class="empty-message">
-						{{ searchTerm() ? t('tryDifferentKeywords') : '' }}
-					</p>
-					@if (searchTerm()) {
-						<aril-button
-							[label]="t('clearSearch')"
-							icon="TIMES"
-							color="secondary"
-							[outlined]="true"
-							size="sm"
-							(clickEvent)="searchTerm.set(''); onSearchChange()">
-						</aril-button>
-					}
-				</div>
-			</div>
-		}
-
-		<!-- Recursive Tree Node Template -->
-		<ng-template #treeNodeTemplate let-node let-level="level">
-			<div class="tree-node" [style.margin-left.px]="level * 20">
-				<div
-					class="node-item"
-					[class.has-children]="node.children && node.children.length > 0"
-					[class.is-page]="node.routerLink"
-					[routerLink]="node.routerLink"
-					(click)="!node.routerLink ? toggleNode(node) : (visible = false)">
-					<div class="node-content">
-						@if (node.children && node.children.length > 0) {
-							<div class="toggle-btn" (click)="$event.stopPropagation(); toggleNode(node)">
-								<i class="pi" [class.pi-chevron-right]="!node.expanded" [class.pi-chevron-down]="node.expanded"></i>
-							</div>
-						}
-
-						@if (node.icon) {
-							<i class="node-icon" [class]="node.icon"></i>
-						}
-						<span class="node-label">{{ node.label | translateJson }}</span>
-
-						@if (node.routerLink) {
-							<i class="external-icon pi pi-external-link"></i>
-						}
-					</div>
-				</div>
-
-				<!-- Recursive Children -->
-				@if (node.children && node.expanded) {
-					@for (child of node.children; track trackByKey($index, child)) {
-						<ng-container
-							*ngTemplateOutlet="treeNodeTemplate; context: { $implicit: child, level: level + 1 }"></ng-container>
-					}
-				}
-			</div>
-		</ng-template>
-	</div>
-</p-sidebar>
+<p-sidebar
+	[(visible)]="visible"
+	position="right"
+	[transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'"
+	styleClass="layout-sitemap-sidebar w-full sm:w-30rem"
+	*transloco="let t; read: 'siteMap'">
+	<ng-template pTemplate="header">
+		<div class="flex align-items-center justify-content-between gap-2 w-full">
+			<div class="flex align-items-center gap-2">
+				<i class="pi pi-sitemap text-primary text-xl"></i>
+				<span class="font-bold text-lg">{{ t('siteMap') }}</span>
+				<span class="total-pages">{{ totalPages() }} {{ t('pages') }}</span>
+			</div>
+		</div>
+	</ng-template>
+
+	<div class="sitemap-content">
+		<div class="search-section grid p-fluid m-0">
+			<aril-text
+				[placeholder]="t('searchPages')"
+				[(ngModel)]="searchTerm"
+				(ngModelChange)="onSearchChange()"
+				class="col-10 m-0">
+			</aril-text>
+			@if (filteredNodes().length > 0) {
+			<div class="col-2 flex align-items-center m-0 p-0">
+					<fa-icon
+						[icon]="solidIcons.faAnglesDown"
+						size="xl"
+						style="color: var(--primary-color)"
+						class="col-1 cursor-pointer"
+						[pTooltip]="t('expandAll')"
+						tooltipPosition="top"
+						(click)="expandAll()">
+					</fa-icon>
+					<fa-icon
+						[icon]="solidIcons.faAnglesUp"
+						size="xl"
+						style="color: var(--red-500)"
+						class="col-1 ml-3 cursor-pointer"
+						[pTooltip]="t('collapseAll')"
+						tooltipPosition="top"
+						(click)="collapseAll()">
+					</fa-icon>
+				</div>
+			}
+		</div>
+
+		<!-- Site Map Tree -->
+		@if (filteredNodes().length > 0) {
+			<div class="sitemap-tree">
+				<p-scrollPanel [style]="{ width: '100%', height: '100%' }">
+					<div class="tree-container">
+						@for (node of filteredNodes(); track trackByKey($index, node)) {
+							<ng-container *ngTemplateOutlet="treeNodeTemplate; context: { $implicit: node, level: 0 }"></ng-container>
+						}
+					</div>
+				</p-scrollPanel>
+			</div>
+		} @else {
+			<div class="empty-state">
+				<div class="empty-content">
+					<i class="pi pi-sitemap empty-icon"></i>
+					<h3 class="empty-title">
+						{{ searchTerm() ? t('noSearchResults') : t('noPages') }}
+					</h3>
+					<p class="empty-message">
+						{{ searchTerm() ? t('tryDifferentKeywords') : '' }}
+					</p>
+					@if (searchTerm()) {
+						<aril-button
+							[label]="t('clearSearch')"
+							icon="TIMES"
+							color="secondary"
+							[outlined]="true"
+							size="sm"
+							(clickEvent)="searchTerm.set(''); onSearchChange()">
+						</aril-button>
+					}
+				</div>
+			</div>
+		}
+
+		<!-- Recursive Tree Node Template -->
+		<ng-template #treeNodeTemplate let-node let-level="level">
+			<div class="tree-node" [style.margin-left.px]="level * 20">
+				<div
+					class="node-item"
+					[class.has-children]="node.children && node.children.length > 0"
+					[class.is-page]="node.routerLink"
+					[routerLink]="node.routerLink"
+					(click)="!node.routerLink ? toggleNode(node) : (visible = false)">
+					<div class="node-content">
+						@if (node.children && node.children.length > 0) {
+							<div class="toggle-btn" (click)="$event.stopPropagation(); toggleNode(node)">
+								<i class="pi" [class.pi-chevron-right]="!node.expanded" [class.pi-chevron-down]="node.expanded"></i>
+							</div>
+						}
+
+						@if (node.icon) {
+							<i class="node-icon" [class]="node.icon"></i>
+						}
+						<span class="node-label">{{ node.label | translateJson }}</span>
+
+						@if (node.routerLink) {
+							<i class="external-icon pi pi-external-link"></i>
+						}
+					</div>
+				</div>
+
+				<!-- Recursive Children -->
+				@if (node.children && node.expanded) {
+					@for (child of node.children; track trackByKey($index, child)) {
+						<ng-container
+							*ngTemplateOutlet="treeNodeTemplate; context: { $implicit: child, level: level + 1 }"></ng-container>
+					}
+				}
+			</div>
+		</ng-template>
+	</div>
+</p-sidebar>

package/ui-business/trace-drawer/index.d.ts

@@ -1,2 +1,4 @@
 export * from './src/trace-drawer.component';
+export * from './src/trace-log.service';
+export * from './src/app-log.service';
 export * from './src/interfaces';

package/ui-business/trace-drawer/src/app-log.service.d.ts

@@ -0,0 +1,10 @@
+import { Observable } from 'rxjs';
+import { RestClient, ServiceCallStateMap, ServiceResponse } from 'aril/http';
+import { AppLogSearchRequest, AppLogSearchResponse } from './interfaces';
+import * as i0 from "@angular/core";
+export declare class AppLogService extends RestClient {
+    states: ServiceCallStateMap<AppLogService>;
+    searchByTraceId(req: AppLogSearchRequest): Observable<ServiceResponse<AppLogSearchResponse>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AppLogService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AppLogService>;
+}

package/ui-business/trace-drawer/src/interfaces.d.ts

@@ -17,3 +17,35 @@ export interface ApisixHit {
     requestBody?: string;
     responseBody?: string;
 }
+export interface AppLogSearchRequest {
+    traceId: string;
+    startTime?: number;
+    endTime?: number;
+    pager: {
+        pageSize: number;
+        pageNumber: number;
+    };
+}
+export interface AppLogReferenceField {
+    field: string;
+    value: string;
+}
+export interface AppLogItem {
+    id: string;
+    timestamp: number;
+    username?: string;
+    message?: string;
+    app?: string;
+    module?: string;
+    traceId: string;
+    level?: string;
+    errorDetail?: string;
+    referenceFields?: AppLogReferenceField[];
+}
+export interface AppLogSearchResponse {
+    resultInfo?: {
+        totalItem?: number;
+        totalPage?: number;
+    };
+    result: AppLogItem[];
+}

package/ui-business/trace-drawer/src/trace-drawer.component.d.ts

@@ -1,11 +1,15 @@
 import { EventEmitter } from '@angular/core';
 import 'aril/util/primitive-extensions';
-import { ApisixHit } from './interfaces';
+import { ApisixHit, AppLogItem } from './interfaces';
 import * as i0 from "@angular/core";
 type Position = 'right' | 'left';
 type Severity = 'success' | 'secondary' | 'info' | 'warning' | 'danger' | 'contrast' | undefined;
 export declare class TraceDrawerComponent {
     private readonly traceLogService;
+    private readonly appLogService;
+    private readonly messageService;
+    private readonly translocoService;
+    private readonly keycloakService;
     visible: import("@angular/core").InputSignal<boolean, boolean>;
     traceId: import("@angular/core").InputSignal<string, string>;
     position: import("@angular/core").InputSignal<Position, Position>;
@@ -16,15 +20,32 @@ export declare class TraceDrawerComponent {
     endTime: import("@angular/core").InputSignal<number | undefined, number | undefined>;
     visibleChange: EventEmitter<boolean>;
     protected readonly loading: import("@angular/core").WritableSignal<boolean>;
+    protected readonly loadingMore: import("@angular/core").WritableSignal<boolean>;
     protected readonly errorMessage: import("@angular/core").WritableSignal<string | undefined>;
     protected readonly apisixHits: import("@angular/core").WritableSignal<ApisixHit[]>;
+    protected readonly totalItem: import("@angular/core").WritableSignal<number>;
+    protected readonly pageNumber: import("@angular/core").WritableSignal<number>;
+    protected readonly appLogs: import("@angular/core").WritableSignal<AppLogItem[]>;
+    protected readonly appLogsLoadingMore: import("@angular/core").WritableSignal<boolean>;
+    protected readonly appLogsTotal: import("@angular/core").WritableSignal<number>;
+    protected readonly appLogsPage: import("@angular/core").WritableSignal<number>;
+    protected readonly hasMore: import("@angular/core").Signal<boolean>;
+    protected readonly appLogsHasMore: import("@angular/core").Signal<boolean>;
     private readonly request;
+    private readonly appLogsRequest;
     private readonly response;
+    private readonly appLogsResponse;
     constructor();
+    protected loadMore(): void;
+    protected loadMoreAppLogs(): void;
     protected onVisibleChange(value: boolean): void;
     protected retry(): void;
+    protected shareLink(): void;
+    protected copyAsCurl(hit: ApisixHit): Promise<void>;
+    private buildCurl;
     private fetch;
     protected statusSeverity(status: number): Severity;
+    protected levelSeverity(level: string | undefined): Severity;
     protected durationSeverity(seconds: number): Severity;
     protected formatDuration(seconds: number | undefined): string;
     protected formatBytes(bytes: number | undefined): string;