From 6165066b0aa2a2df9ad1cc8589e9e8c80bb2cd72 Mon Sep 17 00:00:00 2001
From: Nathan Hertz <nhertz@nrao.edu>
Date: Wed, 14 Jul 2021 21:35:10 +0000
Subject: [PATCH] WS-516: UI for showing ingestion complete (archived status)
and some UI styling updates
---
.../capability-request.component.html | 51 +++++++------------
.../capability-request.component.ts | 14 +----
.../components/files/files.component.html | 11 ++++
.../components/files/files.component.scss | 9 ++++
.../components/files/files.component.spec.ts | 25 +++++++++
.../components/files/files.component.ts | 15 ++++++
.../request-header.component.html | 12 ++++-
.../request-operations.component.html | 23 +++++++++
.../request-operations.component.scss | 0
.../request-operations.component.spec.ts | 25 +++++++++
.../request-operations.component.ts | 29 +++++++++++
.../workspaces/model/capability-request.ts | 1 +
.../app/workspaces/workspaces.component.html | 17 ++++---
.../app/workspaces/workspaces.component.scss | 6 +++
.../src/app/workspaces/workspaces.module.ts | 10 ++--
.../workspaces/capability/schema.py | 1 +
16 files changed, 191 insertions(+), 58 deletions(-)
create mode 100644 apps/web/src/app/workspaces/components/capability-request/components/files/files.component.html
create mode 100644 apps/web/src/app/workspaces/components/capability-request/components/files/files.component.scss
create mode 100644 apps/web/src/app/workspaces/components/capability-request/components/files/files.component.spec.ts
create mode 100644 apps/web/src/app/workspaces/components/capability-request/components/files/files.component.ts
create mode 100644 apps/web/src/app/workspaces/components/capability-request/components/request-operations/request-operations.component.html
create mode 100644 apps/web/src/app/workspaces/components/capability-request/components/request-operations/request-operations.component.scss
create mode 100644 apps/web/src/app/workspaces/components/capability-request/components/request-operations/request-operations.component.spec.ts
create mode 100644 apps/web/src/app/workspaces/components/capability-request/components/request-operations/request-operations.component.ts
diff --git a/apps/web/src/app/workspaces/components/capability-request/capability-request.component.html b/apps/web/src/app/workspaces/components/capability-request/capability-request.component.html
index e78310c5f..d5ffe5995 100644
--- a/apps/web/src/app/workspaces/components/capability-request/capability-request.component.html
+++ b/apps/web/src/app/workspaces/components/capability-request/capability-request.component.html
@@ -40,40 +40,27 @@
>
</div>
</div>
- <div id="parameters-container" class="col">
+ <div id="parameters-files-container" class="col">
<span id="parameters-label">Parameters</span>
- <app-parameters id="parameters" [capabilityRequest]="capabilityRequest"></app-parameters>
+ <app-parameters
+ id="parameters"
+ class="pt-2"
+ [capabilityRequest]="capabilityRequest"
+ ></app-parameters>
+ <br />
<span id="files-label">Files</span>
- <div id="files" *ngIf="currentVersion !== undefined">
- <div *ngFor="let file of currentVersion.files">
- {{ file.filename }}
- </div>
- </div>
- <div class="d-flex justify-content-center py-3">
- <div class="col d-flex justify-content-center align-items-start">
- <app-create-new-version-form
- id="create-new-version-form"
- [capabilityRequest]="capabilityRequest"
- ></app-create-new-version-form>
- </div>
- <div
- class="col d-flex justify-content-center align-items-start"
- *ngIf="capabilityRequest.state === 'Created'"
- >
- <button
- id="submit-button"
- type="button"
- class="btn btn-info"
- (click)="
- capabilityLauncherService
- .submit(capabilityRequest.id)
- .subscribe(submitRequestObserver)
- "
- >
- <span class="fas fa-paper-plane"></span><span class="pl-2">Submit Request</span>
- </button>
- </div>
- </div>
+ <app-files
+ id="files"
+ class="pt-2"
+ [capabilityVersion]="currentVersion"
+ *ngIf="currentVersion !== undefined"
+ ></app-files>
+ <br />
+ <app-request-operations
+ id="operations"
+ class="pt-2"
+ [capabilityRequest]="capabilityRequest"
+ ></app-request-operations>
</div>
</div>
</div>
diff --git a/apps/web/src/app/workspaces/components/capability-request/capability-request.component.ts b/apps/web/src/app/workspaces/components/capability-request/capability-request.component.ts
index 5494e8a64..09708c19d 100644
--- a/apps/web/src/app/workspaces/components/capability-request/capability-request.component.ts
+++ b/apps/web/src/app/workspaces/components/capability-request/capability-request.component.ts
@@ -1,11 +1,10 @@
-import { Component, Input, OnInit } from "@angular/core";
+import { Component, 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 { Capability } from "../../model/capability";
import { CapabilityRequestService } from "../../services/capability-request.service";
-import { CapabilityLauncherService } from "../../services/capability-launcher.service";
import { CapabilityVersion } from "../../model/capability-version";
@Component({
@@ -30,16 +29,6 @@ export class CapabilityRequestComponent implements OnInit {
},
error: (error) => console.error("Error when retrieving capability request:" + error),
};
- // Observer for submitting capability request objects (returns a capability execution)
- private submitRequestObserver = {
- next: (submitResponse: CapabilityExecution) => {
- this.capabilityExecution = submitResponse;
- window.location.reload();
- },
- error: (error) => {
- console.log(error);
- },
- };
// Observer for capability objects
private capabilityObserver = {
next: (capability) => {
@@ -63,7 +52,6 @@ export class CapabilityRequestComponent implements OnInit {
private route: ActivatedRoute,
private dataRetriever: DataRetrieverService,
private capabilityRequestService: CapabilityRequestService,
- private capabilityLauncherService: CapabilityLauncherService,
) {
const requestID = parseInt(this.route.snapshot.paramMap.get("id"));
this.capabilityRequestService
diff --git a/apps/web/src/app/workspaces/components/capability-request/components/files/files.component.html b/apps/web/src/app/workspaces/components/capability-request/components/files/files.component.html
new file mode 100644
index 000000000..b85825a9e
--- /dev/null
+++ b/apps/web/src/app/workspaces/components/capability-request/components/files/files.component.html
@@ -0,0 +1,11 @@
+<div id="files-container" class="container-fluid rounded-top rounded-3 p-3">
+ <div *ngIf="capabilityVersion.files.length > 0; else noFilesMessage">
+ <div class="row my-2" *ngFor="let file of capabilityVersion.files">
+ <div class="col">
+ <span class="rounded-pill px-2 py-1 filename">{{ file.filename }}</span>
+ </div>
+ </div>
+ </div>
+</div>
+
+<ng-template #noFilesMessage> <em>No files exist for this request.</em> </ng-template>
diff --git a/apps/web/src/app/workspaces/components/capability-request/components/files/files.component.scss b/apps/web/src/app/workspaces/components/capability-request/components/files/files.component.scss
new file mode 100644
index 000000000..7823b986b
--- /dev/null
+++ b/apps/web/src/app/workspaces/components/capability-request/components/files/files.component.scss
@@ -0,0 +1,9 @@
+@import "src/variables";
+
+.filename {
+ background-color: $parameters-pill-color;
+}
+
+#files-container {
+ background-color: $parameters-container-bg;
+}
diff --git a/apps/web/src/app/workspaces/components/capability-request/components/files/files.component.spec.ts b/apps/web/src/app/workspaces/components/capability-request/components/files/files.component.spec.ts
new file mode 100644
index 000000000..ceac57e00
--- /dev/null
+++ b/apps/web/src/app/workspaces/components/capability-request/components/files/files.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilesComponent } from './files.component';
+
+describe('FilesComponent', () => {
+ let component: FilesComponent;
+ let fixture: ComponentFixture<FilesComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ FilesComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(FilesComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/apps/web/src/app/workspaces/components/capability-request/components/files/files.component.ts b/apps/web/src/app/workspaces/components/capability-request/components/files/files.component.ts
new file mode 100644
index 000000000..87bf9351d
--- /dev/null
+++ b/apps/web/src/app/workspaces/components/capability-request/components/files/files.component.ts
@@ -0,0 +1,15 @@
+import { Component, Input, OnInit } from "@angular/core";
+import { CapabilityVersion } from "../../../../model/capability-version";
+
+@Component({
+ selector: "app-files",
+ templateUrl: "./files.component.html",
+ styleUrls: ["./files.component.scss"],
+})
+export class FilesComponent implements OnInit {
+ @Input() capabilityVersion: CapabilityVersion;
+
+ constructor() {}
+
+ ngOnInit(): void {}
+}
diff --git a/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.html b/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.html
index 9d3c3d504..8ff2030b1 100644
--- a/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.html
+++ b/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.html
@@ -8,15 +8,23 @@
[capabilityRequest]="capabilityRequest"
></app-status-badge>
</h5>
+ <h5 *ngIf="capabilityRequest.ingested === true">
+ <span id="ingestion-status-badge" class="badge badge-pill badge-warning py-2">
+ <span class="fas fa-archive"></span>
+ <span class="pl-2"><strong>ARCHIVED</strong></span>
+ </span>
+ </h5>
</div>
<div id="created-and-updated-timestamps" class="row px-5">
<div class="col text-left p-2">
- <h5 id="created-time" class="timestamp">Created at {{ capabilityRequest.created_at }}</h5>
+ <h5 id="created-time" class="timestamp">
+ Created <strong>{{ capabilityRequest.created_at | date: "medium" }}</strong>
+ </h5>
</div>
<div class="col text-right p-2">
<h5 id="last-updated-time" class="timestamp">
- Updated at {{ capabilityRequest.updated_at }}
+ Last Updated <strong>{{ capabilityRequest.updated_at | date: "medium" }}</strong>
</h5>
</div>
</div>
diff --git a/apps/web/src/app/workspaces/components/capability-request/components/request-operations/request-operations.component.html b/apps/web/src/app/workspaces/components/capability-request/components/request-operations/request-operations.component.html
new file mode 100644
index 000000000..6589cf74b
--- /dev/null
+++ b/apps/web/src/app/workspaces/components/capability-request/components/request-operations/request-operations.component.html
@@ -0,0 +1,23 @@
+<div id="operations-container" class="d-flex justify-content-center align-content-center p-3">
+ <div class="d-flex row">
+ <div class="col-auto d-flex">
+ <app-create-new-version-form
+ id="create-new-version-form"
+ class="d-flex align-self-center"
+ [capabilityRequest]="capabilityRequest"
+ ></app-create-new-version-form>
+ </div>
+ <div class="col-auto d-flex" *ngIf="capabilityRequest.state === 'Created'">
+ <button
+ id="submit-button"
+ type="button"
+ class="btn btn-info"
+ (click)="
+ capabilityLauncherService.submit(capabilityRequest.id).subscribe(submitRequestObserver)
+ "
+ >
+ <span class="fas fa-paper-plane"></span><span class="pl-2">Submit Request</span>
+ </button>
+ </div>
+ </div>
+</div>
diff --git a/apps/web/src/app/workspaces/components/capability-request/components/request-operations/request-operations.component.scss b/apps/web/src/app/workspaces/components/capability-request/components/request-operations/request-operations.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/web/src/app/workspaces/components/capability-request/components/request-operations/request-operations.component.spec.ts b/apps/web/src/app/workspaces/components/capability-request/components/request-operations/request-operations.component.spec.ts
new file mode 100644
index 000000000..002ad0562
--- /dev/null
+++ b/apps/web/src/app/workspaces/components/capability-request/components/request-operations/request-operations.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RequestOperationsComponent } from './request-operations.component';
+
+describe('RequestOperationsComponent', () => {
+ let component: RequestOperationsComponent;
+ let fixture: ComponentFixture<RequestOperationsComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ RequestOperationsComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(RequestOperationsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/apps/web/src/app/workspaces/components/capability-request/components/request-operations/request-operations.component.ts b/apps/web/src/app/workspaces/components/capability-request/components/request-operations/request-operations.component.ts
new file mode 100644
index 000000000..a7dc8a97e
--- /dev/null
+++ b/apps/web/src/app/workspaces/components/capability-request/components/request-operations/request-operations.component.ts
@@ -0,0 +1,29 @@
+import { Component, Input, OnInit } from "@angular/core";
+import { CapabilityRequest } from "../../../../model/capability-request";
+import { CapabilityLauncherService } from "../../../../services/capability-launcher.service";
+import { CapabilityExecution } from "../../../../model/capability-execution";
+
+@Component({
+ selector: "app-request-operations",
+ templateUrl: "./request-operations.component.html",
+ styleUrls: ["./request-operations.component.scss"],
+})
+export class RequestOperationsComponent implements OnInit {
+ @Input() capabilityRequest: CapabilityRequest;
+ public capabilityExecution: CapabilityExecution;
+
+ // Observer for submitting capability request objects (returns a capability execution)
+ public submitRequestObserver = {
+ next: (submitResponse: CapabilityExecution) => {
+ this.capabilityExecution = submitResponse;
+ window.location.reload();
+ },
+ error: (error) => {
+ console.log(error);
+ },
+ };
+
+ constructor(public capabilityLauncherService: CapabilityLauncherService) {}
+
+ ngOnInit(): void {}
+}
diff --git a/apps/web/src/app/workspaces/model/capability-request.ts b/apps/web/src/app/workspaces/model/capability-request.ts
index a45bbe108..c8ca3f2a9 100644
--- a/apps/web/src/app/workspaces/model/capability-request.ts
+++ b/apps/web/src/app/workspaces/model/capability-request.ts
@@ -7,6 +7,7 @@ export interface CapabilityRequest {
state: string;
parameters: JsonObject;
current_execution: CapabilityExecution;
+ ingested: boolean;
created_at: string;
updated_at: string;
type: string;
diff --git a/apps/web/src/app/workspaces/workspaces.component.html b/apps/web/src/app/workspaces/workspaces.component.html
index f5dfb17c0..9920bc6de 100644
--- a/apps/web/src/app/workspaces/workspaces.component.html
+++ b/apps/web/src/app/workspaces/workspaces.component.html
@@ -1,6 +1,6 @@
-<div class="container border border-dark rounded py-3 mt-2">
+<div class="container border rounded py-3 my-3">
<h4>Null Capability</h4>
- <div id="button-container" class="d-flex justify-content-left py-2">
+ <div id="null-button-container" class="d-flex justify-content-left py-2">
<div class="d-flex px-2">
<button
type="button"
@@ -13,7 +13,7 @@
</div>
</div>
</div>
-<div class="container border border-dark rounded py-3 mt-2">
+<div class="container border rounded py-3 my-3">
<h4>Download or Calibration</h4>
<div class="row p-3">
<div class="col-6">
@@ -55,7 +55,7 @@
</div>
</div>
</div>
- <div id="button-container" class="d-flex justify-content-left py-2">
+ <div id="download-calibration-button-container" class="d-flex justify-content-left py-2">
<div class="d-flex px-2">
<button
type="button"
@@ -78,7 +78,7 @@
</div>
</div>
</div>
-<div class="container border rounded border-dark py-3 my-2">
+<div class="container border rounded py-3 my-3">
<h4>Standard CMS Imaging</h4>
<div class="row p-3 mt-4">
<div class="col-4">
@@ -116,12 +116,13 @@
</div>
</div>
</div>
- <div id="button-container" class="d-flex justify-content-left py-2">
+ <div id="imaging-button-container" class="d-flex justify-content-left py-2">
<div class="d-flex px-2">
- <button
+ <button
class="btn btn-lg btn-warning"
id="cms-imaging-submit"
- (click)="LaunchImagingCapabilityOnClick('std_cms_imaging')">
+ (click)="LaunchImagingCapabilityOnClick('std_cms_imaging')"
+ >
Launch standard CMS imaging
</button>
</div>
diff --git a/apps/web/src/app/workspaces/workspaces.component.scss b/apps/web/src/app/workspaces/workspaces.component.scss
index e69de29bb..f4bcbf9b2 100644
--- a/apps/web/src/app/workspaces/workspaces.component.scss
+++ b/apps/web/src/app/workspaces/workspaces.component.scss
@@ -0,0 +1,6 @@
+@import "src/variables.scss";
+
+.container {
+ background: $capability-request-bg-gradient;
+ border-color: $request-status-page-border-dark;
+}
diff --git a/apps/web/src/app/workspaces/workspaces.module.ts b/apps/web/src/app/workspaces/workspaces.module.ts
index ab88abf3b..f3256d770 100644
--- a/apps/web/src/app/workspaces/workspaces.module.ts
+++ b/apps/web/src/app/workspaces/workspaces.module.ts
@@ -7,10 +7,12 @@ import { CapabilityRequestComponent } from "./components/capability-request/capa
import { RequestHeaderComponent } from "./components/capability-request/components/request-header/request-header.component";
import { CapabilityDefinitionComponent } from "./components/capability-request/components/capability-definition/capability-definition.component";
import { ParametersComponent } from "./components/capability-request/components/parameters/parameters.component";
-import { CreateNewVersionFormComponent } from './components/capability-request/components/create-new-version-form/create-new-version-form.component';
+import { CreateNewVersionFormComponent } from "./components/capability-request/components/create-new-version-form/create-new-version-form.component";
import { StatusBadgeComponent } from "./components/capability-request/components/status-buttons/status-badge.component";
-import { AnalystToolsComponent } from './components/analyst-tools/analyst-tools.component';
-import { ListOfCalibratablesComponent } from './components/list-of-calibratables/list-of-calibratables.component';
+import { AnalystToolsComponent } from "./components/analyst-tools/analyst-tools.component";
+import { ListOfCalibratablesComponent } from "./components/list-of-calibratables/list-of-calibratables.component";
+import { FilesComponent } from "./components/capability-request/components/files/files.component";
+import { RequestOperationsComponent } from "./components/capability-request/components/request-operations/request-operations.component";
@NgModule({
declarations: [
@@ -23,6 +25,8 @@ import { ListOfCalibratablesComponent } from './components/list-of-calibratables
CreateNewVersionFormComponent,
AnalystToolsComponent,
ListOfCalibratablesComponent,
+ FilesComponent,
+ RequestOperationsComponent,
],
imports: [CommonModule, WorkspacesRoutingModule, ReactiveFormsModule, FormsModule],
})
diff --git a/shared/workspaces/workspaces/capability/schema.py b/shared/workspaces/workspaces/capability/schema.py
index e0438c05f..5666addf7 100644
--- a/shared/workspaces/workspaces/capability/schema.py
+++ b/shared/workspaces/workspaces/capability/schema.py
@@ -171,6 +171,7 @@ class CapabilityRequest(Base, CapabilityRequestIF):
"capability_name": self.capability_name,
"state": self.state,
"parameters": self.current_version.parameters if self.current_version else None,
+ "ingested": self.ingested,
"created_at": self.created_at.isoformat(),
"updated_at": self.updated_at.isoformat(),
"current_execution": self.current_execution.__json__()
--
GitLab