mirror of
https://github.com/clearml/clearml-web
synced 2025-03-17 08:43:25 +00:00
109 lines
4.1 KiB
HTML
109 lines
4.1 KiB
HTML
<div class="console-button">
|
|
<button class="btn btn-cml-primary d-flex align-items-center" (click)="selectStep(); openLog()" data-id="consoleDetailsButton">
|
|
<i class="al-icon al-ico-console sm me-3"></i>DETAILS
|
|
</button>
|
|
</div>
|
|
<div
|
|
#diagramContainer
|
|
class="pipeline-container"
|
|
tabindex="1"
|
|
[class.extend]="showLog"
|
|
(click)="selectStep()"
|
|
(keyup)="selectStep()"
|
|
data-id="pipelineContainer"
|
|
>
|
|
<ng-container *ngIf="dagModel$ | async as dagModel">
|
|
<!-- <div *ngFor="let row of dagModel" class="level" [style.width.px]="chartWidth">
|
|
<sm-pipeline-controller-step
|
|
#taskEl
|
|
*ngFor="let step of row; trackBy: trackByStepId" [step]="step"
|
|
[selected]="selectedEntity && selectedEntity.id === step?.id"
|
|
(click)="$event.stopPropagation(); !taskEl.selected && selectStep(step)"
|
|
(openConsole)="openLog()"
|
|
></sm-pipeline-controller-step>
|
|
</div> -->
|
|
<svg class="arrows"
|
|
*ngIf="chartWidth"
|
|
[attr.viewBox]="'0 0 ' + chartWidth + ' ' + (50 + 132 * dagModel?.length)"
|
|
[style.width.px]="chartWidth"
|
|
[style.height.px]="50 + 132 * dagModel?.length"
|
|
>
|
|
<g
|
|
*ngFor="let arrow of arrows; trackBy: trackArrows"
|
|
[class.selected]="arrow.selected"
|
|
>
|
|
<path [attr.d]="arrow.path" fill="none" stroke-width="2"></path>
|
|
<polygon
|
|
points="0,-6 12,0, 0,6"
|
|
[attr.transform]="arrow.headTransform"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
</ng-container>
|
|
</div>
|
|
<div class="results-panel" [class.extend]="showLog" [class.maximized]="maximizeResults" data-id="resultsPanel">
|
|
<ng-container *ngIf="showLog">
|
|
<div class="header toggle" >
|
|
<div class="log-name">
|
|
<i class="al-icon al-ico-console me-2"></i>
|
|
<span>{{pipelineData?.name}}</span>
|
|
</div>
|
|
<sm-button-toggle
|
|
[value]="detailsPanelMode"
|
|
[options]="[
|
|
{label: 'PARAMETERS', value: statusOption.parameters},
|
|
{label: 'CODE', value: statusOption.code}
|
|
]"
|
|
(valueChanged)="detailsPanelMode = $event"
|
|
></sm-button-toggle>
|
|
<div class="close">
|
|
<i tabindex="1002" class="al-icon pointer" [class]="maximizeResults ? 'al-ico-min-panel' : 'al-ico-max-panel'" (click)="toggleResultSize()" (keyup)="toggleResultSize()" data-id="maxResultPanel"></i>
|
|
<i tabindex="1003" class="al-icon al-ico-dialog-x pointer ms-4" (click)="openLog(false)" (keyup)="openLog(false)" data-id="closeResultPanel"></i>
|
|
</div>
|
|
</div>
|
|
<div [ngSwitch]="detailsPanelMode" class="content">
|
|
<div *ngSwitchCase="statusOption.parameters" >
|
|
<ng-container *ngFor="
|
|
let param of pipelineData?.parameters;
|
|
let index = index
|
|
">
|
|
<div class="param">
|
|
<div class="key" [smTooltip]="param.name" smShowTooltipIfEllipsis>
|
|
{{ param.name }}
|
|
</div>
|
|
<div class="value">
|
|
<input [(ngModel)]="param['value']" placeholder="Enter parameter value"
|
|
|
|
(ngModelChange)="paramsChanged()" name="parameterKey-{{ param.id }}-{{ index }}" matInput required
|
|
#optsInput="ngModel" />
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</ng-container>
|
|
<p class=" ms-3 mt-4 mb-4" style="font-size: smaller;">
|
|
Note: Make sure to hit the <i>save</i> button to save pipeline parameters.
|
|
</p>
|
|
</div>
|
|
<!-- <sm-simple-dataset-version-preview
|
|
*ngSwitchCase="statusOption.preview" [selected]="(selected$ | async)"
|
|
></sm-simple-dataset-version-preview> -->
|
|
<!-- <sm-experiment-output-log
|
|
*ngSwitchCase="statusOption.log"
|
|
[experiment]="selected$ | async"
|
|
[isDarkTheme]="true"
|
|
[showHeader]="false"
|
|
></sm-experiment-output-log> -->
|
|
<ng-container *ngSwitchCase="statusOption.code" >
|
|
<div *ngIf="stepDiff; else empty" class="ace" #aceEditor></div>
|
|
<ng-template #empty>
|
|
<div class="no-code" data-id="noCode">
|
|
<i class="icon no-output-icon i-no-code-dark"></i>
|
|
<h4>NO CODE</h4>
|
|
</div>
|
|
</ng-template>
|
|
</ng-container>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|