core/setup/setup.component.ts
This component is the parent of each setup and can be injected into setup steps to control them.
| selector | c8y-setup |
| templateUrl | ./setup.component.html |
Properties |
|
Methods |
constructor(options: OptionsService, stepperService: StepperService, appState: AppStateService, alert: AlertService, permissions: Permissions, bootstrapComponent: BootstrapComponent)
|
|||||||||||||||||||||
|
Parameters :
|
| 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 :
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 :
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. |
| 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 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. Please 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. Please 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>