File

src/app/apps/apps-add/uri/apps-bulk-import-uri.component.ts

Description

Applications Bulk Import Provide a form to import applications by HTTP

Implements

OnDestroy

Example

Metadata

selector app-apps-bulk-import-uri
styleUrls ../styles.scss
templateUrl ./apps-bulk-import-uri.component.html

Index

Properties
Methods

Constructor

constructor(appsService: AppsService, notificationService: NotificationService, blockerService: BlockerService, fb: FormBuilder, router: Router)

Constructor

Parameters :
Name Type Optional Description
appsService AppsService
notificationService NotificationService
blockerService BlockerService
fb FormBuilder
router Router

Methods

ngOnDestroy
ngOnDestroy()

Will cleanup any {@link Subscription}s to prevent memory leaks.

Returns : void
submit
submit()

Bulk Import Apps.

Returns : void

Properties

form
form: FormGroup
Type : FormGroup

Fom Group

Private ngUnsubscribe$
ngUnsubscribe$: Subject<any>
Type : Subject<any>

Unsubscribe

submitted
submitted:
Default value : false

Form Submitted

import { Component, OnDestroy } from '@angular/core';
import { Subscription, Subject } from 'rxjs';
import { Router } from '@angular/router';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { finalize, takeUntil } from 'rxjs/operators';
import { AppsService } from '../../apps.service';
import { NotificationService } from '../../../shared/services/notification.service';
import { AppsAddValidator } from '../apps-add.validator';
import { AppError } from '../../../shared/model/error.model';
import { BlockerService } from '../../../shared/components/blocker/blocker.service';

/**
 * Applications Bulk Import
 * Provide a form to import applications by HTTP
 *
 * @author Damien Vitrac
 */
@Component({
  selector: 'app-apps-bulk-import-uri',
  styleUrls: ['./../styles.scss'],
  templateUrl: './apps-bulk-import-uri.component.html'
})
export class AppsBulkImportUriComponent implements OnDestroy {

  /**
   * Unsubscribe
   */
  private ngUnsubscribe$: Subject<any> = new Subject();

  /**
   * Fom Group
   */
  form: FormGroup;

  /**
   * Form Submitted
   */
  submitted = false;

  /**
   * Constructor
   *
   * @param {AppsService} appsService
   * @param {NotificationService} notificationService
   * @param {BlockerService} blockerService
   * @param {FormBuilder} fb
   * @param {Router} router
   */
  constructor(private appsService: AppsService,
              private notificationService: NotificationService,
              private blockerService: BlockerService,
              private fb: FormBuilder,
              private router: Router) {

    this.form = fb.group({
      'uri': new FormControl('', [Validators.required, AppsAddValidator.uri]),
      'force': new FormControl(false)
    });
  }

  /**
   * Will cleanup any {@link Subscription}s to prevent
   * memory leaks.
   */
  ngOnDestroy() {
    this.ngUnsubscribe$.next();
    this.ngUnsubscribe$.complete();
  }

  /**
   * Bulk Import Apps.
   */
  submit() {
    this.submitted = true;
    if (!this.form.valid) {
      this.notificationService.error('Some field(s) are missing or invalid.');
    } else {
      this.blockerService.lock();
      this.appsService.bulkImportApps({
        force: this.form.get('force').value,
        properties: null,
        uri: this.form.get('uri').value.toString()
      }).pipe(takeUntil(this.ngUnsubscribe$), finalize(() => this.blockerService.unlock()))
        .subscribe(data => {
          this.notificationService.success('Apps Imported.');
          this.router.navigate(['apps']);
        }, (error) => {
          this.notificationService.error(AppError.is(error) ? error.getMessage() : error);
        });
    }
  }

}
<app-page-head class="step2">
  <app-page-head-back [defaultUrl]="'/apps/add'" [isNotRegex]="'^(\/apps\/add\/)'"></app-page-head-back>
  <app-page-head-title>
    <strong>Bulk import application</strong> coordinates from an HTTP URI location
  </app-page-head-title>
</app-page-head>

<div dataflowLayoutType type="large">
  <form [formGroup]="form" role="form" (ngSubmit)="submit()" novalidate>
    <div dataflowLayoutType type="medium">
      <div class="dataflow-alert dataflow-alert-info">
        Provide a <strong>URI</strong> that points to the location of the <strong>properties file</strong>. <br>
        This properties file is formatted so that the keys represent the <i>type</i>
        and the <i>name</i> of the application, e.g. <strong>type.name</strong>. The property values are the URIs of the
        app.
      </div>
      <div class="form-group" [class.has-error]="form.get('uri').invalid && submitted">
        <label for="uriInput" class="control-label">URI: <em class="required">*</em></label>
        <input type="text" id="uriInput" name="uri" autofocus formControlName="uri" class="form-control"
               placeholder="https://url.to.properties"
               [dataflowFocus]="true">
        <span class="help-block" *ngIf="form.get('uri').invalid && submitted">
          Please provide a valid URI pointing to the respective properties file.
        </span>
        <span class="help-block">e.g. https://bit.ly/Celsius-BUILD-SNAPSHOT-stream-applications-kafka-10-maven</span>
      </div>
      <div class="form-group">
        <label class="checkbox-inline">
          <input formControlName="force" id="forceInput" name="force" type="checkbox"/>
          Force<span class="checkbox-description">, the applications will be imported and installed
        even if it already exists but only if not being used already.</span>
        </label>
      </div>
    </div>
    <app-page-actions id="footer-actions">
      <button name="cancel" type="button" class="btn btn-default" routerLink="/apps">Cancel</button>
      <button name="submit" type="submit" class="btn btn-primary">
        Import the application(s)
      </button>
    </app-page-actions>
  </form>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""