Skip to content
Snippets Groups Projects
Commit 0be9f8dd authored by Charlotte Hausman's avatar Charlotte Hausman
Browse files

- display selectable versions in UI 

- defaults to latest version on creation
- shows newest version on creating new version
- displays version status for selected version
parent 1efd2c73
No related branches found
No related tags found
1 merge request!647display versions in UI
This commit is part of merge request !647. Comments created here will be created in the context of that merge request.
Hide whitespace changes
Inline Side-by-side
Showing
with 175 additions and 84 deletions
apps/web/src/app/workspaces/components/capability-request/capability-request.component.html
+ 26
− 24
View file @ 0be9f8dd
......@@ -102,49 +102,51 @@
</div>
</div>
<div id="parameters-files-versions-container" class="col-7">
<div id="parameters-files-container" class="col-7">
<span id="versions-label">Versions</span>
<app-versions
id="versions"
class="pt-2"
[capabilityVersions]="this.capabilityVersions"
>
</app-versions>
<span id="versions-label">Versions</span>
<div id="versions-container" class="container fluid">
<form [formGroup]="form">
<div class="form-group">
<select id="versions-dropdown" class="custom-select">
<option *ngFor="let version of this.capabilityVersions">{{version.version_number}}</option>
</select>
</div>
</form>
</div>
[capabilityRequest]="this.capabilityRequest"
(versionEvent) = setVersion($event)
></app-versions>
<br/>
<span id="parameters-label">Parameters</span>
<span id="parameters-label" *ngIf="currentVersion !== undefined">Version {{currentVersion.version_number}} Parameters</span>
<span id="parameters-label" *ngIf="currentVersion === undefined">Version {{latestVersion.version_number}} Parameters</span>
<app-parameters
id="parameters"
class="pt-2"
[capabilityRequest]="this.capabilityRequest"
[currentVersion]="currentVersion"
*ngIf="currentVersion !== undefined"
></app-parameters>
<app-parameters
id="parameters"
class="pt-2"
[currentVersion]="latestVersion"
*ngIf="currentVersion === undefined"
></app-parameters>
<br/>
<span id="files-label">Files</span>
<span id="files-label" *ngIf="currentVersion !== undefined">Version {{currentVersion.version_number}} Files</span>
<span id="files-label" *ngIf="currentVersion === undefined">Version {{latestVersion.version_number}} Files</span>
<app-files
id="files"
class="pt-2"
[capabilityVersion]="this.currentVersion"
[capabilityVersion]="currentVersion"
*ngIf="currentVersion !== undefined"
></app-files>
<app-files
id="files"
class="pt-2"
[capabilityVersion]="latestVersion"
*ngIf="currentVersion === undefined"
></app-files>
<br/>
<app-metadata
id="metadata"
class="pt-2"
[capabilityVersion]="this.currentVersion"
[capabilityVersion]="currentVersion"
*ngIf="
this.currentVersion !== undefined && this.currentVersion.workflow_metadata !== null
currentVersion !== undefined && currentVersion.workflow_metadata !== null
"
></app-metadata>
<br/>
......
apps/web/src/app/workspaces/components/capability-request/capability-request.component.ts
+ 19
− 49
View file @ 0be9f8dd
......@@ -16,20 +16,19 @@
* You should have received a copy of the GNU General Public License
* along with Workspaces. If not, see <https://www.gnu.org/licenses/>.
*/
import { Component, OnDestroy, OnInit } from "@angular/core";
import { CapabilityRequest } from "../../model/capability-request";
import { ActivatedRoute } from "@angular/router";
import { DataRetrieverService } from "../../services/data-retriever.service";
import { CapabilityExecution } from "../../model/capability-execution";
import { CapabilityRequestService } from "../../services/capability-request.service";
import { CapabilityVersion } from "../../model/capability-version";
import { PollingDataUpdaterService } from "../../services/polling-data-updater.service";
import { AlertService } from "../../../shared/alert/alert.service";
import { JsonObject } from "@angular/compiler-cli/ngcc/src/packages/entry_point";
import { Subject } from "rxjs";
import { takeUntil } from "rxjs/operators";
import { Capability } from "../../model/capability";
import { FormControl, FormGroup, Validators } from "@angular/forms";
import {Component, OnDestroy, OnInit} from "@angular/core";
import {CapabilityRequest} from "../../model/capability-request";
import {ActivatedRoute} from "@angular/router";
import {DataRetrieverService} from "../../services/data-retriever.service";
import {CapabilityExecution} from "../../model/capability-execution";
import {CapabilityRequestService} from "../../services/capability-request.service";
import {CapabilityVersion} from "../../model/capability-version";
import {PollingDataUpdaterService} from "../../services/polling-data-updater.service";
import {AlertService} from "../../../shared/alert/alert.service";
import {JsonObject} from "@angular/compiler-cli/ngcc/src/packages/entry_point";
import {Subject} from "rxjs";
import {takeUntil} from "rxjs/operators";
import {Capability} from "../../model/capability";
@Component({
selector: "app-capability-request",
......@@ -41,18 +40,10 @@ export class CapabilityRequestComponent implements OnInit, OnDestroy {
public capability: Capability;
public capabilityExecution: CapabilityExecution;
public currentVersion: CapabilityVersion;
public capabilityVersions: Array<CapabilityVersion> = [];
public latestVersion: CapabilityVersion;
private ngUnsubscribe = new Subject(); // to signal when all subscribers should unsubscribe (triggered in tear down)
form = new FormGroup({
version: new FormControl("", Validators.required),
});
get f() {
return this.form.controls;
}
// Observer for capability request objects
private capabilityRequestObserver = {
next: (request) => {
......@@ -93,17 +84,10 @@ export class CapabilityRequestComponent implements OnInit, OnDestroy {
private capabilityVersionObserver = {
next: (capabilityVersion) => {
if (capabilityVersion !== undefined) {
this.currentVersion = capabilityVersion;
this.latestVersion = capabilityVersion;
} else {
console.error("Current version returned undefined.");
}
if (
!this.capabilityVersions.find(
(version) => version.version_number == this.currentVersion.version_number,
)
) {
this.getAllVersions();
}
},
error: (error) => console.error("Error when retrieving current version:" + error),
};
......@@ -189,26 +173,12 @@ export class CapabilityRequestComponent implements OnInit, OnDestroy {
.subscribe(addRestCallObservable);
}
/**
* retrieve every capability version belonging to our capability request
* TODO: call from ngOnInit()?
*/
getAllVersions() {
// TODO: hard-coded for demo only; IRL, get request's versions from a service or something
const anotherVersion: CapabilityVersion = {
version_number: 1,
state: "Created",
capability_request_id: this.currentVersion.capability_request_id,
parameters: this.currentVersion.parameters,
workflow_metadata: this.currentVersion.workflow_metadata,
files: this.currentVersion.files,
type: this.currentVersion.type,
};
this.capabilityVersions.push(this.currentVersion);
this.capabilityVersions.push(anotherVersion);
setVersion(version: CapabilityVersion){
this.currentVersion = version;
}
ngOnInit(): void {}
ngOnInit(): void {
}
ngOnDestroy(): void {
// Prevent memory leakage by unsubscribing all observers
......
apps/web/src/app/workspaces/components/capability-request/components/parameters/parameters.component.html
+ 2
− 2
View file @ 0be9f8dd
<div id="parameters-container" class="container-fluid rounded-top rounded-3 p-3">
<div *ngIf="isEmpty(capabilityRequest.parameters) === false; else noParametersMessage">
<div class="row my-2" *ngFor="let parameter of capabilityRequest.parameters | keyvalue">
<div *ngIf="isEmpty(currentVersion.parameters) === false; else noParametersMessage">
<div class="row my-2" *ngFor="let parameter of currentVersion.parameters | keyvalue">
<div class="col">
<span class="rounded-pill px-2 py-1 argument-key">{{ parameter.key }}</span>
<span class="px-1"> = </span>
......
apps/web/src/app/workspaces/components/capability-request/components/parameters/parameters.component.ts
+ 2
− 1
View file @ 0be9f8dd
......@@ -19,6 +19,7 @@
import { Component, Input, OnInit } from "@angular/core";
import { CapabilityRequest } from "../../../../model/capability-request";
import { JsonObject } from "@angular/compiler-cli/ngcc/src/packages/entry_point";
import {CapabilityVersion} from "../../../../model/capability-version";
@Component({
selector: "app-parameters",
......@@ -26,7 +27,7 @@ import { JsonObject } from "@angular/compiler-cli/ngcc/src/packages/entry_point"
styleUrls: ["./parameters.component.scss"],
})
export class ParametersComponent implements OnInit {
@Input() capabilityRequest: CapabilityRequest;
@Input() currentVersion: CapabilityVersion;
constructor() {}
......
apps/web/src/app/workspaces/components/capability-request/components/versions/versions.component.html
+ 37
− 0
View file @ 0be9f8dd
<div id="versions-container" class="container-fluid rounded-top rounded-3 p-3">
<div ngbDropdown class="d-inline">
<button class="btn btn-outline-secondary" id="versionDropdown" ngbDropdownToggle (click)="getAllVersions(capabilityRequest.id)" *ngIf="selected_version">Version {{selected_version.version_number}}</button>
<button class="btn btn-outline-secondary" id="versionDropdown" ngbDropdownToggle (click)="getAllVersions(capabilityRequest.id)" *ngIf="!selected_version">Select Version</button>
<div ngbDropdownMenu aria-labelledby="versionDropdown">
<button ngbDropdownItem *ngFor="let version of capabilityVersions" (click)="getSpecificVersion(capabilityRequest.id, version.version_number)">{{version.version_number}}</button>
</div>
</div>
<div class="d-inline-flex" *ngIf="selected_version">
<h5 class="d-flex p-2">
<span
id="version-status-badge-complete"
class="badge badge-pill badge-success py-2"
*ngIf="selected_version.state === 'Complete'"
><span id="version-status-badge-txt-complete">{{ selected_version.state.toUpperCase() }}</span></span>
<span
id="version-status-badge-running"
class="badge badge-pill badge-primary py-2"
*ngIf="selected_version.state === 'Running'"
><span id="version-status-badge-txt-running">{{ selected_version.state.toUpperCase() }}</span></span>
<span
id="version-status-badge-ready"
class="badge badge-pill badge-secondary py-2"
*ngIf="selected_version.state === 'Created'"
><span id="version-status-badge-txt-ready">{{ selected_version.state.toUpperCase() }}</span></span>
<span
id="version-status-badge-failed"
class="badge badge-pill badge-danger py-2"
*ngIf="selected_version.state === 'Failed'"
><span id="version-status-badge-txt-failed">{{ selected_version.state.toUpperCase() }}</span></span>
</h5>
</div>
</div>
<ng-template #noParametersMessage> <em>This version has no parameters.</em> </ng-template>
<ng-template #noFilesMessage> <em>No files are attached to this request.</em> </ng-template>
apps/web/src/app/workspaces/components/capability-request/components/versions/versions.component.scss
+ 20
− 0
View file @ 0be9f8dd
@import "src/variables";
.argument-key,
.argument-value {
background-color: $parameters-pill-color;
}
.filename {
background-color: $parameters-pill-color;
}
#versions-container {
background-color: $parameters-container-bg;
}
#selected-version-parameters {
background-color: $parameters-container-bg;
}
#selected-version-files {
background-color: $parameters-container-bg;
}
apps/web/src/app/workspaces/components/capability-request/components/versions/versions.component.ts
+ 56
− 3
View file @ 0be9f8dd
......@@ -16,8 +16,12 @@
* You should have received a copy of the GNU General Public License
* along with Workspaces. If not, see <https://www.gnu.org/licenses/>.
*/
import {Component, Input, OnInit} from '@angular/core';
import {Component, Input, OnInit, Output, EventEmitter} from '@angular/core';
import {CapabilityVersion} from "../../../../model/capability-version";
import {CapabilityRequestService} from "../../../../services/capability-request.service";
import {CapabilityRequest} from "../../../../model/capability-request";
import {FormControl, FormGroup, Validators} from "@angular/forms";
import {JsonObject} from "@angular/compiler-cli/ngcc/src/packages/entry_point";
@Component({
selector: 'app-versions',
......@@ -26,11 +30,60 @@ import {CapabilityVersion} from "../../../../model/capability-version";
})
export class VersionsComponent implements OnInit {
@Input() capabilityVersions: Array<CapabilityVersion>;
@Input() capabilityRequest: CapabilityRequest;
@Output() versionEvent = new EventEmitter<CapabilityVersion>();
public capabilityVersions: Array<CapabilityVersion>;
public selected_version: CapabilityVersion
constructor() { }
constructor(private capabilityRequestService: CapabilityRequestService) {
// this.getSpecificVersion(this.capabilityRequest.id, this.capabilityRequest.versions[this.capabilityRequest.versions.length-1].version_number);
}
ngOnInit(): void {
}
getVersion(): number {
return this.selected_version.version_number;
}
getAllVersions(requestId: string) {
const versionsObserver = {
next: (request) => {
this.capabilityVersions = request;
console.log(this.capabilityVersions)
},
error: (error) => console.error("Error when retrieving capability versions:" + error),
};
this.capabilityRequestService.getAllVersions(requestId).subscribe(versionsObserver);
}
getSpecificVersion(request_id: string, version_id: number){
const specificVersionObserver = {
next: (version) => {
this.selected_version = version;
this.versionEvent.emit(version);
},
error: (error) => console.error("Error when retrieving capability version:" + error),
};
this.capabilityRequestService.getSpecificVersion(request_id, version_id).subscribe(specificVersionObserver);
}
/**
* Check if JsonObject is empty
* Taken from: https://stackoverflow.com/questions/679915/how-do-i-test-for-an-empty-javascript-object
* @param obj Object to be checked
* @return boolean true if object is empty; else false
*/
isEmpty(obj: JsonObject): boolean {
for (const prop in obj) {
if (obj.hasOwnProperty(prop)) {
return false;
}
}
return true;
}
}
apps/web/src/app/workspaces/model/capability-request.ts
+ 2
− 0
View file @ 0be9f8dd
......@@ -19,6 +19,7 @@
import { CapabilityExecution } from "./capability-execution";
import { JsonObject } from "@angular/compiler-cli/ngcc/src/packages/entry_point";
import {Capability} from "./capability";
import {CapabilityVersion} from "./capability-version";
export interface CapabilityRequest {
id: string;
......@@ -26,6 +27,7 @@ export interface CapabilityRequest {
capability: Capability;
state: string;
parameters: JsonObject;
versions: Array<CapabilityVersion>;
current_execution: CapabilityExecution;
ingested: boolean;
created_at: string;
......
apps/web/src/app/workspaces/services/capability-request.service.ts
+ 10
− 4
View file @ 0be9f8dd
......@@ -80,12 +80,18 @@ export class CapabilityRequestService {
}
/**
* Gets URL to retrieve a list of active capability requests for a given capability
* @param capabilityName The name of the capability
* Get all versions of a capability request
* @param requestId ID of the parent request
* @return Array<CapabilityVersion> Result of REST call to retrieve all versions
*/
public getCreatedCapabilityRequestsUrl(capabilityName: string): string {
return `capability/${capabilityName}/created-requests`;
public getAllVersions(requestId: string): Observable<Array<CapabilityVersion>> {
const getVersions = `capability/request/${requestId}/versions`;
return this.httpClient.get<any>(getVersions);
}
public getSpecificVersion(request_id: string, version_id: number): Observable<JsonObject>{
const url = `capability/request/${request_id}/version/${version_id}`;
return this.httpClient.get<JsonObject>(url);
}
/**
......
services/capability/capability/views/capability_request.py
+ 1
− 1
View file @ 0be9f8dd
......@@ -33,7 +33,7 @@ from pyramid.view import view_config
def view_capability_request(request: Request) -> Response:
"""
Pyramid view that accepts a request to view a capability request and responds with the request's info, if it exists
URL: capability/{capability_name}/request/{request_id}
URL: capability/request/{request_id}
:param request: GET request
:return: 200 OK response with JSON-formatted capability request info if found
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment