diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 0d932ed0f..fccff58d9 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -268,6 +268,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit { } this.store$.dispatch(new hyp3Store.LoadCosts()); + this.store$.dispatch(new hyp3Store.LoadUser()); } ) ); diff --git a/src/app/components/header/header-buttons/preferences/preferences.component.html b/src/app/components/header/header-buttons/preferences/preferences.component.html index 26f9e710a..8f924f148 100644 --- a/src/app/components/header/header-buttons/preferences/preferences.component.html +++ b/src/app/components/header/header-buttons/preferences/preferences.component.html @@ -71,16 +71,16 @@ {{ 'DEFAULT_MAP_LAYER' | translate }} - - - {{ mapLayerTypes.SATELLITE | uppercase | translate }} - - - {{ mapLayerTypes.STREET | uppercase | translate }} - - + + + {{ mapLayerTypes.SATELLITE | uppercase | translate }} + + + {{ mapLayerTypes.STREET | uppercase | translate }} + + @@ -120,6 +120,27 @@ refresh + @if(!this.env.isProd) { + + Debug Status + + + NOT_STARTED + + + PENDING + + + APPROVED + + + REJECTED + + + + } diff --git a/src/app/components/header/header-buttons/preferences/preferences.component.ts b/src/app/components/header/header-buttons/preferences/preferences.component.ts index 39b13bf08..5cb15078f 100644 --- a/src/app/components/header/header-buttons/preferences/preferences.component.ts +++ b/src/app/components/header/header-buttons/preferences/preferences.component.ts @@ -2,6 +2,7 @@ import {Component, EventEmitter, OnDestroy, OnInit, Output} from '@angular/core' import { Store } from '@ngrx/store'; import { AppState } from '@store'; import * as userStore from '@store/user'; +import * as hyp3Store from '@store/hyp3'; import { MatDialogRef } from '@angular/material/dialog'; import { @@ -34,6 +35,7 @@ export class PreferencesComponent implements OnInit, OnDestroy { public defaultMaxConcurrentDownloads: number; public defaultProductTypes: ProductType[]; public hyp3BackendUrl: string; + public hyp3DebugStatus: string; public defaultLanguage: string; public maxResults = [250, 1000, 5000]; @@ -63,6 +65,7 @@ export class PreferencesComponent implements OnInit, OnDestroy { private dialogRef: MatDialogRef, private store$: Store, private hyp3: Hyp3Service, + public env: services.EnvironmentService, private themeService: ThemingService, public translate: TranslateService, public language: AsfLanguageService, @@ -186,6 +189,10 @@ export class PreferencesComponent implements OnInit, OnDestroy { this.setTheme(`theme-${this.currentTheme}`); } } + public onDebugStatus(status: models.ApplicationStatus) { + this.hyp3DebugStatus = status; + this.store$.dispatch(new hyp3Store.SetDebugStatus(status)) + } public setTheme(themeName: string) { this.themeService.setTheme(themeName); diff --git a/src/app/components/header/processing-queue/processing-queue-jobs/processing-queue-jobs.component.html b/src/app/components/header/processing-queue/processing-queue-jobs/processing-queue-jobs.component.html index 5167bd16a..bb52b154b 100644 --- a/src/app/components/header/processing-queue/processing-queue-jobs/processing-queue-jobs.component.html +++ b/src/app/components/header/processing-queue/processing-queue-jobs/processing-queue-jobs.component.html @@ -91,7 +91,7 @@
- {{ 'YOUR_JOBS_QUEUE_IS_EMPTY' | translate }}. + {{ 'YOUR_JOBS_QUEUE_IS_EMPTY' | translate }}
diff --git a/src/app/components/header/processing-queue/processing-queue.component.html b/src/app/components/header/processing-queue/processing-queue.component.html index 8fb339274..6e5d7e076 100644 --- a/src/app/components/header/processing-queue/processing-queue.component.html +++ b/src/app/components/header/processing-queue/processing-queue.component.html @@ -1,19 +1,11 @@ -
+
- +
@@ -26,7 +18,7 @@ {{ 'ON_DEMAND' | translate }}
- {{ 'POWERED_BY_HY_P3' | translate }} + {{ 'POWERED_BY_HY_P3' | translate }}
@@ -40,31 +32,33 @@
- -
+
close
- - + @if (!this.isSignupSelected) {
- {{ 'SIGN_IN_TO_PROCESS_DATA' | translate }} + {{ 'SIGN_IN_TO_PROCESS_DATA' | translate }}
- +
-
+
-
+
- {{ 'TOO_MANY_JOBS_IN_QUEUE' | translate }} + {{ 'TOO_MANY_JOBS_IN_QUEUE' | translate }}
- ({{ allJobs.length - remaining }} extra job{{ (allJobs.length - remaining) === 1 ? '' : 's' }}) + ({{ allJobs.length - remaining }} extra job{{ (allJobs.length - remaining) === 1 ? '' : 's' }})
-
+
- {{ 'NO_CREDITS_LEFT_THIS_MONTH' | translate }} + {{ 'NO_CREDITS_LEFT_THIS_MONTH' | translate }}
+ } + @else { + @if (this.userStatus === this.ApplicationStatus.REJECTED) { +

Request for access has been rejected.

Learn more
+ } @else { + + } + } - -
+ }">
- -
@@ -239,17 +218,30 @@
-
+ @switch(userStatus) { + @case ('NOT_STARTED') { + + Must register with On Demand service + + } + @case ('PENDING') { + + Currently awaiting approval + + } + @case ('REJECTED') { + + Request for access has been rejected + + } + @default {
@@ -258,6 +250,7 @@ Unlimited +
{{'CREDIT_MAX' | translate}} @@ -272,58 +265,57 @@ + + +
-
- {{ 'LOADING' | translate }}... +
+ {{ 'LOADING' | translate }}...
+ } + }
- N/A - {{ 'LOGIN_TO_VIEW' | translate }} + N/A - {{ 'LOGIN_TO_VIEW' | translate }} - N/A - {{ 'LOGIN_TO_VIEW_NUMBER_OF_CREDITS_LEFT_THIS_MONTH' | translate }} + N/A - {{ 'LOGIN_TO_VIEW_NUMBER_OF_CREDITS_LEFT_THIS_MONTH' | translate }}
-
- +
+ {{ 'VALIDATE_ONLY' | translate }} -
- + \ No newline at end of file diff --git a/src/app/components/header/processing-queue/processing-queue.component.ts b/src/app/components/header/processing-queue/processing-queue.component.ts index 579172c27..a4fcd3fb6 100644 --- a/src/app/components/header/processing-queue/processing-queue.component.ts +++ b/src/app/components/header/processing-queue/processing-queue.component.ts @@ -8,6 +8,7 @@ import { AppState } from '@store'; import moment from 'moment'; import { of, from, combineLatest } from 'rxjs'; import { tap, catchError, delay, concatMap, finalize } from 'rxjs/operators'; +import { ApplicationStatus } from '@models'; import * as queueStore from '@store/queue'; import * as hyp3Store from '@store/hyp3'; @@ -19,7 +20,8 @@ import * as services from '@services'; enum ProcessingQueueTab { SCENES = 'Scenes', - OPTIONS = 'Options' + OPTIONS = 'Options', + SIGNUP = 'Signup' } @Component({ @@ -28,6 +30,8 @@ enum ProcessingQueueTab { styleUrls: ['./processing-queue.component.scss'] }) export class ProcessingQueueComponent implements OnInit { + readonly ApplicationStatus = ApplicationStatus; + @ViewChild('contentArea') contentAreaRef: ElementRef; @ViewChild('contentTopArea') topRef: ElementRef; @ViewChild('contentBottomArea') bottomRef: ElementRef; @@ -67,6 +71,10 @@ export class ProcessingQueueComponent implements OnInit { public errorHeaderHeight = 0; public progress = null; + + public userStatus = ''; + public isSignupSelected = false; + constructor( public authService: services.AuthService, public env: services.EnvironmentService, @@ -144,6 +152,14 @@ export class ProcessingQueueComponent implements OnInit { this.user = user.user_id; this.isUnlimitedUser = user.quota.unlimited; this.remaining = user.quota.remaining; + this.userStatus = user.application_status; + if(this.userStatus === ApplicationStatus.NOT_STARTED || this.userStatus === ApplicationStatus.PENDING || this.userStatus === ApplicationStatus.REJECTED) { + this.isSignupSelected = true; + this.selectedJobTypeId = null; + } else if(this.isSignupSelected && this.userStatus === ApplicationStatus.APPROVED) { + this.isSignupSelected = false; + this.selectDefaultJobType(); + } } ); @@ -330,6 +346,8 @@ export class ProcessingQueueComponent implements OnInit { this.jobs = this.allJobs.filter( job => job.job_type.id === this.selectedJobTypeId ); + + this.isSignupSelected = false; } public onRemoveJob(job: models.QueuedHyp3Job): void { @@ -430,5 +448,10 @@ export class ProcessingQueueComponent implements OnInit { private selectDefaultJobType(): void { this.selectedJobTypeId = !!this.hyp3JobTypesList[0] ? this.hyp3JobTypesList[0].id : null; + + } + public openSignup(): void { + this.isSignupSelected = true; + this.selectedJobTypeId = null; } } diff --git a/src/app/components/header/processing-queue/processing-queue.module.ts b/src/app/components/header/processing-queue/processing-queue.module.ts index 16833021d..a88751901 100644 --- a/src/app/components/header/processing-queue/processing-queue.module.ts +++ b/src/app/components/header/processing-queue/processing-queue.module.ts @@ -21,6 +21,7 @@ import { PipesModule } from '@pipes'; import { ProcessingQueueComponent } from './processing-queue.component'; import { ProcessingQueueJobsModule } from './processing-queue-jobs'; import { ProcessingOptionsModule } from './processing-options'; +import { ProcessingSignupModule } from './processing-signup'; import { MatDialogModule } from '@angular/material/dialog'; import { QueueSubmitComponent } from './queue-submit/queue-submit.component'; import { ResizableModule } from 'angular-resizable-element'; @@ -38,7 +39,7 @@ import { SharedModule } from '@shared'; declarations: [ ProcessingQueueComponent, QueueSubmitComponent, - ConfirmationComponent + ConfirmationComponent, ], imports: [ CommonModule, @@ -56,6 +57,7 @@ import { SharedModule } from '@shared'; ProjectNameSelectorModule, ProcessingQueueJobsModule, ProcessingOptionsModule, + ProcessingSignupModule, MatDialogModule, ResizableModule, ResizedEventModule, diff --git a/src/app/components/header/processing-queue/processing-signup/index.ts b/src/app/components/header/processing-queue/processing-signup/index.ts new file mode 100644 index 000000000..25158301e --- /dev/null +++ b/src/app/components/header/processing-queue/processing-signup/index.ts @@ -0,0 +1,2 @@ +export { ProcessingSignupComponent } from './processing-signup.component'; +export { ProcessingSignupModule } from './processing-signup.module'; diff --git a/src/app/components/header/processing-queue/processing-signup/processing-signup.component.html b/src/app/components/header/processing-queue/processing-signup/processing-signup.component.html new file mode 100644 index 000000000..6b7ce731f --- /dev/null +++ b/src/app/components/header/processing-queue/processing-signup/processing-signup.component.html @@ -0,0 +1,92 @@ +
+ +
+

Request On Demand Access

+

Thank you for your interest in ASF's On Demand processing service. + + This service allows users to submit Sentinel-1 acquisitions for conversion to analysis-ready products, + including Radiometric Terrain Corrected (RTC) SAR Backscatter and Interferometric SAR (InSAR). Products are + generated using HyP3, ASF's cloud-based processing platform. Finished products can be downloaded for use in + a variety of analysis workflows. + + These services are provided at no cost to the user, and anyone can request access. To ensure that processing + is equitably distributed throughout the user community, each user can only register one Earthdata Login + account for use with ASF's On Demand service. +

+

Verify your Earthdata Login profile information

+ Please review your Earthdata Login profile information below. We will use the email address listed to notify + you of your approval status. + + If any of this information is incorrect, please update your Earthdata Login profile and then refresh this + page to view your updated information. +
    +
  • Name: {{userInfo.first_name}} {{userInfo.last_name}}
    • +
  • Username: {{userInfo.uid}}
    • +
  • Email Address: {{userInfo.email_address}}
    • +
  • Organization: {{userInfo.organization}}
  • +
  • Country: {{userInfo.country}}
    • +
+ Yes, my Earthdata Login profile information is correct and I will monitor + {{userInfo.email_address}} for status updates.* +
+
+

How do you want to use our service?

+

Please provide a short description (1-5 sentences) of how and why you would like to use ASF's On Demand + products. Expand the section below for some examples.

+ + + + Examples + + + + Example 1: + + I am a + master's student in volcanology at the University of ___, and would + like to analyze inflation dynamics of volcanoes in my area using InSAR time series analysis + with mintpy software. I don't have the time or resources necessary to generate the InSAR + time series I would need for my analysis, and would like to use On Demand InSAR products as + my input for mintpy. + + + + Example 2: + + I am a + GIS specialist for an insurance company, and I use a variety of resources to evaluate crop + damage caused by natural disasters. I have not used SAR in the past, but I recently attended + a webinar on using SAR for monitoring the impacts of natural disasters. I would like to see + if RTC images could provide useful insights into crop damage. + + + + Example 3: + + I'm a + hydrologist for a government agency that monitors water resources. I have worked with SAR + extensively, and could process my own analysis-ready products, but a colleague mentioned + this service to me. It would be a more efficient use of my time to use On Demand InSAR and + RTC products for monitoring groundwater use and surface water extent dynamics. + + + + + +
+ + How do you want to use our service? + + +

Workshop/Tutorial Participant?

+ If you are attending a workshop or tutorial where the instructor has provided you with an access code, please enter that code here: + + Access Code (optional) + + {{accessCodeErrorMessage}} + +
+ +
+
+
\ No newline at end of file diff --git a/src/app/components/header/processing-queue/processing-signup/processing-signup.component.scss b/src/app/components/header/processing-queue/processing-signup/processing-signup.component.scss new file mode 100644 index 000000000..949398b1a --- /dev/null +++ b/src/app/components/header/processing-queue/processing-signup/processing-signup.component.scss @@ -0,0 +1,40 @@ +@import "asf-theme"; +.container { + @include themify($themes) { + color: themed("dark-primary-text"); + } +} +.data-list b { + width: 120px; + display: inline-block; +} +.list-item { + word-wrap: break-word; + overflow: visible; + height: auto; +} +.list-item-content { + overflow: visible; + word-wrap: normal; + white-space: normal; + cursor: text; +} +.container { + display: flex; + justify-content: space-around; + align-items: start; + height: 100%; + flex-wrap: wrap; +} +.form-submit-button-container { + width: 100%; +} +.form-submit-button { + width: 100%; +} +.form-column { + display: flex; + flex-direction: column; + max-width: 47%; + margin: 15px; +} diff --git a/src/app/components/header/processing-queue/processing-signup/processing-signup.component.ts b/src/app/components/header/processing-queue/processing-signup/processing-signup.component.ts new file mode 100644 index 000000000..519c9e12c --- /dev/null +++ b/src/app/components/header/processing-queue/processing-signup/processing-signup.component.ts @@ -0,0 +1,93 @@ +import { Component, OnInit } from '@angular/core'; +import { FormBuilder, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { Hyp3Service, NotificationService, UserDataService } from '@services'; +import { EarthdataUserInfo, Hyp3User, ApplicationStatus } from '@models'; + +import * as userStore from '@store/user'; +import * as hyp3Store from '@store/hyp3'; +import { ValidationError } from 'xml2js'; + +@Component({ + selector: 'app-processing-signup', + templateUrl: './processing-signup.component.html', + styleUrl: './processing-signup.component.scss' +}) +export class ProcessingSignupComponent implements OnInit { + public signupForm = this.formBuilder.group({ + infoConfirmation: [false, Validators.requiredTrue], + useCase: ['', Validators.required], + accessCode: [''] + }) + + + public userInfo: EarthdataUserInfo = { + 'first_name': '', + 'last_name': '', + 'email_address': '', + 'country': '', + 'uid': '', + 'organization': '' + } + public hyp3User: Hyp3User; + public submitButtonText; + + public submitButtonTooltip = 'Must confirm user information as well as write use case.'; + public accessCodeErrorMessage = ''; + + constructor( + private formBuilder: FormBuilder, + private userService: UserDataService, + private hyp3Service: Hyp3Service, + private notificationService: NotificationService, + private store$: Store, + ) { } + + ngOnInit(): void { + this.store$.select(userStore.getUserAuth).subscribe(userAuth => { + this.userService.getUserInfo$(userAuth).subscribe((data: EarthdataUserInfo) => { + if (data) { + this.userInfo = data; + } + }) + }) + this.store$.select(hyp3Store.getHyp3User).subscribe(user => { + this.hyp3User = user; + if (this.hyp3User.application_status === ApplicationStatus.PENDING) { + this.signupForm.controls.useCase.setValue(user.use_case); + this.signupForm.controls.infoConfirmation.setValue(true); + this.submitButtonTooltip = ''; + this.submitButtonText = 'Resubmit'; + } else { + this.submitButtonText = 'Register'; + } + } + ) + this.signupForm.statusChanges.subscribe(_formValidity => { + if (!this.signupForm.controls.infoConfirmation.valid && !this.signupForm.controls.useCase.valid) { + this.submitButtonTooltip = 'Must confirm user information as well as write use case.'; + } else if (!this.signupForm.controls.infoConfirmation.valid) { + this.submitButtonTooltip = 'Must confirm user information.'; + } else if (!this.signupForm.controls.useCase.valid) { + this.submitButtonTooltip = 'Must write use case.'; + } else { + this.submitButtonTooltip = ''; + } + }) + } + + public onRegisterPressed() { + this.hyp3Service.submitSignupForm$(this.signupForm.value).subscribe((_response) => { + this.notificationService.info('Submitted Form'); + this.store$.dispatch(new hyp3Store.LoadUser()); + }, (error) => { + if(error.error.detail.toLowerCase().includes('access code')) { + this.signupForm.controls.accessCode.setErrors(new ValidationError(error.error.detail)) + this.accessCodeErrorMessage = error.error.detail; + } else { + this.notificationService.error(error.error.detail, 'On Demand Signup Error'); + } + }); + } + +} diff --git a/src/app/components/header/processing-queue/processing-signup/processing-signup.module.ts b/src/app/components/header/processing-queue/processing-signup/processing-signup.module.ts new file mode 100644 index 000000000..fb27a254c --- /dev/null +++ b/src/app/components/header/processing-queue/processing-signup/processing-signup.module.ts @@ -0,0 +1,37 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import {MatExpansionModule} from '@angular/material/expansion'; +import { MatSelectModule } from '@angular/material/select'; +import { ProcessingSignupComponent } from './processing-signup.component'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; + +import { MatChipsModule } from '@angular/material/chips'; +import { MatSharedModule } from '@shared'; +import { PipesModule } from '@pipes'; +import { SharedModule } from '@shared'; +import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; + + +@NgModule({ + declarations: [ProcessingSignupComponent], + imports: [ + CommonModule, + PipesModule, + MatSharedModule, + MatSelectModule, + MatChipsModule, + MatExpansionModule, + MatCheckboxModule, + MatFormFieldModule, + MatInputModule, + ReactiveFormsModule, + FormsModule, + SharedModule + ], + exports: [ + ProcessingSignupComponent + ] +}) +export class ProcessingSignupModule { } diff --git a/src/app/components/shared/docs-modal/docs-modal.component.ts b/src/app/components/shared/docs-modal/docs-modal.component.ts index b90797da1..c1b69618a 100644 --- a/src/app/components/shared/docs-modal/docs-modal.component.ts +++ b/src/app/components/shared/docs-modal/docs-modal.component.ts @@ -18,10 +18,11 @@ // url="https://docs.asf.alaska.edu/vertex/manual/#date-filters"> // -import { Component, Input, OnInit, Inject } from '@angular/core'; +import { Component, Input, OnInit, Inject, OnDestroy } from '@angular/core'; import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { DomSanitizer } from '@angular/platform-browser'; import { TranslateService } from "@ngx-translate/core"; +import { SubSink } from 'subsink'; export interface DialogData { @@ -34,7 +35,7 @@ export interface DialogData { templateUrl: './docs-modal.component.html', styleUrls: ['./docs-modal.component.scss'] }) -export class DocsModalComponent implements OnInit { +export class DocsModalComponent implements OnInit, OnDestroy { @Input() url: string; @Input() text: string; @Input() icon: string = 'info'; @@ -42,16 +43,24 @@ export class DocsModalComponent implements OnInit { public docURL: string; public safeDocURL: any; + public subs = new SubSink(); + constructor(public dialog: MatDialog, public translate: TranslateService, private _sanitizer: DomSanitizer) { } ngOnInit(): void { + this.updateLink(); + this.subs.add(this.translate.onLangChange.subscribe(_currentLanguage => { + this.updateLink(); + })); + } + + private updateLink(): void { this.docURL = (this.url) ? this.url : 'https://docs.asf.alaska.edu'; let tempURL = this.docsLanguageAdjust(this.docURL); this.safeDocURL = this._sanitizer.bypassSecurityTrustResourceUrl(tempURL); - } public showDoc() { @@ -93,6 +102,10 @@ export class DocsModalComponent implements OnInit { return newUrl; } + ngOnDestroy() { + this.subs.unsubscribe(); + } + } @Component({ diff --git a/src/app/components/shared/on-demand-add-menu/on-demand-add-menu.component.html b/src/app/components/shared/on-demand-add-menu/on-demand-add-menu.component.html index 050a70dda..08d4e6d0f 100644 --- a/src/app/components/shared/on-demand-add-menu/on-demand-add-menu.component.html +++ b/src/app/components/shared/on-demand-add-menu/on-demand-add-menu.component.html @@ -1,5 +1,8 @@ + @if(userStatus === 'NOT_STARTED') { + + }