Allow access to S3 buckets with temp AWS creds

[annaelee]

What

ClearML access to debug images and artifacts stored in an AWS S3 buckets with temporary credentials fails.

Why

ClearML expects an IAM key/secret to be passed, but there should be support to use AWS temporary credentials.

How

Allow a session token to be passed through the UI and use it to access the bucket. I'm not sure how this affects access if you are using IAM credentials and do not pass a token, that part might need to be hashed out a little bit.

I currently have a branch with these changes implemented, but do not have the privileges to push that branch to this repo. Below is the git diff.

diff --git a/src/app/webapp-common/core/reducers/common-auth-reducer.ts b/src/app/webapp-common/core/reducers/common-auth-reducer.ts
index e96ed95..63c8a2f 100755
--- a/src/app/webapp-common/core/reducers/common-auth-reducer.ts
+++ b/src/app/webapp-common/core/reducers/common-auth-reducer.ts
@@ -19,6 +19,7 @@ export interface Credentials {
   Endpoint?: string;
   Key?: string;
   Secret?: string;
+  Token?: string;
   Region?: string;
 }
 
diff --git a/src/app/webapp-common/layout/s3-access-dialog/s3-access-dialog.component.html b/src/app/webapp-common/layout/s3-access-dialog/s3-access-dialog.component.html
index 957749b..bc198c3 100755
--- a/src/app/webapp-common/layout/s3-access-dialog/s3-access-dialog.component.html
+++ b/src/app/webapp-common/layout/s3-access-dialog/s3-access-dialog.component.html
@@ -16,6 +16,11 @@
              [placeholder]="isAzure ? 'Shared access signature (SAS)' : 'Secret'">
       <mat-error *ngIf="secretInput.errors?.required">*Required</mat-error>
     </mat-form-field>
+    <mat-form-field *ngIf="!isAzure" class="w-100">
+      <mat-label>Token</mat-label>
+      <input matInput [(ngModel)]="S3Form.Token" type="text" name="Token" placeholder="Token" [(ngModel)]="S3Form.Token" #keyInput="ngModel"
+             autocomplete="off">
+    </mat-form-field>             
     <mat-form-field *ngIf="!isAzure" class="w-100">
       <mat-label>Region</mat-label>
       <input matInput [(ngModel)]="S3Form.Region" type="text" name="Region" placeholder="AWS Region (e.g. us-east-2)"
diff --git a/src/app/webapp-common/layout/s3-access-dialog/s3-access-dialog.component.ts b/src/app/webapp-common/layout/s3-access-dialog/s3-access-dialog.component.ts
index 8d51236..4abadc3 100755
--- a/src/app/webapp-common/layout/s3-access-dialog/s3-access-dialog.component.ts
+++ b/src/app/webapp-common/layout/s3-access-dialog/s3-access-dialog.component.ts
@@ -15,6 +15,7 @@ export class S3AccessDialogComponent implements OnChanges {
   @Input() isAzure;
   @Input() key;
   @Input() secret                          = '';
+  @Input() token                           = '';
   @Input() region                          = '';
   @Input() bucket;
   @Input() endpoint;
@@ -36,6 +37,7 @@ export class S3AccessDialogComponent implements OnChanges {
       this.S3Form= {
         Key     : changes.isAzure.currentValue ? 'azure' : changes.key.currentValue,
         Secret  : changes.secret.currentValue,
+        Token   : changes.token.currentValue,
         Region  : changes.region.currentValue,
         Bucket  : changes.bucket.currentValue,
         Endpoint: (changes.endpoint.currentValue === null || changes.endpoint.currentValue?.startsWith('http')) ?
diff --git a/src/app/webapp-common/layout/s3-access-resolver/s3-access-resolver.component.html b/src/app/webapp-common/layout/s3-access-resolver/s3-access-resolver.component.html
index c878d0c..3771496 100755
--- a/src/app/webapp-common/layout/s3-access-resolver/s3-access-resolver.component.html
+++ b/src/app/webapp-common/layout/s3-access-resolver/s3-access-resolver.component.html
@@ -6,6 +6,7 @@
     [region]="region"
     [secret]="secret"
     [key]="key"
+    [token]="token"
     [editMode]="editMode"
     [isAzure]="isAzure"
     (closeSave)="saveS3Credentials($event)"
diff --git a/src/app/webapp-common/layout/s3-access-resolver/s3-access-resolver.component.ts b/src/app/webapp-common/layout/s3-access-resolver/s3-access-resolver.component.ts
index bf07285..0a627b5 100755
--- a/src/app/webapp-common/layout/s3-access-resolver/s3-access-resolver.component.ts
+++ b/src/app/webapp-common/layout/s3-access-resolver/s3-access-resolver.component.ts
@@ -16,6 +16,7 @@ export class S3AccessResolverComponent {
   endpoint: any;
   key: any;
   secret: any;
+  token: any;
   region: any;
   header: any;
   editMode: any;
@@ -32,6 +33,7 @@ export class S3AccessResolverComponent {
     this.endpoint       = s3Credentials.Endpoint;
     this.key            = s3Credentials.Key;
     this.secret         = s3Credentials.Secret;
+    this.token          = s3Credentials.Token;
     this.region         = s3Credentials.Region;
     this.isAzure        = data.isAzure;
     if (data.credentialsError) {
diff --git a/src/app/webapp-common/settings/admin/base-admin.service.ts b/src/app/webapp-common/settings/admin/base-admin.service.ts
index 662a0ac..cdd22e0 100755
--- a/src/app/webapp-common/settings/admin/base-admin.service.ts
+++ b/src/app/webapp-common/settings/admin/base-admin.service.ts
@@ -138,7 +138,8 @@ export class BaseAdminService {
       region: set.Region || DEFAULT_REGION,
       credentials: {
         accessKeyId: set.Key,
-        secretAccessKey: set.Secret
+        secretAccessKey: set.Secret,
+        sessionToken: set.Token
       },
       ...(set.Endpoint && {
         endpoint: {
diff --git a/src/app/webapp-common/settings/admin/s3-access/s3-access.component.html b/src/app/webapp-common/settings/admin/s3-access/s3-access.component.html
index d4fd7f1..8082fa5 100755
--- a/src/app/webapp-common/settings/admin/s3-access/s3-access.component.html
+++ b/src/app/webapp-common/settings/admin/s3-access/s3-access.component.html
@@ -3,6 +3,7 @@
     <div class="col-6">Bucket</div>
     <div class="col-4">Key</div>
     <div class="col-6">Secret / SAS</div>
+    <div class="col-6">Token</div>
     <div class="col-2">AWS Region</div>
     <div class="col-6">Host (Endpoint)</div>
   </div>
@@ -18,6 +19,9 @@
       <div class="col-6">
         <input matInput class="form-control" formControlName="Secret">
       </div>
+      <div class="col-6">
+        <input matInput class="form-control" formControlName="Token">
+      </div>
       <div class="col-2">
         <input matInput class="form-control" formControlName="Region" placeholder="us-east-2">
       </div>
diff --git a/src/app/webapp-common/settings/admin/s3-access/s3-access.component.ts b/src/app/webapp-common/settings/admin/s3-access/s3-access.component.ts
index 3aa3d41..a447cdf 100755
--- a/src/app/webapp-common/settings/admin/s3-access/s3-access.component.ts
+++ b/src/app/webapp-common/settings/admin/s3-access/s3-access.component.ts
@@ -37,10 +37,11 @@ export class S3AccessComponent implements OnDestroy, OnInit {
     return this.S3Form.get(this.BUCKET_CREDENTIALS) as UntypedFormArray;
   }
 
-  addBucket({Key = '', Secret = '', Region = '', Bucket = '', Endpoint = null} = {}) {
+  addBucket({Key = '', Secret = '', Token='', Region = '', Bucket = '', Endpoint = null} = {}) {
     this.bucketCredentials.push(this.formBuilder.group({
       Key,
       Secret,
+      Token,
       Region,
       Bucket,
       Endpoint: (Endpoint?.startsWith('http') || Endpoint === null)? Endpoint : `http${Endpoint?.endsWith('443') ? 's' : ''}://${Endpoint}`

[annaelee]

@shyallegro

[shyallegro]

Hi @annaelee ,
thank you for this contribution, can you please create a pull request by forking this repo, then add you fork as a remote to the local copy: git remote add my https://github.com/[your user]/clearml-web.git
you can the push to your fork (my) git push my [branch name] and finally in github you will be able to open a pull request.