SDNR Add missing status bar to ODLUX Framework

Modify framework and adapt all apps

Issue-ID: SDNC-789
Signed-off-by: Herbert Eiselt <herbert.eiselt@highstreet-technologies.com>
Change-Id: I1ea0a3df6c3f6db08f2bd7a21eb3b4cbf230a08a
Signed-off-by: Herbert Eiselt <herbert.eiselt@highstreet-technologies.com>

9 files changed, 38 insertions, 26 deletions

diff --git a/sdnr/wt/odlux/framework/pom.xml b/sdnr/wt/odlux/framework/pom.xml
index 2b648e273..1ffdd397c 100644
--- a/sdnr/wt/odlux/framework/pom.xml
+++ b/sdnr/wt/odlux/framework/pom.xml
@@ -16,7 +16,7 @@
 	<properties>
 		<buildtime>${maven.build.timestamp}</buildtime>
 		<distversion>ONAP Dublin (Flourine-SR2)</distversion>
-		<buildno>8.c7848df(19/04/03)</buildno>
+		<buildno>9.ac4a3af(19/06/06)</buildno>
 		<odlux.version>ONAP SDN-R | ONF Wireless for ${distversion} - Build: ${buildtime} ${buildno} ${project.version}</odlux.version>
 	</properties>
 	<licenses>
diff --git a/sdnr/wt/odlux/framework/src/actions/titleActions.ts b/sdnr/wt/odlux/framework/src/actions/titleActions.ts
index b641bab95..4e5174d59 100644
--- a/sdnr/wt/odlux/framework/src/actions/titleActions.ts
+++ b/sdnr/wt/odlux/framework/src/actions/titleActions.ts
@@ -1,10 +1,10 @@
 import { Action } from '../flux/action';
 
-import { IconType } from '../models/iconDefinition'; 
+import { IconType } from '../models/iconDefinition';
 
 export class SetTitleAction extends Action {
- 
-  constructor(public title: string, public icon?: IconType) {
+
+  constructor(public title: string, public icon?: IconType, public appId?: string) {
     super();
   }
 }
\ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/components/routing/appFrame.tsx b/sdnr/wt/odlux/framework/src/components/routing/appFrame.tsx
index 55b249246..06ad5b434 100644
--- a/sdnr/wt/odlux/framework/src/components/routing/appFrame.tsx
+++ b/sdnr/wt/odlux/framework/src/components/routing/appFrame.tsx
@@ -5,29 +5,30 @@ import connect, { Connect } from '../../flux/connect';
 import { SetTitleAction } from '../../actions/titleActions';

 import { AddErrorInfoAction } from '../../actions/errorActions';

 

-import { IconType } from '../../models/iconDefinition'; 

+import { IconType } from '../../models/iconDefinition';

 

 export interface IAppFrameProps  {

   title: string;

   icon?: IconType;

+  appId?: string

 }

 

-/** 

- * Represents a component to wich will embed each single app providing the 

+/**

+ * Represents a component to wich will embed each single app providing the

  * functionality to update the title and implement an exeprion border.

  */

 export class AppFrame extends React.Component<IAppFrameProps & Connect> {

-  

+

   public render(): JSX.Element {

     return (

-      <div style={{ flex: "1", overflow: "auto", display: "flex", flexDirection: "column" }}> 

+      <div style={{ flex: "1", overflow: "auto", display: "flex", flexDirection: "column" }}>

         { this.props.children }

       </div>

      )

     }

-    

+

   public componentDidMount() {

-    this.props.dispatch(new SetTitleAction(this.props.title, this.props.icon));

+    this.props.dispatch(new SetTitleAction(this.props.title, this.props.icon, this.props.appId));

   }

   public componentDidCatch(error: Error | null, info: object) {

     this.props.dispatch(new AddErrorInfoAction({ error, info }));

diff --git a/sdnr/wt/odlux/framework/src/components/titleBar.tsx b/sdnr/wt/odlux/framework/src/components/titleBar.tsx
index a3ba571ec..230dda400 100644
--- a/sdnr/wt/odlux/framework/src/components/titleBar.tsx
+++ b/sdnr/wt/odlux/framework/src/components/titleBar.tsx
@@ -69,12 +69,18 @@ class TitleBarComponent extends React.Component<TitleBarProps, { anchorEl: HTMLE
             <MenuIcon />

           </IconButton>

           <Logo />

-          <Typography variant="title" color="inherit" className={ classes.grow }>

+          <Typography variant="title" color="inherit" >

             { state.framework.applicationState.icon

               ? (<FontAwesomeIcon className={ classes.icon } icon={ state.framework.applicationState.icon } />)

               : null }

             { state.framework.applicationState.title }

           </Typography>

+          <div className={classes.grow}></div>

+          { state.framework.applicationRegistraion && Object.keys(state.framework.applicationRegistraion).map(key => {

+            const reg = state.framework.applicationRegistraion[key];

+            return reg && reg.statusBarElement && <reg.statusBarElement key={key} /> || null

+          })}

+

           { state.framework.authenticationState.user

             ? (<div>

               <Button

diff --git a/sdnr/wt/odlux/framework/src/handlers/applicationStateHandler.ts b/sdnr/wt/odlux/framework/src/handlers/applicationStateHandler.ts
index 2a952b61e..bfb11c770 100644
--- a/sdnr/wt/odlux/framework/src/handlers/applicationStateHandler.ts
+++ b/sdnr/wt/odlux/framework/src/handlers/applicationStateHandler.ts
@@ -11,20 +11,22 @@ import { SnackbarItem } from '../models/snackbarItem';
 
 export interface IApplicationState {
   title: string;
-  icon?: IconType; 
+  appId?: string;
+  icon?: IconType;
 
   errors: ErrorInfo[];
   snackBars: SnackbarItem[];
 }
 
-const applicationStateInit: IApplicationState = { title: "Loading ...", errors: [], snackBars:[] };
+const applicationStateInit: IApplicationState = { title: "Loading ...",  errors: [], snackBars:[] };
 
 export const applicationStateHandler: IActionHandler<IApplicationState> = (state = applicationStateInit, action) => {
   if (action instanceof SetTitleAction) {
     state = {
       ...state,
       title: action.title,
-      icon: action.icon
+      icon: action.icon,
+      appId: action.appId
     };
   } else if (action instanceof AddErrorInfoAction) {
     state = {
diff --git a/sdnr/wt/odlux/framework/src/models/applicationInfo.ts b/sdnr/wt/odlux/framework/src/models/applicationInfo.ts
index d2076591e..1a1173ca5 100644
--- a/sdnr/wt/odlux/framework/src/models/applicationInfo.ts
+++ b/sdnr/wt/odlux/framework/src/models/applicationInfo.ts
@@ -17,15 +17,19 @@ export class ApplicationInfo {
   /** The root component of the application. */
   rootComponent: ComponentType;
   /** Optional: The root action handler of the application. */
-  rootActionHandler?: IActionHandler<{ [key: string]: any }>; 
+  rootActionHandler?: IActionHandler<{ [key: string]: any }>;
   /** Optional: Application speciffic middlewares. */
-  middlewares?: Middleware<{ [key: string]: any }>[]; 
+  middlewares?: Middleware<{ [key: string]: any }>[];
   /** Optional: A mapping object with the exported components. */
   exportedComponents?: { [key: string]: ComponentType }
   /** Optional: The entry to be shown in the menu. If undefiened the name will be used. */
   menuEntry?: string | React.ComponentType;
   /** Optional: A component to be shown in the menu when this app is active below the main entry. If undefiened the name will be used. */
   subMenuEntry?: React.ComponentType;
+  /** Optional: A component to be shown in the applications status bar. If undefiened the name will be used. */
+  statusBarElement?: React.ComponentType;
+  /** Optional: A component to be shown in the dashboardview. If undefiened the name will be used. */
+  dashbaordElement?: React.ComponentType;
   /** Optional: The pasth for this application. If undefined the name will be use as path. */
   path?: string;
 }
diff --git a/sdnr/wt/odlux/framework/src/services/restService.ts b/sdnr/wt/odlux/framework/src/services/restService.ts
index cfa8ec159..f65d9c62c 100644
--- a/sdnr/wt/odlux/framework/src/services/restService.ts
+++ b/sdnr/wt/odlux/framework/src/services/restService.ts
@@ -13,9 +13,9 @@ export const formEncode = (params: { [key: string]: string | number }) => Object
   return encodeURIComponent(key) + '=' + encodeURIComponent(params[key].toString());
 }).join('&');
 
-export async function requestRest<TData>(path: string = '', init: RequestInit = {}, authenticate: boolean = true):  Promise<TData|false|null> {
+export async function requestRest<TData>(path: string = '', init: RequestInit = {}, authenticate: boolean = true, isResource: boolean = false): Promise<TData | false | null> {
   const isAbsUrl = absUrlPattern.test(path);
-  const uri = isAbsUrl ? path : (baseUri) + ('/' + path).replace(/\/{2,}/i, '/');
+  const uri = isAbsUrl ? path : isResource ? path.replace(/\/{2,}/i, '/') : (baseUri) + ('/' + path).replace(/\/{2,}/i, '/');
   init.headers = {
     'method': 'GET',
     'Content-Type': 'application/json',
diff --git a/sdnr/wt/odlux/framework/src/utilities/elasticSearch.ts b/sdnr/wt/odlux/framework/src/utilities/elasticSearch.ts
index bbf907c80..287835b55 100644
--- a/sdnr/wt/odlux/framework/src/utilities/elasticSearch.ts
+++ b/sdnr/wt/odlux/framework/src/utilities/elasticSearch.ts
@@ -6,13 +6,12 @@ import { requestRest } from '../services/restService';
 
 type propType = string | number | null | undefined | (string | number)[];
 type dataType = { [prop: string]: propType };
-type resultType<TData = dataType> = { page: number, rowCount: number, rows: TData[] };
 
-export function createSearchDataHandler<TResult extends {} = dataType>(uri: string, additionalParameters?: {}): DataCallback<(TResult & { _id: string })>;
-export function createSearchDataHandler<TResult extends {} = dataType, TData = dataType>(uri: string, additionalParameters: {} | null | undefined, mapResult: (res: HitEntry<TResult>, index: number, arr: HitEntry<TResult>[]) => (TData & { _id: string }), mapRequest?: (name?: string | null) => string): DataCallback<(TData & { _id: string })>
-export function createSearchDataHandler<TResult, TData>(uri: string, additionalParameters?: {} | null | undefined, mapResult?: (res: HitEntry<TResult>, index: number, arr: HitEntry<TResult>[]) => (TData & { _id: string }), mapRequest?: (name?: string | null) => string): DataCallback<(TData & { _id: string })> {
-  const url = `${ window.location.origin }/database/${uri}/_search`;
-  const fetchData: DataCallback<(TData & { _id: string }) > = async (page, rowsPerPage, orderBy, order, filter) => {
+export function createSearchDataHandler<TResult extends {} = dataType>(uri: (() => string) | string, additionalParameters?: {}): DataCallback<(TResult & { _id: string })>;
+export function createSearchDataHandler<TResult extends {} = dataType, TData = dataType>(uri: (() => string) | string, additionalParameters: {} | null | undefined, mapResult: (res: HitEntry<TResult>, index: number, arr: HitEntry<TResult>[]) => (TData & { _id: string }), mapRequest?: (name?: string | null) => string): DataCallback<(TData & { _id: string })>
+export function createSearchDataHandler<TResult, TData>(uri: (() => string) | string, additionalParameters?: {} | null | undefined, mapResult?: (res: HitEntry<TResult>, index: number, arr: HitEntry<TResult>[]) => (TData & { _id: string }), mapRequest?: (name?: string | null) => string): DataCallback<(TData & { _id: string })> {
+  const url = `${ window.location.origin }/database/${typeof uri === "function" ? uri(): uri}/_search`;
+  const fetchData: DataCallback<(TData & { _id: string })> = async (page, rowsPerPage, orderBy, order, filter) => {
     const from = rowsPerPage && page != null && !isNaN(+page)
       ? (+page) * rowsPerPage
       : null;
diff --git a/sdnr/wt/odlux/framework/src/views/frame.tsx b/sdnr/wt/odlux/framework/src/views/frame.tsx
index 69b981bb3..12a9c8a90 100644
--- a/sdnr/wt/odlux/framework/src/views/frame.tsx
+++ b/sdnr/wt/odlux/framework/src/views/frame.tsx
@@ -74,7 +74,7 @@ export const Frame = withStyles(styles)(({ classes }: WithStyles<typeof styles>)
               { Object.keys(registrations).map(p => {

                 const application = registrations[p];

                 return (<Route key={ application.name } path={ application.path || `/${ application.name }` } component={ () => (

-                  <AppFrame title={ application.title || (typeof application.menuEntry === 'string' && application.menuEntry) || application.name } icon={ application.icon } >

+                  <AppFrame title={ application.title || (typeof application.menuEntry === 'string' && application.menuEntry) || application.name } icon={ application.icon } appId={application.name} >

                     <application.rootComponent />

                   </AppFrame>

                 ) } />)