Upload artifacts via UI

package.json

@@ -20,16 +20,16 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^17.1.1",
-    "@angular/cdk": "^17.1.1",
+    "@angular/cdk": "^17.3.6",
     "@angular/common": "^17.1.1",
     "@angular/compiler": "^17.1.1",
-    "@angular/core": "^17.1.1",
-    "@angular/forms": "^17.1.1",
-    "@angular/material": "^17.1.1",
+    "@angular/core": "^17.3.5",
+    "@angular/forms": "^17.3.6",
+    "@angular/material": "^17.3.6",
     "@angular/platform-browser": "^17.1.1",
     "@angular/platform-browser-dynamic": "^17.1.1",
     "@angular/platform-server": "^17.1.1",
-    "@angular/router": "^17.1.1",
+    "@angular/router": "^17.3.5",
     "@angular/service-worker": "^17.1.1",
     "@angular/youtube-player": "^17.1.1",
     "@aws-sdk/client-s3": "^3.499.0",
@@ -56,9 +56,9 @@
     "date-fns": "^3.3.1",
     "diff": "^5.1.0",
     "dom-to-image": "^2.6.0",
+    "dompurify": "^3.0.8",
     "export-to-csv": "^1.2.2",
     "filesize": "^10.1.0",
-    "dompurify": "^3.0.8",
     "has-ansi": "^5.0.1",
     "hocon-parser": "^1.0.1",
     "localforage": "^1.10.0",

src/app/app.module.ts

@@ -27,6 +27,11 @@ import {MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions} from '@angular/ma
 import {UpdateNotifierComponent} from '@common/shared/ui-components/overlay/update-notifier/update-notifier.component';
 import {ChooseColorModule} from '@common/shared/ui-components/directives/choose-color/choose-color.module';
 import {SpinnerComponent} from '@common/shared/ui-components/overlay/spinner/spinner.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { UploadArtifactDialogComponent } from '@common/shared/ui-components/overlay/upload-artifact-dialog/upload-artifact-dialog.component';
+
 
 @NgModule({
   declarations   : [AppComponent],
@@ -61,6 +66,10 @@ import {SpinnerComponent} from '@common/shared/ui-components/overlay/spinner/spi
     UpdateNotifierComponent,
     ChooseColorModule,
     SpinnerComponent,
+    MatButtonModule,
+    MatInputModule,
+    MatFormFieldModule,
+    UploadArtifactDialogComponent
   ],
   providers      : [
     UserPreferences,

src/app/features/experiments/experiments.module.ts

@@ -87,6 +87,7 @@ import {MatInputModule} from '@angular/material/input';
 import {MatSelectModule} from '@angular/material/select';
 import {HesitateDirective} from '@common/shared/ui-components/directives/hesitate.directive';
 import {ShowTooltipIfEllipsisDirective} from '@common/shared/ui-components/indicators/tooltip/show-tooltip-if-ellipsis.directive';
+import {MatButtonModule} from '@angular/material/button';
 
 
 @NgModule({
@@ -149,7 +150,8 @@ import {ShowTooltipIfEllipsisDirective} from '@common/shared/ui-components/indic
     MatInputModule,
     MatSelectModule,
     HesitateDirective,
-    ShowTooltipIfEllipsisDirective
+    ShowTooltipIfEllipsisDirective,
+    MatButtonModule
   ],
   declarations: [
     ExperimentsComponent,

src/app/webapp-common/core/actions/common-auth.actions.ts

@@ -75,6 +75,7 @@ export const getSignedUrl = createAction(
     disableCache?: number;
     dprsUrl?: string | boolean;
     error?: boolean;
+    method?: string;
   }}>()
 );
 export const setSignedUrl = createAction(

src/app/webapp-common/experiments/dumb/experiment-artifact-item-view/experiment-artifact-item-view.component.html

@@ -18,6 +18,7 @@
       </sm-labeled-row>
       <sm-labeled-row label="FILE SIZE" data-id="fileSizeId">{{(artifact?.content_size | filesize : fileSizeConfigStorage)  || ''}}</sm-labeled-row>
       <sm-labeled-row label="HASH" data-id="hashId">{{artifact?.hash}}</sm-labeled-row>
+      <sm-labeled-row label="MODE" data-id="modeId">{{artifact?.mode | titlecase}}</sm-labeled-row>
       <sm-labeled-row *ngFor="let data of artifact?.display_data" [label]="data[0]| uppercase">{{data[1]}}</sm-labeled-row>
     </div>
   </sm-editable-section>
@@ -32,5 +33,5 @@
       [formData]="artifact?.type_data?.preview"
     ></sm-scroll-textarea>
   </sm-editable-section>
-
+  <button *ngIf="enableDeleteButton()" class="btn btn-neon" style="margin: auto;" (click)="deleteArtifact(artifact?.key, artifact?.mode)">DELETE ARTIFACT</button>
 

src/app/webapp-common/experiments/dumb/experiment-artifact-item-view/experiment-artifact-item-view.component.ts

@@ -1,24 +1,56 @@
-import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input, Inject} from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import {Artifact} from '~/business-logic/model/tasks/artifact';
 import {BaseClickableArtifactComponent} from '../base-clickable-artifact.component';
 import {fileSizeConfigStorage} from '@common/shared/pipes/filesize.pipe';
+import { ApiTasksService } from '~/business-logic/api-services/tasks.service';
+import { ConfirmDialogComponent } from '@common/shared/ui-components/overlay/confirm-dialog/confirm-dialog.component';
+import { take } from 'rxjs/operators';
+import { addMessage } from '@common/core/actions/layout.actions';
+import { Observable } from 'rxjs/internal/Observable';
+import { IExperimentInfo } from '~/features/experiments/shared/experiment-info.model';
+import { selectExperimentInfoData } from '~/features/experiments/reducers';
+import { ArtifactId } from '~/business-logic/model/tasks/artifactId';
+import { deleteS3Sources } from '@common/shared/entity-page/entity-delete/common-delete-dialog.actions';
+import { EXPERIMENTS_STATUS_LABELS } from '~/features/experiments/shared/experiments.const';
 
 @Component({
   selector: 'sm-experiment-artifact-item-view',
   templateUrl: './experiment-artifact-item-view.component.html',
   styleUrls: ['./experiment-artifact-item-view.component.scss'],
+  providers: [
+    { provide: MAT_DIALOG_DATA, useValue: {} },
+    { provide: MatDialogRef, useValue: {} }
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ExperimentArtifactItemViewComponent extends BaseClickableArtifactComponent{
   public isLocalFile: boolean;
   public isLinkable: boolean;
   public fileSizeConfigStorage = fileSizeConfigStorage;
   public inMemorySize: boolean;
+  public experimentInfo$: Observable<IExperimentInfo>;
   private _artifact: Artifact;
+  private artifactId: ArtifactId;
+  private _experiment: any;
 
   @Input() editable: boolean;
   @Input() downloading: boolean;
 
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: ConfirmDialogComponent,
+    public dialogRef: MatDialogRef<ConfirmDialogComponent>,
+    private dialog: MatDialog,
+    private tasksApi: ApiTasksService,
+  ){
+    super();
+    this.experimentInfo$ = this.store.select(selectExperimentInfoData);
+    this.artifactId = {key: '', mode: 'output'};
+    this.experimentInfo$.subscribe((res) => {
+      this._experiment = res;
+    });
+  }
+
   @Input() set artifact(artifact: Artifact) {
     this._artifact = artifact;
     if(artifact){
@@ -39,6 +71,14 @@ export class ExperimentArtifactItemViewComponent extends BaseClickableArtifactCo
     return this._artifact;
   }
 
+  getStatusLabel() {
+    return EXPERIMENTS_STATUS_LABELS[this._experiment?.status] || '';
+  }
+
+  enableDeleteButton() {
+    return this.getStatusLabel() === 'Draft';
+  }
+
   linkClicked(event: Event) {
     this.signUrl(this.artifact.uri).subscribe(signed => {
       const a = document.createElement('a');
@@ -48,4 +88,34 @@ export class ExperimentArtifactItemViewComponent extends BaseClickableArtifactCo
     });
     event.preventDefault();
   }
+
+  deleteArtifact(key, mode) {
+    this.artifactId = {key: key, mode: mode};
+    const confirmDialogRef: MatDialogRef<any, boolean> = this.dialog.open(ConfirmDialogComponent, {
+      data: {
+        title: 'Delete Artifact',
+        body: 'Are you sure you want to delete artifact ' + key + ' from the experiment and S3?<br /><strong>This cannot be undone.</strong>',
+        yes: 'Delete',
+        no: 'Cancel',
+        iconClass: 'al-icon al-ico-trash al-color blue-300',
+      }
+    });
+
+    confirmDialogRef.afterClosed().pipe(take(1)).subscribe((confirmed) => {
+      if (confirmed) {
+        this.tasksApi.tasksDeleteArtifacts({
+          /* eslint-disable @typescript-eslint/naming-convention */
+          task: this._experiment.id,
+          artifacts: [this.artifactId]
+          /* eslint-enable @typescript-eslint/naming-convention */
+        }, null, 'body', true).subscribe({
+          next: () => {
+            this.store.dispatch(deleteS3Sources({files: [this.artifact.uri]}))
+          },
+          error: err => this.store.dispatch(addMessage('error', `Error ${err.error?.meta?.result_msg}`)),
+          complete: () => this.store.dispatch(addMessage('success', 'Artifact deleted successfully.')),
+        });
+      }
+    });
+  }
 }

src/app/webapp-common/experiments/dumb/experiment-info-header/experiment-info-header.component.html

@@ -22,6 +22,9 @@
          *ngIf="(!minimized) && shared"
     ><i class="al-icon al-ico-link sm-md"></i></div>
     <sm-id-badge class="me-3" [id]="experiment?.id" (copied)="copyToClipboard()" *ngIf="!viewId"></sm-id-badge>
+    <div class="line-item pointer" smTooltip="Upload Artifacts">
+      <i class="al-icon al-ico-upload line-item pointer" (click)="openUploadDialog()"></i>
+    </div>
     <span class="comment line-item"
           [delay]="1000" [action]="'leave'"
           (smHesitate)="menuHesitate.hesitateStatus && menu.closed.emit()"

src/app/webapp-common/experiments/dumb/experiment-info-header/experiment-info-header.component.ts

@@ -26,6 +26,8 @@ import {
 import {addMessage} from '@common/core/actions/layout.actions';
 import {MatMenuTrigger} from '@angular/material/menu';
 import { selectExperimentsTags } from '@common/experiments/reducers';
+import { UploadArtifactDialogComponent } from '@common/shared/ui-components/overlay/upload-artifact-dialog/upload-artifact-dialog.component';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'sm-experiment-info-header',
@@ -43,6 +45,7 @@ export class ExperimentInfoHeaderComponent implements OnDestroy {
   public shared: boolean;
   public isPipeline: boolean;
   public selectedDisableAvailable = {};
+  private upUrl: string;
 
   @Input() editable: boolean = true;
   @Input() infoData;
@@ -57,7 +60,7 @@ export class ExperimentInfoHeaderComponent implements OnDestroy {
   @ViewChild('tagsMenuTrigger') tagMenuTrigger: MatMenuTrigger;
   @ViewChild(TagsMenuComponent) tagMenu: TagsMenuComponent;
 
-  constructor(private store: Store, private router: Router, private activatedRoute: ActivatedRoute) {
+  constructor(private store: Store, private router: Router, private activatedRoute: ActivatedRoute, private dialog: MatDialog) {
     this.tagsFilterByProject$ = this.store.select(selectTagsFilterByProject);
     this.projectTags$ = this.store.select(selectExperimentsTags);
     this.companyTags$ = this.store.select(selectCompanyTags);
@@ -152,4 +155,23 @@ export class ExperimentInfoHeaderComponent implements OnDestroy {
   copyToClipboard() {
     this.store.dispatch(addMessage('success', 'Copied to clipboard'));
   }
+
+  enableUploadButton() {
+    return this.getStatusLabel() === 'Draft';
+  }
+
+  public openUploadDialog() {
+    if(this.enableUploadButton()) {
+      const uploadDialogRef: MatDialogRef<any> = this.dialog.open(UploadArtifactDialogComponent, {
+        data: {
+          uploadUrl: this.upUrl,
+          task: this.experiment.id,
+          title: 'Upload Artifacts',
+          iconClass: 'al-icon al-ico-upload al-color blue-300',
+        }
+      });
+    } else {
+      this.store.dispatch(addMessage('info', 'Upload only available in \'Draft\' state.'));
+    }
+  }
 }