clearml-web/src/app/webapp-common/pipelines-controller/pipeline-details/pipeline-info.component.html
2024-06-27 15:10:24 -06:00

83 lines
3.9 KiB
HTML

<mat-expansion-panel [expanded]="true">
<mat-expansion-panel-header>
<div class="expand-header" data-id="expandInfoPanel">{{controller ? 'RUN INFO' : 'STEP INFO'}}</div>
</mat-expansion-panel-header>
<div class="panel-body" *ngIf="entity">
<header *ngIf="step; else controllerHeader">
<i
class="al-icon lg"
[class]="'al-ico-type-' + (entity?.type ? (entity.type.toString()).replace('_', '-') : 'training')"
></i>
<div class="name" [smTooltip]="step.name" smShowTooltipIfEllipsis>{{step.name}}</div>
<div class="d-flex justify-content-between">
<div class="status" [class]="step.data.status" data-id="infoStepStatus">{{step.data.status}}</div>
<sm-id-badge class="ms-1" [id]="step.data.job_id" (copied)="copyToClipboard()"></sm-id-badge>
</div>
</header>
<ng-template #controllerHeader>
<div *ngIf="entity?.id" class="d-flex justify-content-end my-2">
<sm-id-badge [id]="entity.id" (copied)="copyToClipboard()"></sm-id-badge>
</div>
</ng-template>
<ng-container *ngIf="!step || step.data.job_id === entity?.id">
<div class="section">
<div class="header">PARAMETERS</div>
<ng-container *ngFor="let section of (entity?.type === 'controller' ? {'Args': {}} : entity?.hyperparams) | keyvalue">
<div
*ngFor="let param of entity?.hyperparams[section.key] | keyvalue | filterRegex: '^(?!_).+$'"
class="param"
>
<div class="key" [smTooltip]="param.key" smShowTooltipIfEllipsis>{{param.key}}</div>
<div class="value" [smTooltip]="param.value.value" smShowTooltipIfEllipsis>{{param.value.value}}</div>
</div>
</ng-container>
</div>
<div class="section">
<div class="header">METRICS</div>
<ng-container *ngIf="(entity?.last_metrics | keyvalue)?.length > 0; else emptyMsg">
<ng-container *ngFor="let metric of entity.last_metrics | keyvalue">
<div *ngFor="let variant of $any($any(metric.value) | keyvalue) | filterMonitorMetric" class="param">
<div class="key" [smTooltip]="$any(variant.value).metric + '/' + $any(variant.value).variant" smShowTooltipIfEllipsis>{{$any(variant.value).metric}}/{{$any(variant.value).variant}}</div>
<div class="value" [smTooltip]="$any(variant.value).value" smShowTooltipIfEllipsis>{{$any(variant.value).value}}</div>
</div>
</ng-container>
</ng-container>
</div>
<div class="section">
<div class="header">ARTIFACTS</div>
<ng-container *ngIf="entity?.execution?.artifacts?.length > 0; else emptyMsg">
<div
*ngFor="let artifact of entity.execution.artifacts; trackBy: trackByFn"
class="param"
>
<div class="key" [smTooltip]="artifact.key" smShowTooltipIfEllipsis>{{artifact.key}}</div>
<div class="value">{{(artifact?.content_size | filesize : fileSizeConfigStorage) || ''}}</div>
</div>
</ng-container>
</div>
<div class="section">
<div class="header">MODELS</div>
<ng-container *ngIf="entity?.models?.output?.length > 0; else emptyMsg">
<div *ngFor="let model of entity.models?.output" class="param">
<div class="key"><a [routerLink]="['/projects', model.model.project.id, 'models', model.model.id]" target="_blank"
>{{model.name || model.model.name}}</a></div>
</div>
</ng-container>
</div>
</ng-container>
<ng-template #emptyMsg>
<div class="empty-msg" data-id="emptyMsg">No data to show</div>
</ng-template>
</div>
<footer *ngIf="entity?.id">
<a
class="arr-link"
target="_blank"
[href]="'/projects/' + project + '/experiments/' + entity?.id + '/output/execution'">
Full details<i class="al-icon al-ico-link-arrow sm" data-id="fullDetailsArrow"></i>
</a>
</footer>
</mat-expansion-panel>