File

core/setup/setup.component.ts

Description

This component is the parent of each setup and can be injected into setup steps to control them.

Implements

OnInit

Metadata

Index

Properties
Methods

Constructor

constructor(options: OptionsService, stepperService: StepperService, appState: AppStateService, alert: AlertService, permissions: Permissions, setupService: SetupService)
Parameters :
Name Type Optional
options OptionsService No
stepperService StepperService No
appState AppStateService No
alert AlertService No
permissions Permissions No
setupService SetupService No

Methods

cancel
cancel()

Cancels the wizards and goes back to the start view.

Returns : void
Async finalize
finalize()
Returns : any
finish
finish()

Finish the wizard and will start the application.

Returns : void
getByIndex
getByIndex(stepIndex)

Returns a step by it index position in the wizard.

Parameters :
Name Optional Description
stepIndex No

The step index that you want to receive.

Returns : any

An indexed step definition.

skip
skip()

Skips the current setup wizard

Returns : void
start
start()

Starts the wizards (or finish the setup if no steps are found)

Returns : void
stepCompleted
stepCompleted(stepIndex, isCompleted)

Mark a step as completed. If the step is required, this is needed to fulfill the setup.

Parameters :
Name Optional Default value Description
stepIndex No

The index of the step you want to mark as completed

isCompleted No true

Defaults to true to mark it as completed but can be set to false to invalidate the step.

Returns : void
verify
verify()

Verifies every step and checks if all required are completed. Updates the icons to reflect the state of the steps (error, warning, done).

Returns : boolean

Returns true if no error was found.

Properties

completed$
Default value : new Observable<boolean>().pipe(startWith(true))

Emits when the setup is done. You can add certain operations before completing the setup that needed to be awaited. Return true if everything is fine, otherwise false.

const asyncOperation = delay(2000);
this.setup.completed$ = this.setup.completed$.pipe(asyncOperation, map(() => true));
``
Note: Remember that a step can be viewed multiple times. The step needs to ensure, to only add a completed operation ones.
currentSetupState
Default value : SetupState.START

The current state. SetupState.START shows an application overview while SetupState.WIZARD shows the steps.

data$
Default value : new BehaviorSubject<any>({})

A subject which can be used to exchange data between steps.

Public options
Type : OptionsService
steps
Type : SetupStep[]

All current shown setup steps.

<c8y-title>
  {{ options.name | humanizeAppName | async }}
</c8y-title>

<div
  class="card content-fullpage fadeInRightBig animated"
  *ngIf="currentSetupState !== setupState.START"
>
  <c8y-stepper-outlet
    [showDefaultButtons]="false"
    [steps]="steps"
    class="d-contents"
  ></c8y-stepper-outlet>
</div>

<div
  class="card content-fullpage d-flex d-col fadeInUpBig animated"
  *ngIf="currentSetupState === setupState.START"
>
  <div class="inner-scroll flex-grow">
    <div class="card-block">
      <div class="row">
        <div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 p-t-24">
          <svg class="p-t-32" viewBox="0 0 360 190" style="max-width: 450px; margin: auto">
            <g
              id="ecosystem-welcome-illustration"
              stroke="none"
              stroke-width="1"
              fill="none"
              fill-rule="evenodd"
            >
              <g id="medium-img">
                <g id="M---Nothing-found---illustration" transform="translate(27.000000, 0.000000)">
                  <path
                    d="M41.9882163,184.153177 C24.3512964,165.028818 14.796713,138.637202 18.0717117,113.128248 C21.3467105,87.6192947 38.0071399,63.7138452 61.8485298,52.9453596 C71.0829585,49.0513414 80.8096047,46.3893689 90.76767,45.0308169 C98.489456,43.8098001 118.605159,43.8098001 134.379236,43.8098001 C145.406066,43.8098001 181.235754,38.969866 207.015103,16.5355211 C213.745375,10.6511027 239.269332,-7.69357146 271.478495,5.11974949 C293.036399,13.6962892 308.780431,29.0693321 312.911736,38.3078689 C331.314825,79.4105311 320.017582,129.634042 291.233648,164.558065 C285.720232,171.251591 279.470694,177.592051 271.70384,181.608167 C268.726702,182.834918 265.624451,183.747258 262.449715,184.32971 L41.9882163,184.153177 Z"
                    id="Path"
                    fill="#CDE6F9"
                    fill-rule="nonzero"
                  ></path>
                  <ellipse
                    id="Oval"
                    fill="#5FAEEC"
                    fill-rule="nonzero"
                    cx="28.1633729"
                    cy="162.880435"
                    rx="2.68222598"
                    ry="2.68115941"
                  ></ellipse>
                  <ellipse
                    id="Oval"
                    fill="#5FAEEC"
                    fill-rule="nonzero"
                    cx="65.7145367"
                    cy="65.6884059"
                    rx="4.02333899"
                    ry="3.35144928"
                  ></ellipse>
                  <g
                    id="Group"
                    opacity="0.8"
                    transform="translate(8.046677, 16.757247)"
                    fill="#7BCAEF"
                    fill-rule="nonzero"
                  >
                    <path
                      d="M12.8344513,8.04347826 L2.50788129,8.04347826 C1.90488763,8.22105727 1.25665804,7.99364432 0.892621563,7.47681021 C0.528585083,6.95997611 0.528585083,6.26707703 0.892621563,5.75024293 C1.25665804,5.23340882 1.90488763,5.00599587 2.50788129,5.18357488 L12.8344513,5.18357488 C13.437445,5.00599587 14.0856746,5.23340882 14.4497111,5.75024293 C14.8137476,6.26707703 14.8137476,6.95997611 14.4497111,7.47681021 C14.0856746,7.99364432 13.437445,8.22105727 12.8344513,8.04347826 Z"
                      id="Path"
                    ></path>
                    <path
                      d="M7.64166184,13.2866345 C6.82691795,13.2866345 6.16643754,12.6197478 6.16643754,11.7971014 L6.16643754,1.37037037 C6.35002101,0.734836286 6.92699763,0.297906603 7.58265287,0.297906603 C8.2383081,0.297906603 8.81528471,0.734836286 8.99888356,1.37037037 L8.99888356,11.7971014 C9.00133839,12.5753731 8.40999101,13.2243764 7.64166184,13.2866345 Z"
                      id="Path"
                    ></path>
                  </g>
                  <ellipse
                    id="Oval"
                    fill="#5FAEEC"
                    fill-rule="nonzero"
                    cx="2.68222598"
                    cy="90.4891305"
                    rx="2.68222598"
                    ry="2.68115941"
                  ></ellipse>
                  <ellipse
                    id="Oval"
                    fill="#5FAEEC"
                    fill-rule="nonzero"
                    cx="257.493695"
                    cy="157.518116"
                    rx="2.68222598"
                    ry="2.68115941"
                  ></ellipse>
                  <ellipse
                    id="Oval"
                    fill="#14629F"
                    fill-rule="nonzero"
                    cx="299.738754"
                    cy="155.507247"
                    rx="2.01166949"
                    ry="2.01086957"
                  ></ellipse>
                  <ellipse
                    id="Oval"
                    fill="#96CAF3"
                    fill-rule="nonzero"
                    cx="260.175921"
                    cy="59.6557971"
                    rx="2.68222598"
                    ry="2.68115941"
                  ></ellipse>
                  <ellipse
                    id="Oval"
                    stroke="#5FAEEC"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    cx="329.913796"
                    cy="111.938406"
                    rx="2.68222598"
                    ry="2.68115941"
                  ></ellipse>
                  <ellipse
                    id="Oval"
                    stroke="#96CAF3"
                    cx="95.2190226"
                    cy="144.782609"
                    rx="4.02333899"
                    ry="3.35144928"
                  ></ellipse>
                  <g
                    id="Group"
                    opacity="0.6"
                    transform="translate(273.587050, 121.322464)"
                    fill="#14629F"
                    fill-rule="nonzero"
                  >
                    <path
                      d="M12.1263437,8.01368761 L1.79977363,8.01368761 C1.17034461,7.82832349 0.737612147,7.24575058 0.737612147,6.5837359 C0.737612147,5.92172124 1.17034461,5.33914833 1.79977363,5.15378421 L12.1263437,5.15378421 C12.7293374,4.97620521 13.3775669,5.20361817 13.7416034,5.72045226 C14.1056399,6.23728637 14.1056399,6.93018545 13.7416034,7.44701956 C13.3775669,7.96385365 12.7293374,8.19126661 12.1263437,8.01368761 L12.1263437,8.01368761 Z"
                      id="Path"
                    ></path>
                    <path
                      d="M6.94830642,13.2419485 C6.13356254,13.2419485 5.47308212,12.5750618 5.47308212,11.7524155 L5.47308212,1.32568438 C5.6566656,0.690150295 6.23364221,0.253220612 6.88929744,0.253220612 C7.54495269,0.253220612 8.1219293,0.690150295 8.30552815,1.32568438 L8.30552815,11.7524155 C8.30798297,12.5306871 7.71663558,13.1796904 6.94830642,13.2419485 Z"
                      id="Path"
                    ></path>
                  </g>
                  <rect
                    id="Rectangle"
                    fill="#5FAEEC"
                    fill-rule="nonzero"
                    x="107.28904"
                    y="128.025362"
                    width="109.971265"
                    height="48.2608695"
                  ></rect>
                  <polygon
                    id="Path"
                    fill="#5FAEEC"
                    fill-rule="nonzero"
                    points="205.744516 91.8297102 121.555988 91.8297102 107.28904 129.365942 217.260306 129.365942"
                  ></polygon>
                  <polygon
                    id="Path"
                    fill="#5FAEEC"
                    fill-rule="nonzero"
                    points="93.8779095 114.917472 103.478057 98.5326086 118.017943 121.471417 107.035845 128.025362"
                  ></polygon>
                  <polygon
                    id="Path"
                    fill="#5FAEEC"
                    fill-rule="nonzero"
                    points="209.213627 123.316736 216.813268 129.365942 232.012548 114.683402 221.373051 98.5326086"
                  ></polygon>
                  <polygon
                    id="Path"
                    fill="#96CAF3"
                    fill-rule="nonzero"
                    points="214.884986 105.235507 111.648803 105.235507 107.28904 129.365942 217.260306 129.365942"
                  ></polygon>
                  <path
                    d="M91.6761446,30.3423163 C92.3222173,30.3423163 92.8459628,30.8537275 92.8459628,31.4845853 C92.8459628,32.1154431 92.3222173,32.6268545 91.6761446,32.6268545 C91.0300718,32.6268545 90.5063264,32.1154431 90.5063264,31.4845853 C90.5289441,30.8631053 91.0396757,30.3644014 91.6761446,30.3423163 Z M91.8662401,24.6309708 C92.4940745,24.6065819 93.1037929,24.8394323 93.5480901,25.2732662 C93.9923872,25.7071004 94.2308535,26.30246 94.2058764,26.9155089 L94.2058764,27.5152002 L89.5266036,27.5152002 L89.5266036,26.9155089 C89.4960305,26.2895723 89.7404154,25.6806341 90.1983788,25.2416359 C90.6563421,24.8026375 91.2843716,24.5752894 91.924731,24.6166924 L91.8662401,24.6309708 Z M91.8662401,23.4744232 C90.9292048,23.466734 90.0282593,23.8268063 89.3656519,24.4738094 C88.7030445,25.1208125 88.3342881,26.0005407 88.3421627,26.9155089 L88.3421627,27.5152002 L87.1723446,27.5152002 L87.1723446,35.5253623 L96.5601355,35.5253623 L96.5601355,27.5009219 L95.3903173,27.5009219 L95.3903173,26.9012306 C95.3981063,25.9961621 95.037351,25.1251451 94.3874206,24.4798095 C93.7374901,23.8344738 92.8516283,23.4676871 91.924731,23.460145 L91.8662401,23.4744232 Z"
                    id="Shape"
                    fill="#5FAEEC"
                    fill-rule="nonzero"
                  ></path>
                  <path
                    d="M254.811469,24.8007247 L248.113249,12.7355072 L241.400339,24.8007247 L254.811469,24.8007247 Z M248.7155,22.7874058 L247.466929,22.7874058 L247.466929,21.6411367 L248.671434,21.6411367 L248.7155,22.7874058 Z M248.7155,20.5095632 L247.466929,20.5095632 L247.466929,17.5704117 L248.671434,17.5704117 L248.7155,20.5095632 Z"
                    id="Shape"
                    fill="#5FAEEC"
                    fill-rule="nonzero"
                  ></path>
                  <line
                    x1="201.166949"
                    y1="40.8876812"
                    x2="187.755818"
                    y2="60.9963769"
                    id="Path"
                    stroke="#5FAEEC"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  ></line>
                  <line
                    x1="165.969438"
                    y1="31.5036231"
                    x2="165.285471"
                    y2="55.6340579"
                    id="Path"
                    stroke="#5FAEEC"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  ></line>
                  <line
                    x1="130.08796"
                    y1="44.9094203"
                    x2="146.181316"
                    y2="63.6775362"
                    id="Path"
                    stroke="#5FAEEC"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  ></line>
                </g>
                <polygon
                  id="Fill-56"
                  fill="#A5D1FE"
                  fill-rule="nonzero"
                  points="0 185 335 185 335 175 0 175"
                ></polygon>
              </g>
            </g>
          </svg>
          <h1
            class="p-t-16 p-b-16 text-center text-medium"
            ngNonBindable
            translate
            [translateParams]="{ appName: options.name | humanizeAppName | async }"
          >
            Welcome to {{ appName }}
          </h1>
          <p class="lead text-normal" translate *ngIf="hasRole">
            This application (or any plugin that you added recently) has pre-requirements that needs
            to be configured first. This wizard will guide you through the steps that are necessary
            to get your customized application up and running.
          </p>
          <div class="flex-grow" *ngIf="properties.length > 0">
            <c8y-properties-list
              icon="info"
              [properties]="properties"
              [data]="options"
              [title]="'Application properties' | translate"
            ></c8y-properties-list>
          </div>
          <div class="alert alert-danger m-32" *ngIf="!hasRole">
            <strong translate>No permission</strong>
            <div translate>
              You don't have sufficient rights to setup this application. Contact an application
              administrator to setup the required steps.
            </div>
          </div>
          <div class="alert alert-danger m-32" *ngIf="!isOwner">
            <strong translate>Not the owner</strong>
            <div translate>
              The current application is not owned by this tenant. Clone the application before
              running the setup.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card-footer separator d-flex j-c-center">
    <button
      class="btn"
      (click)="skip()"
      translate
      *ngIf="canSkip"
      [title]="
        'You can skip the setup now. It will be shown again as soon as you restart the application.'
          | translate
      "
    >
      Skip
    </button>

    <button
      class="btn btn-primary"
      (click)="start()"
      translate
      [disabled]="!hasRole || !isOwner"
      [title]="'Start the setup wizard.' | translate"
    >
      Start
    </button>
  </div>
</div>

results matching ""

    No results matching ""