[ui] Annotations when creating container

redhat-developer · Aug 22, 2023 · 4b5e923 · 4b5e923
1 parent 69733cc
commit 4b5e923
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 14 deletions.
diff --git a/ui/cypress/e2e/spec.cy.ts b/ui/cypress/e2e/spec.cy.ts
@@ -102,6 +102,7 @@ describe('devfile editor spec', () => {
     cy.selectTab(TAB_CONTAINERS);
     cy.getByDataCy('container-name').type('created-container');
     cy.getByDataCy('container-image').type('an-image');
+    cy.getByDataCy('container-more-params').click();
     cy.getByDataCy('container-sources-configuration').click();
     cy.getByDataCy('container-sources-specific-directory').click();
     cy.getByDataCy('container-source-mapping').type('/mnt/sources');

diff --git a/ui/src/app/controls/volume-mounts/volume-mounts.component.html b/ui/src/app/controls/volume-mounts/volume-mounts.component.html
@@ -1,4 +1,3 @@
-<h3>Volume Mounts</h3>
 <div class="group">
     <div *ngFor="let vm of volumeMounts; let i=index">
         <mat-form-field class="inline" appearance="outline">

diff --git a/ui/src/app/forms/container/container.component.css b/ui/src/app/forms/container/container.component.css
@@ -3,4 +3,10 @@ mat-form-field.full-width { width: 100%; }
 .mid-width { width: 50%; }
 .source-configuration-details {
     margin-left: 16px;
+}
+div.buttonbar {
+    margin-top: 16px;
+}
+.outbutton {
+    text-align: right;
 }
diff --git a/ui/src/app/forms/container/container.component.html b/ui/src/app/forms/container/container.component.html
@@ -12,18 +12,23 @@ <h2>Add a new container</h2>
             <input placeholder="Image to start the container" data-cy="container-image" matInput formControlName="image">
         </mat-form-field>
         <h3>Command and Arguments</h3>
+        <div class="description">Command and Arguments can be used to override the entrypoint of the image</div>
         <app-multi-text formControlName="command" label="Command" addLabel="Add command"></app-multi-text>
         <app-multi-text formControlName="args" label="Arg" addLabel="Add arg"></app-multi-text>
 
         <h3>Environment Variables</h3>
+        <div class="description">Environment Variables to define in the running container</div>
         <app-multi-key-value dataCyPrefix="container-env" addLabel="Add Environment Variable" formControlName="env"></app-multi-key-value>
 
+        <h3>Volume Mounts</h3>
+        <div class="description">Volumes to mount into the container's filesystem</div>
         <app-volume-mounts
             [volumes]="volumeNames"
             formControlName="volumeMounts"
             (createNewVolume)="onCreateNewVolume($event)"></app-volume-mounts>
 
         <h3>Resource Usage</h3>
+        <div class="description">CPU and Memory resources necessary for container's execution</div>
         <mat-form-field appearance="outline" class="mid-width">
             <mat-label><span>Memory Request</span></mat-label>
             <mat-error>{{quantityErrMsgMemory}}</mat-error>
@@ -45,20 +50,38 @@ <h3>Resource Usage</h3>
             <input placeholder="CPU limit for the container. Ex: 1" data-cy="container-cpu-limit" matInput formControlName="cpuLimit">
         </mat-form-field>
 
-        <h3>Sources</h3>
-        <div><mat-checkbox data-cy="container-sources-configuration" formControlName="configureSources">Configure Source mount</mat-checkbox></div>
-        <div *ngIf="form.get('configureSources')?.value" class="source-configuration-details">
-            <div style="display: inline-flex" class="mid-width">
-                <mat-checkbox data-cy="container-mount-sources" formControlName="mountSources">Mount sources into container</mat-checkbox>
-                <mat-checkbox data-cy="container-sources-specific-directory" matTooltip="${PROJECTS_ROOT} or /projects by default" formControlName="_specificDir">Into specific directory</mat-checkbox>
+        <div class="outbutton"><button data-cy="container-more-params" *ngIf="!seeMore" mat-flat-button (click)="more()">More parameters...</button></div>
+
+        <div *ngIf="seeMore">
+
+            <h3>Sources</h3>
+            <div class="description">Declare if and how sources are mounted into the container's filesystem. By default, sources are automatically mounted into $PROJECTS_ROOT or /projects directory</div>
+            <div><mat-checkbox data-cy="container-sources-configuration" formControlName="configureSources">Configure Source mount</mat-checkbox></div>
+            <div *ngIf="form.get('configureSources')?.value" class="source-configuration-details">
+                <div style="display: inline-flex" class="mid-width">
+                    <mat-checkbox data-cy="container-mount-sources" formControlName="mountSources">Mount sources into container</mat-checkbox>
+                    <mat-checkbox data-cy="container-sources-specific-directory" matTooltip="${PROJECTS_ROOT} or /projects by default" formControlName="_specificDir">Into specific directory</mat-checkbox>
+                </div>
+                <mat-form-field appearance="outline" class="mid-width">
+                    <mat-label><span>Mount sources into</span></mat-label>
+                    <input placeholder="Container's directory on which to mount sources" data-cy="container-source-mapping" matInput formControlName="sourceMapping">
+                </mat-form-field>
             </div>
-            <mat-form-field appearance="outline" class="mid-width">
-                <mat-label><span>Mount sources into</span></mat-label>
-                <input placeholder="Container's directory on which to mount sources" data-cy="container-source-mapping" matInput formControlName="sourceMapping">
-            </mat-form-field>
+
+            <h3>Deployment Annotations</h3>
+            <div class="description">Annotations added to the Kubernetes Deployment created for running this container</div>
+            <app-multi-key-value dataCyPrefix="container-deploy-anno" addLabel="Add Annotation" formControlName="deployAnnotations"></app-multi-key-value>
+
+            <h3>Service Annotations</h3>
+            <div class="description">Annotations added to the Kubernetes Service created for accessing this container</div>
+            <app-multi-key-value dataCyPrefix="container-svc-anno" addLabel="Add Annotation" formControlName="svcAnnotations"></app-multi-key-value>
         </div>
+
+        <div class="outbutton"><button data-cy="container-less-params" *ngIf="seeMore" mat-flat-button (click)="less()">Less parameters...</button></div>
     </form>
 
-    <button data-cy="container-create" [disabled]="form.invalid" mat-flat-button color="primary" matTooltip="create new container" (click)="create()">Create</button>
-    <button *ngIf="cancelable" mat-flat-button (click)="cancel()">Cancel</button>
+    <div class="buttonbar">
+        <button data-cy="container-create" [disabled]="form.invalid" mat-flat-button color="primary" matTooltip="create new container" (click)="create()">Create</button>
+        <button *ngIf="cancelable" mat-flat-button (click)="cancel()">Cancel</button>    
+    </div>
 </div>
diff --git a/ui/src/app/forms/container/container.component.ts b/ui/src/app/forms/container/container.component.ts
@@ -2,7 +2,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { PATTERN_COMPONENT_ID } from '../patterns';
 import { DevstateService } from 'src/app/services/devstate.service';
-import { Container, Volume } from 'src/app/api-gen';
+import { Annotation, Container, Volume } from 'src/app/api-gen';
 import { TelemetryService } from 'src/app/services/telemetry.service';
 
 export interface ToCreate {
@@ -27,6 +27,7 @@ export class ContainerComponent {
   quantityErrMsgCPU = 'Numeric value, with optional unit m, k, M, G, T, P, E';
 
   volumesToCreate: Volume[] = [];
+  seeMore: boolean = false;
 
   constructor(
     private devstate: DevstateService,
@@ -47,6 +48,8 @@ export class ContainerComponent {
       mountSources: new FormControl(true),
       _specificDir: new FormControl(false),
       sourceMapping: new FormControl(""),
+      deployAnnotations: new FormControl([]),
+      svcAnnotations: new FormControl([]),
     });
 
     this.form.valueChanges.subscribe((value: any) => {
@@ -77,6 +80,16 @@ export class ContainerComponent {
 
   create() {
     this.telemetry.track("[ui] create container");
+
+    const toObject = (o: {name: string, value: string}[]) => {
+      return o.reduce((acc: any, val: {name: string, value: string}) => { acc[val.name] = val.value; return acc; }, {});
+    };
+
+    const container = this.form.value;
+    container.annotation = {
+      deployment: toObject(container.deployAnnotations),
+      service: toObject(container.svcAnnotations),
+    };
     this.created.emit({
       container: this.form.value,
       volumes: this.volumesToCreate,
@@ -90,4 +103,11 @@ export class ContainerComponent {
   onCreateNewVolume(v: Volume) {
     this.volumesToCreate.push(v);
   }
+
+  more() {
+    this.seeMore = true;
+  }
+  less() {
+    this.seeMore = false;
+  }
 }
diff --git a/ui/src/app/services/devstate.service.ts b/ui/src/app/services/devstate.service.ts
@@ -28,6 +28,10 @@ export class DevstateService {
       configureSources: container.configureSources,
       mountSources: container.mountSources,
       sourceMapping: container.sourceMapping,
+      annotation: {
+        deployment: container.annotation.deployment,
+        service: container.annotation.service
+      }
     });
   }
 

diff --git a/ui/src/styles.css b/ui/src/styles.css
@@ -25,6 +25,10 @@ h2:has(+.description) {
     margin-bottom: 0;
 }
 
+h3:has(+.description) {
+    margin-bottom: 0;
+}
+
 .description {
     font-style: italic;
     font-size: smaller;