diff --git a/.github/workflows/deploy-andy.yml b/.github/workflows/deploy-andy.yml new file mode 100644 index 000000000..8328b7f5c --- /dev/null +++ b/.github/workflows/deploy-andy.yml @@ -0,0 +1,26 @@ +name: Deploy andy SearchUI + +on: + push: + branches: + - andy/* + +jobs: + deploy: + runs-on: ubuntu-latest + environment: dev-andy + permissions: + id-token: write + contents: read + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: build + uses: ./.github/workflows/search-ui-deploy-composite + with: + maturity: ${{ vars.MATURITY }} + cdn-id: ${{ vars.CDN_ID }} + s3-bucket: ${{ vars.S3_BUCKET }} + aws-account-id: ${{ secrets.AWS_ACCOUNT_ID }} diff --git a/.github/workflows/deploy-andy2.yml b/.github/workflows/deploy-andy2.yml new file mode 100644 index 000000000..6c71389c9 --- /dev/null +++ b/.github/workflows/deploy-andy2.yml @@ -0,0 +1,26 @@ +name: Deploy dev SearchUI + +on: + push: + branches: + - andy2/* + +jobs: + deploy: + runs-on: ubuntu-latest + environment: dev-andy2 + permissions: + id-token: write + contents: read + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: build + uses: ./.github/workflows/search-ui-deploy-composite + with: + maturity: ${{ vars.MATURITY }} + cdn-id: ${{ vars.CDN_ID }} + s3-bucket: ${{ vars.S3_BUCKET }} + aws-account-id: ${{ secrets.AWS_ACCOUNT_ID }} diff --git a/.github/workflows/deploy-greg.yml b/.github/workflows/deploy-greg.yml new file mode 100644 index 000000000..c71807213 --- /dev/null +++ b/.github/workflows/deploy-greg.yml @@ -0,0 +1,26 @@ +name: Deploy greg SearchUI + +on: + push: + branches: + - greg/* + +jobs: + deploy: + runs-on: ubuntu-latest + environment: dev-greg + permissions: + id-token: write + contents: read + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: build + uses: ./.github/workflows/search-ui-deploy-composite + with: + maturity: ${{ vars.MATURITY }} + cdn-id: ${{ vars.CDN_ID }} + s3-bucket: ${{ vars.S3_BUCKET }} + aws-account-id: ${{ secrets.AWS_ACCOUNT_ID }} diff --git a/.github/workflows/deploy-kim.yml b/.github/workflows/deploy-kim.yml new file mode 100644 index 000000000..65d350778 --- /dev/null +++ b/.github/workflows/deploy-kim.yml @@ -0,0 +1,26 @@ +name: Deploy kim SearchUI + +on: + push: + branches: + - kim/* + +jobs: + deploy: + runs-on: ubuntu-latest + environment: dev-kim + permissions: + id-token: write + contents: read + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: build + uses: ./.github/workflows/search-ui-deploy-composite + with: + maturity: ${{ vars.MATURITY }} + cdn-id: ${{ vars.CDN_ID }} + s3-bucket: ${{ vars.S3_BUCKET }} + aws-account-id: ${{ secrets.AWS_ACCOUNT_ID }} diff --git a/.github/workflows/deploy-test.yml b/.github/workflows/deploy-test.yml new file mode 100644 index 000000000..b985af511 --- /dev/null +++ b/.github/workflows/deploy-test.yml @@ -0,0 +1,26 @@ +name: Deploy test SearchUI + +on: + push: + branches: + - test + +jobs: + deploy: + runs-on: ubuntu-latest + environment: test + permissions: + id-token: write + contents: read + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: build + uses: ./.github/workflows/search-ui-deploy-composite + with: + maturity: ${{ vars.MATURITY }} + cdn-id: ${{ vars.CDN_ID }} + s3-bucket: ${{ vars.S3_BUCKET }} + aws-account-id: ${{ secrets.AWS_ACCOUNT_ID }} diff --git a/.github/workflows/deploy-tyler.yml b/.github/workflows/deploy-tyler.yml new file mode 100644 index 000000000..2d1fb9146 --- /dev/null +++ b/.github/workflows/deploy-tyler.yml @@ -0,0 +1,26 @@ +name: Deploy tyler SearchUI + +on: + push: + branches: + - tyler/* + +jobs: + deploy: + runs-on: ubuntu-latest + environment: dev-tyler + permissions: + id-token: write + contents: read + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: build + uses: ./.github/workflows/search-ui-deploy-composite + with: + maturity: ${{ vars.MATURITY }} + cdn-id: ${{ vars.CDN_ID }} + s3-bucket: ${{ vars.S3_BUCKET }} + aws-account-id: ${{ secrets.AWS_ACCOUNT_ID }} diff --git a/.github/workflows/deploy-will.yml b/.github/workflows/deploy-will.yml new file mode 100644 index 000000000..720250b1f --- /dev/null +++ b/.github/workflows/deploy-will.yml @@ -0,0 +1,26 @@ +name: Deploy will SearchUI + +on: + push: + branches: + - will/* + +jobs: + deploy: + runs-on: ubuntu-latest + environment: dev-will + permissions: + id-token: write + contents: read + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: build + uses: ./.github/workflows/search-ui-deploy-composite + with: + maturity: ${{ vars.MATURITY }} + cdn-id: ${{ vars.CDN_ID }} + s3-bucket: ${{ vars.S3_BUCKET }} + aws-account-id: ${{ secrets.AWS_ACCOUNT_ID }} diff --git a/.github/workflows/deploy-yoreley.yml b/.github/workflows/deploy-yoreley.yml new file mode 100644 index 000000000..8b4e325c6 --- /dev/null +++ b/.github/workflows/deploy-yoreley.yml @@ -0,0 +1,26 @@ +name: Deploy yoreley SearchUI + +on: + push: + branches: + - yoreley/* + +jobs: + deploy: + runs-on: ubuntu-latest + environment: dev-yoreley + permissions: + id-token: write + contents: read + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: build + uses: ./.github/workflows/search-ui-deploy-composite + with: + maturity: ${{ vars.MATURITY }} + cdn-id: ${{ vars.CDN_ID }} + s3-bucket: ${{ vars.S3_BUCKET }} + aws-account-id: ${{ secrets.AWS_ACCOUNT_ID }} diff --git a/.github/workflows/search-ui-deploy-composite/action.yml b/.github/workflows/search-ui-deploy-composite/action.yml new file mode 100644 index 000000000..6ed4da3a0 --- /dev/null +++ b/.github/workflows/search-ui-deploy-composite/action.yml @@ -0,0 +1,65 @@ +name: Composite search-ui deploy action + +inputs: + maturity: + required: true + type: string + cdn-id: + required: true + type: string + s3-bucket: + required: true + type: string + aws-account-id: + required: true + type: string + +runs: + using: "composite" + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: Use Node.js + uses: actions/setup-node@v3 + with: + node-version: 18 + + - name: Configure AWS credentials from Test account + uses: aws-actions/configure-aws-credentials@v3 + with: + role-to-assume: arn:aws:iam::${{ inputs.aws-account-id }}:role/GitHub_Actions_Role_SearchUI_${{ inputs.maturity }} + aws-region: us-east-1 + + - name: Fetch the caller identity + shell: bash + run: | + aws sts get-caller-identity + + - name: Install dependencies + shell: bash + run: | + cp src/app/services/envs/env-${{ inputs.maturity }}.ts src/app/services/env.ts + echo "{\"hash\":\"${{ github.sha }}\"}" > src/assets/commit-hash.json + npm install + + - name: Angular Build + shell: bash + run: | + npm run build + + - name: Deploy to AWS + shell: bash + run: | + cd dist/search-ui + aws s3 sync . "s3://${{ inputs.s3-bucket }}" + aws cloudfront create-invalidation \ + --distribution-id ${{ inputs.cdn-id }} \ + --paths \ + /index.html \ + /manifest.json \ + /ngsw.json \ + /favicon.ico \ + /assets/i18n/* \ + /assets/* \ + /docs/* diff --git a/angular.json b/angular.json index 3aecab225..9a7e6c912 100644 --- a/angular.json +++ b/angular.json @@ -24,7 +24,8 @@ "tsConfig": "src/tsconfig.app.json", "assets": [ "src/favicon.ico", - "src/assets" + "src/assets", + "src/googlec521d4cf42937ace.html" ], "styles": [ "./node_modules/ol/ol.css", diff --git a/build/github-actions-oidc.yml b/build/github-actions-oidc.yml new file mode 100644 index 000000000..3723cbfc2 --- /dev/null +++ b/build/github-actions-oidc.yml @@ -0,0 +1,80 @@ +AWSTemplateFormatVersion: 2010-09-09 +Description: GitHub OIDC for when GitHub wants to communicate with AWS. +Resources: + + # This is the bare-bones role. + GitHubActionsRole: + Type: AWS::IAM::Role + Properties: + RoleName: GitHub_Actions_Role_SearchUI_test + AssumeRolePolicyDocument: + Version: 2012-10-17 + Statement: + - Effect: Allow + Principal: + Federated: !Sub arn:aws:iam::${AWS::AccountId}:oidc-provider/token.actions.githubusercontent.com + Action: sts:AssumeRoleWithWebIdentity + Condition: + StringLike: + 'token.actions.githubusercontent.com:sub': ['repo:asfadmin/Discovery-SearchUI:*'] + StringEqualsIgnoreCase: + 'token.actions.githubusercontent.com:aud': sts.amazonaws.com + Policies: + - PolicyName: OidcSafetyPolicy + PolicyDocument: + Version: '2012-10-17' + Statement: + - Sid: OidcSafeties + Effect: Deny + Action: + - sts:AssumeRole + Resource: "*" + - PolicyName: GitHubActionsDeployPolicy + PolicyDocument: + Version: '2012-10-17' + Statement: + - Sid: AllowS3SyncActions + Effect: Allow + Action: + - s3:DeleteObject + - s3:GetBucketLocation + - s3:GetObject + - s3:ListBucket + - s3:PutObject + Resource: + - arn:aws:s3:::asf-search-ui-dev + - arn:aws:s3:::asf-search-ui-dev/* + - arn:aws:s3:::asf-search-ui-test + - arn:aws:s3:::asf-search-ui-test/* + - arn:aws:s3:::search-ui-custom-deployments + - arn:aws:s3:::search-ui-custom-deployments/* + - arn:aws:s3:::asf-search-ui-4 + - arn:aws:s3:::asf-search-ui-4/* + - arn:aws:s3:::asf-search-ui-3 + - arn:aws:s3:::asf-search-ui-3/* + - arn:aws:s3:::asf-search-ui-2 + - arn:aws:s3:::asf-search-ui-2/* + - arn:aws:s3:::asf-search-ui-1 + - arn:aws:s3:::asf-search-ui-1/* + - arn:aws:s3:::asf-search-ui-andy-2 + - arn:aws:s3:::asf-search-ui-andy-2/* + - PolicyName: CloudfrontInvalidation + PolicyDocument: + Version: '2012-10-17' + Statement: + - Sid: AllowInvalidations + Effect: Allow + Action: + - cloudfront:CreateInvalidation + Resource: "*" + + + # This is the OIDC provider hookup itself. This tells AWS to delegate authN GitHub + GitHubActionsOidcProvider: + Type: AWS::IAM::OIDCProvider + Properties: + ClientIdList: + - sts.amazonaws.com + ThumbprintList: + - 6938fd4d98bab03faadb97b34396831e3780aea1 + Url: https://token.actions.githubusercontent.com diff --git a/buildspec.yml b/buildspec.yml index b3973eafd..17d627cd3 100644 --- a/buildspec.yml +++ b/buildspec.yml @@ -7,7 +7,7 @@ phases: commands: - n 18 - npm set progress=false - - npm install -g @angular/cli@15.2.7 + - npm install -g @angular/cli@17.2.7 pre_build: commands: - cp src/app/services/envs/env-${MATURITY}.ts src/app/services/env.ts diff --git a/package.json b/package.json index 0c0b60bf6..ce3252e04 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "scripts": { "ng": "ng", "start": "ng serve", - "build": "ng build", + "build": "ng build --configuration production", "test": "ng test", "lint": "eslint -c .eslintrc.js --ext .ts src", "e2e": "ng e2e" diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 0d932ed0f..1c8d38dd1 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()); } ) ); @@ -530,9 +531,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit { }), debounceTime(200), filter(_ => this.searchType !== SearchType.SARVIEWS_EVENTS - && this.searchType !== SearchType.CUSTOM_PRODUCTS - && this.searchType !== SearchType.BASELINE - && this.searchType !== SearchType.SBAS), + && this.searchType !== SearchType.CUSTOM_PRODUCTS), map(params => ({...params, output: 'COUNT'})), tap(_ => this.store$.dispatch(new searchStore.SearchAmountLoading()) 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/confirmation/confirmation.component.ts b/src/app/components/header/processing-queue/confirmation/confirmation.component.ts index 16771dfee..155a1b47f 100644 --- a/src/app/components/header/processing-queue/confirmation/confirmation.component.ts +++ b/src/app/components/header/processing-queue/confirmation/confirmation.component.ts @@ -1,21 +1,55 @@ import { Component, OnInit, Inject } from '@angular/core'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { Store } from '@ngrx/store'; +import { AppState } from '@store'; +import { of, from } from 'rxjs'; +import { tap, catchError, concatMap, finalize } from 'rxjs/operators'; + +import * as queueStore from '@store/queue'; +import * as hyp3Store from '@store/hyp3'; +import * as searchStore from '@store/search'; + +import * as models from '@models'; +import * as services from '@services'; + @Component({ selector: 'app-confirmation', templateUrl: './confirmation.component.html', styleUrls: ['./confirmation.component.scss'] }) export class ConfirmationComponent implements OnInit { + public allJobs: models.QueuedHyp3Job[] = []; public jobTypesWithQueued = []; + public processingOptions: models.Hyp3ProcessingOptions; + public projectName: string; + public validateOnly: boolean; + + public isQueueSubmitProcessing = false; + public progress = null; constructor( public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data + public hyp3: services.Hyp3Service, + private store$: Store, + private notificationService: services.NotificationService, + @Inject(MAT_DIALOG_DATA) public data: models.ConfirmationDialogData ) { } ngOnInit(): void { - this.jobTypesWithQueued = this.data; + this.jobTypesWithQueued = this.data.jobTypesWithQueued; + this.processingOptions = this.data.processingOptions; + this.validateOnly = this.data.validateOnly; + this.allJobs = this.jobTypesWithQueued.reduce((total, jobs) => { + total = [...total, ...jobs.jobs]; + + return total; + }, []); + this.store$.dispatch(new hyp3Store.SetProcessingProjectName(null)); + + this.store$.select(hyp3Store.getProcessingProjectName).subscribe(name => { + this.projectName = name; + }); } public onToggleJobType(tabQueue): void { @@ -54,6 +88,98 @@ export class ConfirmationComponent implements OnInit { } public onSubmitQueue(): void { - this.dialogRef.close(this.jobTypesWithQueued); + const jobTypesWithQueued = this.jobTypesWithQueued; + + const hyp3JobsBatch = this.hyp3.formatJobs(jobTypesWithQueued, { + projectName: this.projectName, + processingOptions: this.processingOptions + }); + + const batchSize = 20; + const hyp3JobRequestBatches = this.chunk(hyp3JobsBatch, batchSize); + const total = hyp3JobRequestBatches.length; + let current = 0; + + this.isQueueSubmitProcessing = true; + this.progress = null; + + from(hyp3JobRequestBatches).pipe( + concatMap(batch => this.hyp3.submitJobBatch$({ jobs: batch, validate_only: this.validateOnly }).pipe( + catchError(resp => { + if (resp.error) { + if (resp.error.detail === 'No authorization token provided' || resp.error.detail === 'Provided apikey is not valid') { + this.notificationService.error('Your authorization has expired. Please sign in again.', 'Error', { + timeOut: 0, + extendedTimeOut: 0, + closeButton: true, + }); + } else { + this.notificationService.error( resp.error.detail, 'Error', { + timeOut: 0, + extendedTimeOut: 0, + closeButton: true, + }); + } + } + + return of({jobs: null}); + }), + )), + tap(_ => { + current += 1; + this.progress = Math.floor((current / total) * 100); + }), + finalize(() => { + this.progress = null; + this.isQueueSubmitProcessing = false; + + this.store$.dispatch(new hyp3Store.LoadUser()); + let numJobsSubmitted: number + + if (this.allJobs.length !== hyp3JobsBatch.length) { + numJobsSubmitted = Math.abs(hyp3JobsBatch.length - this.allJobs.length); + } else { + numJobsSubmitted = hyp3JobsBatch.length; + } + + const jobText = numJobsSubmitted > 1 ? `${numJobsSubmitted} Jobs` : 'Job'; + + this.notificationService.info(`Click to view Submitted Products.`, `${jobText} Submitted`, { + closeButton: true, + disableTimeOut: true, + }).onTap.subscribe(() => { + const searchType = models.SearchType.CUSTOM_PRODUCTS; + this.store$.dispatch(new searchStore.SetSearchType(searchType)); + }); + + this.dialogRef.close(this.jobTypesWithQueued); + }), + ).subscribe( + (resp: any) => { + if (resp.jobs === null) { + return; + } + + const successfulJobs = resp.jobs.map(job => ({ + granules: job.job_parameters.granules.map(g => ({name: g})), + job_type: models.hyp3JobTypes[job.job_type] + })); + + this.store$.dispatch(new queueStore.RemoveJobs(successfulJobs)); + } + ); + } + + private chunk(arr, chunkSize) { + if (chunkSize <= 0) { + throw new Error('Invalid chunk size'); + } + + const R = []; + for (let i = 0, len = arr.length; i < len; i += chunkSize) { + R.push(arr.slice(i, i + chunkSize)); + } + + return R; } } 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..6735f0be5 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,58 @@ + + +
-
- {{ '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..a38d53de8 100644 --- a/src/app/components/header/processing-queue/processing-queue.component.ts +++ b/src/app/components/header/processing-queue/processing-queue.component.ts @@ -6,12 +6,12 @@ import { ConfirmationComponent } from './confirmation/confirmation.component'; import { Store } from '@ngrx/store'; import { AppState } from '@store'; import moment from 'moment'; -import { of, from, combineLatest } from 'rxjs'; -import { tap, catchError, delay, concatMap, finalize } from 'rxjs/operators'; +import { of, combineLatest } from 'rxjs'; +import { delay } from 'rxjs/operators'; +import { ApplicationStatus } from '@models'; import * as queueStore from '@store/queue'; import * as hyp3Store from '@store/hyp3'; -import * as searchStore from '@store/search'; import * as userStore from '@store/user'; import * as uiStore from '@store/ui'; import * as models from '@models'; @@ -19,7 +19,8 @@ import * as services from '@services'; enum ProcessingQueueTab { SCENES = 'Scenes', - OPTIONS = 'Options' + OPTIONS = 'Options', + SIGNUP = 'Signup' } @Component({ @@ -28,6 +29,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; @@ -57,7 +60,7 @@ export class ProcessingQueueComponent implements OnInit { public hyp3JobTypes = models.hyp3JobTypes; public hyp3JobTypesList: models.Hyp3JobType[]; public selectedJobTypeId: string | null = null; - public jobTypesWithQueued = []; + public jobTypesWithQueued: models.JobTypesWithQueued[] = []; public costPerJobByType = {}; public totalCreditCost = 0; @@ -67,6 +70,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, @@ -75,7 +82,6 @@ export class ProcessingQueueComponent implements OnInit { private dialogRef: MatDialogRef, private store$: Store, private screenSize: services.ScreenSizeService, - private notificationService: services.NotificationService, ) { } ngOnInit(): void { @@ -144,6 +150,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(); + } } ); @@ -198,7 +212,12 @@ export class ProcessingQueueComponent implements OnInit { height: '600px', maxWidth: '350px', maxHeight: '600px', - data: this.jobTypesWithQueued + data: { + jobTypesWithQueued: this.jobTypesWithQueued, + projectName: this.projectName, + processingOptions: this.processingOptions, + validateOnly: this.validateOnly, + } }); confirmationRef.afterClosed().subscribe( @@ -211,10 +230,7 @@ export class ProcessingQueueComponent implements OnInit { this.validateOnly = false; } - this.onSubmitQueue( - jobTypesWithQueued, - this.validateOnly - ); + this.onSubmitQueue(); } ); } @@ -225,103 +241,18 @@ export class ProcessingQueueComponent implements OnInit { ); } - private chunk(arr, chunkSize) { - if (chunkSize <= 0) { - throw new Error('Invalid chunk size'); - } - - const R = []; - for (let i = 0, len = arr.length; i < len; i += chunkSize) { - R.push(arr.slice(i, i + chunkSize)); + public onSubmitQueue(): void { + if(this.allJobs.length === 0) { + this.dialogRef.close(); } - return R; - } - - public onSubmitQueue(jobTypesWithQueued, validateOnly: boolean): void { - const hyp3JobsBatch = this.hyp3.formatJobs(jobTypesWithQueued, { - projectName: this.projectName, - processingOptions: this.processingOptions - }); - - const batchSize = 20; - const hyp3JobRequestBatches = this.chunk(hyp3JobsBatch, batchSize); - const total = hyp3JobRequestBatches.length; - let current = 0; - - this.isQueueSubmitProcessing = true; - - from(hyp3JobRequestBatches).pipe( - concatMap(batch => this.hyp3.submitJobBatch$({ jobs: batch, validate_only: validateOnly }).pipe( - catchError(resp => { - if (resp.error) { - if (resp.error.detail === 'No authorization token provided' || resp.error.detail === 'Provided apikey is not valid') { - this.notificationService.error('Your authorization has expired. Please sign in again.', 'Error', { - timeOut: 0, - extendedTimeOut: 0, - closeButton: true, - }); - } else { - this.notificationService.error( resp.error.detail, 'Error', { - timeOut: 0, - extendedTimeOut: 0, - closeButton: true, - }); - } - } - - return of({jobs: null}); - }), - )), - tap(_ => { - current += 1; - this.progress = Math.floor((current / total) * 100); - }), - finalize(() => { - this.progress = null; - this.isQueueSubmitProcessing = false; - - this.store$.dispatch(new hyp3Store.LoadUser()); - let jobText; - if (this.allJobs.length === 0) { - this.dialogRef.close(); - jobText = hyp3JobsBatch.length > 1 ? `${hyp3JobsBatch.length} Jobs` : 'Job'; - } else if (this.allJobs.length !== hyp3JobsBatch.length) { - const submittedJobs = Math.abs(hyp3JobsBatch.length - this.allJobs.length); - jobText = submittedJobs > 1 ? `${submittedJobs} Jobs` : 'Job'; - } - if (jobText) { - this.notificationService.info(`Click to view Submitted Products.`, `${jobText} Submitted`, { - closeButton: true, - disableTimeOut: true, - }).onTap.subscribe(() => { - const searchType = models.SearchType.CUSTOM_PRODUCTS; - this.store$.dispatch(new searchStore.SetSearchType(searchType)); - }); - } - }), - ).subscribe( - (resp: any) => { - if (resp.jobs === null) { - return; - } - - const successfulJobs = resp.jobs.map(job => ({ - granules: job.job_parameters.granules.map(g => ({name: g})), - job_type: models.hyp3JobTypes[job.job_type] - })); - - this.store$.dispatch(new queueStore.RemoveJobs(successfulJobs)); - - const jobsInTab = this.allJobs.filter( - job => job.job_type.id === this.selectedJobTypeId - ); - - if (jobsInTab.length === 0) { - this.setNextTabIndex(models.hyp3JobTypes[this.selectedJobTypeId]); - } - } + const jobsInTab = this.allJobs.filter( + job => job.job_type.id === this.selectedJobTypeId ); + + if (jobsInTab.length === 0) { + this.setNextTabIndex(models.hyp3JobTypes[this.selectedJobTypeId]); + } } public onSetSelectedJobType(jobType: models.Hyp3JobType): void { @@ -330,6 +261,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 +363,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..3f8c332b5 --- /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 !important; + height: auto !important; +} +.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/results-menu/sbas-results-menu/sbas-results-menu.component.scss b/src/app/components/results-menu/sbas-results-menu/sbas-results-menu.component.scss index 1b95f756c..4c25dba5c 100644 --- a/src/app/components/results-menu/sbas-results-menu/sbas-results-menu.component.scss +++ b/src/app/components/results-menu/sbas-results-menu/sbas-results-menu.component.scss @@ -150,6 +150,7 @@ $config: mat.define-legacy-typography-config(); } margin-top: -4px; + transform: rotate(0.4deg); @include md-icon-size($asf-ribbon-icon-size); } diff --git a/src/app/components/results-menu/scene-files/scene-file/scene-file.component.ts b/src/app/components/results-menu/scene-files/scene-file/scene-file.component.ts index de4272d4c..3732837f5 100644 --- a/src/app/components/results-menu/scene-files/scene-file/scene-file.component.ts +++ b/src/app/components/results-menu/scene-files/scene-file/scene-file.component.ts @@ -55,7 +55,6 @@ export class SceneFileComponent implements OnInit, OnDestroy { of(this.product).pipe( filter(prod => !!prod.metadata) ).subscribe( prod => { - if (!prod.metadata.job) { this.paramsList = []; } else { @@ -179,7 +178,7 @@ export class SceneFileComponent implements OnInit, OnDestroy { const processinglevel = this.product.metadata.productType; const productType = models.opera_s1.productTypes.find(product => product.apiValue == processinglevel); const operaburstid = this.product.metadata?.opera?.operaBurstID; - + [ new searchStore.SetSearchType(models.SearchType.DATASET), new filterStore.ClearDatasetFilters(), diff --git a/src/app/components/results-menu/scenes-list-header/scenes-list-header.component.scss b/src/app/components/results-menu/scenes-list-header/scenes-list-header.component.scss index 32c75d34c..f65144ba2 100644 --- a/src/app/components/results-menu/scenes-list-header/scenes-list-header.component.scss +++ b/src/app/components/results-menu/scenes-list-header/scenes-list-header.component.scss @@ -66,7 +66,7 @@ $config: mat.define-legacy-typography-config(); font-size: 18px; padding: 0; margin: 0; - width: 12px; + width: 18px; height: 12px; vertical-align: middle; position: relative; diff --git a/src/app/components/results-menu/scenes-list/scene/scene-controls/scene-controls.component.html b/src/app/components/results-menu/scenes-list/scene/scene-controls/scene-controls.component.html index 53a6074fc..93fdf0bf0 100644 --- a/src/app/components/results-menu/scenes-list/scene/scene-controls/scene-controls.component.html +++ b/src/app/components/results-menu/scenes-list/scene/scene-controls/scene-controls.component.html @@ -4,13 +4,15 @@ settings_overscan - - + @if(!scene.isDummyProduct) { + + + }
- - + @if(!scene.isDummyProduct) { + + + }
diff --git a/src/app/components/results-menu/scenes-list/scenes-list.component.ts b/src/app/components/results-menu/scenes-list/scenes-list.component.ts index 73d2c6b00..0c5d6073e 100644 --- a/src/app/components/results-menu/scenes-list/scenes-list.component.ts +++ b/src/app/components/results-menu/scenes-list/scenes-list.component.ts @@ -500,6 +500,7 @@ export class ScenesListComponent implements OnInit, OnDestroy, AfterContentInit } private loadDummyProducts(scenes: CMRProduct[]) { + const scenesToLoad = scenes .slice(0, this.numberProductsInList) .filter(s => s.isDummyProduct) diff --git a/src/app/components/sbas-chart/sbas-chart.component.ts b/src/app/components/sbas-chart/sbas-chart.component.ts index 975392537..348a4c89b 100644 --- a/src/app/components/sbas-chart/sbas-chart.component.ts +++ b/src/app/components/sbas-chart/sbas-chart.component.ts @@ -265,20 +265,21 @@ export class SBASChartComponent implements OnInit, OnDestroy { this.setSelected(pair); }); }; + if(this.scenes.length > 0) { + addPairAttributes( + lines + .data(this.pairs) + .join('path') + .style('mix-blend-mode', 'multiply') + ); - addPairAttributes( - lines - .data(this.pairs) - .join('path') - .style('mix-blend-mode', 'multiply') - ); - - addPairAttributes( - lines - .data(this.customPairs) - .join('path') - .style('stroke-dasharray', ' 5,5') - ); + addPairAttributes( + lines + .data(this.customPairs) + .join('path') + .style('stroke-dasharray', ' 5,5') + ); + } this.scatter.append('g') .selectAll('circle') 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/hyp3-job-status-badge/hyp3-job-status-badge.component.html b/src/app/components/shared/hyp3-job-status-badge/hyp3-job-status-badge.component.html index 316a8a17f..0b88190f7 100644 --- a/src/app/components/shared/hyp3-job-status-badge/hyp3-job-status-badge.component.html +++ b/src/app/components/shared/hyp3-job-status-badge/hyp3-job-status-badge.component.html @@ -1,20 +1,27 @@ + @if(job.job_parameters.scenes[0].isDummyProduct) { + Loading... + } @else { - {{ 'EXPIRED' | translate }}... - - - {{ 'FAILED' | translate }}... - - - {{ 'EXPIRED' | translate }} - {{ 'PENDING' | translate }} - {{ 'FAILED' | translate }} - {{ 'RUNNING' | translate }} + @if(isExpired(job) && !isFileDetails) { + {{ 'EXPIRED' | translate }}... + + } @else if (isFailed(job) && !isFileDetails) { + {{ 'FAILED' | translate }}... + + } @else if (isExpired(job) && isFileDetails) { + {{ 'EXPIRED' | translate }} + } @else if (isPending(job)) { + {{ 'PENDING' | translate }} + } @else if (isFailed(job) && isFileDetails) { + {{ 'FAILED' | translate }} + } @else if (isRunning(job)) { + {{ 'RUNNING' | translate }} + } + } diff --git a/src/app/components/shared/hyp3-job-status-badge/hyp3-job-status-badge.component.ts b/src/app/components/shared/hyp3-job-status-badge/hyp3-job-status-badge.component.ts index 1c1b6da90..13f3306d5 100644 --- a/src/app/components/shared/hyp3-job-status-badge/hyp3-job-status-badge.component.ts +++ b/src/app/components/shared/hyp3-job-status-badge/hyp3-job-status-badge.component.ts @@ -1,13 +1,14 @@ import { Component, OnInit, Input } from '@angular/core'; import { EnvironmentService, Hyp3Service, NotificationService, ScenesService } from '@services'; -import { Hyp3Job, hyp3JobTypes, QueuedHyp3Job } from '@models'; +import { Hyp3Job, hyp3JobTypes, QueuedHyp3Job, Hyp3ProcessingOptions } from '@models'; import { ConfirmationComponent } from '@components/header/processing-queue/confirmation/confirmation.component'; import { MatDialog } from '@angular/material/dialog'; import { AppState } from '@store'; import { Store } from '@ngrx/store'; import * as hyp3Store from '@store/hyp3'; +import * as queueStore from '@store/queue'; import { catchError, finalize, first } from 'rxjs/operators'; import { of } from 'rxjs'; @@ -21,6 +22,8 @@ export class Hyp3JobStatusBadgeComponent implements OnInit { @Input() isFileDetails = true; private jobs; + private costs; + private processingOptions: Hyp3ProcessingOptions; private projectName = ''; private validateOnly = false; public remaining = 0; @@ -38,6 +41,14 @@ export class Hyp3JobStatusBadgeComponent implements OnInit { projectName => this.projectName = projectName ); + this.store$.select(hyp3Store.getProcessingOptions).subscribe( + options => this.processingOptions = options + ); + + this.store$.select(hyp3Store.getCosts).subscribe( + costs => this.costs = costs + ); + this.store$.select(hyp3Store.getHyp3User).subscribe( user => { if (user === null) { @@ -72,17 +83,44 @@ export class Hyp3JobStatusBadgeComponent implements OnInit { } private openConfirmationDialog(jobType, jobs) { + let options: Hyp3ProcessingOptions = this.processingOptions; + + jobs.forEach(job => { + const jobTypeOptions = {...options[jobType.id]}; + + for (const [optionName, optionVal] of Object.entries(job.processingOptions)) { + if (optionName in this.processingOptions[jobType.id]) { + jobTypeOptions[optionName] = optionVal; + } + } + + options = { + ...options, + [jobType.id]: jobTypeOptions + }; + }); + + const costPerJob = this.hyp3.calculateCredits(options[jobType.id], this.costs[jobType.id]); + + const jobTypesWithQueued = [{ + jobType: jobType, + selected: true, + jobs: jobs, + creditTotal: costPerJob + }]; + const confirmationRef = this.dialog.open(ConfirmationComponent, { id: 'ConfirmProcess', width: '350px', height: '500px', maxWidth: '350px', maxHeight: '500px', - data: [{ - jobType, - selected: true, - jobs - }] + data: { + jobTypesWithQueued: jobTypesWithQueued, + projectName: this.projectName, + processingOptions: options, + validateOnly: this.validateOnly, + } }); confirmationRef.afterClosed().subscribe( @@ -105,21 +143,17 @@ export class Hyp3JobStatusBadgeComponent implements OnInit { public onReviewExpiredJobs() { const job_types = hyp3JobTypes; - const job_type = Object.keys(job_types).find(id => - this.job.job_type === id as any); - const jobType = job_types[job_type]; const projectJobs = this.jobs - .filter(job => job.name === this.job.name && this.isExpired(job) && !this.isFailed(job)) - .map(job => ({ - granules: job.job_parameters.scenes, - job_type: jobType - } as QueuedHyp3Job - )); + .filter(job => job.name === this.job.name && this.isExpired(job) && !this.isFailed(job)) + .map(job => { + return ({ + granules: job.job_parameters.scenes, + job_type: job_types[job.job_type], + } as QueuedHyp3Job); + }); - this.openConfirmationDialog( - jobType, projectJobs - ); + this.store$.dispatch(new queueStore.AddJobs(projectJobs)); } public onReviewExpiredJob() { @@ -129,9 +163,10 @@ export class Hyp3JobStatusBadgeComponent implements OnInit { const jobType = job_types[job_type]; const job = [{ - granules: this.job.job_parameters.scenes, - job_type: jobType - } as QueuedHyp3Job]; + granules: this.job.job_parameters.scenes, + job_type: jobType, + processingOptions: this.job.job_parameters + } as QueuedHyp3Job]; this.openConfirmationDialog( jobType, job @@ -159,7 +194,7 @@ export class Hyp3JobStatusBadgeComponent implements OnInit { if (resp.error.detail === 'No authorization token provided' || resp.error.detail === 'Provided apikey is not valid') { this.notificationService.error('Your authorization has expired. Please sign in again.', 'Error', { timeOut: 5000, - }); + }); } else { this.notificationService.error( resp.error.detail, 'Error', { timeOut: 5000, @@ -177,11 +212,11 @@ export class Hyp3JobStatusBadgeComponent implements OnInit { jobText = submittedJobs > 1 ? `${submittedJobs} Jobs` : 'Job'; if (jobText) { this.notificationService.info(`${submittedJobs} expired ${jobText} submitted for re-processing.`, - `Expired ${jobText} Submitted`, - { - closeButton: true, - disableTimeOut: true, - }); + `Expired ${jobText} Submitted`, + { + closeButton: true, + disableTimeOut: true, + }); } }), first(), 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') { + + }