alihan/odo
1
0
Fork 0
mirror of https://github.com/redhat-developer/odo.git synced 2025-10-19 03:06:19 +03:00
Code Issues Packages Projects Releases Wiki Activity

[ui] Fix Add/Remove events (#7027)

Browse Source 
* Fix add/remove events UI

* Update ui static files
This commit is contained in:
Philippe Martin
2023-08-21 14:30:39 +02:00
committed by GitHub
parent cd73c3d9d3
commit fcc1cd880d
8 changed files with 46 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/apiserver-impl/ui/index.html generated
View File

@@ -11,6 +11,6 @@
<body class="mat-typography"> <body class="mat-typography">
<div id="loading">Loading, please wait...</div> <div id="loading">Loading, please wait...</div>
<app-root></app-root> <app-root></app-root>
<script src="runtime.1289ea0acffcdc5e.js" type="module"></script><script src="polyfills.8b3b37cedaf377c3.js" type="module"></script><script src="main.6a89d63885b00552.js" type="module"></script> <script src="runtime.1289ea0acffcdc5e.js" type="module"></script><script src="polyfills.8b3b37cedaf377c3.js" type="module"></script><script src="main.ae49ed4fe0fa0670.js" type="module"></script>
</body></html> </body></html>

2
pkg/apiserver-impl/ui/main.6a89d63885b00552.js → pkg/apiserver-impl/ui/main.ae49ed4fe0fa0670.js generated
View File

File diff suppressed because one or more lines are too long

3
ui/cypress/e2e/consts.ts
View File

@@ -2,7 +2,8 @@ export const TAB_YAML = 0;
export const TAB_CHART = 1; export const TAB_CHART = 1;
export const TAB_METADATA = 2; export const TAB_METADATA = 2;
export const TAB_COMMANDS = 3; export const TAB_COMMANDS = 3;
export const TAB_VOLUMES = 4; export const TAB_EVENTS = 4;
export const TAB_CONTAINERS = 5; export const TAB_CONTAINERS = 5;
export const TAB_IMAGES = 6; export const TAB_IMAGES = 6;
export const TAB_RESOURCES = 7; export const TAB_RESOURCES = 7;
export const TAB_VOLUMES = 8;

17
ui/cypress/e2e/spec.cy.ts
View File

@@ -1,4 +1,4 @@
import {TAB_COMMANDS, TAB_CONTAINERS, TAB_IMAGES, TAB_METADATA, TAB_RESOURCES} from './consts'; import {TAB_YAML, TAB_COMMANDS, TAB_CONTAINERS, TAB_IMAGES, TAB_METADATA, TAB_RESOURCES, TAB_EVENTS} from './consts';
describe('devfile editor spec', () => { describe('devfile editor spec', () => {
@@ -224,4 +224,19 @@ describe('devfile editor spec', () => {
.should('contain.text', 'some command') .should('contain.text', 'some command')
.should('contain.text', 'some arg'); .should('contain.text', 'some arg');
}); });
it('adds an event with an existing command', () => {
cy.init();
cy.fixture('input/with-exec-command.yaml').then(yaml => {
cy.setDevfile(yaml);
});
cy.selectTab(TAB_EVENTS);
cy.get('[data-cy="prestop"] [data-cy="input"]').click().type("{downArrow}{enter}");
cy.selectTab(TAB_YAML);
cy.get('[data-cy="yaml-input"]').should("contain.value", "events:\n preStop:\n - command1");
cy.selectTab(TAB_EVENTS);
cy.get('[data-cy="prestop"] button.mat-mdc-chip-remove').click();
cy.selectTab(TAB_YAML);
cy.get('[data-cy="yaml-input"]').should("contain.value", "events: {}");
});
}); });

2
ui/src/app/controls/chips-events/chips-events.component.html
View File

@@ -8,7 +8,7 @@
</button> </button>
</mat-chip-row> </mat-chip-row>
</mat-chip-grid> </mat-chip-grid>
<input placeholder="New command..." #commandInput [formControl]="commandCtrl" <input data-cy="input" placeholder="New command..." #commandInput [formControl]="commandCtrl"
[matChipInputFor]="chipGrid" [matAutocomplete]="auto" [matChipInputFor]="chipGrid" [matAutocomplete]="auto"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
(matChipInputTokenEnd)="add($event)"/> (matChipInputTokenEnd)="add($event)"/>

10
ui/src/app/controls/chips-events/chips-events.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core'; import { Component, ElementRef, EventEmitter, Input, Output, SimpleChanges } from '@angular/core';
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete'; import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { MatChipInputEvent } from '@angular/material/chips'; import { MatChipInputEvent } from '@angular/material/chips';
import {COMMA, ENTER} from '@angular/cdk/keycodes'; import {COMMA, ENTER} from '@angular/cdk/keycodes';
@@ -17,10 +17,12 @@ export class ChipsEventsComponent {
separatorKeysCodes: number[] = [ENTER, COMMA]; separatorKeysCodes: number[] = [ENTER, COMMA];
commandCtrl = new FormControl(''); commandCtrl = new FormControl('');
filteredCommands: Observable<string[]>; filteredCommands = new (Observable<string[]>);
constructor(public commandInput :ElementRef<HTMLInputElement>) { constructor(public commandInput :ElementRef<HTMLInputElement>) {}
ngOnChanges(changes: SimpleChanges) {
this.filteredCommands = this.commandCtrl.valueChanges.pipe( this.filteredCommands = this.commandCtrl.valueChanges.pipe(
startWith(null), startWith(null),
map((cmd: string | null) => (cmd ? this._filter(cmd) : this.allCommands.slice())), map((cmd: string | null) => (cmd ? this._filter(cmd) : this.allCommands.slice())),
@@ -44,7 +46,7 @@ export class ChipsEventsComponent {
remove(command: string): void { remove(command: string): void {
const index = this.commands.indexOf(command); const index = this.commands.indexOf(command);
if (index >= 0) { if (index >= 0) {
this.commands.splice(index, 1); this.commands.splice(index, 1);
this.updated.emit(this.commands); this.updated.emit(this.commands);

8
ui/src/app/tabs/events/events.component.html
View File

@@ -1,7 +1,7 @@
<div class="main"> <div class="main">
<h2>Pre-Start event</h2> <h2>Pre-Start event</h2>
<div class="description">Pre-Start commands are executed before the inner loop is started, inside init-containers (not implemented by odo).</div> <div class="description">Pre-Start commands are executed before the inner loop is started, inside init-containers (not implemented by odo).</div>
<app-chips-events <app-chips-events data-cy="prestart"
[commands]="events?.preStart ?? []" [commands]="events?.preStart ?? []"
[allCommands]="allCommands ?? []" [allCommands]="allCommands ?? []"
(updated)="onUpdate('preStart', $event)" (updated)="onUpdate('preStart', $event)"
@@ -9,7 +9,7 @@
<h2>Post-Start event</h2> <h2>Post-Start event</h2>
<div class="description">Post-Start commands are executed at the beginning of the inner loop, inside pre-fetched containers.</div> <div class="description">Post-Start commands are executed at the beginning of the inner loop, inside pre-fetched containers.</div>
<app-chips-events <app-chips-events data-cy="poststart"
[commands]="events?.postStart ?? []" [commands]="events?.postStart ?? []"
[allCommands]="allCommands ?? []" [allCommands]="allCommands ?? []"
(updated)="onUpdate('postStart', $event)" (updated)="onUpdate('postStart', $event)"
@@ -17,7 +17,7 @@
<h2>Pre-Stop event</h2> <h2>Pre-Stop event</h2>
<div class="description">Pre-Stop commands are executed at the end of the inner loop, inside pre-fetched containers.</div> <div class="description">Pre-Stop commands are executed at the end of the inner loop, inside pre-fetched containers.</div>
<app-chips-events <app-chips-events data-cy="prestop"
[commands]="events?.preStop ?? []" [commands]="events?.preStop ?? []"
[allCommands]="allCommands ?? []" [allCommands]="allCommands ?? []"
(updated)="onUpdate('preStop', $event)" (updated)="onUpdate('preStop', $event)"
@@ -25,7 +25,7 @@
<h2>Post-Stop event</h2> <h2>Post-Stop event</h2>
<div class="description">Post-Stop commands are executed after the inner loop is finished (not implemented by odo).</div> <div class="description">Post-Stop commands are executed after the inner loop is finished (not implemented by odo).</div>
<app-chips-events <app-chips-events data-cy="poststop"
[commands]="events?.postStop ?? []" [commands]="events?.postStop ?? []"
[allCommands]="allCommands ?? []" [allCommands]="allCommands ?? []"
(updated)="onUpdate('postStop', $event)" (updated)="onUpdate('postStop', $event)"

15
ui/src/app/tabs/events/events.component.ts
View File

@@ -23,6 +23,21 @@ export class EventsComponent {
ngOnInit() { ngOnInit() {
this.state.state.subscribe(async newContent => { this.state.state.subscribe(async newContent => {
this.events = newContent?.events; this.events = newContent?.events;
if (this.events == undefined) {
this.events = {};
}
if (this.events.preStart == undefined) {
this.events.preStart = [];
}
if (this.events.preStop == undefined) {
this.events.preStop = [];
}
if (this.events.postStart == undefined) {
this.events.postStart = [];
}
if (this.events.postStop == undefined) {
this.events.postStop = [];
}
this.allCommands = newContent?.commands?.map(c => c.name); this.allCommands = newContent?.commands?.map(c => c.name);
}); });
} }