mirror of
https://github.com/clearml/clearml-web
synced 2025-04-25 08:34:33 +00:00
Edit pipeline changes
This commit is contained in:
Sumit-solytics
parent
04c7a922cf
commit
6d005d709a
@ -823,7 +823,7 @@ button.btn.button-outline-dark {
|
||||
grid-template-columns: repeat(auto-fit, 352px);
|
||||
grid-gap: 24px;
|
||||
padding: 0 24px 24px;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.load-more {
|
||||
display: flex;
|
||||
|
||||
@ -0,0 +1,51 @@
|
||||
<!-- <div class="d-flex justify-content-between header-container align-items-center"
|
||||
[ngClass]="{'archive-mode': isArchived}"> -->
|
||||
<!-- <div class="d-flex-center"> -->
|
||||
<div class="d-flex justify-content-end align-items-center right-buttons">
|
||||
<sm-clear-filters-button
|
||||
*ngIf="!minimizedView"
|
||||
[tableFilters]="tableFilters"
|
||||
(clearTableFilters)="clearTableFilters.emit(tableFilters)"
|
||||
></sm-clear-filters-button>
|
||||
<sm-menu *ngIf="tableMode !== 'compare'"
|
||||
class="download-btn" buttonClass="al-icon al-ico-download pointer lm" panelClasses="light-theme"
|
||||
[showCart]="false" smTooltip="Download table as CSV" [disabled]="noData" data-id="downloadCSV">
|
||||
<sm-menu-item (itemClicked)="downloadTableAsCSV.emit()" itemLabel="Download on screen items"></sm-menu-item>
|
||||
<sm-menu-item (itemClicked)="downloadFullTableAsCSV.emit()"
|
||||
[itemLabel]="'Download first '+ (maxDownloadItems$ | async) +' items'"></sm-menu-item>
|
||||
</sm-menu>
|
||||
|
||||
<!-- <mat-form-field *ngIf="tableMode === 'compare'" appearance="outline" class="dark-outline compare-view-select no-bottom">
|
||||
<mat-select [(ngModel)]="compareView" name="compareView" panelClass="dark-outline" (ngModelChange)="compareViewChanged.emit($event)">
|
||||
<mat-option value="scalars">Scalars</mat-option>
|
||||
<mat-option value="plots">Plots</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field> -->
|
||||
|
||||
<!-- <i class="al-icon al-ico-tune sm-md"
|
||||
*ngIf="tableMode === 'compare' && compareView === 'scalars'"
|
||||
[class.active]="showCompareScalarSettings"
|
||||
(click)="toggleShowCompareSettings.emit()"></i> -->
|
||||
|
||||
<sm-experiment-custom-cols-menu
|
||||
*ngIf="!minimizedView || tableMode === 'compare'"
|
||||
[metricVariants]="metricVariants"
|
||||
[hyperParams]="hyperParams"
|
||||
[tableCols]="tableCols"
|
||||
[isLoading]="isMetricsLoading"
|
||||
[skipValueType]="tableMode === 'compare'"
|
||||
[disabled]="tableMode === 'compare' && metricVariants?.length === 0"
|
||||
(selectedMetricToShow)="selectedMetricToShow.emit($event)"
|
||||
(selectedHyperParamToShow)="selectedHyperParamToShow.emit($event)"
|
||||
(selectedTableColsChanged)="selectedTableColsChanged.emit($event)"
|
||||
(getMetricsToDisplay)="getMetricsToDisplay.emit($event)"
|
||||
(removeColFromList)="removeColFromList.emit($event)"
|
||||
(clearSelection)="clearSelection.emit()"
|
||||
></sm-experiment-custom-cols-menu>
|
||||
<sm-refresh-button
|
||||
[allowAutoRefresh]="true"
|
||||
(setAutoRefresh)="setAutoRefresh.emit($event)"
|
||||
>
|
||||
</sm-refresh-button>
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
@ -0,0 +1,5 @@
|
||||
.right-buttons{
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: end;
|
||||
}
|
||||
@ -0,0 +1,66 @@
|
||||
import {Component, EventEmitter, Input, OnInit, Output, TemplateRef} from '@angular/core';
|
||||
import {MetricVariantResult} from '~/business-logic/model/projects/metricVariantResult';
|
||||
import {ISmCol} from '@common/shared/ui-components/data/table/table.consts';
|
||||
import {FilterMetadata} from 'primeng/api/filtermetadata';
|
||||
import {BaseEntityHeaderComponent} from '@common/shared/entity-page/base-entity-header/base-entity-header.component';
|
||||
import {SelectionEvent} from '@common/experiments/dumb/select-metric-for-custom-col/select-metric-for-custom-col.component';
|
||||
import {Option} from '@common/shared/ui-components/inputs/button-toggle/button-toggle.component';
|
||||
import {trackByValue} from '@common/shared/utils/forms-track-by';
|
||||
import {resourceToIconMap} from '~/features/experiments/experiments.consts';
|
||||
import {EntityTypeEnum} from '~/shared/constants/non-common-consts';
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'sm-edit-pipeline-header',
|
||||
templateUrl: './edit-pipeline-header.component.html',
|
||||
styleUrls: ['./edit-pipeline-header.component.scss']
|
||||
})
|
||||
export class EditPipelineHeaderComponent extends BaseEntityHeaderComponent implements OnInit{
|
||||
private _tableCols: any;
|
||||
toggleButtons: Option[];
|
||||
@Input() isArchived: boolean;
|
||||
@Input() metricVariants: Array<MetricVariantResult>;
|
||||
@Input() hyperParams: any[];
|
||||
@Input() minimizedView: boolean;
|
||||
@Input() isMetricsLoading: boolean;
|
||||
@Input() tableFilters: { [s: string]: FilterMetadata };
|
||||
@Input() sharedView: boolean;
|
||||
@Input() showNavbarLinks: boolean;
|
||||
@Input() tableMode: 'table' | 'info' | 'compare';
|
||||
@Input() compareView: 'scalars' | 'plots';
|
||||
@Input() showCompareScalarSettings: boolean;
|
||||
@Input() rippleEffect: boolean;
|
||||
@Input() addButtonTemplate: TemplateRef<any>;
|
||||
|
||||
@Input() set tableCols(tableCols) {
|
||||
this._tableCols = tableCols?.filter(col => col.header !== '');
|
||||
}
|
||||
|
||||
get tableCols() {
|
||||
return this._tableCols;
|
||||
}
|
||||
|
||||
@Output() isArchivedChanged = new EventEmitter<boolean>();
|
||||
@Output() selectedTableColsChanged = new EventEmitter<ISmCol>();
|
||||
@Output() removeColFromList = new EventEmitter<ISmCol['id']>();
|
||||
@Output() getMetricsToDisplay = new EventEmitter();
|
||||
@Output() selectedMetricToShow = new EventEmitter<SelectionEvent>();
|
||||
@Output() selectedHyperParamToShow = new EventEmitter<{param: string; addCol: boolean}>();
|
||||
@Output() setAutoRefresh = new EventEmitter<boolean>();
|
||||
@Output() toggleShowCompareSettings = new EventEmitter<boolean>();
|
||||
@Output() compareViewChanged = new EventEmitter<'scalars' | 'plots'>();
|
||||
@Output() clearSelection = new EventEmitter();
|
||||
@Output() clearTableFilters = new EventEmitter<{ [s: string]: FilterMetadata }>();
|
||||
@Output() tableModeChanged = new EventEmitter<'table' | 'info' | 'compare'>();
|
||||
protected readonly resourceToIconMap = resourceToIconMap;
|
||||
protected readonly trackByValue = trackByValue;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.toggleButtons = [
|
||||
{label: 'Table view', value: 'table', icon: 'al-ico-table-view'},
|
||||
{label: 'Details view', value: 'info', icon: 'al-ico-experiment-view'},
|
||||
...(this.entityType === EntityTypeEnum.experiment ? [{label: 'Compare view', value: 'compare', icon: 'al-ico-charts-view'}] : [])
|
||||
];
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
<div class="sm-card-list-layout projects">
|
||||
<sm-edit-pipeline-header
|
||||
>
|
||||
</sm-edit-pipeline-header>
|
||||
<div>
|
||||
<div>Details</div>
|
||||
<div>image</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,10 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'sm-edit-pipeline',
|
||||
templateUrl: './edit-pipeline.component.html',
|
||||
styleUrls: ['./edit-pipeline.component.scss']
|
||||
})
|
||||
export class EditPipelineComponent {
|
||||
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
<router-outlet></router-outlet>
|
||||
<div class="sm-card-list-layout projects"
|
||||
[class.in-empty-state]="!(((projectsList$ | async)?.length !== 0 && (!allExamples || (showExamples$ | async))) || searching)">
|
||||
[class.in-empty-state]="!(((projectsList$ | async)?.length !== 0 && (!allExamples || (showExamples$ | async))) || searching)">
|
||||
<sm-projects-header
|
||||
(orderByChanged)="orderByChanged($event)"
|
||||
[sortByField]="projectsOrderBy$ | async"
|
||||
|
||||
@ -9,6 +9,16 @@ import {merge} from 'lodash-es';
|
||||
import {PipelinesRouterModule} from '@common/pipelines/pipelines.route';
|
||||
import {PipelineCardComponent} from '@common/pipelines/pipeline-card/pipeline-card.component';
|
||||
import {ButtonToggleComponent} from '@common/shared/ui-components/inputs/button-toggle/button-toggle.component';
|
||||
import { EditPipelineComponent } from './edit-pipeline/edit-pipeline.component';
|
||||
import { EditPipelineHeaderComponent } from './edit-pipeline-header/edit-pipeline-header.component';
|
||||
import {ClearFiltersButtonComponent} from '@common/shared/components/clear-filters-button/clear-filters-button.component';
|
||||
import {MenuComponent} from '@common/shared/ui-components/panel/menu/menu.component';
|
||||
import {MenuItemComponent} from '@common/shared/ui-components/panel/menu-item/menu-item.component';
|
||||
import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field';
|
||||
// import { ExperimentCustomColsMenuComponent } from '@common/experiments/dumb/experiment-custom-cols-menu/experiment-custom-cols-menu.component';
|
||||
import { RefreshButtonComponent } from '@common/shared/components/refresh-button/refresh-button.component';
|
||||
import { ExperimentSharedModule } from '~/features/experiments/shared/experiment-shared.module';
|
||||
import { LabeledFormFieldDirective } from "../shared/directive/labeled-form-field.directive";
|
||||
|
||||
|
||||
export const pipelinesSyncedKeys = [
|
||||
@ -39,21 +49,30 @@ const getPipelineConfig = () => ({
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
PipelinesPageComponent,
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
CommonProjectsModule,
|
||||
ProjectsSharedModule,
|
||||
PipelinesRouterModule,
|
||||
StoreModule.forFeature('projects', projectsReducer, PIPELINES_CONFIG_TOKEN),
|
||||
PipelineCardComponent,
|
||||
ButtonToggleComponent,
|
||||
],
|
||||
exports: [PipelinesPageComponent],
|
||||
providers: [
|
||||
{provide: PIPELINES_CONFIG_TOKEN, useFactory: getPipelineConfig},
|
||||
]
|
||||
declarations: [
|
||||
PipelinesPageComponent,
|
||||
EditPipelineComponent,
|
||||
EditPipelineHeaderComponent,
|
||||
],
|
||||
exports: [PipelinesPageComponent, EditPipelineComponent],
|
||||
providers: [
|
||||
{ provide: PIPELINES_CONFIG_TOKEN, useFactory: getPipelineConfig },
|
||||
{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'always' } },
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
CommonProjectsModule,
|
||||
ProjectsSharedModule,
|
||||
PipelinesRouterModule,
|
||||
StoreModule.forFeature('projects', projectsReducer, PIPELINES_CONFIG_TOKEN),
|
||||
PipelineCardComponent,
|
||||
ButtonToggleComponent,
|
||||
ClearFiltersButtonComponent,
|
||||
MenuComponent,
|
||||
MenuItemComponent,
|
||||
ExperimentSharedModule,
|
||||
RefreshButtonComponent,
|
||||
LabeledFormFieldDirective
|
||||
]
|
||||
})
|
||||
export class PipelinesModule { }
|
||||
|
||||
@ -2,16 +2,23 @@ import {FeaturesEnum} from '~/business-logic/model/users/featuresEnum';
|
||||
import {NgModule} from '@angular/core';
|
||||
import {RouterModule, Routes} from '@angular/router';
|
||||
import {PipelinesPageComponent} from '@common/pipelines/pipelines-page/pipelines-page.component';
|
||||
import { EditPipelineComponent} from '@common/pipelines/edit-pipeline/edit-pipeline.component';
|
||||
import {CrumbTypeEnum} from '@common/layout/breadcrumbs/breadcrumbs.component';
|
||||
|
||||
const routes = [{
|
||||
path: '',
|
||||
component: PipelinesPageComponent,
|
||||
data: {search: true, features: FeaturesEnum.Pipelines, staticBreadcrumb:[[{
|
||||
name: 'PIPELINES',
|
||||
type: CrumbTypeEnum.Feature
|
||||
}]]},
|
||||
}] as Routes;
|
||||
const routes = [ {
|
||||
path: '',
|
||||
component: PipelinesPageComponent,
|
||||
data: {
|
||||
search: true,
|
||||
features: FeaturesEnum.Pipelines,
|
||||
staticBreadcrumb: [[{
|
||||
name: 'PIPELINES',
|
||||
type: CrumbTypeEnum.Feature
|
||||
}]]
|
||||
},
|
||||
|
||||
|
||||
},{ path: ':id/edit', component: EditPipelineComponent }] as Routes;
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user