Skip to content
Snippets Groups Projects
Commit f3844002 authored by Lukasz Lopatowski's avatar Lukasz Lopatowski
Browse files

Merge branch '272-improve-new-layout' into 'develop' 

instances card view, dashboard

See merge request !225
parents 031a3033 5bcdb8af
No related branches found
No related tags found
1 merge request!225instances card view, dashboard
Hide whitespace changes
Inline Side-by-side
Showing
with 146 additions and 60 deletions
src/app/appmarket/appdetails/appdetails.component.html
+ 1
− 1
View file @ f3844002
......@@ -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>
......
src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.css
+ 14
− 0
View file @ f3844002
......@@ -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;
}
......
src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.html
+ 63
− 13
View file @ f3844002
......@@ -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>
src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.ts
+ 30
− 23
View file @ f3844002
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
))
);
});
}
......
src/app/shared/admin-dashboard/admin-dashboard.component.html
+ 9
− 2
View file @ f3844002
......@@ -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>
src/app/shared/admin-dashboard/admin-dashboard.component.ts
+ 18
− 9
View file @ f3844002
......@@ -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 ) {
......
src/app/shared/left-menu/left-menu.component.html
+ 1
− 1
View file @ f3844002
......@@ -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
......
src/app/shared/users/access-token/access-tokens.component.html
+ 1
− 1
View file @ f3844002
......@@ -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>
......
src/app/welcome/link-account/link-account.component.html
+ 9
− 10
View file @ f3844002
<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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment