mirror of
https://github.com/clearml/clearml-web
synced 2025-03-13 07:08:17 +00:00
resolved conflicts and merged branches
This commit is contained in:
Shubham Takode
commit
d9d6e70079
@ -0,0 +1,12 @@
|
||||
<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_5019_174)">
|
||||
<path d="M84 39V24C83.9982 22.4093 83.3654 20.8842 82.2406 19.7594C81.1158 18.6346 79.5907 18.0018 78 18H69V24H78V39C78.0057 40.7097 78.379 42.3982 79.0945 43.9511C79.81 45.5039 80.851 46.8847 82.1469 48C80.851 49.1153 79.81 50.4961 79.0945 52.0489C78.379 53.6018 78.0057 55.2903 78 57V72H69V78H78C79.5907 77.9982 81.1158 77.3654 82.2406 76.2406C83.3654 75.1158 83.9982 73.5907 84 72V57C84.0018 55.4093 84.6346 53.8842 85.7594 52.7594C86.8842 51.6346 88.4093 51.0018 90 51V45C88.4093 44.9982 86.8842 44.3654 85.7594 43.2406C84.6346 42.1158 84.0018 40.5907 84 39Z" fill="#C3CDF0"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M51 27L48.429 36H54.429L57 27H63L60.429 36H66V42H58.716L55.287 54H63V60H53.571L51 69H45L47.571 60H41.571L39 69H33L35.571 60H30V54H37.287L40.716 42H33V36H42.429L45 27H51ZM52.716 42H46.716L43.287 54H49.287L52.716 42Z" fill="#C3CDF0"/>
|
||||
<path d="M18 39V24H27V18H18C16.4093 18.0018 14.8842 18.6346 13.7594 19.7594C12.6346 20.8842 12.0018 22.4093 12 24V39C11.9982 40.5907 11.3654 42.1158 10.2406 43.2406C9.1158 44.3654 7.59074 44.9982 6 45V51C7.59074 51.0018 9.1158 51.6346 10.2406 52.7594C11.3654 53.8842 11.9982 55.4093 12 57V72C12.0018 73.5907 12.6346 75.1158 13.7594 76.2406C14.8842 77.3654 16.4093 77.9982 18 78H27V72H18V57C17.9943 55.2903 17.621 53.6018 16.9055 52.0489C16.19 50.4961 15.149 49.1153 13.8531 48C15.149 46.8847 16.19 45.5039 16.9055 43.9511C17.621 42.3982 17.9943 40.7097 18 39Z" fill="#C3CDF0"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_5019_174">
|
||||
<rect width="96" height="96" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,57 @@
|
||||
<div class="console-button">
|
||||
<button class="btn btn-cml-primary d-flex align-items-center" (click)="openDetailsDrawer()">
|
||||
<i class="al-icon al-ico-console sm me-3"></i>DETAILS
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<mat-drawer #drawer mode="over" position="end" class="drawer-container" [ngClass]="{'maximized': isMaximized, 'closing': isDrawerClosing }">
|
||||
<div class="header">
|
||||
<div class="left-section">
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="center-section">
|
||||
<button class="toggle-button" [class.active]="currentTab === 'parameter'" (click)="toggleTab('parameter')">PARAMETERS</button>
|
||||
<button class="toggle-button" [class.active]="currentTab === 'code'" (click)="toggleTab('code')">CODE</button>
|
||||
</div>
|
||||
<div class="right-section">
|
||||
<button type="button" class="btn btn-icon g-btn" (click)="toggleMaximize()">
|
||||
<i tabindex="1002" class="al-icon pointer" [class]="isMaximized ? 'al-ico-min-panel' : 'al-ico-max-panel'"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon g-btn" (click)="close()">
|
||||
<i class="al-icon al-ico-dialog-x sm-md"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs-content">
|
||||
<div *ngIf="currentTab === 'parameter' && pipelineData?.parameters.length > 0; else noParameterContent">
|
||||
<div *ngFor="let parameter of pipelineData.parameters">
|
||||
<div class="parameter-data"><p>Name: {{ parameter.name }}</p>
|
||||
<div class="parameter-input">Value:
|
||||
<input class="full-width-textarea" type="text"
|
||||
[ngModel]="parameter.value"
|
||||
[placeholder]="!parameter.value ? 'Enter value' : ''"
|
||||
(ngModelChange)="onInputChange($event, parameter)"
|
||||
(blur)="updateParameterValue(parameter)">
|
||||
</div></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<ng-template #noParameterContent>
|
||||
<div *ngIf="currentTab === 'parameter' && !pipelineParameters" class="no-data-container">
|
||||
<i class="icon i-pipeline-no-code mx-auto xxl no-data-icon"></i>
|
||||
<span class="no-data-text">NO PARAMETER</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<div *ngIf="currentTab === 'code' && pipelineCode; else noCodeContent">
|
||||
{{ pipelineCode }}
|
||||
</div>
|
||||
<ng-template #noCodeContent>
|
||||
<div *ngIf="currentTab === 'code' && !pipelineCode" class="no-data-container">
|
||||
<i class="icon i-pipeline-no-code mx-auto xxl no-data-icon"></i>
|
||||
<span class="no-data-text">NO CODE</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
</mat-drawer>
|
||||
|
||||
@ -0,0 +1,128 @@
|
||||
// // :host {
|
||||
// // display: block;
|
||||
// // width: 100%;
|
||||
@import "variables";
|
||||
mat-drawer{
|
||||
display: grid;
|
||||
}
|
||||
.drawer-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
transition: bottom 0.35s, visibility 0.35s, height ease-in-out 0.5s;
|
||||
height: 60vh; /* Default height */
|
||||
width: calc(100% - 64px); /* Assuming full width */
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.drawer-container.maximized {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
transition: bottom 0.35s, visibility 0.35s, height ease-in-out 0.5s;
|
||||
height: 100vh; /* Default height */
|
||||
width: calc(100% - 64px); /* Assuming full width */
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
}
|
||||
.drawer-container.closing {
|
||||
height: 0;
|
||||
transition: bottom 0.35s, visibility 0.35s, ease-in-out 0.5s; /* Apply transition when closing */
|
||||
}
|
||||
.drawer {
|
||||
width: 100vw; // Make drawer cover the entire viewport width
|
||||
bottom: 0; // Position drawer at the bottom of the screen
|
||||
}
|
||||
.console-button {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
top: 24px;
|
||||
z-index: 2;
|
||||
}
|
||||
.dialog-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 40%; /* Adjust as needed */
|
||||
max-height: 100%;
|
||||
background-color: #141722;
|
||||
transition: bottom 0.35s, visibility 0.35s, height ease-in-out 0.5s; /* Add transition for smooth animation */
|
||||
z-index: -1 !important;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #202432;
|
||||
background-color: #202432;
|
||||
}
|
||||
|
||||
.tabs-content {
|
||||
padding: 10px;
|
||||
background-color: #141722;
|
||||
color:#9fabc9;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.full-width-textarea {
|
||||
width: 100%;
|
||||
background-color: #384161;
|
||||
}
|
||||
.parameter-data{
|
||||
background-color: #202432;
|
||||
padding: 5px;
|
||||
}
|
||||
.parameter-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.toggle-button {
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
background-color: #2c3246;
|
||||
padding: 15px 25px;
|
||||
transition: background-color 0.3s;
|
||||
color: white;
|
||||
margin-right: -3px;
|
||||
}
|
||||
.toggle-button:last-child {
|
||||
margin-right: 0; /* Remove margin for the last button */
|
||||
}
|
||||
.toggle-button:first-child {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
.toggle-button:last-child {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
.toggle-button.active {
|
||||
background-color: #384161; /* Adjust the background color for active state */
|
||||
}
|
||||
|
||||
.no-data-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.no-data-icon {
|
||||
font-size: 6rem;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.no-data-text {
|
||||
margin-top: 15px;
|
||||
font-size: 1.5rem;
|
||||
color: #aaa;
|
||||
}
|
||||
// /* Add more styles as needed */
|
||||
// // }
|
||||
@ -0,0 +1,71 @@
|
||||
import { Component, OnInit, ViewChild, Input } from '@angular/core';
|
||||
import { MatDrawer } from '@angular/material/sidenav';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { cloneDeep } from 'lodash';
|
||||
import {
|
||||
updatePipeline,
|
||||
} from "../pipelines.actions";
|
||||
@Component({
|
||||
selector: 'sm-pipeline-details-drawer',
|
||||
templateUrl: './pipeline-details-drawer.component.html',
|
||||
styleUrls: ['./pipeline-details-drawer.component.scss']
|
||||
})
|
||||
export class PipelineDetailsDrawerComponent implements OnInit {
|
||||
@ViewChild('drawer') drawer: MatDrawer;
|
||||
@Input() pipelineId: string;
|
||||
@Input() pipelineData: any;
|
||||
currentTab: 'parameter' | 'code' = 'parameter'; // Default tab
|
||||
isMaximized: boolean = false;
|
||||
isDrawerClosing: boolean = false;
|
||||
pipelineParameters: string = '';
|
||||
pipelineCode: string = '';
|
||||
parameterValue!: string;
|
||||
|
||||
constructor(private store: Store) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.pipelineParameters = this.pipelineData?.parameters;
|
||||
this.pipelineCode = '';
|
||||
}
|
||||
|
||||
openDetailsDrawer(): void {
|
||||
this.drawer.open();
|
||||
}
|
||||
|
||||
toggleMaximize(): void {
|
||||
this.isMaximized = !this.isMaximized;
|
||||
}
|
||||
|
||||
close(): void {
|
||||
this.isDrawerClosing = true;
|
||||
this.drawer.close();
|
||||
this.isMaximized = false;
|
||||
setTimeout(() => {
|
||||
this.isDrawerClosing = false;
|
||||
}, 50);
|
||||
}
|
||||
|
||||
toggleTab(tab: 'parameter' | 'code'): void {
|
||||
this.currentTab = tab;
|
||||
}
|
||||
|
||||
onInputChange(newValue: any, parameter: any): void {
|
||||
// Update the parameter value when the input changes
|
||||
this.parameterValue = newValue;
|
||||
}
|
||||
updateParameterValue(parameter: any): void {
|
||||
// Perform deep clone to avoid mutating original object
|
||||
const updatedPipelineData = cloneDeep(this.pipelineData);
|
||||
|
||||
// Find the index of the parameter in the parameters array
|
||||
const index = updatedPipelineData.parameters.findIndex(p => p.id === parameter.id);
|
||||
|
||||
// Update the parameter value if found
|
||||
if (index !== -1) {
|
||||
updatedPipelineData.parameters[index].value = this.parameterValue;
|
||||
}
|
||||
// Dispatch action to update pipeline data in the store
|
||||
this.store.dispatch(updatePipeline({ changes: updatedPipelineData }));
|
||||
}
|
||||
|
||||
}
|
||||
@ -7,7 +7,8 @@
|
||||
(deleteStep)="stepDelete($event)"
|
||||
[ioOptions]="selectedStepInputOutputOptions"
|
||||
(stepParamsChanged)="selectedStepParamsChanged($event)"/>
|
||||
<!-- <div class="details"><i class="icon no-output-icon i-no-code-dark"></i> DETAILS</div> -->
|
||||
<sm-pipeline-step-info [step]="selectedStep" *ngIf="selectedStep" (stepParamsChanged)="selectedStepParamsChanged($event)"/>
|
||||
<sm-pipeline-details-drawer [pipelineId]="pipelineId" [pipelineData]="selectedPipeline"></sm-pipeline-details-drawer>
|
||||
<sm-flow-editor *ngIf="selectedPipeline?.flow_display?.nodes?.length" [pipelineData]="selectedPipeline"
|
||||
(nodesChangedInReactFlow)="nodesChangedInReactFlow($event)"
|
||||
(nodeClicked)="nodeSelected($event)"
|
||||
|
||||
@ -3,30 +3,19 @@
|
||||
}
|
||||
|
||||
.edit-pipeline-body {
|
||||
// display: flex;
|
||||
// flex-grow: 1;
|
||||
// padding: 30px;
|
||||
// justify-content: flex-start;
|
||||
// height: 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100% - 66px);
|
||||
transition: height 0.3s;
|
||||
background-color: #0D0E15;
|
||||
|
||||
// .details {
|
||||
// display: flex;
|
||||
// width: 144px;
|
||||
// height: 45px;
|
||||
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// border-radius: 5px;
|
||||
|
||||
// .icon {
|
||||
// margin-right: 20px;
|
||||
// }
|
||||
// }
|
||||
.console-button {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
top: 24px;
|
||||
z-index: 2;
|
||||
}
|
||||
sm-pipeline-step-info {
|
||||
display: block;
|
||||
position: absolute;
|
||||
@ -41,10 +30,5 @@
|
||||
align-items: center;
|
||||
height: 100svh;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
// width: 107px;
|
||||
// height: 107px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -15,13 +15,14 @@ import { ButtonToggleComponent } from "@common/shared/ui-components/inputs/butto
|
||||
|
||||
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
|
||||
import { MatMenuModule } from "@angular/material/menu";
|
||||
import { MatCheckboxModule } from "@angular/material/checkbox";
|
||||
import { MatSidenavModule } from "@angular/material/sidenav";
|
||||
import {MatCheckboxModule} from '@angular/material/checkbox';
|
||||
import { MatSidenavModule } from "@angular/material/sidenav";
|
||||
import { MatInputModule } from "@angular/material/input";
|
||||
import { PipelineDialogComponent } from "./pipeline-dialog/pipeline-dialog.component";
|
||||
import { CreateNewPipelineFormComponent } from "./pipeline-dialog/create-new-pipeline-form/create-new-pipeline-form.component";
|
||||
import { PipelineSettingDialogComponent } from "./pipeline-setting/pipeline-setting.dialog.component";
|
||||
import { PipelineSettingFormComponent } from "./pipeline-setting/pipeline-setting-form/pipeline-setting-form.component";
|
||||
import { PipelineSettingDialogComponent } from './pipeline-setting/pipeline-setting.dialog.component';
|
||||
import { PipelineSettingFormComponent } from './pipeline-setting/pipeline-setting-form/pipeline-setting-form.component';
|
||||
import { SimpleDatasetVersionPreviewComponent } from "@common/dataset-version/simple-dataset-version-preview/simple-dataset-version-preview.component";
|
||||
import { MatAutocompleteModule } from "@angular/material/autocomplete";
|
||||
import { ScrollEndDirective } from "@common/shared/ui-components/directives/scroll-end.directive";
|
||||
import { ClickStopPropagationDirective } from "@common/shared/ui-components/directives/click-stop-propagation.directive";
|
||||
@ -46,6 +47,10 @@ import { ClearFiltersButtonComponent } from "@common/shared/components/clear-fil
|
||||
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 { MatTabsModule } from '@angular/material/tabs';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import {MatButtonToggleModule} from '@angular/material/button-toggle';
|
||||
import { RefreshButtonComponent } from "@common/shared/components/refresh-button/refresh-button.component";
|
||||
import { ExperimentSharedModule } from "~/features/experiments/shared/experiment-shared.module";
|
||||
import { EffectsModule } from "@ngrx/effects";
|
||||
@ -71,6 +76,7 @@ import { FileSizePipe } from "@common/shared/pipes/filesize.pipe";
|
||||
import { RegexPipe } from "@common/shared/pipes/filter-regex.pipe";
|
||||
import { FilterMonitorMetricPipe } from "@common/shared/pipes/filter-monitor-metric.pipe";
|
||||
import { PipelineParametersDialogComponent } from "./pipeline-parameters-dialog/pipeline-parameters-dialog.component";
|
||||
import { PipelineDetailsDrawerComponent } from './details-dialog/pipeline-details-drawer.component';
|
||||
|
||||
export const pipelinesSyncedKeys = ["projects.showPipelineExamples"];
|
||||
const pipelinesSyncedKeys2 = ["orderBy", "sortOrder"];
|
||||
@ -132,6 +138,7 @@ const getInitState = (userPreferences: UserPreferences) => ({
|
||||
PipelineSettingFormComponent,
|
||||
PipelineStepInfoComponent,
|
||||
PipelineParametersDialogComponent,
|
||||
PipelineDetailsDrawerComponent,
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
@ -157,7 +164,10 @@ const getInitState = (userPreferences: UserPreferences) => ({
|
||||
LabeledFormFieldDirective,
|
||||
SearchTextDirective,
|
||||
UniqueNameValidatorDirective,
|
||||
|
||||
MatTabsModule,
|
||||
MatIconModule,
|
||||
MatDialogModule,
|
||||
MatButtonToggleModule,
|
||||
MarkdownEditorComponent,
|
||||
SearchComponent,
|
||||
TagListComponent,
|
||||
@ -186,6 +196,7 @@ const getInitState = (userPreferences: UserPreferences) => ({
|
||||
FileSizePipe,
|
||||
RegexPipe,
|
||||
FilterMonitorMetricPipe,
|
||||
SimpleDatasetVersionPreviewComponent,
|
||||
],
|
||||
exports: [PipelinesPageComponent, EditPipelinePageComponent],
|
||||
providers: [
|
||||
|
||||
@ -608,6 +608,9 @@
|
||||
.i-pipeline-compile {
|
||||
@include icon('#{$assets-icons-path}/pipeline/pipeline-compile.svg');
|
||||
}
|
||||
.i-pipeline-no-code {
|
||||
@include icon('#{$assets-icons-path}/pipeline/pipeline-no-code.svg');
|
||||
}
|
||||
|
||||
.i-pipeline-add-new-step {
|
||||
@include icon('#{$assets-icons-path}/pipeline/pipeline-add-new-step.svg');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user