aril 1.2.3 → 1.2.4

package/fesm2022/aril-ui-business-trace-drawer.mjs

@@ -0,0 +1,176 @@
+import { JsonPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, inject, input, EventEmitter, signal, effect, Component, ChangeDetectionStrategy, Output } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { Observable, Subject, switchMap, catchError, EMPTY } from 'rxjs';
+import * as i4 from 'primeng/progressspinner';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
+import * as i2 from 'primeng/sidebar';
+import { SidebarModule } from 'primeng/sidebar';
+import * as i1 from '@ngneat/transloco';
+import { TranslocoModule } from '@ngneat/transloco';
+import { BadgeComponent } from 'aril/ui/badge';
+import { ButtonComponent } from 'aril/ui/button';
+import 'aril/util/primitive-extensions';
+import { __decorate } from 'tslib';
+import { Apps } from 'aril/boot/config/apps';
+import { RestClient, ServiceCall, HTTPMethods, ProxyTypes } from 'aril/http';
+import * as i3 from 'primeng/api';
+
+class TraceLogService extends RestClient {
+    constructor() {
+        super(...arguments);
+        this.states = {};
+    }
+    searchByTraceId(req) {
+        return new Observable();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TraceLogService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TraceLogService, providedIn: 'root' }); }
+}
+__decorate([
+    ServiceCall(HTTPMethods.POST, ProxyTypes.ClientSide, 'request-logs/filter', {}, Apps.MNG)
+], TraceLogService.prototype, "searchByTraceId", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TraceLogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], propDecorators: { searchByTraceId: [] } });
+
+class TraceDrawerComponent {
+    constructor() {
+        this.traceLogService = inject(TraceLogService);
+        this.visible = input(false);
+        this.traceId = input.required();
+        this.position = input('right');
+        this.width = input('min(680px, 90vw)');
+        this.modal = input(false);
+        this.pageSize = input(100);
+        this.startTime = input();
+        this.endTime = input();
+        this.visibleChange = new EventEmitter();
+        this.loading = signal(false);
+        this.errorMessage = signal(undefined);
+        this.apisixHits = signal([]);
+        this.request = new Subject();
+        this.response = toSignal(this.request.pipe(switchMap((traceId) => this.traceLogService
+            .searchByTraceId({
+            traceId,
+            startTime: this.startTime() ?? 20000101000000,
+            endTime: this.endTime() ?? (new Date().dateToLong('time') ?? 99991231235959),
+            pager: { pageSize: this.pageSize(), pageNumber: 1 }
+        })
+            .pipe(catchError((err) => {
+            this.errorMessage.set(err?.error?.message ?? err?.message ?? 'İstek başarısız oldu');
+            this.loading.set(false);
+            return EMPTY;
+        })))));
+        effect(() => {
+            if (this.visible() && this.traceId()) {
+                this.fetch(this.traceId());
+            }
+        }, { allowSignalWrites: true });
+        effect(() => {
+            const resp = this.response();
+            if (!resp)
+                return;
+            this.apisixHits.set(resp.response?.result ?? []);
+            this.loading.set(false);
+            this.errorMessage.set(undefined);
+        }, { allowSignalWrites: true });
+    }
+    onVisibleChange(value) {
+        this.visibleChange.emit(value);
+    }
+    retry() {
+        const id = this.traceId();
+        if (id)
+            this.fetch(id);
+    }
+    fetch(traceId) {
+        this.loading.set(true);
+        this.errorMessage.set(undefined);
+        this.apisixHits.set([]);
+        this.request.next(traceId);
+    }
+    statusSeverity(status) {
+        if (status >= 500)
+            return 'danger';
+        if (status >= 400)
+            return 'warning';
+        if (status >= 300)
+            return 'info';
+        if (status >= 200)
+            return 'success';
+        return 'secondary';
+    }
+    durationSeverity(seconds) {
+        const ms = (seconds ?? 0) * 1000;
+        if (ms >= 1000)
+            return 'danger';
+        if (ms >= 200)
+            return 'warning';
+        return 'success';
+    }
+    formatDuration(seconds) {
+        if (seconds === undefined || seconds === null)
+            return '';
+        const ms = seconds * 1000;
+        if (ms < 1)
+            return `${ms.toFixed(2)} ms`;
+        if (ms < 1000)
+            return `${Math.round(ms)} ms`;
+        return `${(ms / 1000).toFixed(2)} s`;
+    }
+    formatBytes(bytes) {
+        if (bytes === undefined || bytes === null)
+            return '-';
+        if (bytes < 1024)
+            return `${bytes} B`;
+        if (bytes < 1024 * 1024)
+            return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    }
+    formatTimestamp(ts) {
+        if (ts === undefined || ts === null || ts === '')
+            return '';
+        if (typeof ts === 'string')
+            return ts;
+        const s = String(ts);
+        if (s.length === 14) {
+            return `${s.slice(8, 10)}:${s.slice(10, 12)}:${s.slice(12, 14)} ${s.slice(6, 8)}.${s.slice(4, 6)}.${s.slice(0, 4)}`;
+        }
+        if (ts > 1e11) {
+            return new Date(ts).toLocaleString();
+        }
+        return s;
+    }
+    tryParseJson(content) {
+        if (!content)
+            return null;
+        const trimmed = content.trim();
+        if (!((trimmed.startsWith('{') && trimmed.endsWith('}')) || (trimmed.startsWith('[') && trimmed.endsWith(']')))) {
+            return null;
+        }
+        try {
+            return JSON.parse(trimmed);
+        }
+        catch {
+            return null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TraceDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: TraceDrawerComponent, isStandalone: true, selector: "aril-trace-drawer", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, traceId: { classPropertyName: "traceId", publicName: "traceId", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, startTime: { classPropertyName: "startTime", publicName: "startTime", isSignal: true, isRequired: false, transformFunction: null }, endTime: { classPropertyName: "endTime", publicName: "endTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n\t<p-sidebar\r\n\t\t[visible]=\"visible()\"\r\n\t\t(visibleChange)=\"onVisibleChange($event)\"\r\n\t\t[position]=\"position()\"\r\n\t\t[style]=\"{ width: width() }\"\r\n\t\t[modal]=\"modal()\"\r\n\t\t[dismissible]=\"true\"\r\n\t\t[showCloseIcon]=\"true\"\r\n\t\tstyleClass=\"aril-trace-drawer\">\r\n\t\t<ng-template pTemplate=\"header\">\r\n\t\t\t<div class=\"aril-trace-drawer__header\">\r\n\t\t\t\t<i class=\"pi pi-sitemap\"></i>\r\n\t\t\t\t<span class=\"aril-trace-drawer__title\">{{ t('traceDrawer.title') }}</span>\r\n\t\t\t\t<code class=\"aril-trace-drawer__chip\" [title]=\"traceId()\">{{ traceId() }}</code>\r\n\t\t\t</div>\r\n\t\t</ng-template>\r\n\r\n\t\t<div class=\"aril-trace-drawer__body\">\r\n\t\t\t@if (loading()) {\r\n\t\t\t\t<div class=\"aril-trace-drawer__state\">\r\n\t\t\t\t\t<p-progressSpinner strokeWidth=\"3\" styleClass=\"w-3rem h-3rem\"></p-progressSpinner>\r\n\t\t\t\t\t<span>{{ t('traceDrawer.loading') }}</span>\r\n\t\t\t\t</div>\r\n\t\t\t} @else if (errorMessage()) {\r\n\t\t\t\t<div class=\"aril-trace-drawer__state aril-trace-drawer__state--error\">\r\n\t\t\t\t\t<i class=\"pi pi-exclamation-triangle\"></i>\r\n\t\t\t\t\t<p>{{ errorMessage() }}</p>\r\n\t\t\t\t\t<aril-button\r\n\t\t\t\t\t\t[label]=\"t('traceDrawer.retry')\"\r\n\t\t\t\t\t\ticon=\"REFRESH\"\r\n\t\t\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t\t\t(clickEvent)=\"retry()\" />\r\n\t\t\t\t</div>\r\n\t\t\t} @else if (apisixHits().length) {\r\n\t\t\t\t<section class=\"aril-trace-drawer__section\">\r\n\t\t\t\t\t<h3 class=\"aril-trace-drawer__section-title\">\r\n\t\t\t\t\t\t<i class=\"pi pi-globe\"></i>\r\n\t\t\t\t\t\t{{ t('traceDrawer.apisixHeader') }}\r\n\t\t\t\t\t\t<aril-badge [value]=\"apisixHits().length.toString()\" severity=\"info\" [rounded]=\"true\" />\r\n\t\t\t\t\t</h3>\r\n\t\t\t\t\t@for (hit of apisixHits(); track hit.id) {\r\n\t\t\t\t\t\t<div class=\"apisix-card\">\r\n\t\t\t\t\t\t\t<div class=\"apisix-card__head\">\r\n\t\t\t\t\t\t\t\t<aril-badge [value]=\"hit.status.toString()\" [severity]=\"statusSeverity(hit.status)\" />\r\n\t\t\t\t\t\t\t\t<span class=\"apisix-card__method\">{{ hit.requestMethod }}</span>\r\n\t\t\t\t\t\t\t\t<span class=\"apisix-card__uri\" [title]=\"hit.requestUri\">{{ hit.requestUri }}</span>\r\n\t\t\t\t\t\t\t\t<aril-badge\r\n\t\t\t\t\t\t\t\t\t[value]=\"formatDuration(hit.responseTime)\"\r\n\t\t\t\t\t\t\t\t\t[severity]=\"durationSeverity(hit.responseTime)\" />\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div class=\"apisix-card__meta\">\r\n\t\t\t\t\t\t\t\t@if (hit.routeName) {\r\n\t\t\t\t\t\t\t\t\t<div><span class=\"meta-label\">{{ t('traceDrawer.route') }}</span><span>{{ hit.routeName }}</span></div>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t@if (hit.timestamp) {\r\n\t\t\t\t\t\t\t\t\t<div><span class=\"meta-label\">{{ t('traceDrawer.timestamp') }}</span><span>{{ formatTimestamp(hit.timestamp) }}</span></div>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t@if (hit.sourceApp || hit.sourceModule) {\r\n\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.source') }}</span>\r\n\t\t\t\t\t\t\t\t\t\t<span>{{ hit.sourceApp }}{{ hit.sourceModule ? ' / ' + hit.sourceModule : '' }}</span>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t@if (hit.targetApp || hit.targetModule) {\r\n\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.target') }}</span>\r\n\t\t\t\t\t\t\t\t\t\t<span>{{ hit.targetApp }}{{ hit.targetModule ? ' / ' + hit.targetModule : '' }}</span>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t@if (hit.upstreamHost) {\r\n\t\t\t\t\t\t\t\t\t<div><span class=\"meta-label\">{{ t('traceDrawer.upstream') }}</span><span>{{ hit.upstreamHost }}</span></div>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t@if (hit.username) {\r\n\t\t\t\t\t\t\t\t\t<div><span class=\"meta-label\">{{ t('traceDrawer.user') }}</span><span>{{ hit.username }}</span></div>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t@if (hit.requestSize !== undefined) {\r\n\t\t\t\t\t\t\t\t\t<div><span class=\"meta-label\">{{ t('traceDrawer.requestSize') }}</span><span>{{ formatBytes(hit.requestSize) }}</span></div>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t@if (hit.responseSize !== undefined) {\r\n\t\t\t\t\t\t\t\t\t<div><span class=\"meta-label\">{{ t('traceDrawer.responseSize') }}</span><span>{{ formatBytes(hit.responseSize) }}</span></div>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t@if (hit.requestBody) {\r\n\t\t\t\t\t\t\t\t<details class=\"apisix-card__body\">\r\n\t\t\t\t\t\t\t\t\t<summary>{{ t('traceDrawer.requestBody') }}</summary>\r\n\t\t\t\t\t\t\t\t\t@if (tryParseJson(hit.requestBody); as parsed) {\r\n\t\t\t\t\t\t\t\t\t\t<pre>{{ parsed | json }}</pre>\r\n\t\t\t\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t\t\t\t<pre>{{ hit.requestBody }}</pre>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t@if (hit.responseBody) {\r\n\t\t\t\t\t\t\t\t<details class=\"apisix-card__body\">\r\n\t\t\t\t\t\t\t\t\t<summary>{{ t('traceDrawer.responseBody') }}</summary>\r\n\t\t\t\t\t\t\t\t\t@if (tryParseJson(hit.responseBody); as parsed) {\r\n\t\t\t\t\t\t\t\t\t\t<pre>{{ parsed | json }}</pre>\r\n\t\t\t\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t\t\t\t<pre>{{ hit.responseBody }}</pre>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t}\r\n\t\t\t\t</section>\r\n\t\t\t} @else {\r\n\t\t\t\t<div class=\"aril-trace-drawer__state\">\r\n\t\t\t\t\t<i class=\"pi pi-inbox\"></i>\r\n\t\t\t\t\t<p>{{ t('traceDrawer.empty') }}</p>\r\n\t\t\t\t</div>\r\n\t\t\t}\r\n\t\t</div>\r\n\t</p-sidebar>\r\n</ng-container>\r\n", styles: [":host ::ng-deep .aril-trace-drawer .p-sidebar-header{padding:1rem 1.25rem;border-bottom:1px solid var(--surface-border, #e5e7eb)}:host ::ng-deep .aril-trace-drawer .p-sidebar-content{padding:0;overflow-y:auto}.aril-trace-drawer__header{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}.aril-trace-drawer__header .pi-sitemap{font-size:1.25rem;color:var(--primary-color, #1890ff)}.aril-trace-drawer__title{font-weight:600;font-size:1.1rem}.aril-trace-drawer__chip{font-size:.875rem;padding:.2rem .55rem;border-radius:4px;background:var(--surface-100, #f3f4f6);color:var(--text-color-secondary, #6b7280);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.aril-trace-drawer__body{padding:1rem 1.25rem;display:flex;flex-direction:column;gap:1.5rem}.aril-trace-drawer__state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:3rem 1rem;color:var(--text-color-secondary, #6b7280);text-align:center;font-size:.95rem}.aril-trace-drawer__state .pi{font-size:2rem}.aril-trace-drawer__state--error .pi{color:var(--red-500, #ef4444)}.aril-trace-drawer__section-title{display:flex;align-items:center;gap:.5rem;margin:0 0 .75rem;font-size:1.05rem;font-weight:600}.aril-trace-drawer__section-title .pi{color:var(--primary-color, #1890ff)}.apisix-card{border:1px solid var(--surface-border, #e5e7eb);border-radius:6px;padding:.75rem;margin-bottom:.75rem;background:var(--surface-card, #ffffff);transition:box-shadow .15s ease}.apisix-card:hover{box-shadow:0 2px 8px #0000000f}.apisix-card__head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}.apisix-card__method{font-weight:600;color:var(--primary-color, #1890ff);font-size:.9rem}.apisix-card__uri{font-size:.9rem;color:var(--text-color, #111827);flex:1;min-width:0;word-break:break-all;overflow-wrap:anywhere}.apisix-card__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.4rem 1rem;font-size:.9rem}.apisix-card__meta>div{display:grid;grid-template-columns:max-content 1fr;column-gap:.5rem;align-items:baseline;min-width:0}.apisix-card__meta .meta-label{color:var(--text-color-secondary, #6b7280);font-weight:500}.apisix-card__meta .meta-label:after{content:\":\"}.apisix-card__meta span:not(.meta-label){color:var(--text-color, #111827);word-break:break-word}.apisix-card__body{margin-top:.5rem}.apisix-card__body summary{cursor:pointer;font-size:.9rem;color:var(--primary-color, #1890ff);padding:.25rem 0;-webkit-user-select:none;user-select:none}.apisix-card__body summary:hover{text-decoration:underline}.apisix-card__body pre{margin:.35rem 0 0;padding:.6rem .85rem;background:var(--surface-100, #f3f4f6);border-radius:4px;font-size:.85rem;line-height:1.5;max-height:360px;overflow:auto;white-space:pre-wrap;word-break:break-word}\n"], dependencies: [{ kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SidebarModule }, { kind: "component", type: i2.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: BadgeComponent, selector: "aril-badge", inputs: ["icon", "value", "severity", "rounded", "background", "styleClass", "textColor", "borderColor", "textClampCharacters"] }, { kind: "component", type: ButtonComponent, selector: "aril-button:not([click])", inputs: ["label", "loading", "disabled", "raised", "rounded", "text", "outlined", "badge", "size", "icon", "iconPos", "color"], outputs: ["clickEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TraceDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'aril-trace-drawer', imports: [JsonPipe, TranslocoModule, SidebarModule, ProgressSpinnerModule, BadgeComponent, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n\t<p-sidebar\r\n\t\t[visible]=\"visible()\"\r\n\t\t(visibleChange)=\"onVisibleChange($event)\"\r\n\t\t[position]=\"position()\"\r\n\t\t[style]=\"{ width: width() }\"\r\n\t\t[modal]=\"modal()\"\r\n\t\t[dismissible]=\"true\"\r\n\t\t[showCloseIcon]=\"true\"\r\n\t\tstyleClass=\"aril-trace-drawer\">\r\n\t\t<ng-template pTemplate=\"header\">\r\n\t\t\t<div class=\"aril-trace-drawer__header\">\r\n\t\t\t\t<i class=\"pi pi-sitemap\"></i>\r\n\t\t\t\t<span class=\"aril-trace-drawer__title\">{{ t('traceDrawer.title') }}</span>\r\n\t\t\t\t<code class=\"aril-trace-drawer__chip\" [title]=\"traceId()\">{{ traceId() }}</code>\r\n\t\t\t</div>\r\n\t\t</ng-template>\r\n\r\n\t\t<div class=\"aril-trace-drawer__body\">\r\n\t\t\t@if (loading()) {\r\n\t\t\t\t<div class=\"aril-trace-drawer__state\">\r\n\t\t\t\t\t<p-progressSpinner strokeWidth=\"3\" styleClass=\"w-3rem h-3rem\"></p-progressSpinner>\r\n\t\t\t\t\t<span>{{ t('traceDrawer.loading') }}</span>\r\n\t\t\t\t</div>\r\n\t\t\t} @else if (errorMessage()) {\r\n\t\t\t\t<div class=\"aril-trace-drawer__state aril-trace-drawer__state--error\">\r\n\t\t\t\t\t<i class=\"pi pi-exclamation-triangle\"></i>\r\n\t\t\t\t\t<p>{{ errorMessage() }}</p>\r\n\t\t\t\t\t<aril-button\r\n\t\t\t\t\t\t[label]=\"t('traceDrawer.retry')\"\r\n\t\t\t\t\t\ticon=\"REFRESH\"\r\n\t\t\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t\t\t(clickEvent)=\"retry()\" />\r\n\t\t\t\t</div>\r\n\t\t\t} @else if (apisixHits().length) {\r\n\t\t\t\t<section class=\"aril-trace-drawer__section\">\r\n\t\t\t\t\t<h3 class=\"aril-trace-drawer__section-title\">\r\n\t\t\t\t\t\t<i class=\"pi pi-globe\"></i>\r\n\t\t\t\t\t\t{{ t('traceDrawer.apisixHeader') }}\r\n\t\t\t\t\t\t<aril-badge [value]=\"apisixHits().length.toString()\" severity=\"info\" [rounded]=\"true\" />\r\n\t\t\t\t\t</h3>\r\n\t\t\t\t\t@for (hit of apisixHits(); track hit.id) {\r\n\t\t\t\t\t\t<div class=\"apisix-card\">\r\n\t\t\t\t\t\t\t<div class=\"apisix-card__head\">\r\n\t\t\t\t\t\t\t\t<aril-badge [value]=\"hit.status.toString()\" [severity]=\"statusSeverity(hit.status)\" />\r\n\t\t\t\t\t\t\t\t<span class=\"apisix-card__method\">{{ hit.requestMethod }}</span>\r\n\t\t\t\t\t\t\t\t<span class=\"apisix-card__uri\" [title]=\"hit.requestUri\">{{ hit.requestUri }}</span>\r\n\t\t\t\t\t\t\t\t<aril-badge\r\n\t\t\t\t\t\t\t\t\t[value]=\"formatDuration(hit.responseTime)\"\r\n\t\t\t\t\t\t\t\t\t[severity]=\"durationSeverity(hit.responseTime)\" />\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div class=\"apisix-card__meta\">\r\n\t\t\t\t\t\t\t\t@if (hit.routeName) {\r\n\t\t\t\t\t\t\t\t\t<div><span class=\"meta-label\">{{ t('traceDrawer.route') }}</span><span>{{ hit.routeName }}</span></div>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t@if (hit.timestamp) {\r\n\t\t\t\t\t\t\t\t\t<div><span class=\"meta-label\">{{ t('traceDrawer.timestamp') }}</span><span>{{ formatTimestamp(hit.timestamp) }}</span></div>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t@if (hit.sourceApp || hit.sourceModule) {\r\n\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.source') }}</span>\r\n\t\t\t\t\t\t\t\t\t\t<span>{{ hit.sourceApp }}{{ hit.sourceModule ? ' / ' + hit.sourceModule : '' }}</span>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t@if (hit.targetApp || hit.targetModule) {\r\n\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.target') }}</span>\r\n\t\t\t\t\t\t\t\t\t\t<span>{{ hit.targetApp }}{{ hit.targetModule ? ' / ' + hit.targetModule : '' }}</span>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t@if (hit.upstreamHost) {\r\n\t\t\t\t\t\t\t\t\t<div><span class=\"meta-label\">{{ t('traceDrawer.upstream') }}</span><span>{{ hit.upstreamHost }}</span></div>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t@if (hit.username) {\r\n\t\t\t\t\t\t\t\t\t<div><span class=\"meta-label\">{{ t('traceDrawer.user') }}</span><span>{{ hit.username }}</span></div>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t@if (hit.requestSize !== undefined) {\r\n\t\t\t\t\t\t\t\t\t<div><span class=\"meta-label\">{{ t('traceDrawer.requestSize') }}</span><span>{{ formatBytes(hit.requestSize) }}</span></div>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t@if (hit.responseSize !== undefined) {\r\n\t\t\t\t\t\t\t\t\t<div><span class=\"meta-label\">{{ t('traceDrawer.responseSize') }}</span><span>{{ formatBytes(hit.responseSize) }}</span></div>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t@if (hit.requestBody) {\r\n\t\t\t\t\t\t\t\t<details class=\"apisix-card__body\">\r\n\t\t\t\t\t\t\t\t\t<summary>{{ t('traceDrawer.requestBody') }}</summary>\r\n\t\t\t\t\t\t\t\t\t@if (tryParseJson(hit.requestBody); as parsed) {\r\n\t\t\t\t\t\t\t\t\t\t<pre>{{ parsed | json }}</pre>\r\n\t\t\t\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t\t\t\t<pre>{{ hit.requestBody }}</pre>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t@if (hit.responseBody) {\r\n\t\t\t\t\t\t\t\t<details class=\"apisix-card__body\">\r\n\t\t\t\t\t\t\t\t\t<summary>{{ t('traceDrawer.responseBody') }}</summary>\r\n\t\t\t\t\t\t\t\t\t@if (tryParseJson(hit.responseBody); as parsed) {\r\n\t\t\t\t\t\t\t\t\t\t<pre>{{ parsed | json }}</pre>\r\n\t\t\t\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t\t\t\t<pre>{{ hit.responseBody }}</pre>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t}\r\n\t\t\t\t</section>\r\n\t\t\t} @else {\r\n\t\t\t\t<div class=\"aril-trace-drawer__state\">\r\n\t\t\t\t\t<i class=\"pi pi-inbox\"></i>\r\n\t\t\t\t\t<p>{{ t('traceDrawer.empty') }}</p>\r\n\t\t\t\t</div>\r\n\t\t\t}\r\n\t\t</div>\r\n\t</p-sidebar>\r\n</ng-container>\r\n", styles: [":host ::ng-deep .aril-trace-drawer .p-sidebar-header{padding:1rem 1.25rem;border-bottom:1px solid var(--surface-border, #e5e7eb)}:host ::ng-deep .aril-trace-drawer .p-sidebar-content{padding:0;overflow-y:auto}.aril-trace-drawer__header{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}.aril-trace-drawer__header .pi-sitemap{font-size:1.25rem;color:var(--primary-color, #1890ff)}.aril-trace-drawer__title{font-weight:600;font-size:1.1rem}.aril-trace-drawer__chip{font-size:.875rem;padding:.2rem .55rem;border-radius:4px;background:var(--surface-100, #f3f4f6);color:var(--text-color-secondary, #6b7280);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.aril-trace-drawer__body{padding:1rem 1.25rem;display:flex;flex-direction:column;gap:1.5rem}.aril-trace-drawer__state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:3rem 1rem;color:var(--text-color-secondary, #6b7280);text-align:center;font-size:.95rem}.aril-trace-drawer__state .pi{font-size:2rem}.aril-trace-drawer__state--error .pi{color:var(--red-500, #ef4444)}.aril-trace-drawer__section-title{display:flex;align-items:center;gap:.5rem;margin:0 0 .75rem;font-size:1.05rem;font-weight:600}.aril-trace-drawer__section-title .pi{color:var(--primary-color, #1890ff)}.apisix-card{border:1px solid var(--surface-border, #e5e7eb);border-radius:6px;padding:.75rem;margin-bottom:.75rem;background:var(--surface-card, #ffffff);transition:box-shadow .15s ease}.apisix-card:hover{box-shadow:0 2px 8px #0000000f}.apisix-card__head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}.apisix-card__method{font-weight:600;color:var(--primary-color, #1890ff);font-size:.9rem}.apisix-card__uri{font-size:.9rem;color:var(--text-color, #111827);flex:1;min-width:0;word-break:break-all;overflow-wrap:anywhere}.apisix-card__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.4rem 1rem;font-size:.9rem}.apisix-card__meta>div{display:grid;grid-template-columns:max-content 1fr;column-gap:.5rem;align-items:baseline;min-width:0}.apisix-card__meta .meta-label{color:var(--text-color-secondary, #6b7280);font-weight:500}.apisix-card__meta .meta-label:after{content:\":\"}.apisix-card__meta span:not(.meta-label){color:var(--text-color, #111827);word-break:break-word}.apisix-card__body{margin-top:.5rem}.apisix-card__body summary{cursor:pointer;font-size:.9rem;color:var(--primary-color, #1890ff);padding:.25rem 0;-webkit-user-select:none;user-select:none}.apisix-card__body summary:hover{text-decoration:underline}.apisix-card__body pre{margin:.35rem 0 0;padding:.6rem .85rem;background:var(--surface-100, #f3f4f6);border-radius:4px;font-size:.85rem;line-height:1.5;max-height:360px;overflow:auto;white-space:pre-wrap;word-break:break-word}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { visibleChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TraceDrawerComponent };
+//# sourceMappingURL=aril-ui-business-trace-drawer.mjs.map

package/fesm2022/aril-ui-business-trace-drawer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"aril-ui-business-trace-drawer.mjs","sources":["../../projects/aril/ui-business/trace-drawer/src/trace-log.service.ts","../../projects/aril/ui-business/trace-drawer/src/trace-drawer.component.ts","../../projects/aril/ui-business/trace-drawer/src/trace-drawer.component.html","../../projects/aril/ui-business/trace-drawer/aril-ui-business-trace-drawer.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\n\r\nimport { Observable } from 'rxjs';\r\n\r\nimport { Apps } from 'aril/boot/config/apps';\r\nimport { HTTPMethods, ProxyTypes, RestClient, ServiceCall, ServiceCallStateMap, ServiceResponse } from 'aril/http';\r\n\r\nimport { ApisixHit } from './interfaces';\r\n\r\nexport interface TraceSearchRequest {\r\n\ttraceId: string;\r\n\tstartTime?: number;\r\n\tendTime?: number;\r\n\tpager: { pageSize: number; pageNumber: number };\r\n}\r\n\r\nexport interface TraceSearchResponse {\r\n\tresultInfo?: { totalItem?: number; totalPage?: number };\r\n\tresult: ApisixHit[];\r\n}\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class TraceLogService extends RestClient {\r\n\toverride states: ServiceCallStateMap<TraceLogService> = {};\r\n\r\n\t@ServiceCall(HTTPMethods.POST, ProxyTypes.ClientSide, 'request-logs/filter', {}, Apps.MNG)\r\n\tsearchByTraceId(req: TraceSearchRequest): Observable<ServiceResponse<TraceSearchResponse>> {\r\n\t\treturn new Observable<ServiceResponse<TraceSearchResponse>>();\r\n\t}\r\n}\r\n","import { JsonPipe } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, EventEmitter, Output, effect, inject, input, signal } from '@angular/core';\r\nimport { toSignal } from '@angular/core/rxjs-interop';\r\n\r\nimport { EMPTY, Subject, catchError, switchMap } from 'rxjs';\r\n\r\nimport { ProgressSpinnerModule } from 'primeng/progressspinner';\r\nimport { SidebarModule } from 'primeng/sidebar';\r\n\r\nimport { TranslocoModule } from '@ngneat/transloco';\r\n\r\nimport { BadgeComponent } from 'aril/ui/badge';\r\nimport { ButtonComponent } from 'aril/ui/button';\r\nimport 'aril/util/primitive-extensions';\r\n\r\nimport { ApisixHit } from './interfaces';\r\nimport { TraceLogService } from './trace-log.service';\r\n\r\ntype Position = 'right' | 'left';\r\ntype Severity = 'success' | 'secondary' | 'info' | 'warning' | 'danger' | 'contrast' | undefined;\r\n\r\n@Component({\r\n\tstandalone: true,\r\n\tselector: 'aril-trace-drawer',\r\n\ttemplateUrl: './trace-drawer.component.html',\r\n\tstyleUrls: ['./trace-drawer.component.scss'],\r\n\timports: [JsonPipe, TranslocoModule, SidebarModule, ProgressSpinnerModule, BadgeComponent, ButtonComponent],\r\n\tchangeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class TraceDrawerComponent {\r\n\tprivate readonly traceLogService = inject(TraceLogService);\r\n\r\n\tvisible = input<boolean>(false);\r\n\ttraceId = input.required<string>();\r\n\tposition = input<Position>('right');\r\n\twidth = input<string>('min(680px, 90vw)');\r\n\tmodal = input<boolean>(false);\r\n\tpageSize = input<number>(100);\r\n\tstartTime = input<number | undefined>();\r\n\tendTime = input<number | undefined>();\r\n\r\n\t@Output() visibleChange = new EventEmitter<boolean>();\r\n\r\n\tprotected readonly loading = signal(false);\r\n\tprotected readonly errorMessage = signal<string | undefined>(undefined);\r\n\tprotected readonly apisixHits = signal<ApisixHit[]>([]);\r\n\r\n\tprivate readonly request = new Subject<string>();\r\n\tprivate readonly response = toSignal(\r\n\t\tthis.request.pipe(\r\n\t\t\tswitchMap((traceId) =>\r\n\t\t\t\tthis.traceLogService\r\n\t\t\t\t\t.searchByTraceId({\r\n\t\t\t\t\t\ttraceId,\r\n\t\t\t\t\t\tstartTime: this.startTime() ?? 20000101000000,\r\n\t\t\t\t\t\tendTime: this.endTime() ?? (new Date().dateToLong('time') ?? 99991231235959),\r\n\t\t\t\t\t\tpager: { pageSize: this.pageSize(), pageNumber: 1 }\r\n\t\t\t\t\t})\r\n\t\t\t\t\t.pipe(\r\n\t\t\t\t\t\tcatchError((err) => {\r\n\t\t\t\t\t\t\tthis.errorMessage.set(err?.error?.message ?? err?.message ?? 'İstek başarısız oldu');\r\n\t\t\t\t\t\t\tthis.loading.set(false);\r\n\t\t\t\t\t\t\treturn EMPTY;\r\n\t\t\t\t\t\t})\r\n\t\t\t\t\t)\r\n\t\t\t)\r\n\t\t)\r\n\t);\r\n\r\n\tconstructor() {\r\n\t\teffect(\r\n\t\t\t() => {\r\n\t\t\t\tif (this.visible() && this.traceId()) {\r\n\t\t\t\t\tthis.fetch(this.traceId());\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t{ allowSignalWrites: true }\r\n\t\t);\r\n\r\n\t\teffect(\r\n\t\t\t() => {\r\n\t\t\t\tconst resp = this.response();\r\n\t\t\t\tif (!resp) return;\r\n\t\t\t\tthis.apisixHits.set(resp.response?.result ?? []);\r\n\t\t\t\tthis.loading.set(false);\r\n\t\t\t\tthis.errorMessage.set(undefined);\r\n\t\t\t},\r\n\t\t\t{ allowSignalWrites: true }\r\n\t\t);\r\n\t}\r\n\r\n\tprotected onVisibleChange(value: boolean): void {\r\n\t\tthis.visibleChange.emit(value);\r\n\t}\r\n\r\n\tprotected retry(): void {\r\n\t\tconst id = this.traceId();\r\n\t\tif (id) this.fetch(id);\r\n\t}\r\n\r\n\tprivate fetch(traceId: string): void {\r\n\t\tthis.loading.set(true);\r\n\t\tthis.errorMessage.set(undefined);\r\n\t\tthis.apisixHits.set([]);\r\n\t\tthis.request.next(traceId);\r\n\t}\r\n\r\n\tprotected statusSeverity(status: number): Severity {\r\n\t\tif (status >= 500) return 'danger';\r\n\t\tif (status >= 400) return 'warning';\r\n\t\tif (status >= 300) return 'info';\r\n\t\tif (status >= 200) return 'success';\r\n\t\treturn 'secondary';\r\n\t}\r\n\r\n\tprotected durationSeverity(seconds: number): Severity {\r\n\t\tconst ms = (seconds ?? 0) * 1000;\r\n\t\tif (ms >= 1000) return 'danger';\r\n\t\tif (ms >= 200) return 'warning';\r\n\t\treturn 'success';\r\n\t}\r\n\r\n\tprotected formatDuration(seconds: number | undefined): string {\r\n\t\tif (seconds === undefined || seconds === null) return '';\r\n\t\tconst ms = seconds * 1000;\r\n\t\tif (ms < 1) return `${ms.toFixed(2)} ms`;\r\n\t\tif (ms < 1000) return `${Math.round(ms)} ms`;\r\n\t\treturn `${(ms / 1000).toFixed(2)} s`;\r\n\t}\r\n\r\n\tprotected formatBytes(bytes: number | undefined): string {\r\n\t\tif (bytes === undefined || bytes === null) return '-';\r\n\t\tif (bytes < 1024) return `${bytes} B`;\r\n\t\tif (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\r\n\t\treturn `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\r\n\t}\r\n\r\n\tprotected formatTimestamp(ts: string | number | undefined): string {\r\n\t\tif (ts === undefined || ts === null || ts === '') return '';\r\n\t\tif (typeof ts === 'string') return ts;\r\n\t\tconst s = String(ts);\r\n\t\tif (s.length === 14) {\r\n\t\t\treturn `${s.slice(8, 10)}:${s.slice(10, 12)}:${s.slice(12, 14)} ${s.slice(6, 8)}.${s.slice(4, 6)}.${s.slice(0, 4)}`;\r\n\t\t}\r\n\t\tif (ts > 1e11) {\r\n\t\t\treturn new Date(ts).toLocaleString();\r\n\t\t}\r\n\t\treturn s;\r\n\t}\r\n\r\n\tprotected tryParseJson(content: string | undefined): unknown {\r\n\t\tif (!content) return null;\r\n\t\tconst trimmed = content.trim();\r\n\t\tif (!((trimmed.startsWith('{') && trimmed.endsWith('}')) || (trimmed.startsWith('[') && trimmed.endsWith(']')))) {\r\n\t\t\treturn null;\r\n\t\t}\r\n\t\ttry {\r\n\t\t\treturn JSON.parse(trimmed);\r\n\t\t} catch {\r\n\t\t\treturn null;\r\n\t\t}\r\n\t}\r\n}\r\n","<ng-container *transloco=\"let t\">\r\n\t<p-sidebar\r\n\t\t[visible]=\"visible()\"\r\n\t\t(visibleChange)=\"onVisibleChange($event)\"\r\n\t\t[position]=\"position()\"\r\n\t\t[style]=\"{ width: width() }\"\r\n\t\t[modal]=\"modal()\"\r\n\t\t[dismissible]=\"true\"\r\n\t\t[showCloseIcon]=\"true\"\r\n\t\tstyleClass=\"aril-trace-drawer\">\r\n\t\t<ng-template pTemplate=\"header\">\r\n\t\t\t<div class=\"aril-trace-drawer__header\">\r\n\t\t\t\t<i class=\"pi pi-sitemap\"></i>\r\n\t\t\t\t<span class=\"aril-trace-drawer__title\">{{ t('traceDrawer.title') }}</span>\r\n\t\t\t\t<code class=\"aril-trace-drawer__chip\" [title]=\"traceId()\">{{ traceId() }}</code>\r\n\t\t\t</div>\r\n\t\t</ng-template>\r\n\r\n\t\t<div class=\"aril-trace-drawer__body\">\r\n\t\t\t@if (loading()) {\r\n\t\t\t\t<div class=\"aril-trace-drawer__state\">\r\n\t\t\t\t\t<p-progressSpinner strokeWidth=\"3\" styleClass=\"w-3rem h-3rem\"></p-progressSpinner>\r\n\t\t\t\t\t<span>{{ t('traceDrawer.loading') }}</span>\r\n\t\t\t\t</div>\r\n\t\t\t} @else if (errorMessage()) {\r\n\t\t\t\t<div class=\"aril-trace-drawer__state aril-trace-drawer__state--error\">\r\n\t\t\t\t\t<i class=\"pi pi-exclamation-triangle\"></i>\r\n\t\t\t\t\t<p>{{ errorMessage() }}</p>\r\n\t\t\t\t\t<aril-button\r\n\t\t\t\t\t\t[label]=\"t('traceDrawer.retry')\"\r\n\t\t\t\t\t\ticon=\"REFRESH\"\r\n\t\t\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t\t\t(clickEvent)=\"retry()\" />\r\n\t\t\t\t</div>\r\n\t\t\t} @else if (apisixHits().length) {\r\n\t\t\t\t<section class=\"aril-trace-drawer__section\">\r\n\t\t\t\t\t<h3 class=\"aril-trace-drawer__section-title\">\r\n\t\t\t\t\t\t<i class=\"pi pi-globe\"></i>\r\n\t\t\t\t\t\t{{ t('traceDrawer.apisixHeader') }}\r\n\t\t\t\t\t\t<aril-badge [value]=\"apisixHits().length.toString()\" severity=\"info\" [rounded]=\"true\" />\r\n\t\t\t\t\t</h3>\r\n\t\t\t\t\t@for (hit of apisixHits(); track hit.id) {\r\n\t\t\t\t\t\t<div class=\"apisix-card\">\r\n\t\t\t\t\t\t\t<div class=\"apisix-card__head\">\r\n\t\t\t\t\t\t\t\t<aril-badge [value]=\"hit.status.toString()\" [severity]=\"statusSeverity(hit.status)\" />\r\n\t\t\t\t\t\t\t\t<span class=\"apisix-card__method\">{{ hit.requestMethod }}</span>\r\n\t\t\t\t\t\t\t\t<span class=\"apisix-card__uri\" [title]=\"hit.requestUri\">{{ hit.requestUri }}</span>\r\n\t\t\t\t\t\t\t\t<aril-badge\r\n\t\t\t\t\t\t\t\t\t[value]=\"formatDuration(hit.responseTime)\"\r\n\t\t\t\t\t\t\t\t\t[severity]=\"durationSeverity(hit.responseTime)\" />\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div class=\"apisix-card__meta\">\r\n\t\t\t\t\t\t\t\t@if (hit.routeName) {\r\n\t\t\t\t\t\t\t\t\t<div><span class=\"meta-label\">{{ t('traceDrawer.route') }}</span><span>{{ hit.routeName }}</span></div>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t@if (hit.timestamp) {\r\n\t\t\t\t\t\t\t\t\t<div><span class=\"meta-label\">{{ t('traceDrawer.timestamp') }}</span><span>{{ formatTimestamp(hit.timestamp) }}</span></div>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t@if (hit.sourceApp || hit.sourceModule) {\r\n\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.source') }}</span>\r\n\t\t\t\t\t\t\t\t\t\t<span>{{ hit.sourceApp }}{{ hit.sourceModule ? ' / ' + hit.sourceModule : '' }}</span>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t@if (hit.targetApp || hit.targetModule) {\r\n\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.target') }}</span>\r\n\t\t\t\t\t\t\t\t\t\t<span>{{ hit.targetApp }}{{ hit.targetModule ? ' / ' + hit.targetModule : '' }}</span>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t@if (hit.upstreamHost) {\r\n\t\t\t\t\t\t\t\t\t<div><span class=\"meta-label\">{{ t('traceDrawer.upstream') }}</span><span>{{ hit.upstreamHost }}</span></div>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t@if (hit.username) {\r\n\t\t\t\t\t\t\t\t\t<div><span class=\"meta-label\">{{ t('traceDrawer.user') }}</span><span>{{ hit.username }}</span></div>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t@if (hit.requestSize !== undefined) {\r\n\t\t\t\t\t\t\t\t\t<div><span class=\"meta-label\">{{ t('traceDrawer.requestSize') }}</span><span>{{ formatBytes(hit.requestSize) }}</span></div>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t@if (hit.responseSize !== undefined) {\r\n\t\t\t\t\t\t\t\t\t<div><span class=\"meta-label\">{{ t('traceDrawer.responseSize') }}</span><span>{{ formatBytes(hit.responseSize) }}</span></div>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t@if (hit.requestBody) {\r\n\t\t\t\t\t\t\t\t<details class=\"apisix-card__body\">\r\n\t\t\t\t\t\t\t\t\t<summary>{{ t('traceDrawer.requestBody') }}</summary>\r\n\t\t\t\t\t\t\t\t\t@if (tryParseJson(hit.requestBody); as parsed) {\r\n\t\t\t\t\t\t\t\t\t\t<pre>{{ parsed | json }}</pre>\r\n\t\t\t\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t\t\t\t<pre>{{ hit.requestBody }}</pre>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t@if (hit.responseBody) {\r\n\t\t\t\t\t\t\t\t<details class=\"apisix-card__body\">\r\n\t\t\t\t\t\t\t\t\t<summary>{{ t('traceDrawer.responseBody') }}</summary>\r\n\t\t\t\t\t\t\t\t\t@if (tryParseJson(hit.responseBody); as parsed) {\r\n\t\t\t\t\t\t\t\t\t\t<pre>{{ parsed | json }}</pre>\r\n\t\t\t\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t\t\t\t<pre>{{ hit.responseBody }}</pre>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t}\r\n\t\t\t\t</section>\r\n\t\t\t} @else {\r\n\t\t\t\t<div class=\"aril-trace-drawer__state\">\r\n\t\t\t\t\t<i class=\"pi pi-inbox\"></i>\r\n\t\t\t\t\t<p>{{ t('traceDrawer.empty') }}</p>\r\n\t\t\t\t</div>\r\n\t\t\t}\r\n\t\t</div>\r\n\t</p-sidebar>\r\n</ng-container>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/aril-ui-business-trace-id.mjs

@@ -0,0 +1,42 @@
+import * as i0 from '@angular/core';
+import { input, EventEmitter, computed, Component, ChangeDetectionStrategy, Output } from '@angular/core';
+
+class TraceIdComponent {
+    constructor() {
+        this.traceId = input.required();
+        this.label = input();
+        this.iconLeft = input('pi-sitemap');
+        this.iconRight = input('pi-chevron-right');
+        this.size = input('sm');
+        this.disabled = input(false);
+        this.clickEvent = new EventEmitter();
+        this.displayText = computed(() => {
+            const custom = this.label();
+            if (custom)
+                return custom;
+            const id = this.traceId() ?? '';
+            return id.length > 10 ? id.slice(0, 8) + '…' : id;
+        });
+    }
+    onClick(event) {
+        event.stopPropagation();
+        if (this.disabled())
+            return;
+        this.clickEvent.emit(this.traceId());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TraceIdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.1.2", type: TraceIdComponent, isStandalone: true, selector: "aril-trace-id", inputs: { traceId: { classPropertyName: "traceId", publicName: "traceId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, iconLeft: { classPropertyName: "iconLeft", publicName: "iconLeft", isSignal: true, isRequired: false, transformFunction: null }, iconRight: { classPropertyName: "iconRight", publicName: "iconRight", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<button\r\n\ttype=\"button\"\r\n\tclass=\"aril-trace-id\"\r\n\t[class.aril-trace-id--md]=\"size() === 'md'\"\r\n\t[class.aril-trace-id--disabled]=\"disabled()\"\r\n\t[attr.aria-label]=\"traceId()\"\r\n\t[title]=\"traceId()\"\r\n\t(click)=\"onClick($event)\">\r\n\t<i class=\"pi {{ iconLeft() }}\"></i>\r\n\t<span class=\"aril-trace-id__text\">{{ displayText() }}</span>\r\n\t<i class=\"pi {{ iconRight() }}\"></i>\r\n</button>\r\n", styles: [".aril-trace-id{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .55rem;font-size:.9rem;line-height:1.2;color:var(--primary-color, #1890ff);background:var(--primary-50, rgba(24, 144, 255, .08));border:1px solid transparent;border-radius:4px;cursor:pointer;transition:background .15s ease,border-color .15s ease}.aril-trace-id:hover{background:var(--primary-100, rgba(24, 144, 255, .15));border-color:var(--primary-200, rgba(24, 144, 255, .3))}.aril-trace-id:focus-visible{outline:2px solid var(--primary-color, #1890ff);outline-offset:1px}.aril-trace-id--md{padding:.35rem .75rem;font-size:1rem}.aril-trace-id--disabled{cursor:not-allowed;opacity:.6;pointer-events:none}.aril-trace-id .pi{font-size:.85rem}.aril-trace-id__text{white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TraceIdComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'aril-trace-id', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n\ttype=\"button\"\r\n\tclass=\"aril-trace-id\"\r\n\t[class.aril-trace-id--md]=\"size() === 'md'\"\r\n\t[class.aril-trace-id--disabled]=\"disabled()\"\r\n\t[attr.aria-label]=\"traceId()\"\r\n\t[title]=\"traceId()\"\r\n\t(click)=\"onClick($event)\">\r\n\t<i class=\"pi {{ iconLeft() }}\"></i>\r\n\t<span class=\"aril-trace-id__text\">{{ displayText() }}</span>\r\n\t<i class=\"pi {{ iconRight() }}\"></i>\r\n</button>\r\n", styles: [".aril-trace-id{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .55rem;font-size:.9rem;line-height:1.2;color:var(--primary-color, #1890ff);background:var(--primary-50, rgba(24, 144, 255, .08));border:1px solid transparent;border-radius:4px;cursor:pointer;transition:background .15s ease,border-color .15s ease}.aril-trace-id:hover{background:var(--primary-100, rgba(24, 144, 255, .15));border-color:var(--primary-200, rgba(24, 144, 255, .3))}.aril-trace-id:focus-visible{outline:2px solid var(--primary-color, #1890ff);outline-offset:1px}.aril-trace-id--md{padding:.35rem .75rem;font-size:1rem}.aril-trace-id--disabled{cursor:not-allowed;opacity:.6;pointer-events:none}.aril-trace-id .pi{font-size:.85rem}.aril-trace-id__text{white-space:nowrap}\n"] }]
+        }], propDecorators: { clickEvent: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TraceIdComponent };
+//# sourceMappingURL=aril-ui-business-trace-id.mjs.map

package/fesm2022/aril-ui-business-trace-id.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"aril-ui-business-trace-id.mjs","sources":["../../projects/aril/ui-business/trace-id/src/trace-id.component.ts","../../projects/aril/ui-business/trace-id/src/trace-id.component.html","../../projects/aril/ui-business/trace-id/aril-ui-business-trace-id.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, EventEmitter, Output, input } from '@angular/core';\r\n\r\ntype Size = 'sm' | 'md';\r\n\r\n@Component({\r\n\tstandalone: true,\r\n\tselector: 'aril-trace-id',\r\n\ttemplateUrl: './trace-id.component.html',\r\n\tstyleUrls: ['./trace-id.component.scss'],\r\n\timports: [],\r\n\tchangeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class TraceIdComponent {\r\n\ttraceId = input.required<string>();\r\n\tlabel = input<string | undefined>();\r\n\ticonLeft = input<string>('pi-sitemap');\r\n\ticonRight = input<string>('pi-chevron-right');\r\n\tsize = input<Size>('sm');\r\n\tdisabled = input<boolean>(false);\r\n\r\n\t@Output() clickEvent = new EventEmitter<string>();\r\n\r\n\tprotected readonly displayText = computed(() => {\r\n\t\tconst custom = this.label();\r\n\t\tif (custom) return custom;\r\n\t\tconst id = this.traceId() ?? '';\r\n\t\treturn id.length > 10 ? id.slice(0, 8) + '…' : id;\r\n\t});\r\n\r\n\tprotected onClick(event: MouseEvent): void {\r\n\t\tevent.stopPropagation();\r\n\t\tif (this.disabled()) return;\r\n\t\tthis.clickEvent.emit(this.traceId());\r\n\t}\r\n}\r\n","<button\r\n\ttype=\"button\"\r\n\tclass=\"aril-trace-id\"\r\n\t[class.aril-trace-id--md]=\"size() === 'md'\"\r\n\t[class.aril-trace-id--disabled]=\"disabled()\"\r\n\t[attr.aria-label]=\"traceId()\"\r\n\t[title]=\"traceId()\"\r\n\t(click)=\"onClick($event)\">\r\n\t<i class=\"pi {{ iconLeft() }}\"></i>\r\n\t<span class=\"aril-trace-id__text\">{{ displayText() }}</span>\r\n\t<i class=\"pi {{ iconRight() }}\"></i>\r\n</button>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAYa,gBAAgB,CAAA;AAR7B,IAAA,WAAA,GAAA;AASC,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,EAAU,CAAC;QACnC,IAAK,CAAA,KAAA,GAAG,KAAK,EAAsB,CAAC;AACpC,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAS,YAAY,CAAC,CAAC;AACvC,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAS,kBAAkB,CAAC,CAAC;AAC9C,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAO,IAAI,CAAC,CAAC;AACzB,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,CAAC,CAAC;AAEvB,QAAA,IAAA,CAAA,UAAU,GAAG,IAAI,YAAY,EAAU,CAAC;AAE/B,QAAA,IAAA,CAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;AAC9C,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;AAC5B,YAAA,IAAI,MAAM;AAAE,gBAAA,OAAO,MAAM,CAAC;YAC1B,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC;YAChC,OAAO,EAAE,CAAC,MAAM,GAAG,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACnD,SAAC,CAAC,CAAC;AAOH,KAAA;AALU,IAAA,OAAO,CAAC,KAAiB,EAAA;QAClC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO;QAC5B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;KACrC;8GArBW,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAhB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,42BCZ7B,gbAYA,EAAA,MAAA,EAAA,CAAA,4vBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FDAa,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAR5B,SAAS;AACG,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,YACN,eAAe,EAAA,OAAA,EAGhB,EAAE,EACM,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,gbAAA,EAAA,MAAA,EAAA,CAAA,4vBAAA,CAAA,EAAA,CAAA;8BAUrC,UAAU,EAAA,CAAA;sBAAnB,MAAM;;;AEpBR;;AAEG;;;;"}