From 7446f23b3abc30d7c53f2eaa951742371c071171 Mon Sep 17 00:00:00 2001 From: Herbert Eiselt Date: Thu, 28 Feb 2019 15:23:42 +0100 Subject: UX extensions UX Maintenance client and further changes Change-Id: I7643661d17db5fc3d3f94b58cb42ed0be558c64f Issue-ID: SDNC-583 Signed-off-by: Herbert Eiselt --- .../src/actions/mountedNetworkElementsActions.ts | 47 ++++++++++++++-------- .../src/actions/requiredNetworkElementsActions.ts | 4 +- .../src/components/editNetworkElementDialog.tsx | 13 +++--- .../src/components/requiredNetworkElements.tsx | 3 +- .../src/components/unknownNetworkElements.tsx | 12 +++--- .../src/handlers/connectAppRootHandler.tsx | 1 - .../src/handlers/mountedNetworkElementsHandler.tsx | 27 +++++++++---- sdnr/wt/odlux/apps/connectApp/src/index.html | 4 +- sdnr/wt/odlux/apps/connectApp/src/plugin.tsx | 13 ++++-- .../apps/connectApp/src/services/connectService.ts | 23 ++++------- 10 files changed, 85 insertions(+), 62 deletions(-) (limited to 'sdnr/wt/odlux/apps/connectApp/src') diff --git a/sdnr/wt/odlux/apps/connectApp/src/actions/mountedNetworkElementsActions.ts b/sdnr/wt/odlux/apps/connectApp/src/actions/mountedNetworkElementsActions.ts index e342f6314..1cf528aa7 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/actions/mountedNetworkElementsActions.ts +++ b/sdnr/wt/odlux/apps/connectApp/src/actions/mountedNetworkElementsActions.ts @@ -21,7 +21,7 @@ export class AllMountedNetworkElementsLoadedAction extends BaseAction { } /** Represents an action causing the store to update all mounted network elements. */ -export class AddMountedNetworkElement extends BaseAction { +export class AddOrUpdateMountedNetworkElement extends BaseAction { constructor(public mountedNetworkElement: MountedNetworkElementType | null, public error?: string) { super(); } @@ -47,43 +47,58 @@ export class UpdateRequiredMountedNetworkElement extends BaseAction { } /** - * An actioncrator for a async thunk action to add an allready mounted element to the state of this app. - * Note: Use this action to add created object notified by the websocket. + * Represents an action crator for a async thunk action to add an allready mounted element to the state of this app. + * Note: Use this action to add created object notified by the websocket. */ export const addMountedNetworkElementAsyncActionCreator = (mountId: string) => async (dispatch: Dispatch) => { - connectService.getMountedNetworkElementByMountId(mountId).then(mountedNetworkElement => { - mountedNetworkElement && dispatch(new AddMountedNetworkElement(mountedNetworkElement)); + return connectService.getMountedNetworkElementByMountId(mountId).then(mountedNetworkElement => { + mountedNetworkElement && dispatch(new AddOrUpdateMountedNetworkElement(mountedNetworkElement)); }).catch(error => { - dispatch(new AddMountedNetworkElement(null, error)); + dispatch(new AddOrUpdateMountedNetworkElement(null, error)); + }); +}; + +export const updateMountedNetworkElementAsyncActionCreator = (mountId: string) => async (dispatch: Dispatch) => { + return connectService.getMountedNetworkElementByMountId(mountId).then(mountedNetworkElement => { + if (mountedNetworkElement) { + dispatch(new AddOrUpdateMountedNetworkElement(mountedNetworkElement)); + } else { + dispatch(new RemoveMountedNetworkElement(mountId)); + } + }).catch(error => { + dispatch(new AddOrUpdateMountedNetworkElement(null, error)); }); }; /** Represents an async thunk action to load all mounted network elements. */ export const loadAllMountedNetworkElementsAsync = (dispatch: Dispatch) => { dispatch(new LoadAllMountedNetworkElementsAction()); - connectService.getMountedNetworkElementsList().then(mountedNetworkElements => { + return connectService.getMountedNetworkElementsList().then(mountedNetworkElements => { mountedNetworkElements && dispatch(new AllMountedNetworkElementsLoadedAction(mountedNetworkElements)); }).catch(error => { dispatch(new AllMountedNetworkElementsLoadedAction(null, error)); }); }; -/** Represents an async thunk action to load all mounted network elements. */ -export const mountNetworkElementActionCreatorAsync = (networkElement: RequiredNetworkElementType) => (dispatch: Dispatch) => { - connectService.mountNetworkElement(networkElement).then((success) => { - success && dispatch(new AddSnackbarNotification({ message: `Requesting mount [${ networkElement.mountId }]`, options: { variant: 'info' } })) - || dispatch(new AddSnackbarNotification({ message: `Failed to mount [${ networkElement.mountId }]`, options: { variant: 'warning' } })); +/** Represents an action crator for a async thunk action to mount a network element. */ +export const mountNetworkElementAsyncActionCreator = (networkElement: RequiredNetworkElementType) => (dispatch: Dispatch) => { + return connectService.mountNetworkElement(networkElement).then((success) => { + success && ( + dispatch(addMountedNetworkElementAsyncActionCreator(networkElement.mountId)) && + dispatch(new AddSnackbarNotification({ message: `Requesting mount [${networkElement.mountId}]`, options: { variant: 'info' } })) + ) || dispatch(new AddSnackbarNotification({ message: `Failed to mount [${ networkElement.mountId }]`, options: { variant: 'warning' } })); }).catch(error => { - dispatch(new AddMountedNetworkElement(null, error)); + dispatch(new AddOrUpdateMountedNetworkElement(null, error)); }); }; -export const unmountNetworkElementActionCreatorAsync = (mountId: string) => (dispatch: Dispatch) => { - connectService.unmountNetworkElement(mountId).then((success) => { +/** Represents an action crator for a async thunk action to unmount a network element. */ +export const unmountNetworkElementAsyncActionCreator = (mountId: string) => (dispatch: Dispatch) => { + return connectService.unmountNetworkElement(mountId).then((success) => { success && dispatch(new AddSnackbarNotification({ message: `Requesting unmount [${ mountId }]`, options: { variant: 'info' } })) || dispatch(new AddSnackbarNotification({ message: `Failed to unmount [${ mountId }]`, options: { variant: 'warning' } })); }).catch(error => { - dispatch(new AddMountedNetworkElement(null, error)); + dispatch(new AddOrUpdateMountedNetworkElement(null, error)); }); }; diff --git a/sdnr/wt/odlux/apps/connectApp/src/actions/requiredNetworkElementsActions.ts b/sdnr/wt/odlux/apps/connectApp/src/actions/requiredNetworkElementsActions.ts index 979321957..387ab8f54 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/actions/requiredNetworkElementsActions.ts +++ b/sdnr/wt/odlux/apps/connectApp/src/actions/requiredNetworkElementsActions.ts @@ -12,7 +12,7 @@ import { connectService } from '../services/connectService'; export class BaseAction extends Action { } -/** Represents an async thunk action that will add an element to the required network elements. */ +/** Represents an async thunk action creator to add an element to the required network elements. */ export const addToRequiredNetworkElementsAsyncActionCreator = (element: RequiredNetworkElementType) => (dispatch: Dispatch) => { connectService.insertRequiredNetworkElement(element).then(_ => { window.setTimeout(() => { @@ -23,7 +23,7 @@ export const addToRequiredNetworkElementsAsyncActionCreator = (element: Required }); }; -/** Represents an async thunk action that will delete an element from the required network elements. */ +/** Represents an async thunk action creator to delete an element from the required network elements. */ export const removeFromRequiredNetworkElementsAsyncActionCreator = (element: RequiredNetworkElementType) => (dispatch: Dispatch) => { connectService.deleteRequiredNetworkElement(element).then(_ => { window.setTimeout(() => { diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx index ee876e854..c2db266d1 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx @@ -15,8 +15,9 @@ import { removeFromRequiredNetworkElementsAsyncActionCreator } from '../actions/requiredNetworkElementsActions'; +import { unmountNetworkElementAsyncActionCreator, mountNetworkElementAsyncActionCreator } from '../actions/mountedNetworkElementsActions'; import { RequiredNetworkElementType } from '../models/requiredNetworkElements'; -import { unmountNetworkElementActionCreatorAsync, mountNetworkElementActionCreatorAsync } from '../actions/mountedNetworkElementsActions'; + export enum EditNetworkElementDialogMode { None = "none", UnknownNetworkElementToRequiredNetworkElements = "unknownNetworkElementToRequiredNetworkElements", @@ -35,14 +36,14 @@ const mapDispatch = (dispatcher: IDispatcher) => ({ dispatcher.dispatch(removeFromRequiredNetworkElementsAsyncActionCreator(element)); }, mountNetworkElement: (element: RequiredNetworkElementType) => { - dispatcher.dispatch(mountNetworkElementActionCreatorAsync(element)); + dispatcher.dispatch(mountNetworkElementAsyncActionCreator(element)); }, mountAndRquireNetworkElement: (element: RequiredNetworkElementType) => { dispatcher.dispatch(addToRequiredNetworkElementsAsyncActionCreator(element)); - dispatcher.dispatch(mountNetworkElementActionCreatorAsync(element)); + dispatcher.dispatch(mountNetworkElementAsyncActionCreator(element)); }, unmountNetworkElement: (element: RequiredNetworkElementType) => { - dispatcher.dispatch(unmountNetworkElementActionCreatorAsync(element && element.mountId)); + dispatcher.dispatch(unmountNetworkElementAsyncActionCreator(element && element.mountId)); } } ); @@ -70,7 +71,7 @@ const settings: { [key: string]: DialogSettings } = { [EditNetworkElementDialogMode.UnknownNetworkElementToRequiredNetworkElements] : { dialogTitle: "Add to required network elements" , dialogDescription: "Create a new NetworkElement in planning database as clone of existing real NetworkElement." , - applyButtonText: "Add to required network elements" , + applyButtonText: "Add to required network elements" , cancelButtonText: "Cancel", enableMountIdEditor: false, enableUsernameEditor: true, @@ -136,7 +137,7 @@ type EditNetworkElementDialogComponentState = RequiredNetworkElementType & { class EditNetworkElementDialogComponent extends React.Component { constructor(props: EditNetworkElementDialogComponentProps) { super(props); - + this.state = { mountId: this.props.initialNetworkElement.mountId, host: this.props.initialNetworkElement.host, diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/requiredNetworkElements.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/requiredNetworkElements.tsx index 13f5fec20..9cbc368cb 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/components/requiredNetworkElements.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/components/requiredNetworkElements.tsx @@ -14,7 +14,6 @@ import { IApplicationStoreState } from '../../../../framework/src/store/applicat import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect'; import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions'; - import { RequiredNetworkElementType } from '../models/requiredNetworkElements'; import { createRequiredNetworkElementsActions, createRequiredNetworkElementsProperties } from '../handlers/requiredNetworkElementsHandler'; @@ -27,7 +26,7 @@ const styles = (theme: Theme) => createStyles({ color: 'darkgreen', }, connectionStatusConnecting: { - color: theme.palette.primary.main, + color: 'blue', }, connectionStatusDisconnected: { color: 'red', diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/unknownNetworkElements.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/unknownNetworkElements.tsx index 432103128..fe2c58ced 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/components/unknownNetworkElements.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/components/unknownNetworkElements.tsx @@ -48,7 +48,7 @@ type UnknownNetworkElementDisplayType = NetworkElementBaseType & { type UnknownNetworkElementsListProps = WithStyles & Connect & {} type UnknownNetworkElementsListState = { - + unknownNetworkElements: UnknownNetworkElementDisplayType[]; networkElementToEdit: RequiredNetworkElementType; @@ -73,7 +73,7 @@ export class UnknownNetworkElementsListComponent extends React.Component !element.required).map(element => { - + // handle onfCoreModelRevision const onfCoreModelRevision = element.capabilities.find((cap) => { return cap.module === 'core-model' || cap.module === 'CoreModel-CoreNetworkModule-ObjectClasses' ; @@ -94,7 +94,7 @@ export class UnknownNetworkElementsListComponent extends React.Component -
@@ -133,14 +132,13 @@ export class UnknownNetworkElementsListComponent extends React.Component
-
) }, ] } idProperty="mountId" > - - el.mountId === (action.mountedNetworkElement && action.mountedNetworkElement.mountId)); + if (index > -1) { + state = { + ...state, + elements: [ + ...state.elements.slice(0, index), + action.mountedNetworkElement, + ...state.elements.slice(index + 1) + ] + } + } else { + state = { + ...state, + elements: [...state.elements, action.mountedNetworkElement], + } + }; } else if (action instanceof RemoveMountedNetworkElement) { state = { ...state, diff --git a/sdnr/wt/odlux/apps/connectApp/src/index.html b/sdnr/wt/odlux/apps/connectApp/src/index.html index c28708a83..0f95005de 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/index.html +++ b/sdnr/wt/odlux/apps/connectApp/src/index.html @@ -6,7 +6,7 @@ - Document + connectApp @@ -18,7 +18,7 @@ require(["app","connectApp", "faultApp"], function (app, connectApp, faultApp) { connectApp.register(); faultApp.register(); - app("./app.tsx") + app("./app.tsx").runApplication(); }); diff --git a/sdnr/wt/odlux/apps/connectApp/src/plugin.tsx b/sdnr/wt/odlux/apps/connectApp/src/plugin.tsx index 4e61c326b..4a02b9f35 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/plugin.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/plugin.tsx @@ -6,7 +6,12 @@ import { subscribe, IFormatedMessage } from '../../../framework/src/services/not import connectAppRootHandler from './handlers/connectAppRootHandler'; import ConnectApplication from './views/connectView'; -import { RemoveMountedNetworkElement, addMountedNetworkElementAsyncActionCreator } from './actions/mountedNetworkElementsActions' ; + +import { + addMountedNetworkElementAsyncActionCreator, + updateMountedNetworkElementAsyncActionCreator +} from './actions/mountedNetworkElementsActions'; + import { AddSnackbarNotification } from '../../../framework/src/actions/snackbarActions'; type ObjectNotification = { @@ -32,8 +37,8 @@ export function register() { store.dispatch(addMountedNetworkElementAsyncActionCreator(msg.objectId)); store.dispatch(new AddSnackbarNotification({ message: `Adding network element [${ msg.objectId }]`, options: { variant: 'info' } })); } else if (msg && msg.notifType === "ObjectDeletionNotification" && store) { - store.dispatch(new AddSnackbarNotification({ message: `Removing network element [${ msg.objectId }]`, options: { variant: 'info' } })); - store.dispatch(new RemoveMountedNetworkElement(msg.objectId)); + store.dispatch(new AddSnackbarNotification({ message: `Updating network element [${ msg.objectId }]`, options: { variant: 'info' } })); + store.dispatch(updateMountedNetworkElementAsyncActionCreator(msg.objectId)); } })); -} \ No newline at end of file +} \ No newline at end of file diff --git a/sdnr/wt/odlux/apps/connectApp/src/services/connectService.ts b/sdnr/wt/odlux/apps/connectApp/src/services/connectService.ts index 0adcd49c6..91891deb6 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/services/connectService.ts +++ b/sdnr/wt/odlux/apps/connectApp/src/services/connectService.ts @@ -1,6 +1,6 @@ import { RequiredNetworkElementType } from '../models/requiredNetworkElements'; -import { MountedNetworkElementType } from 'models/mountedNetworkElements'; -import { Topology, TopologyNode } from 'models/topologyNetconf'; +import { MountedNetworkElementType } from '../models/mountedNetworkElements'; +import { Topology, TopologyNode } from '../models/topologyNetconf'; import { requestRest } from '../../../../framework/src/services/restService'; import { Result, HitEntry } from '../../../../framework/src/models/elasticSearch'; @@ -40,7 +40,6 @@ class ConnectService { username: result._source.username, password: result._source.password, } || null; - } /** @@ -61,13 +60,9 @@ class ConnectService { return result || null; } - - private static mapTopologyNode = (mountPoint: TopologyNode, required: boolean ) => { // handle onfCapabilities let onfCapabilities: { module: string, revision: string }[] | undefined = undefined; - let onfCoreModelRevision: string[] | undefined = undefined; - let onfAirInterfaceRevision: string[] | undefined = undefined; const capId = 'netconf-node-topology:available-capabilities'; if (mountPoint[capId] && mountPoint[capId]['available-capability']) { @@ -161,17 +156,16 @@ class ConnectService { ''].join(''); try { - const result = await requestRest<{}>(path, { + const result = await requestRest(path, { method: 'PUT', headers: { 'Content-Type': 'application/xml', - 'Accept': 'application/xml', - 'Authorization': 'Basic YWRtaW46YWRtaW4=' + 'Accept': 'application/xml' }, body: mountXml }, true); // expect an empty answer - return result === null; + return result !== null; } catch { return false; } @@ -182,16 +176,15 @@ class ConnectService { const path = 'restconf/config/network-topology:network-topology/topology/topology-netconf/node/' + mountId; try { - const result = await requestRest<{}>(path, { + const result = await requestRest(path, { method: 'DELETE', headers: { 'Content-Type': 'application/xml', - 'Accept': 'application/xml', - 'Authorization': 'Basic YWRtaW46YWRtaW4=' + 'Accept': 'application/xml' }, }, true); // expect an empty answer - return result === null; + return result !== null; } catch { return false; -- cgit 1.2.3-korg