File

src/app/about/about/about.component.ts

Description

Component About Page.

Implements

OnInit

Example

Metadata

selector app-about
styleUrls styles.scss
templateUrl ./about.component.html

Index

Properties
Methods

Constructor

constructor(aboutService: AboutService)

Constructor

Parameters :
Name Type Optional Description
aboutService AboutService

Methods

ngOnInit
ngOnInit()

On Init

Returns : void
toggleDetails
toggleDetails()

Toggle Details

Returns : void

Properties

Public dataflowVersionInfo$
dataflowVersionInfo$: Observable<AboutInfo>
Type : Observable<AboutInfo>

Observable About Info

Public showDetails
showDetails:
Default value : false

Show Details

import { Component, OnInit } from '@angular/core';
import { AboutService } from '../about.service';
import { Observable } from 'rxjs';
import { AboutInfo } from '../../shared/model/about/about-info.model';

/**
 * Component About Page.
 *
 * @author Gunnar Hillert
 * @author Damien Vitrac
 */
@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./styles.scss']
})
export class AboutComponent implements OnInit {

  /**
   * Observable About Info
   */
  public dataflowVersionInfo$: Observable<AboutInfo>;

  /**
   * Show Details
   */
  public showDetails = false;

  /**
   * Constructor
   *
   * @param {AboutService} aboutService
   */
  constructor(private aboutService: AboutService) {
  }

  /**
   * On Init
   */
  ngOnInit() {
    this.dataflowVersionInfo$ = this.aboutService.getAboutInfo();
  }

  /**
   * Toggle Details
   */
  toggleDetails() {
    this.showDetails = !this.showDetails;
  }

}
<app-page *ngIf="dataflowVersionInfo$ | async as dataflowVersionInfo; else loading">

  <app-page-head>
    <app-page-head-title><strong>About & Docs</strong></app-page-head-title>
  </app-page-head>

  <div dataflowLayoutType type="full">
    <div class="dataflow-alert dataflow-alert-info">
      Spring Cloud Data Flow is a toolkit for building data integration and real-time data processing pipelines.
    </div>
    <div>
      <h2>Data Flow Server Implementation</h2>
      <div id="properties" class="properties">
        <div class="infos">
          <div class="box">
            <a *ngIf="showDetails" (click)="toggleDetails()" class="fa fa-chevron-down" aria-hidden="true"></a>
            <a *ngIf="!showDetails" (click)="toggleDetails()" class="fa fa-chevron-right" aria-hidden="true"></a>
            <div class="line">
              Name:
              <strong>{{ dataflowVersionInfo ? dataflowVersionInfo.versionInfo.implementation.name : 'N/A' }}</strong>
            </div>
            <div class="line">
              Version:
              <strong>{{ dataflowVersionInfo ? dataflowVersionInfo.versionInfo.implementation.version : 'N/A'
                }}</strong>
            </div>
          </div>
        </div>
        <div class="show-more" *ngIf="showDetails">
          <app-about-details></app-about-details>
        </div>
      </div>
    </div>

    <hr>

    <div>
      <h2>Need Help or Found an Issue?</h2>
      <ul id="dataFlowVersionLinksTable" class="list-icons">
        <li>
          <a target="_blank" href="https://cloud.spring.io/spring-cloud-dataflow/">
            <img src="assets/img/project-page.png" width="50px" alt="">
            <strong>Project Page</strong>
            <span>Quick overview of Spring Cloud Data Flow Project.</span>
          </a>
        </li>
        <li>
          <a target="_blank" href="https://github.com/spring-cloud/spring-cloud-dataflow">
            <img src="assets/img/github.png" width="50px" alt="">
            <strong>Sources</strong>
            <span>Spring Cloud Data Flow Project is an Open Source Project.</span>
          </a>
        </li>
        <li>
          <a target="_blank"
             href="https://docs.spring.io/spring-cloud-dataflow/docs/{{ dataflowVersionInfo.versionInfo.core.version }}/reference/htmlsingle/">
            <img src="assets/img/documentation.png" width="50px" alt="">
            <strong>Documentation</strong>
            <span>Learn more about the product features.</span>
          </a>
        </li>
        <li>
          <a target="_blank"
             href="https://docs.spring.io/spring-cloud-dataflow/docs/{{ dataflowVersionInfo.versionInfo.core.version }}/api/">
            <img src="assets/img/api.png" width="50px" alt="">
            <strong>API Docs</strong>
            <span>Learn more about the REST-APIs.</span>
          </a>
        </li>
        <li>
          <a target="_blank" href="https://stackoverflow.com/questions/tagged/spring-cloud-dataflow">
            <img src="assets/img/forum.png" width="50px" alt="">
            <strong>Support Forum</strong>
            <span>You need help?</span>
          </a>
        </li>
        <li>
          <a target="_blank" href="https://github.com/spring-cloud/spring-cloud-dataflow/issues">
            <img src="assets/img/tracker.png" width="50px" alt="">
            <strong>Issue Tracker</strong>
            <span>Report an issue or request for a new feature.</span>
          </a>
        </li>
      </ul>
    </div>

    <hr>

    <div class="shell">
      <img src="assets/img/shell.png" width="383px" alt="">
      <div class="shell-content">
        <h2 *ngIf="dataflowVersionInfo">Get the Spring Cloud Data Flow Shell</h2>
        <p class="index-page--subtitle">As an alternative to the Dashboard UI, you can also
          <a href="{{ dataflowVersionInfo.versionInfo.shell.url }}" target="_blank">
            download the compatible version of the Shell
          </a> ({{ dataflowVersionInfo.versionInfo.shell.version }}).
        </p>
        <p>
          The shell is built upon the <a href="https://projects.spring.io/spring-shell/">Spring Shell</a> project.
          There are command line options generic to Spring Shell and some specific to Data Flow.
        </p>
        <p>
          <a
            href="https://docs.spring.io/spring-cloud-dataflow/docs/{{ dataflowVersionInfo.versionInfo.core.version }}/reference/htmlsingle/#shell">
            Learn more about Spring Cloud Data Flow's Shell.
          </a>
        </p>
      </div>
    </div>

    <hr>

    <div class="pivotal">

      <svg xmlns="http://www.w3.org/2000/svg"
           width="120" height="30" viewBox="0 0 104.2719 26.011874"
           version="1.1" id="svg8">
        <defs
          id="defs2">
          <clipPath id="clipPath28" clipPathUnits="userSpaceOnUse">
            <path id="path26" d="M 0,0 H 4350 V 1800 H 0 Z"/>
          </clipPath>
        </defs>
        <g id="layer1" transform="translate(77.814282,-135.56274)">
          <g id="g105" transform="translate(0.26458135,-0.26457805)">
            <path
              d="m -53.674156,161.14426 h -3.872794 v -18.57097 h 3.872794 z m -0.0049,-21.31452 h -3.863269 v -3.73768 h 3.863269 v 3.73768"
              style="fill:#048371;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.03527778"
              id="path30"/>
            <path
              d="m -31.333796,142.57329 -5.392914,16.04158 c -0.9271,2.62323 -2.579864,2.95974 -3.917598,2.95974 -1.986844,0 -3.183114,-0.91295 -3.887964,-2.95518 l -4.495095,-13.32164 h -1.778705 v -2.7245 h 4.639733 l 4.632678,14.91227 c 0.202495,0.63638 0.327378,1.01741 0.889353,1.01741 0.583495,0 0.698853,-0.38696 0.887236,-1.01741 l 4.72687,-14.91227 h 3.696406"
              style="fill:#048371;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.03527778"
              id="path32"/>
            <path
              d="m -21.797859,158.51814 c 2.997553,0 4.855281,-2.26688 4.855281,-4.98549 v -2.91758 c 0,-2.72108 -1.841501,-4.98778 -4.855281,-4.98778 -3.173942,0 -4.852812,2.2667 -4.852812,4.98778 v 2.91758 c 0,2.71861 1.751895,4.98549 4.852812,4.98549 m 0,-15.94485 c 5.011561,0 8.505472,3.30553 8.505472,8.04178 v 2.91758 c 0,4.7304 -3.493911,8.04196 -8.505472,8.04196 -5.009092,0 -8.510412,-3.31156 -8.510412,-8.04196 v -2.91758 c 0,-4.73625 3.50132,-8.04178 8.510412,-8.04178"
              style="fill:#048371;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.03527778"
              id="path34"/>
            <path
              d="m 17.624001,143.16596 c -1.929341,-0.49636 -4.944533,-0.85619 -7.171267,-0.85619 -5.0845861,0 -8.2398307,3.20675 -8.2398307,8.376 v 2.0351 c 0,5.16432 3.1552446,8.41982 8.2398307,8.41982 0.117475,0 1.020939,0.004 1.432631,-0.0367 v -3.11753 c -0.156281,0 -1.317625,0.0413 -1.432631,0.0413 -2.7657776,0 -4.6259749,-2.13293 -4.6259749,-5.30695 v -2.0351 c 0,-3.17405 1.8601973,-5.30578 4.6259749,-5.30578 1.251656,0 3.140781,0.10125 3.792714,0.23883 l 0.207081,0.0448 0.0046,15.48063 h 3.869267 v -17.33483 c 0,-0.33056 0,-0.45756 -0.702381,-0.64347"
              style="fill:#048371;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.03527778"
              id="path36"/>
            <path
              d="m 22.057007,161.14426 h 3.871454 V 136.0922 h -3.871454 z"
              style="fill:#048371;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.03527778"
              id="path38"/>
            <path
              d="m -71.019464,136.09206 h -6.794818 v 25.04863 h 4.026888 v -21.56636 h 2.361001 c 0.50105,0.004 0.928123,0.0247 1.356395,0.0328 3.490525,0.0674 5.198675,1.45203 5.198675,4.16595 0,0.10936 0.0071,0.18097 0.0071,0.29386 0,2.51062 -1.379008,4.17654 -5.184493,4.17654 -0.363678,0 -0.737658,-0.008 -1.12462,-0.005 0.0011,0.96008 -0.0037,2.74104 -0.0059,3.36694 0.392889,0.0189 0.759989,0.0353 1.136474,0.0353 5.460789,0 9.317003,-2.14697 9.317003,-7.53618 0,-0.10583 -0.0056,-0.21625 -0.0056,-0.32456 0,-5.58588 -4.201231,-7.68808 -10.287988,-7.68808"
              style="fill:#048371;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.03527778"
              id="path40"/>
            <path
              d="m -6.4174528,138.56962 v 4.00367 h 6.30590315 v 2.99967 H -6.4174528 v 10.82079 c 0,1.69746 1.0847917,1.74336 2.6564168,1.74336 h 3.65160302 v 3.00358 H -5.0504389 c -3.6537196,0 -5.2832001,-1.46226 -5.2832001,-4.74694 v -17.2865 l 3.9161862,-0.53763"
              style="fill:#048371;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.03527778"
              id="path42"/>
          </g>
        </g>
      </svg>

      <div class="pivotal-text">
        <strong>Spring Cloud Data Flow</strong> is powered by Pivotal.<br>
        © 2017&ndash;2019 Pivotal - All Rights Reserved.
      </div>

    </div>
  </div>

</app-page>
<ng-template #loading>
  <app-loader></app-loader>
</ng-template>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""