diff --git a/src/app/appmarket/appdetails/appdetails.component.html b/src/app/appmarket/appdetails/appdetails.component.html
index 5e68b8317dafb6433a685b89004eefac33117cf1..ec87abce1281d288146a69964e98e92dcb9f9385 100644
--- a/src/app/appmarket/appdetails/appdetails.component.html
+++ b/src/app/appmarket/appdetails/appdetails.component.html
@@ -20,7 +20,7 @@
<div class="btn no-padding" pTooltip="{{'APPLICATIONS.TOOLTIP_MESSAGE_DEPLOY' | translate}}" tooltipPosition="bottom" [showDelay]="50" [tooltipDisabled]="defaultTooltipDisabled">
<button *ngIf="isSubscriptionAllowed()" class="btn btn-danger m-1" (click)="unsubscribe()">{{'APPLICATIONS.UNSUBSCRIBE_BUTTON' | translate}}</button>
</div>
- <button class="btn btn-primary m-1" [routerLink]="['/admin/apps/bulks/new/select']" [queryParams]="{id: appId }">Bulk deployments</button>
+ <button class="btn btn-primary m-1" [routerLink]="['/admin/apps/bulks/new/select']" [queryParams]="{id: appId }">Bulk deployment</button>
<button *ngIf="isSubscriptionAllowed()" class="btn btn-primary m-1" [disabled]="!isApplicationEnabledInDomain()" (click)="appInstallModal.show()">{{'APPLICATIONS.DEPLOY_BUTTON' | translate}}</button>
</div>
diff --git a/src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.css b/src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.css
index a1f3548446b32f144eaa14a1c003ce1a2b358506..94e2f1f38f95a38e9f9e02cf8dabc424bec65695 100644
--- a/src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.css
+++ b/src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.css
@@ -82,6 +82,20 @@ label{
color: #136214;
font-weight: bold;
}
+::ng-deep .removed .p-progressbar .p-progressbar-value{
+ background: #929292;
+}
+.removed{
+ color: #929292;
+ font-weight: bold;
+}
+::ng-deep .scaledDown .p-progressbar .p-progressbar-value{
+ background: #2673B6;
+}
+.scaledDown{
+ color: #2673B6;
+ font-weight: bold;
+}
::ng-deep .p-progressbar .p-progressbar-label{
display: none;
}
diff --git a/src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.html b/src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.html
index 9ebd86b5aff1deba6a6fdf8e19c0a1365b59fe89..f7c11b86a4f04a38b4f1a91441e7247c6ea345c2 100644
--- a/src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.html
+++ b/src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.html
@@ -86,37 +86,39 @@
<p>{{ appInstance?.applicationName }}</p>
</div>
<div>
- <div class="" *ngIf="appInstance?.application">
+ <div class="" *ngIf="appInstance?.appId">
<img alt="App logo"
- [src]="(appImagesService.getAppLogoUrl(appInstance?.application.applicationBase.id) | secure) || 'assets/images/app-logo-example.png'" height="50px"/>
+ [src]="(appImagesService.getAppLogoUrl(appInstance?.appId) | secure) || 'assets/images/app-logo-example.png'" height="50px"/>
</div>
- <div class="" *ngIf="!appInstance?.application">
+ <div class="" *ngIf="!appInstance?.appId">
<img alt="App logo" src="assets/images/app-logo-example.png" height="50px"/>
</div>
</div>
</div>
- <div *ngIf="getStateAsEnum(appInstance?.state) == AppInstanceState.FAILURE ||
- getStateAsEnum(appInstance?.state) == AppInstanceState.REMOVED">
+ <div *ngIf="getStateAsEnum(appInstance?.state) == AppInstanceState.FAILURE">
<p class="failure">{{ translateState(appInstance?.state) }}</p>
<p-progressBar class="failure" [value]="100" [style]="{'height': '6px'}"></p-progressBar>
</div>
- <div *ngIf="getStateAsEnum(appInstance?.state) == AppInstanceState.RUNNING ||
- getStateAsEnum(appInstance?.state) == AppInstanceState.DEPLOYING ||
+ <div *ngIf="getStateAsEnum(appInstance?.state) == AppInstanceState.DEPLOYING ||
getStateAsEnum(appInstance?.state) == AppInstanceState.CONFIGURATION_AWAITING ||
- getStateAsEnum(appInstance?.state) == AppInstanceState.CONNECTING">
+ getStateAsEnum(appInstance?.state) == AppInstanceState.CONNECTING ||
+ getStateAsEnum(appInstance?.state) == AppInstanceState.REQUESTED ||
+ getStateAsEnum(appInstance?.state) == AppInstanceState.VALIDATION ||
+ getStateAsEnum(appInstance?.state) == AppInstanceState.PREPARATION">
<p class="running">{{ translateState(appInstance?.state) }}</p>
<p-progressBar class="running" mode="indeterminate" [style]="{'height': '6px'}"></p-progressBar>
</div>
- <div *ngIf="getStateAsEnum(appInstance?.state) == AppInstanceState.DONE ||
- getStateAsEnum(appInstance?.state) == AppInstanceState.RUNNING ">
+ <div *ngIf="getStateAsEnum(appInstance?.state) == AppInstanceState.RUNNING ">
<p class="done">{{ translateState(appInstance?.state) }}</p>
<p-progressBar class="done" [value]="100" [style]="{'height': '6px'}"></p-progressBar>
</div>
-
-
+ <div *ngIf="getStateAsEnum(appInstance?.state) == AppInstanceState.DONE ||
+ getStateAsEnum(appInstance?.state) == AppInstanceState.REMOVED ">
+ <p class="done">{{ translateState(appInstance?.state) }}</p>
+ <p-progressBar class="removed" [value]="100" [style]="{'height': '6px'}"></p-progressBar>
+ </div>
</div>
</div>
-
</div>
<div style="margin-top:40px" *roles="['ROLE_DOMAIN_ADMIN', 'ROLE_SYSTEM_ADMIN', 'ROLE_OPERATOR']">
@@ -155,4 +157,52 @@
</ng-template>
</p-table>
</div>
+ <div *ngIf="undeployedVisible && selectedOption === 'cards'" class="grid col-12">
+ <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12" *ngFor="let appInstance of appUndeployedInstances | async | searchAppInstance: searchValue">
+ <div class="background-section" [ngClass]="{'clickable': !userHasGuestRoleInCurrentDomain()}"
+ [routerLink]="userHasGuestRoleInCurrentDomain() ? [] : [appInstance.id]" >
+ <div style="display:flex; justify-content: space-between; margin-bottom: 30px">
+ <div>
+ <p>{{appInstance?.name}}</p>
+ <p>{{ appInstance?.applicationName }}</p>
+ </div>
+ <div>
+ <div class="" *ngIf="appInstance?.appId">
+ <img alt="App logo"
+ [src]="(appImagesService.getAppLogoUrl(appInstance?.appId) | secure) || 'assets/images/app-logo-example.png'" height="50px"/>
+ </div>
+ <div class="" *ngIf="!appInstance?.appId">
+ <img alt="App logo" src="assets/images/app-logo-example.png" height="50px"/>
+ </div>
+ </div>
+ </div>
+ <div *ngIf="getStateAsEnum(appInstance?.state) == AppInstanceState.FAILURE">
+ <p class="failure">{{ translateState(appInstance?.state) }}</p>
+ <p-progressBar class="failure" [value]="100" [style]="{'height': '6px'}"></p-progressBar>
+ </div>
+ <div *ngIf="getStateAsEnum(appInstance?.state) == AppInstanceState.DEPLOYING ||
+ getStateAsEnum(appInstance?.state) == AppInstanceState.CONFIGURATION_AWAITING ||
+ getStateAsEnum(appInstance?.state) == AppInstanceState.CONNECTING ||
+ getStateAsEnum(appInstance?.state) == AppInstanceState.REQUESTED ||
+ getStateAsEnum(appInstance?.state) == AppInstanceState.VALIDATION ||
+ getStateAsEnum(appInstance?.state) == AppInstanceState.PREPARATION">
+ <p class="running">{{ translateState(appInstance?.state) }}</p>
+ <p-progressBar class="running" mode="indeterminate" [style]="{'height': '6px'}"></p-progressBar>
+ </div>
+ <div *ngIf="getStateAsEnum(appInstance?.state) == AppInstanceState.RUNNING ">
+ <p class="done">{{ translateState(appInstance?.state) }}</p>
+ <p-progressBar class="done" [value]="100" [style]="{'height': '6px'}"></p-progressBar>
+ </div>
+ <div *ngIf="getStateAsEnum(appInstance?.state) == AppInstanceState.SCALED_DOWN ">
+ <p class="scaledDown">{{ translateState(appInstance?.state) }}</p>
+ <p-progressBar class="scaledDown" [value]="100" [style]="{'height': '6px'}"></p-progressBar>
+ </div>
+ <div *ngIf="getStateAsEnum(appInstance?.state) == AppInstanceState.DONE ||
+ getStateAsEnum(appInstance?.state) == AppInstanceState.REMOVED ">
+ <p class="removed">{{ translateState(appInstance?.state) }}</p>
+ <p-progressBar class="removed" [value]="100" [style]="{'height': '6px'}"></p-progressBar>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
diff --git a/src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.ts b/src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.ts
index 6b92e2be15b18e447a3ec82cce010fc28284471a..088772e3c50d35138a36116547f647084c48ce79 100644
--- a/src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.ts
+++ b/src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.ts
@@ -1,7 +1,7 @@
import {Component, OnInit} from '@angular/core';
import {AppInstance, AppInstanceState, parseAppInstanceState} from '../../../model';
-import {AppConfigService, AppImagesService, AppInstanceService, CustomerSearchCriteria, DomainService} from '../../../service';
+import {AppConfigService, AppImagesService, AppInstanceService, AppsService, CustomerSearchCriteria, DomainService} from '../../../service';
import {AuthService} from '../../../auth/auth.service';
import {UserDataService} from '../../../service/userdata.service';
import {forkJoin, Observable, of} from 'rxjs';
@@ -58,7 +58,7 @@ export class AppInstanceListComponent implements OnInit {
{icon: 'pi pi-list', value: 'list'},
{icon: 'pi pi-th-large', value: 'cards'}
];
- public selectedOption = 'list';
+ public selectedOption = 'cards';
public searchValue = '';
@@ -70,7 +70,8 @@ export class AppInstanceListComponent implements OnInit {
private appConfig: AppConfigService,
private translateService: TranslateService,
private sessionService: SessionService,
- public appImagesService: AppImagesService) {
+ public appImagesService: AppImagesService,
+ private appsService: AppsService) {
}
@@ -161,31 +162,37 @@ export class AppInstanceListComponent implements OnInit {
default:
break;
}
- this.appInstances = this.appInstances
- .pipe(
- map(app => app.filter(
- (appInst) => (this.domainId === this.appConfig.getNmaasGlobalDomainId() || this.domainId === appInst.domainId)
- )
- )
+
+ this.appsService.getAllApplicationBase().subscribe(apps => {
+ const appNameToIdMap: { [name: string]: number } = {};
+ apps.forEach(app => {
+ appNameToIdMap[app.name] = app.id;
+ });
+
+ this.appInstances = this.appInstances.pipe(
+ map(apps => apps.map(appInst => ({
+ ...appInst,
+ appId: appNameToIdMap[appInst.applicationName] || null
+ }))),
+ map(apps => apps.filter(appInst =>
+ this.domainId === this.appConfig.getNmaasGlobalDomainId() || this.domainId === appInst.domainId
+ ))
);
- // sort and filter deployed instances
- this.appDeployedInstances = this.appInstances
- .pipe(
+ // sort and filter deployed instances
+ this.appDeployedInstances = this.appInstances.pipe(
map(instances => instances.filter(
- app => parseAppInstanceState(app.state) !== AppInstanceState.REMOVED
- && parseAppInstanceState(app.state) !== AppInstanceState.DONE
- )
- )
+ app => parseAppInstanceState(app.state) !== AppInstanceState.REMOVED
+ && parseAppInstanceState(app.state) !== AppInstanceState.DONE
+ ))
);
- // sort and filter undeployed instances
- this.appUndeployedInstances = this.appInstances
- .pipe(
+ // sort and filter undeployed instances
+ this.appUndeployedInstances = this.appInstances.pipe(
map(instances => instances.filter(
- app => parseAppInstanceState(app.state) === AppInstanceState.REMOVED
- || parseAppInstanceState(app.state) === AppInstanceState.DONE
- )
- )
+ app => parseAppInstanceState(app.state) === AppInstanceState.REMOVED
+ || parseAppInstanceState(app.state) === AppInstanceState.DONE
+ ))
);
+ });
}
diff --git a/src/app/shared/admin-dashboard/admin-dashboard.component.html b/src/app/shared/admin-dashboard/admin-dashboard.component.html
index 2d407f14fd9629842f11a813204f7583c7c123aa..cd5691720688c9c9d9c4088d0af7d01d0bedf457 100644
--- a/src/app/shared/admin-dashboard/admin-dashboard.component.html
+++ b/src/app/shared/admin-dashboard/admin-dashboard.component.html
@@ -113,8 +113,9 @@
</tr>
</ng-template>
<ng-template pTemplate="body" let-app>
- <tr>
- <td><img style="width: 40px" [src]="(appImagesService.getAppLogoUrl(app.appId) | secure) || '../../../assets/images/app-logo-example.png'"/></td>
+ <tr [ngClass]="{'clickable': !userHasGuestRoleInCurrentDomain()}"
+ [routerLink]="userHasGuestRoleInCurrentDomain() ? [] : ['/instances',app.appId]">
+ <td><img style="width: 40px" [src]="(appImagesService.getAppLogoUrl(app.logoId) | secure) || '../../../assets/images/app-logo-example.png'"/></td>
<td>{{app.appName}}</td>
<td>{{app.appId}}</td>
<td>{{app.instanceName}}</td>
@@ -126,3 +127,9 @@
</div>
</div>
</div>
+<div *roles="['ROLE_OPERATOR']">
+ <div class="background-section" style="flex: 1 1 30%; margin-right: 20px">
+ <h5 style="font-weight: bold">Current number of domains </h5>
+ <h1 style="font-weight: bold">TEST</h1>
+ </div>
+</div>
diff --git a/src/app/shared/admin-dashboard/admin-dashboard.component.ts b/src/app/shared/admin-dashboard/admin-dashboard.component.ts
index beb225db5ca8e5f663b6bf87e3544b09c30b8824..e8fb0a42bde0217fa46a04265d795bda4db1b180 100644
--- a/src/app/shared/admin-dashboard/admin-dashboard.component.ts
+++ b/src/app/shared/admin-dashboard/admin-dashboard.component.ts
@@ -20,7 +20,6 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
applicationUpgradeStatus: any[] = [];
domainId;
public appId: number;
- appNameToIdMap: { [key: string]: number } = {};
rangeDates: Date[] = [];
startDate;
@@ -116,15 +115,16 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
}
getAdmin() {
this.appsService.getAllApplicationBase().subscribe(apps => {
+ const appNameToAppIdMap: { [name: string]: number } = {};
apps.forEach(app => {
- this.appNameToIdMap[app.name] = app.id;
+ appNameToAppIdMap[app.name] = app.id;
});
this.dashboardService.getAdmin(this.startDate, this.endDate).subscribe(
(response) => {
this.adminData = response;
this.instanceCountInPeriodDetails = this.adminData.instanceCountInPeriodDetails.map(instance => ({
...instance,
- appId: this.appNameToIdMap[instance.applicationName] || null
+ appId: appNameToAppIdMap[instance.applicationName] || null
}));
this.chartData();
}
@@ -132,12 +132,21 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
});
}
getDomainAdmin() {
- this.dashboardService.getDomainAdmin(this.domainId).subscribe(
- (response) => {
- this.domainAdminData = response;
- this.applicationUpgradeStatus = this.domainAdminData.applicationUpgradeStatus;
- }
- )
+ this.appsService.getAllApplicationBase().subscribe(apps => {
+ const appNameToAppIdMap: { [name: string]: number } = {};
+ apps.forEach(app => {
+ appNameToAppIdMap[app.name] = app.id;
+ });
+ this.dashboardService.getDomainAdmin(this.domainId).subscribe(
+ (response) => {
+ this.domainAdminData = response;
+ this.applicationUpgradeStatus = this.domainAdminData.applicationUpgradeStatus.map(inst => ({
+ ...inst,
+ logoId: appNameToAppIdMap[inst.appName] || null
+ }));
+ }
+ )
+ })
}
onDateChange(dates: Date[] | null) {
if (!dates || dates.length === 0 ) {
diff --git a/src/app/shared/left-menu/left-menu.component.html b/src/app/shared/left-menu/left-menu.component.html
index 3fa8b1fc8203bd44b2d999bed760e6ca8a3ee026..75168ba2a4fc7f91f258711e1b8b21689a88d3e6 100644
--- a/src/app/shared/left-menu/left-menu.component.html
+++ b/src/app/shared/left-menu/left-menu.component.html
@@ -165,7 +165,7 @@
{{userName}}
</span>
</p-button>
- <div *roles="['ROLE_DOMAIN_ADMIN', 'ROLE_SYSTEM_ADMIN']" style="margin-top:10px" [routerLink]="['admin/dashboard']">
+ <div *roles="['ROLE_DOMAIN_ADMIN', 'ROLE_SYSTEM_ADMIN', 'ROLE_OPERATOR']" style="margin-top:10px" [routerLink]="['admin/dashboard']">
<p-button *ngIf="!toggleAdmin" (onClick)="adminPanel()" ><i class="pi pi-sign-in" style="margin-right:10px; font-size: 18px"[ngClass]="{'collapsed': isCollapsed}" title=" Go to admin panel"></i>
<span *ngIf="!isCollapsed">
Admin panel
diff --git a/src/app/shared/users/access-token/access-tokens.component.html b/src/app/shared/users/access-token/access-tokens.component.html
index 81bd13e6bfcca04309f38b2a289c687c08046962..1a1261e8759a5fac09d5fd8acd3c3e65c2fea9a1 100644
--- a/src/app/shared/users/access-token/access-tokens.component.html
+++ b/src/app/shared/users/access-token/access-tokens.component.html
@@ -74,7 +74,7 @@
<button class="btn btn-secondary" type="button" (click)="copyToClipboard()">{{"TOKENS.MODAL.COPY" | translate}}</button>
</p-inputGroup>
</div>
- <div class="mt-6 flex ">
+ <div class="mt-6 flex justify-content-end">
<button class="btn btn-primary" type="button" (click)="ConfirmAndClose()" >{{"TOKENS.MODAL.TOKEN_SAVED" | translate}}</button>
</div>
</div>
diff --git a/src/app/welcome/link-account/link-account.component.html b/src/app/welcome/link-account/link-account.component.html
index 2d75205238a0c5f83811c5aa3ebcb229b4d79d89..291419594855ba55f897106976ee3b7f07d613a1 100644
--- a/src/app/welcome/link-account/link-account.component.html
+++ b/src/app/welcome/link-account/link-account.component.html
@@ -1,9 +1,6 @@
-<div style="display: flex; justify-content: center;">
- <div style="
-margin-top: 50px;
- width: 60%
-" class="panel panel-default">
- <div class="panel-heading">{{ 'ACCOUNT_LINKING.HEADER' | translate }}</div>
+<div style="margin: auto; width: 70%;">
+ <div class="background-section">
+ <h4 style="font-size: 15px; font-weight: bold;">{{ 'ACCOUNT_LINKING.HEADER' | translate }}</h4>
<div class="panel-body">
<form *ngIf="user"
class="form-horizontal" #userDetailsForm="ngForm">
@@ -40,12 +37,14 @@ margin-top: 50px;
name="password" [(ngModel)]="password">
</div>
</div>
- <button type="submit" class="btn btn-primary"
- (click)="submit()">{{ 'ACCOUNT_LINKING.CONFIRM' | translate }}
- </button>
+ <div class="flex justify-content-end" style="margin-top:25px">
+ <button type="submit" class="btn btn-primary"
+ (click)="submit()">{{ 'ACCOUNT_LINKING.CONFIRM' | translate }}
+ </button>
+ </div>
+
<div *ngIf="error" class="alert alert-danger" style="margin-top: 20px">{{error}}</div>
</form>
- <br>
</div>
</div>
</div>