/*-
* ========================LICENSE_START=================================
- * ORAN-OSC
+ * O-RAN-SC
* %%
- * Copyright (C) 2019 AT&T Intellectual Property and Nokia
+ * Copyright (C) 2019 AT&T Intellectual Property
* %%
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* limitations under the License.
* ========================LICENSE_END===================================
*/
-import { Component } from '@angular/core';
-import { LocalDataSource } from 'ng2-smart-table';
-import { CatalogService } from '../services/catalog/catalog.service';
+import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSort } from '@angular/material/sort';
+import { Subscription } from 'rxjs';
+import { finalize } from 'rxjs/operators';
+import { XMDeployableApp } from '../interfaces/app-mgr.types';
+import { AppMgrService } from '../services/app-mgr/app-mgr.service';
+import { InstanceSelectorService } from '../services/instance-selector/instance-selector.service';
+import { LoadingDialogService } from '../services/ui/loading-dialog.service';
+import { UiService } from '../services/ui/ui.service';
+import { AppConfigurationComponent } from './../app-configuration/app-configuration.component';
+import { ConfirmDialogService } from './../services/ui/confirm-dialog.service';
+import { NotificationService } from './../services/ui/notification.service';
+import { CatalogDataSource } from './catalog.datasource';
@Component({
- selector: 'app-catalog',
+ selector: 'rd-app-catalog',
templateUrl: './catalog.component.html',
- styleUrls: ['./catalog.component.css']
+ styleUrls: ['./catalog.component.scss'],
})
-export class CatalogComponent {
+export class CatalogComponent implements OnInit, OnDestroy {
- settings = {
- hideSubHeader: true,
- actions: {
- columnTitle: 'Actions',
- add: false,
- edit: false,
- delete: false,
- custom: [
- { name: 'deployxApp', title: 'Deploy'},
- ],
- position: 'right'
+ darkMode: boolean;
+ panelClass: string;
+ displayedColumns: string[] = ['name', 'version', 'action'];
+ dataSource: CatalogDataSource;
+ private instanceChange: Subscription;
+ private instanceKey: string;
- },
- columns: {
- name: {
- title: 'xApp Name',
- type: 'string',
- },
- version: {
- title: 'xApp Version',
- type: 'string',
- },
- status: {
- title: 'Status',
- type: 'string',
- },
- },
- };
+ @ViewChild(MatSort, { static: true }) sort: MatSort;
+
+ constructor(
+ private appMgrService: AppMgrService,
+ private confirmDialogService: ConfirmDialogService,
+ private dialog: MatDialog,
+ private loadingDialogService: LoadingDialogService,
+ private notificationService: NotificationService,
+ public instanceSelectorService: InstanceSelectorService,
+ public ui: UiService) { }
+
+ ngOnInit() {
+ this.dataSource = new CatalogDataSource(this.appMgrService, this.sort, this.notificationService);
+ this.ui.darkModeState.subscribe((isDark) => {
+ this.darkMode = isDark;
+ });
- source: LocalDataSource = new LocalDataSource();
+ this.instanceChange = this.instanceSelectorService.getSelectedInstancekey().subscribe((instanceKey: string) => {
+ if (instanceKey) {
+ this.instanceKey = instanceKey;
+ this.dataSource.loadTable(instanceKey);
+ }
+ });
+ }
- constructor(private service: CatalogService) {
- this.service.getAll().subscribe((val:any[]) => this.source.load(val));
+ ngOnDestroy() {
+ this.instanceChange.unsubscribe();
}
- onDeployxApp(event): void {
- if (window.confirm('Are you sure you want to deploy?')) {
- event.confirm.resolve();
+ onConfigureApp(xapp: XMDeployableApp): void {
+ if (this.darkMode) {
+ this.panelClass = 'dark-theme';
} else {
- event.confirm.reject();
+ this.panelClass = '';
}
+ const dialogRef = this.dialog.open(AppConfigurationComponent, {
+ panelClass: this.panelClass,
+ width: '40%',
+ maxHeight: '500px',
+ position: {
+ top: '10%'
+ },
+ data: {
+ xapp: xapp,
+ instanceKey: this.instanceKey
+ }
+
+ });
+ }
+
+ onDeployApp(app: XMDeployableApp): void {
+ this.confirmDialogService.openConfirmDialog('Deploy application ' + app.name + '?')
+ .afterClosed().subscribe((res: boolean) => {
+ if (res) {
+ this.loadingDialogService.startLoading('Deploying ' + app.name);
+ this.appMgrService.deployXapp(this.instanceKey, app.name)
+ .pipe(
+ finalize(() => this.loadingDialogService.stopLoading())
+ )
+ .subscribe(
+ (response: HttpResponse<Object>) => {
+ this.notificationService.success('App deploy succeeded!');
+ },
+ ((her: HttpErrorResponse) => {
+ // the error field should have an ErrorTransport object
+ let msg = her.message;
+ if (her.error && her.error.message) {
+ msg = her.error.message;
+ }
+ this.notificationService.warn('App deploy failed: ' + msg);
+ })
+ );
+ }
+ }
+ );
}
}