From 15e2d3a29b0d1a304965e34f114a911e5a7abdb3 Mon Sep 17 00:00:00 2001 From: sai-neetha Date: Mon, 20 Mar 2023 08:05:47 +0100 Subject: Odlux Update Add eslint and custom icons update Issue-ID: CCSDK-3871 Signed-off-by: sai-neetha Change-Id: If6b676128cc9cff0437a5dc54f85eaafd3b8c586 Signed-off-by: highstreetherbert --- sdnr/wt/odlux/apps/inventoryApp/pom.xml | 3 +- .../src/actions/inventoryDeviceListActions.ts | 59 +++++++++ .../src/actions/inventoryTreeActions.ts | 33 +++-- .../apps/inventoryApp/src/actions/panelActions.ts | 14 +-- .../src/assets/icons/inventoryAppIcon.svg | 23 ++++ .../src/components/refreshInventoryDialog.tsx | 58 ++++----- .../odlux/apps/inventoryApp/src/fakeData/index.ts | 5 +- .../handlers/connectedNetworkElementsHandler.ts | 36 ------ .../src/handlers/inventoryAppRootHandler.ts | 18 ++- .../handlers/inventoryDeviceListActionHandler.ts | 56 +++++++++ .../src/handlers/inventoryElementsHandler.ts | 4 +- .../src/handlers/inventoryTreeHandler.ts | 14 +-- .../apps/inventoryApp/src/handlers/panelHandler.ts | 16 +-- .../apps/inventoryApp/src/models/inventory.ts | 6 +- .../src/models/inventoryDeviceListType.ts | 25 ++++ .../src/models/networkElementConnection.ts | 6 +- .../odlux/apps/inventoryApp/src/models/panelId.ts | 2 +- .../apps/inventoryApp/src/pluginInventory.tsx | 49 +++----- .../inventoryApp/src/services/inventoryService.ts | 74 +++++++---- .../apps/inventoryApp/src/views/dashboard.tsx | 139 ++++++++++----------- .../odlux/apps/inventoryApp/src/views/detail.tsx | 15 ++- .../odlux/apps/inventoryApp/src/views/treeview.tsx | 63 +++++----- sdnr/wt/odlux/apps/inventoryApp/tsconfig.json | 2 +- sdnr/wt/odlux/apps/inventoryApp/webpack.config.js | 26 ++-- 24 files changed, 433 insertions(+), 313 deletions(-) create mode 100644 sdnr/wt/odlux/apps/inventoryApp/src/actions/inventoryDeviceListActions.ts create mode 100644 sdnr/wt/odlux/apps/inventoryApp/src/assets/icons/inventoryAppIcon.svg delete mode 100644 sdnr/wt/odlux/apps/inventoryApp/src/handlers/connectedNetworkElementsHandler.ts create mode 100644 sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryDeviceListActionHandler.ts create mode 100644 sdnr/wt/odlux/apps/inventoryApp/src/models/inventoryDeviceListType.ts (limited to 'sdnr/wt/odlux/apps/inventoryApp') diff --git a/sdnr/wt/odlux/apps/inventoryApp/pom.xml b/sdnr/wt/odlux/apps/inventoryApp/pom.xml index e39e26744..c6ec595c0 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/pom.xml +++ b/sdnr/wt/odlux/apps/inventoryApp/pom.xml @@ -19,6 +19,7 @@ ~ ============LICENSE_END======================================================= ~ --> + 4.0.0 @@ -139,7 +140,7 @@ initialize - v12.13.0 + v12.22.0 v1.22.10 diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/actions/inventoryDeviceListActions.ts b/sdnr/wt/odlux/apps/inventoryApp/src/actions/inventoryDeviceListActions.ts new file mode 100644 index 000000000..710959a2a --- /dev/null +++ b/sdnr/wt/odlux/apps/inventoryApp/src/actions/inventoryDeviceListActions.ts @@ -0,0 +1,59 @@ +/** + * ============LICENSE_START======================================================================== + * ONAP : ccsdk feature sdnr wt odlux + * ================================================================================================= + * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved. + * ================================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under the License + * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing permissions and limitations under + * the License. + * ============LICENSE_END========================================================================== + */ +import { Action } from '../../../../framework/src/flux/action'; +import { Dispatch } from '../../../../framework/src/flux/store'; +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; + +import { InventoryDeviceListType } from '../models/inventoryDeviceListType'; +import { inventoryService } from '../services/inventoryService'; + +/** + * Represents the base action. + */ +export class BaseAction extends Action { } + +/** + * Represents an action causing the store to load all nodes. + */ +export class LoadAllInventoryDeviceListAction extends BaseAction { } + +/** + * Represents an action causing the store to update all nodes. + */ +export class AllInventoryDeviceListLoadedAction extends BaseAction { + /** + * Initialize this instance. + * + * @param inventoryDeviceList All the distinct nodes from the Inventory database. + */ + constructor(public inventoryDeviceList: InventoryDeviceListType[] | null, public error?: string) { + super(); + } +} + +/** + * Represents an asynchronous thunk action to load all nodes. + */ +export const loadAllInventoryDeviceListAsync = async (dispatch: Dispatch) => { + dispatch(new LoadAllInventoryDeviceListAction()); + const inventoryDeviceList: InventoryDeviceListType[] = (await inventoryService.getInventoryDeviceList().then(ne => + (ne))) || []; + return inventoryDeviceList && dispatch(new AllInventoryDeviceListLoadedAction(inventoryDeviceList)); +}; + diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/actions/inventoryTreeActions.ts b/sdnr/wt/odlux/apps/inventoryApp/src/actions/inventoryTreeActions.ts index c09b669a1..2c6a0ed65 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/src/actions/inventoryTreeActions.ts +++ b/sdnr/wt/odlux/apps/inventoryApp/src/actions/inventoryTreeActions.ts @@ -16,14 +16,13 @@ * ============LICENSE_END========================================================================== */ +import { AddErrorInfoAction } from '../../../../framework/src/actions/errorActions'; +import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions'; import { Action } from '../../../../framework/src/flux/action'; import { Dispatch } from '../../../../framework/src/flux/store'; -import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; -import { InventoryType, InventoryTreeNode, TreeDemoItem } from '../models/inventory'; +import { InventoryTreeNode, InventoryType, TreeDemoItem } from '../models/inventory'; import { inventoryService } from '../services/inventoryService'; -import { AddErrorInfoAction } from '../../../../framework/src/actions/errorActions'; -import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions'; /** * Represents the base action. @@ -38,7 +37,7 @@ export class SetBusyAction extends BaseAction { } export class SetSearchTextAction extends BaseAction { - constructor(public searchTerm: string = "") { + constructor(public searchTerm: string = '') { super(); } @@ -65,40 +64,38 @@ export class UpdateExpandedNodesAction extends BaseAction { } } -export const setSearchTermAction = (searchTerm: string) => (dispatch: Dispatch, getState: () => IApplicationStoreState) =>{ +export const setSearchTermAction = (searchTerm: string) => (dispatch: Dispatch) =>{ dispatch(new SetSearchTextAction(searchTerm)); -} +}; -export const updateInventoryTreeAsyncAction = (mountId: string, searchTerm?: string) => async (dispatch: Dispatch, getState: () => IApplicationStoreState) => { +export const updateInventoryTreeAsyncAction = (mountId: string, searchTerm?: string) => async (dispatch: Dispatch) => { dispatch(new SetBusyAction(true)); dispatch(new SetSearchTextAction(searchTerm)); try { const result = await inventoryService.getInventoryTree(mountId, searchTerm); if (!result) { - dispatch(new AddErrorInfoAction({ title: "Error", message: `Could not load inventory tree for [${mountId}]. Please check you connection to the server and try later.` })); - dispatch(new NavigateToApplication("inventory")); + dispatch(new AddErrorInfoAction({ title: 'Error', message: `Could not load inventory tree for [${mountId}]. Please check you connection to the server and try later.` })); + dispatch(new NavigateToApplication('inventory')); } else { dispatch(new UpdateInventoryTreeAction(result)); } } catch (err) { - throw new Error("Could not load inventory tree from server."); - } - finally { + throw new Error('Could not load inventory tree from server.'); + } finally { dispatch(new SetBusyAction(false)); } }; -export const selectInventoryNodeAsyncAction = (nodeId: string) => async (dispatch: Dispatch, getState: () => IApplicationStoreState) => { +export const selectInventoryNodeAsyncAction = (nodeId: string) => async (dispatch: Dispatch) => { dispatch(new SetBusyAction(true)); try { const result = await inventoryService.getInventoryEntry(nodeId); - if (!result) throw new Error("Could not load inventory tree from server."); + if (!result) throw new Error('Could not load inventory tree from server.'); dispatch(new UpdateSelectedNodeAction(result)); } catch (err) { - throw new Error("Could not load inventory tree from server."); - } - finally { + throw new Error('Could not load inventory tree from server.'); + } finally { dispatch(new SetBusyAction(false)); } }; diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/actions/panelActions.ts b/sdnr/wt/odlux/apps/inventoryApp/src/actions/panelActions.ts index 10fde8c1d..d66608296 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/src/actions/panelActions.ts +++ b/sdnr/wt/odlux/apps/inventoryApp/src/actions/panelActions.ts @@ -16,16 +16,16 @@ * ============LICENSE_END========================================================================== */ -import { Action } from "../../../../framework/src/flux/action"; -import { PanelId } from "models/panelId"; +import { Action } from '../../../../framework/src/flux/action'; +import { PanelId } from '../models/panelId'; export class SetPanelAction extends Action { - constructor(public panelId: PanelId) { - super(); - } + constructor(public panelId: PanelId) { + super(); } +} export const setPanelAction = (panelId: PanelId) => { - return new SetPanelAction(panelId); - } \ No newline at end of file + return new SetPanelAction(panelId); +}; \ No newline at end of file diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/assets/icons/inventoryAppIcon.svg b/sdnr/wt/odlux/apps/inventoryApp/src/assets/icons/inventoryAppIcon.svg new file mode 100644 index 000000000..507a835ab --- /dev/null +++ b/sdnr/wt/odlux/apps/inventoryApp/src/assets/icons/inventoryAppIcon.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/components/refreshInventoryDialog.tsx b/sdnr/wt/odlux/apps/inventoryApp/src/components/refreshInventoryDialog.tsx index 04658a319..027622249 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/src/components/refreshInventoryDialog.tsx +++ b/sdnr/wt/odlux/apps/inventoryApp/src/components/refreshInventoryDialog.tsx @@ -24,78 +24,74 @@ import DialogContent from '@mui/material/DialogContent'; import DialogContentText from '@mui/material/DialogContentText'; import DialogTitle from '@mui/material/DialogTitle'; +import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect'; import { inventoryElementsReloadAction } from '../handlers/inventoryElementsHandler'; -import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect'; import { InventoryType } from '../models/inventory'; export enum RefreshInventoryDialogMode { - None = "none", - RefreshInventoryTable = "RefreshInventoryTable", + None = 'none', + RefreshInventoryTable = 'RefreshInventoryTable', } const mapDispatch = (dispatcher: IDispatcher) => ({ - refreshInventory: () => dispatcher.dispatch(inventoryElementsReloadAction) + refreshInventory: () => dispatcher.dispatch(inventoryElementsReloadAction), }); type DialogSettings = { - dialogTitle: string, - dialogDescription: string, - applyButtonText: string, - cancelButtonText: string, - enableMountIdEditor: boolean, - enableUsernameEditor: boolean, - enableExtendedEditor: boolean, -} + dialogTitle: string; + dialogDescription: string; + applyButtonText: string; + cancelButtonText: string; + enableMountIdEditor: boolean; + enableUsernameEditor: boolean; + enableExtendedEditor: boolean; +}; const settings: { [key: string]: DialogSettings } = { [RefreshInventoryDialogMode.None]: { - dialogTitle: "", - dialogDescription: "", - applyButtonText: "", - cancelButtonText: "", + dialogTitle: '', + dialogDescription: '', + applyButtonText: '', + cancelButtonText: '', enableMountIdEditor: false, enableUsernameEditor: false, enableExtendedEditor: false, }, [RefreshInventoryDialogMode.RefreshInventoryTable]: { - dialogTitle: "Do you want to refresh the Inventory table?", - dialogDescription: "", - applyButtonText: "Yes", - cancelButtonText: "Cancel", + dialogTitle: 'Do you want to refresh the Inventory table?', + dialogDescription: '', + applyButtonText: 'Yes', + cancelButtonText: 'Cancel', enableMountIdEditor: true, enableUsernameEditor: true, enableExtendedEditor: true, - } -} + }, +}; type RefreshInventoryDialogComponentProps = Connect & { mode: RefreshInventoryDialogMode; onClose: () => void; }; -type RefreshInventoryDialogComponentState = InventoryType & { isNameValid: boolean, isHostSet: boolean }; +type RefreshInventoryDialogComponentState = InventoryType & { isNameValid: boolean; isHostSet: boolean }; class RefreshInventoryDialogComponent extends React.Component { - constructor(props: RefreshInventoryDialogComponentProps) { - super(props); - } - render(): JSX.Element { const setting = settings[this.props.mode]; return ( - {setting.dialogTitle} + {setting.dialogTitle} {setting.dialogDescription} - - @@ -110,7 +106,7 @@ class RefreshInventoryDialogComponent extends React.Component { this.props.onClose(); - } + }; } export const RefreshInventoryDialog = connect(undefined, mapDispatch)(RefreshInventoryDialogComponent); diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/fakeData/index.ts b/sdnr/wt/odlux/apps/inventoryApp/src/fakeData/index.ts index 46827e842..136b908dd 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/src/fakeData/index.ts +++ b/sdnr/wt/odlux/apps/inventoryApp/src/fakeData/index.ts @@ -16,11 +16,10 @@ * ============LICENSE_END========================================================================== */ -import { InventoryTreeNode, InventoryType } from "models/inventory"; import { convertPropertyNames, replaceHyphen } from "../../../../framework/src/utilities/yangHelper"; -// Tree mittels tree-level und parent UUID (incl) -// einzelabfrage mit db-id +import { InventoryTreeNode, InventoryType } from "../models/inventory"; + const data = [ { "manufacturer-identifier": "ONF-Wireless-Transport", "version": "a2.module-newest", "uuid": "a2.module-1.1.1.5", "part-type-id": "3FE25774AA01", "model-identifier": "VAUIAEYAAA", "tree-level": 2, "node-id": "robot_sim_2_equipment", "description": "WS/CORE-MAIN/a2.module#5", "type-name": "a2.module", "serial": "0003548168", "id": "robot_sim_2_equipment/a2.module-1.1.1.5", "parent-uuid": "CARD-1.1.1.0", "contained-holder": ["SUBRACK-1.15.0.0"], "date": "2005-11-09T00:00:00.0Z" }, { "manufacturer-identifier": "SAN", "version": "234", "uuid": "CARD-1.1.6.0", "part-type-id": "part-number-12", "model-identifier": "model-id-12", "tree-level": 1, "node-id": "robot_sim_2_equipment", "description": "WS/p8.module", "type-name": "p8.module", "serial": "serial-number-124", "id": "robot_sim_2_equipment/CARD-1.1.6.0", "parent-uuid": "SHELF-1.1.0.0", "contained-holder": ["PORT-1.1.6.5", "PORT-1.1.6.8", "PORT-1.1.6.7", "PORT-1.1.6.6"], "date": "2013-11-23T00:00:00.0Z" }, diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/handlers/connectedNetworkElementsHandler.ts b/sdnr/wt/odlux/apps/inventoryApp/src/handlers/connectedNetworkElementsHandler.ts deleted file mode 100644 index e6138cc38..000000000 --- a/sdnr/wt/odlux/apps/inventoryApp/src/handlers/connectedNetworkElementsHandler.ts +++ /dev/null @@ -1,36 +0,0 @@ -/** - * ============LICENSE_START======================================================================== - * ONAP : ccsdk feature sdnr wt odlux - * ================================================================================================= - * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved. - * ================================================================================================= - * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under the License - * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express - * or implied. See the License for the specific language governing permissions and limitations under - * the License. - * ============LICENSE_END========================================================================== - */ - -import { createExternal, IExternalTableState } from '../../../../framework/src/components/material-table/utilities'; -import { createSearchDataHandler } from '../../../../framework/src/utilities/elasticSearch'; - -import { NetworkElementConnection } from '../models/networkElementConnection'; - -export interface IConnectedNetworkElementsState extends IExternalTableState { } - -// create eleactic search material data fetch handler -const connectedNetworkElementsSearchHandler = createSearchDataHandler('network-element-connection', false, { status: "Connected" }); - -export const { - actionHandler: connectedNetworkElementsActionHandler, - createActions: createConnectedNetworkElementsActions, - createProperties: createConnectedNetworkElementsProperties, - reloadAction: connectedNetworkElementsReloadAction, - - // set value action, to change a value -} = createExternal(connectedNetworkElementsSearchHandler, appState => appState.inventory.connectedNetworkElements); diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryAppRootHandler.ts b/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryAppRootHandler.ts index 0e857ffe9..b1a0c581f 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryAppRootHandler.ts +++ b/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryAppRootHandler.ts @@ -18,27 +18,23 @@ // main state handler import { combineActionHandler } from '../../../../framework/src/flux/middleware'; - // ** do not remove ** +// eslint-disable-next-line @typescript-eslint/no-unused-vars import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; -import { IActionHandler } from '../../../../framework/src/flux/action'; -import { IInvenroryTree, inventoryTreeHandler } from './inventoryTreeHandler'; -import { IConnectedNetworkElementsState, connectedNetworkElementsActionHandler } from './connectedNetworkElementsHandler'; import { PanelId } from '../models/panelId'; +import { IInventoryDeviceListState, inventoryDeviceListActionHandler } from './inventoryDeviceListActionHandler'; +import { IInventoryElementsState, inventoryElementsActionHandler } from './inventoryElementsHandler'; +import { IInvenroryTree, inventoryTreeHandler } from './inventoryTreeHandler'; import { currentOpenPanelHandler } from './panelHandler'; -import { inventoryElementsActionHandler, IInventoryElementsState } from './inventoryElementsHandler'; export interface IInventoryAppStateState { inventoryTree: IInvenroryTree; - connectedNetworkElements: IConnectedNetworkElementsState; // used for ne selection currentOpenPanel: PanelId; inventoryElements: IInventoryElementsState; + inventoryDeviceList: IInventoryDeviceListState; } - - - declare module '../../../../framework/src/store/applicationStore' { interface IApplicationStoreState { inventory: IInventoryAppStateState; @@ -47,9 +43,9 @@ declare module '../../../../framework/src/store/applicationStore' { const actionHandlers = { inventoryTree: inventoryTreeHandler, - connectedNetworkElements: connectedNetworkElementsActionHandler, currentOpenPanel: currentOpenPanelHandler, - inventoryElements: inventoryElementsActionHandler + inventoryElements: inventoryElementsActionHandler, + inventoryDeviceList: inventoryDeviceListActionHandler, }; export const inventoryAppRootHandler = combineActionHandler(actionHandlers); diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryDeviceListActionHandler.ts b/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryDeviceListActionHandler.ts new file mode 100644 index 000000000..7c06cad99 --- /dev/null +++ b/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryDeviceListActionHandler.ts @@ -0,0 +1,56 @@ +/** + * ============LICENSE_START======================================================================== + * ONAP : ccsdk feature sdnr wt odlux + * ================================================================================================= + * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved. + * ================================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under the License + * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing permissions and limitations under + * the License. + * ============LICENSE_END========================================================================== + */ +import { IActionHandler } from '../../../../framework/src/flux/action'; + +import { AllInventoryDeviceListLoadedAction, LoadAllInventoryDeviceListAction } from '../actions/inventoryDeviceListActions'; +import { InventoryDeviceListType } from '../models/inventoryDeviceListType'; + +export interface IInventoryDeviceListState { + inventoryDeviceList: InventoryDeviceListType[]; + busy: boolean; +} + +const inventoryDeviceListListStateInit: IInventoryDeviceListState = { + inventoryDeviceList: [], + busy: false, +}; + +export const inventoryDeviceListActionHandler: IActionHandler = (state = inventoryDeviceListListStateInit, action) => { + if (action instanceof LoadAllInventoryDeviceListAction) { + + state = { + ...state, + busy: true, + }; + + } else if (action instanceof AllInventoryDeviceListLoadedAction) { + if (!action.error && action.inventoryDeviceList) { + state = { + ...state, + inventoryDeviceList: action.inventoryDeviceList, + busy: false, + }; + } else { + state = { + ...state, + busy: false, + }; + } + } + return state; +}; \ No newline at end of file diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryElementsHandler.ts b/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryElementsHandler.ts index a65319efa..7bac8f632 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryElementsHandler.ts +++ b/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryElementsHandler.ts @@ -15,7 +15,7 @@ * the License. * ============LICENSE_END========================================================================== */ -import { createExternal,IExternalTableState } from '../../../../framework/src/components/material-table/utilities'; +import { createExternal, IExternalTableState } from '../../../../framework/src/components/material-table/utilities'; import { createSearchDataHandler } from '../../../../framework/src/utilities/elasticSearch'; import { InventoryType } from '../models/inventory'; @@ -23,7 +23,7 @@ import { InventoryType } from '../models/inventory'; export interface IInventoryElementsState extends IExternalTableState { } // create eleactic search material data fetch handler -const inventoryElementsSearchHandler = createSearchDataHandler("inventory"); +const inventoryElementsSearchHandler = createSearchDataHandler('inventory'); export const { actionHandler: inventoryElementsActionHandler, diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryTreeHandler.ts b/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryTreeHandler.ts index 9029a6719..fe90d9820 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryTreeHandler.ts +++ b/sdnr/wt/odlux/apps/inventoryApp/src/handlers/inventoryTreeHandler.ts @@ -16,10 +16,10 @@ * ============LICENSE_END========================================================================== */ -import { IActionHandler } from "../../../../framework/src/flux/action"; +import { IActionHandler } from '../../../../framework/src/flux/action'; -import { SetBusyAction, UpdateInventoryTreeAction, UpdateSelectedNodeAction, SetSearchTextAction, UpdateExpandedNodesAction } from "../actions/inventoryTreeActions"; -import { InventoryTreeNode, InventoryType, TreeDemoItem } from "../models/inventory"; +import { SetBusyAction, SetSearchTextAction, UpdateExpandedNodesAction, UpdateInventoryTreeAction, UpdateSelectedNodeAction } from '../actions/inventoryTreeActions'; +import { InventoryTreeNode, InventoryType, TreeDemoItem } from '../models/inventory'; export interface IInvenroryTree { @@ -33,10 +33,10 @@ export interface IInvenroryTree { const initialState: IInvenroryTree = { isBusy: false, rootNodes: [], - searchTerm: "", + searchTerm: '', selectedNode: undefined, expandedItems: [], -} +}; const getTreeDataFromInvetoryTreeNode = (node: InventoryTreeNode): TreeDemoItem[] => Object.keys(node).reduce((acc, key) => { @@ -61,8 +61,8 @@ export const inventoryTreeHandler: IActionHandler = (state = ini } else if (action instanceof UpdateSelectedNodeAction) { state = { ...state, selectedNode: action.selectedNode }; } else if (action instanceof UpdateExpandedNodesAction) { - state = { ...state, expandedItems: action.expandedNodes || []} + state = { ...state, expandedItems: action.expandedNodes || [] }; } return state; -} \ No newline at end of file +}; \ No newline at end of file diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/handlers/panelHandler.ts b/sdnr/wt/odlux/apps/inventoryApp/src/handlers/panelHandler.ts index 761253112..7912d0ea5 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/src/handlers/panelHandler.ts +++ b/sdnr/wt/odlux/apps/inventoryApp/src/handlers/panelHandler.ts @@ -1,11 +1,11 @@ -import { PanelId } from "../models/panelId"; -import { IActionHandler } from "../../../../framework/src/flux/action"; -import { SetPanelAction } from "../actions/panelActions"; +import { IActionHandler } from '../../../../framework/src/flux/action'; +import { SetPanelAction } from '../actions/panelActions'; +import { PanelId } from '../models/panelId'; export const currentOpenPanelHandler: IActionHandler = (state = null, action) => { - if (action instanceof SetPanelAction) { - state = action.panelId; - } - return state; - } \ No newline at end of file + if (action instanceof SetPanelAction) { + state = action.panelId; + } + return state; +}; \ No newline at end of file diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/models/inventory.ts b/sdnr/wt/odlux/apps/inventoryApp/src/models/inventory.ts index a6c990529..a09fd7e41 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/src/models/inventory.ts +++ b/sdnr/wt/odlux/apps/inventoryApp/src/models/inventory.ts @@ -35,7 +35,7 @@ export type InventoryType = { partTypeId: string; modelIdentifier: string; typeName: string; -} +}; export type InventoryTreeNode = { [key: string]: { @@ -44,7 +44,7 @@ export type InventoryTreeNode = { isMatch?: boolean; ownSeverity?: string; childrenSeveritySummary?: string; - } -} + }; +}; export type TreeDemoItem = ExternalTreeItem; \ No newline at end of file diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/models/inventoryDeviceListType.ts b/sdnr/wt/odlux/apps/inventoryApp/src/models/inventoryDeviceListType.ts new file mode 100644 index 000000000..ab2411401 --- /dev/null +++ b/sdnr/wt/odlux/apps/inventoryApp/src/models/inventoryDeviceListType.ts @@ -0,0 +1,25 @@ +/** + * ============LICENSE_START======================================================================== + * ONAP : ccsdk feature sdnr wt odlux + * ================================================================================================= + * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved. + * ================================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under the License + * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing permissions and limitations under + * the License. + * ============LICENSE_END========================================================================== + */ + +/** + * Represents all the distinct devices from the inventory history data. + */ + +export type InventoryDeviceListType = { + nodeId: string; +}; diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/models/networkElementConnection.ts b/sdnr/wt/odlux/apps/inventoryApp/src/models/networkElementConnection.ts index 88f70181c..e1ef1ea2d 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/src/models/networkElementConnection.ts +++ b/sdnr/wt/odlux/apps/inventoryApp/src/models/networkElementConnection.ts @@ -24,7 +24,7 @@ export type NetworkElementConnection = { username?: string; password?: string; isRequired?: boolean; - status?: "connected" | "mounted" | "unmounted" | "connecting" | "disconnected" | "idle"; + status?: 'connected' | 'mounted' | 'unmounted' | 'connecting' | 'disconnected' | 'idle'; coreModelCapability?: string; deviceType?: string; nodeDetails?: { @@ -33,5 +33,5 @@ export type NetworkElementConnection = { failureReason: string; capability: string; }[]; - } -} + }; +}; diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/models/panelId.ts b/sdnr/wt/odlux/apps/inventoryApp/src/models/panelId.ts index b05c1db64..8f8224c8c 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/src/models/panelId.ts +++ b/sdnr/wt/odlux/apps/inventoryApp/src/models/panelId.ts @@ -16,4 +16,4 @@ * ============LICENSE_END========================================================================== */ -export type PanelId = null | "InventoryElementsTable" | "TreeviewTable"; \ No newline at end of file +export type PanelId = null | 'Equipment' | 'TreeView'; \ No newline at end of file diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/pluginInventory.tsx b/sdnr/wt/odlux/apps/inventoryApp/src/pluginInventory.tsx index 50339c0ab..819859919 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/src/pluginInventory.tsx +++ b/sdnr/wt/odlux/apps/inventoryApp/src/pluginInventory.tsx @@ -16,38 +16,33 @@ * ============LICENSE_END========================================================================== */ // app configuration and main entry point for the app +import React from 'react'; +import { Redirect, Route, RouteComponentProps, Switch, withRouter } from 'react-router-dom'; -import * as React from "react"; -import { withRouter, RouteComponentProps, Route, Switch, Redirect } from 'react-router-dom'; -import { faShoppingBag } from '@fortawesome/free-solid-svg-icons'; // select app icon +import { connect, Connect, IDispatcher } from '../../../framework/src/flux/connect'; import applicationManager from '../../../framework/src/services/applicationManager'; -import connect, { Connect, IDispatcher } from '../../../framework/src/flux/connect'; -import { IApplicationStoreState } from "../../../framework/src/store/applicationStore"; - -import { InventoryTreeView } from './views/treeview'; +import { IApplicationStoreState } from '../../../framework/src/store/applicationStore'; +import { SetPanelAction } from './actions/panelActions'; +import inventoryAppRootHandler from './handlers/inventoryAppRootHandler'; +import { createInventoryElementsActions, createInventoryElementsProperties } from './handlers/inventoryElementsHandler'; +import { PanelId } from './models/panelId'; import Dashboard from './views/dashboard'; +import { InventoryTreeView } from './views/treeview'; -import { PanelId } from "./models/panelId"; -import { SetPanelAction } from "./actions/panelActions"; - -import inventoryAppRootHandler from './handlers/inventoryAppRootHandler'; -import { createInventoryElementsActions, createInventoryElementsProperties } from "./handlers/inventoryElementsHandler"; -import { createConnectedNetworkElementsProperties, createConnectedNetworkElementsActions } from "./handlers/connectedNetworkElementsHandler"; +const appIcon = require('./assets/icons/inventoryAppIcon.svg'); // select app icon let currentMountId: string | undefined = undefined; const mapProps = (state: IApplicationStoreState) => ({ inventoryProperties: createInventoryElementsProperties(state), panelId: state.inventory.currentOpenPanel, - connectedNetworkElementsProperties: createConnectedNetworkElementsProperties(state), }); -const mapDisp = (dispatcher: IDispatcher) => ({ +const mapDispatch = (dispatcher: IDispatcher) => ({ inventoryActions: createInventoryElementsActions(dispatcher.dispatch, true), - connectedNetworkElementsActions: createConnectedNetworkElementsActions(dispatcher.dispatch, true), setCurrentPanel: (panelId: PanelId) => dispatcher.dispatch(new SetPanelAction(panelId)), }); -const InventoryTableApplicationRouteAdapter = connect(mapProps, mapDisp)((props: RouteComponentProps<{ mountId?: string }> & Connect) => { +const InventoryTableApplicationRouteAdapter = connect(mapProps, mapDispatch)((props: RouteComponentProps<{ mountId?: string }> & Connect) => { if (currentMountId !== props.match.params.mountId) { // route parameter has changed currentMountId = props.match.params.mountId || undefined; @@ -56,26 +51,20 @@ const InventoryTableApplicationRouteAdapter = connect(mapProps, mapDisp)((props: if (currentMountId) { if (props.panelId) { props.setCurrentPanel(props.panelId); + } else { + props.setCurrentPanel('Equipment'); } - else { - props.setCurrentPanel("InventoryElementsTable"); - } - props.inventoryActions.onFilterChanged("nodeId", currentMountId); - props.connectedNetworkElementsActions.onFilterChanged("nodeId", currentMountId); + props.inventoryActions.onFilterChanged('nodeId', currentMountId); if (!props.inventoryProperties.showFilter) { props.inventoryActions.onToggleFilter(false); } - if (!props.connectedNetworkElementsProperties.showFilter) { - props.connectedNetworkElementsActions.onToggleFilter(false); - } props.inventoryActions.onRefresh(); - props.connectedNetworkElementsActions.onRefresh(); } }); } return ( - ) + ); }); const App = withRouter((props: RouteComponentProps) => ( @@ -89,11 +78,11 @@ const App = withRouter((props: RouteComponentProps) => ( export function register() { applicationManager.registerApplication({ - name: "inventory", - icon: faShoppingBag, + name: 'inventory', + icon: appIcon, rootActionHandler: inventoryAppRootHandler, rootComponent: App, - menuEntry: "Inventory" + menuEntry: 'Inventory', }); } diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/services/inventoryService.ts b/sdnr/wt/odlux/apps/inventoryApp/src/services/inventoryService.ts index cb70bf522..4014fcf6d 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/src/services/inventoryService.ts +++ b/sdnr/wt/odlux/apps/inventoryApp/src/services/inventoryService.ts @@ -15,54 +15,76 @@ * the License. * ============LICENSE_END========================================================================== */ +import { Result } from '../../../../framework/src/models/elasticSearch'; import { requestRest } from '../../../../framework/src/services/restService'; -import { convertPropertyNames, replaceHyphen } from '../../../../framework/src/utilities/yangHelper'; import { InventoryTreeNode, InventoryType } from '../models/inventory'; -import { getTree, getElement } from '../fakeData'; +import { InventoryDeviceListType } from '../models/inventoryDeviceListType'; /** * Represents a web api accessor service for all maintenence entries related actions. */ class InventoryService { - public async getInventoryTree(mountId: string, searchTerm: string = ""): Promise { + public async getInventoryTree(mountId: string, searchTerm: string = ''): Promise { //return await getTree(searchTerm); const path = `/tree/read-inventoryequipment-tree/${mountId}`; const body = { - "query": searchTerm + 'query': searchTerm, }; - const inventoryTree = await requestRest(path, { method: "POST" , body: JSON.stringify(body)}); + const inventoryTree = await requestRest(path, { method: 'POST', body: JSON.stringify(body) }); return inventoryTree && inventoryTree || null; } public async getInventoryEntry(id: string): Promise { - const path = `/rests/operations/data-provider:read-inventory-list`; + const path = '/rests/operations/data-provider:read-inventory-list'; const body = { - "data-provider:input": { - "filter": [ - { property: "id", filtervalue: id }, + 'data-provider:input': { + 'filter': [ + { property: 'id', filtervalue: id }, ], - "sortorder": [], - "pagination": { - "size": 1, - "page": 1 - } - } + 'sortorder': [], + 'pagination': { + 'size': 1, + 'page': 1, + }, + }, }; const inventoryTreeElement = await requestRest<{ - "data-provider:output": { - "pagination": { - "size": number, - "page": number, - "total": number + 'data-provider:output': { + 'pagination': { + 'size': number; + 'page': number; + 'total': number; + }; + 'data': InventoryType[]; + }; + }>(path, { method: 'POST', body: JSON.stringify(body) }); + + return inventoryTreeElement && inventoryTreeElement['data-provider:output'] && inventoryTreeElement['data-provider:output'].pagination && inventoryTreeElement['data-provider:output'].pagination.total >= 1 && + inventoryTreeElement['data-provider:output'].data && inventoryTreeElement['data-provider:output'].data[0] || undefined; + // return await getElement(id); + } + + /** + * Gets all nodes from the inventory device list. + */ + public async getInventoryDeviceList(): Promise<(InventoryDeviceListType)[] | null> { + const path = '/rests/operations/data-provider:read-inventory-device-list'; + const query = { + 'data-provider:input': { + 'filter': [], + 'sortorder': [], + 'pagination': { + 'size': 20, + 'page': 1, }, - "data": InventoryType[] - } - }>(path, { method: "POST", body: JSON.stringify(body) }); + }, + }; - return inventoryTreeElement && inventoryTreeElement["data-provider:output"] && inventoryTreeElement["data-provider:output"].pagination && inventoryTreeElement["data-provider:output"].pagination.total >= 1 && - inventoryTreeElement["data-provider:output"].data && inventoryTreeElement["data-provider:output"].data[0] || undefined; - // return await getElement(id); + const result = await requestRest>(path, { method: 'POST', body: JSON.stringify(query) }); + return result && result['data-provider:output'] && result['data-provider:output'].data && result['data-provider:output'].data.map(ne => ({ + nodeId: ne, + })) || null; } } diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx b/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx index 284f70239..acd2c6216 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx +++ b/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx @@ -16,99 +16,93 @@ * ============LICENSE_END========================================================================== */ -import * as React from 'react'; +import React from 'react'; import { RouteComponentProps, withRouter } from 'react-router-dom'; -import connect, { IDispatcher, Connect } from "../../../../framework/src/flux/connect"; -import { IApplicationStoreState } from "../../../../framework/src/store/applicationStore"; -import { MaterialTable, MaterialTableCtorType, ColumnType } from "../../../../framework/src/components/material-table"; -import { AppBar, Tabs, Tab, MenuItem, Typography } from "@mui/material"; import Refresh from '@mui/icons-material/Refresh'; -import { PanelId } from "../models/panelId"; -import { setPanelAction } from "../actions/panelActions"; +import { AppBar, MenuItem, Tab, Tabs, Typography } from '@mui/material'; - -import { createConnectedNetworkElementsProperties, createConnectedNetworkElementsActions } from "../handlers/connectedNetworkElementsHandler"; - -import { NetworkElementConnection } from "../models/networkElementConnection"; - -import { InventoryType } from '../models/inventory'; - -import { createInventoryElementsProperties, createInventoryElementsActions } from "../handlers/inventoryElementsHandler"; import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions'; +import { ColumnType, MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; +import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect'; +import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; + +import { loadAllInventoryDeviceListAsync } from '../actions/inventoryDeviceListActions'; import { updateInventoryTreeAsyncAction } from '../actions/inventoryTreeActions'; +import { setPanelAction } from '../actions/panelActions'; import RefreshInventoryDialog, { RefreshInventoryDialogMode } from '../components/refreshInventoryDialog'; +import { createInventoryElementsActions, createInventoryElementsProperties } from '../handlers/inventoryElementsHandler'; +import { InventoryType } from '../models/inventory'; +import { InventoryDeviceListType } from '../models/inventoryDeviceListType'; +import { PanelId } from '../models/panelId'; const InventoryTable = MaterialTable as MaterialTableCtorType; const mapProps = (state: IApplicationStoreState) => ({ - connectedNetworkElementsProperties: createConnectedNetworkElementsProperties(state), panelId: state.inventory.currentOpenPanel, inventoryElementsProperties: createInventoryElementsProperties(state), - inventoryElements: state.inventory.inventoryElements + inventoryElements: state.inventory.inventoryElements, + inventoryDeviceList: state.inventory.inventoryDeviceList.inventoryDeviceList, }); const mapDispatch = (dispatcher: IDispatcher) => ({ - connectedNetworkElementsActions: createConnectedNetworkElementsActions(dispatcher.dispatch), switchActivePanel: (panelId: PanelId) => { dispatcher.dispatch(setPanelAction(panelId)); }, inventoryElementsActions: createInventoryElementsActions(dispatcher.dispatch), navigateToApplication: (applicationName: string, path?: string) => dispatcher.dispatch(new NavigateToApplication(applicationName, path)), updateInventoryTree: (mountId: string, searchTerm?: string) => dispatcher.dispatch(updateInventoryTreeAsyncAction(mountId, searchTerm)), + getAllInventoryDeviceList: async () => { + await dispatcher.dispatch(loadAllInventoryDeviceListAsync); + }, }); let treeViewInitialSorted = false; let inventoryInitialSorted = false; -const ConnectedElementTable = MaterialTable as MaterialTableCtorType; +const InventoryDeviceListTable = MaterialTable as MaterialTableCtorType; type DashboardComponentProps = RouteComponentProps & Connect; type DashboardComponentState = { - refreshInventoryEditorMode: RefreshInventoryDialogMode -} + refreshInventoryEditorMode: RefreshInventoryDialogMode; +}; class DashboardSelectorComponent extends React.Component { constructor(props: DashboardComponentProps) { super(props); this.state = { - refreshInventoryEditorMode: RefreshInventoryDialogMode.None + refreshInventoryEditorMode: RefreshInventoryDialogMode.None, }; } private onHandleTabChange = (event: React.SyntheticEvent, newValue: PanelId) => { this.onTogglePanel(newValue); - } + }; private onTogglePanel = (panelId: PanelId) => { const nextActivePanel = panelId; this.props.switchActivePanel(nextActivePanel); switch (nextActivePanel) { - case 'InventoryElementsTable': + case 'Equipment': if (!inventoryInitialSorted) { - this.props.inventoryElementsActions.onHandleExplicitRequestSort("nodeId", "asc"); + this.props.inventoryElementsActions.onHandleExplicitRequestSort('nodeId', 'asc'); inventoryInitialSorted = true; } else { this.props.inventoryElementsActions.onRefresh(); } break; - case 'TreeviewTable': - if (!treeViewInitialSorted) { - this.props.connectedNetworkElementsActions.onHandleExplicitRequestSort("nodeId", "asc"); - treeViewInitialSorted = true; - } else { - this.props.connectedNetworkElementsActions.onRefresh(); - } + case 'TreeView': + this.props.getAllInventoryDeviceList(); break; case null: // do nothing if all panels are closed break; default: - console.warn("Unknown nextActivePanel [" + nextActivePanel + "] in connectView"); + console.warn('Unknown nextActivePanel [' + nextActivePanel + '] in connectView'); break; } @@ -116,47 +110,47 @@ class DashboardSelectorComponent extends React.Component { return [ - { this.props.updateInventoryTree(rowData.nodeId, rowData.uuid); this.props.navigateToApplication("inventory", rowData.nodeId) }}>View in Treeview, + { this.props.updateInventoryTree(rowData.nodeId, rowData.uuid); this.props.navigateToApplication('inventory', rowData.nodeId); }}>View in Treeview, ]; - } + }; render() { const refreshInventoryAction = { icon: Refresh, tooltip: 'Refresh Inventory', ariaLabel: 'refresh', onClick: () => { this.setState({ - refreshInventoryEditorMode: RefreshInventoryDialogMode.RefreshInventoryTable + refreshInventoryEditorMode: RefreshInventoryDialogMode.RefreshInventoryTable, }); - } + }, }; const { panelId: activePanelId } = this.props; return ( <> - - + + { - activePanelId === "InventoryElementsTable" && + activePanelId === 'Equipment' && <> - { @@ -171,22 +165,20 @@ class DashboardSelectorComponent extends React.Component { - this.props.navigateToApplication("inventory", row.nodeId); - this.props.updateInventoryTree(row.nodeId, '*'); - }} - columns={[ - { property: "nodeId", title: "Node Name", type: ColumnType.text }, - { property: "isRequired", title: "Required", type: ColumnType.boolean }, - { property: "host", title: "Host", type: ColumnType.text }, - { property: "port", title: "Port", type: ColumnType.numeric }, - { property: "coreModelCapability", title: "Core Model", type: ColumnType.text }, - { property: "deviceType", title: "Type", type: ColumnType.text }, - ]} idProperty="id" {...this.props.connectedNetworkElementsActions} {...this.props.connectedNetworkElementsProperties} asynchronus > - + activePanelId === 'TreeView' && + <> + { + this.props.navigateToApplication('inventory', row.nodeId); + this.props.updateInventoryTree(row.nodeId, '*'); + }} + rows={this.props.inventoryDeviceList} asynchronus + columns={[ + { property: 'nodeId', title: 'Node Name', type: ColumnType.text }, + ]} idProperty="nodeId" > + + } ); @@ -194,15 +186,14 @@ class DashboardSelectorComponent extends React.Component { this.setState({ - refreshInventoryEditorMode: RefreshInventoryDialogMode.None + refreshInventoryEditorMode: RefreshInventoryDialogMode.None, }); - } - componentDidMount() { + }; + componentDidMount() { if (this.props.panelId === null) { //set default tab if none is set - this.onTogglePanel("InventoryElementsTable"); + this.onTogglePanel('Equipment'); } - } } diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/views/detail.tsx b/sdnr/wt/odlux/apps/inventoryApp/src/views/detail.tsx index 252663935..8d47ec3d9 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/src/views/detail.tsx +++ b/sdnr/wt/odlux/apps/inventoryApp/src/views/detail.tsx @@ -15,20 +15,19 @@ * the License. * ============LICENSE_END========================================================================== */ -import * as React from "react"; -import { withRouter, RouteComponentProps } from 'react-router-dom'; +import React from 'react'; +import { RouteComponentProps, withRouter } from 'react-router-dom'; import Button from '@mui/material/Button'; import { Theme } from '@mui/material/styles'; // infra for styling - import { WithStyles } from '@mui/styles'; -import withStyles from '@mui/styles/withStyles'; import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; const styles = (theme: Theme) => createStyles({ warnButton: { - backgroundColor: theme.palette.primary.dark - } + backgroundColor: theme.palette.primary.dark, + }, }); type DetailProps = RouteComponentProps<{ id: string }> & WithStyles; @@ -37,8 +36,8 @@ export const Detail = withStyles( styles )( withRouter( (props: DetailProps) =>

Detail {props.match.params.id}

This are the information about {props.staticContext}.

- - + +
))); diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx b/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx index b0e962daa..954c074c1 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx +++ b/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx @@ -15,42 +15,38 @@ * the License. * ============LICENSE_END========================================================================== */ -import * as React from "react"; -import { Theme } from '@mui/material/styles'; +import React from 'react'; +import Breadcrumbs from '@mui/material/Breadcrumbs'; +import Link from '@mui/material/Link'; +import { Theme } from '@mui/material/styles'; import { WithStyles } from '@mui/styles'; -import withStyles from '@mui/styles/withStyles'; import createStyles from '@mui/styles/createStyles'; - +import withStyles from '@mui/styles/withStyles'; +import { RouteComponentProps } from 'react-router-dom'; +import { SearchMode, TreeView, TreeViewCtorType } from '../../../../framework/src/components/material-ui/treeView'; import { renderObject } from '../../../../framework/src/components/objectDump'; import { Connect, connect, IDispatcher } from '../../../../framework/src/flux/connect'; -import { TreeView, TreeViewCtorType, SearchMode } from '../../../../framework/src/components/material-ui/treeView'; +import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; -import { IApplicationStoreState } from "../../../../framework/src/store/applicationStore"; - -import Breadcrumbs from '@mui/material/Breadcrumbs'; -import Link from '@mui/material/Link'; - -import { updateInventoryTreeAsyncAction, selectInventoryNodeAsyncAction, UpdateSelectedNodeAction, UpdateExpandedNodesAction, setSearchTermAction } from "../actions/inventoryTreeActions"; -import { TreeDemoItem } from "../models/inventory"; - -import { RouteComponentProps } from 'react-router-dom'; +import { selectInventoryNodeAsyncAction, setSearchTermAction, UpdateExpandedNodesAction, updateInventoryTreeAsyncAction, UpdateSelectedNodeAction } from '../actions/inventoryTreeActions'; +import { TreeDemoItem } from '../models/inventory'; const styles = (theme: Theme) => createStyles({ root: { - flex: "1 0 0%", - display: "flex", - flexDirection: "row", + flex: '1 0 0%', + display: 'flex', + flexDirection: 'row', }, tree: { - flex: "1 0 0%", - minWidth: "250px", - padding: `0px ${theme.spacing(1)}` + wordWrap: 'break-word', + minWidth: '250px', + padding: `0px ${theme.spacing(1)}`, }, details: { - flex: "5 0 0%", - padding: `0px ${theme.spacing(1)}` - } + flex: '5 0 0%', + padding: `0px ${theme.spacing(1)}`, + }, }); const mapProps = (state: IApplicationStoreState) => ({ @@ -68,19 +64,19 @@ const mapDispatch = (dispatcher: IDispatcher) => ({ setSearchTerm: (searchTerm: string) => dispatcher.dispatch(setSearchTermAction(searchTerm)), }); -const propsChache = Symbol("PropsCache"); +const propsChache = Symbol('PropsCache'); const InventoryTree = TreeView as any as TreeViewCtorType; -type TreeviewComponentProps = RouteComponentProps<{ mountId: string }> & WithStyles & Connect +type TreeviewComponentProps = RouteComponentProps<{ mountId: string }> & WithStyles & Connect; type TreeviewComponentState = { [propsChache]: { rootNodes?: TreeDemoItem[]; }; rootNodes: TreeDemoItem[]; -} +}; class DashboardComponent extends React.Component { @@ -96,14 +92,15 @@ class DashboardComponent extends React.Component
updateInventoryTree(mountId, searchTerm)} expandedItems={expendedItems} onFolderClick={(item) => { const indexOfItemToToggle = expendedItems.indexOf(item); if (indexOfItemToToggle === -1) { @@ -141,20 +139,15 @@ class DashboardComponent extends React.Component selectTreeNode(elm.value)} />
{ - selectedNode && renderObject(selectedNode, "tree-view") || null + selectedNode && renderObject(selectedNode, 'tree-view') || null }
); } - componentDidMount() { - const { updateInventoryTree, searchTerm, match: { params: { mountId } } } = this.props; - updateInventoryTree(mountId, searchTerm); - } - componentWillUnmount() { - this.props.setSearchTerm("*"); + this.props.setSearchTerm('*'); } } diff --git a/sdnr/wt/odlux/apps/inventoryApp/tsconfig.json b/sdnr/wt/odlux/apps/inventoryApp/tsconfig.json index a66b5d828..ca65092e0 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/tsconfig.json +++ b/sdnr/wt/odlux/apps/inventoryApp/tsconfig.json @@ -4,7 +4,7 @@ "outDir": "./dist", "sourceMap": true, "forceConsistentCasingInFileNames": true, - "allowSyntheticDefaultImports": false, + "allowSyntheticDefaultImports": true, "allowUnreachableCode": false, "allowUnusedLabels": false, "noFallthroughCasesInSwitch": true, diff --git a/sdnr/wt/odlux/apps/inventoryApp/webpack.config.js b/sdnr/wt/odlux/apps/inventoryApp/webpack.config.js index 403cc53f5..6a780560d 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/webpack.config.js +++ b/sdnr/wt/odlux/apps/inventoryApp/webpack.config.js @@ -57,6 +57,16 @@ module.exports = (env) => { use: [{ loader: "babel-loader" }] + },{ + //don't minify images + test: /\.(png|gif|jpg|svg)$/, + use: [{ + loader: 'url-loader', + options: { + limit: 10, + name: './images/[name].[ext]' + } + }] }] }, @@ -127,37 +137,37 @@ module.exports = (env) => { }, proxy: { "/oauth2/": { - target: "http://localhost:8181", + target: "http://sdnc-web:8080", secure: false }, "/database/": { - target: "http://localhost:8181", + target: "http://sdnc-web:8080", secure: false }, "/restconf/": { - target: "http://localhost:8181", + target: "http://sdnc-web:8080", secure: false }, "/rests/": { - target: "http://localhost:8181", + target: "http://sdnc-web:8080", secure: false }, "/help/": { - target: "http://localhost:8181", + target: "http://sdnc-web:8080", secure: false }, "/tree/": { - target: "http://localhost:8181", + target: "http://sdnc-web:8080", secure: false }, "/websocket": { - target: "http://localhost:8181", + target: "http://sdnc-web:8080", ws: true, changeOrigin: true, secure: false }, "/yang-schema": { - target: "http://localhost:8181", + target: "http://sdnc-web:8080", ws: true, changeOrigin: true, secure: false -- cgit 1.2.3-korg