diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx')
| -rw-r--r-- | sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx | 320 |
1 files changed, 0 insertions, 320 deletions
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx b/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx deleted file mode 100644 index d5189fcd0..000000000 --- a/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx +++ /dev/null @@ -1,320 +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 * as React from 'react'; - -import { 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 { IConnectAppStoreState } from '../../../connectApp/src/handlers/connectAppRootHandler'; -import { MountedNetworkElementType } from '../../../connectApp/src/models/mountedNetworkElements'; -import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions'; -import { Dispatch } from '../../../../framework/src/flux/store'; - -import TextField from '@material-ui/core/TextField'; -import { Tooltip, Button, FormControl, InputLabel, Select, MenuItem, InputAdornment } from '@material-ui/core'; -import Link from '@material-ui/core/Link'; - -import Table from '@material-ui/core/Table'; -import TableBody from '@material-ui/core/TableBody'; -import TableCell from '@material-ui/core/TableCell'; -import TableHead from '@material-ui/core/TableHead'; -import TableRow from '@material-ui/core/TableRow'; - -import { ViewSpecification } from '../models/uiModels'; - -const NetworkElementTable = MaterialTable as MaterialTableCtorType<MountedNetworkElementType>; - -const mapProps = (state: IApplicationStoreState) => ({ - ...state.configuration, - avaliableDevices: state.connect.mountedNetworkElements.elements.filter(el => el.connectionStatus === "connected") -}); -const mapDisp = (dispatcher: IDispatcher) => ({ - navigateTo: (viewId: string, index?: string | number) => dispatcher.dispatch((dispatch: Dispatch, getState: () => IApplicationStoreState) => { - const { configuration: { nodeId, lpId, indexValues } } = getState(); - const newIndexValues = typeof index === 'number' && indexValues - ? indexValues.split('/').slice(0, index).join("/") - : indexValues - ? `${indexValues}${index ? `/${index}` : ''}` - : index; - dispatch(new NavigateToApplication("configuration", `${nodeId}/${lpId}/${viewId}${newIndexValues ? `/${newIndexValues}` : ''}`)); - - }), - changeNode: (ndoeId: string) => dispatcher.dispatch((dispatch: Dispatch) => { - dispatch(new NavigateToApplication("configuration", ndoeId)); - }), - changeLp: (lpId: string) => dispatcher.dispatch((dispatch: Dispatch, getState: () => IApplicationStoreState) => { - const { configuration: { nodeId } } = getState(); - dispatch(new NavigateToApplication("configuration", `${nodeId}/${lpId}`)); - }) -}); - -type ConfigurationApplicationProps = Connect<typeof mapProps, typeof mapDisp>; - -type ConfigurationApplicationState = { - -} - -class ConfigurationApplicationComponent extends React.Component<ConfigurationApplicationProps, ConfigurationApplicationState> { - - render() { - if (this.props.loading) { - return ( - <h2>Collecting data from network element. Please wait ...</h2> - ); - } else if (!this.props.nodeId) { - return ( - <> - <h2>Please select an network element to configure !</h2> - <NetworkElementTable idProperty={"mountId"} rows={this.props.avaliableDevices} asynchronus - onHandleClick={(evetm, rowData) => { this.props.changeNode(rowData.mountId) }} columns={ - [{ property:"mountId" }] - } /> - </> - ); - } else if (!this.props.lpId) { - return this.props.coreModel && this.props.coreModel.ltp && this.props.coreModel.ltp.length - ? ( - <> - <h2>Please select an existing LP first !</h2> - <ul> - { this.props.coreModel.ltp.map(ltp => { - return <li key={ltp.uuid}> - <Link component="a" variant="body2" color="secondary" onClick={() => { - this.props.changeLp(ltp.lp[0].uuid); - }}>{ltp.lp[0].label[0].value}</Link> - </li> - }) || null} - </ul> - </> - ) - : ( - <> - <h2>No LTP / LP found !</h2> - </> - ); - } else if (!this.props.capability && !this.props.viewId) { - return ( - <h2>Please select a capability or viewId first !</h2> - ); - } - const viewData = this.props.viewData; - const viewSpecification = this.props.viewId - ? this.props.viewSpecifications.find(d => d.id === this.props.viewId) - : this.props.viewSpecifications.find(d => d.name === this.props.conditionalPackage); - - return viewSpecification - ? ( - <> - <hgroup style={{ marginBottom: 15 }}> - <h2>{`${this.props.nodeId} - ${this.props.lpId}`}</h2> - {this.createBreadCrump(viewSpecification.id, this.props.viewSpecifications)} - </hgroup> - <div style={{ display: "flex", flexWrap: "wrap", overflow: "auto" }}> - { - - (this.props.viewData && this.props.viewData instanceof Array) - ? this.renderUIList(viewSpecification, viewData as { [key: string]: string | number }[]) - : this.renderUIElement(viewSpecification, viewData as { [key: string]: string | number }) - } - {/* { <pre>{JSON.stringify(this.props.viewData, null, 2)} </pre> } */} - - </div> - </> - ) - : <h2>View [{this.props.viewId || this.props.conditionalPackage}] Not Found ! {this.props.viewSpecifications.length} </h2>; - } - - private static keyPropertyParser = /\$\$INDEX:(\d+):?([a-z\-]+)?\$\$$/; - private renderUIList = (viewSpecification: ViewSpecification, viewData: { [key: string]: string | number }[]) => { - const keyMatch = ConfigurationApplicationComponent.keyPropertyParser.exec(viewSpecification.dataPath); - const keyProperty = keyMatch && keyMatch[2]; - return ( - <Table> - <TableHead> - <TableRow> - {viewSpecification.elements.map(uiElement => { - switch (uiElement.uiType) { - case "number": - return ( - <TableCell key={uiElement.id} align={"right"} >{uiElement.label}</TableCell> - ); - case "selection": - case "object": - case "list": - case "string": - case "boolean": - return ( - <TableCell key={uiElement.id} align={"left"} >{uiElement.label}</TableCell> - ); - default: - if (process.env.NODE_ENV !== "production") { - console.error(`Unknown column type - ${(uiElement as any).uiType} in ${(uiElement as any).id}.`) - } - return null; - } - }) - } - <TableCell align={"right"} >Actions</TableCell> - </TableRow> - </TableHead> - <TableBody> - {viewData.map((row, ind) => ( - <TableRow key={keyProperty && row[keyProperty] || ind}> - {viewSpecification.elements.map(uiElement => { - switch (uiElement.uiType) { - case "string": - case "number": - return ( - <TableCell key={uiElement.id} component="td" scope="row" align={uiElement.uiType === "number" ? "right" : "left"}>{row[uiElement.id] == null ? "---" : row[uiElement.id] } </TableCell> - ); - case "boolean": - return ( - <TableCell key={uiElement.id} component="td" scope="row" align={"left"} >{row[uiElement.id] == null ? "---" : row[uiElement.id] ? uiElement.trueValue || 'True' : uiElement.falseValue || 'False'} </TableCell> - ); - case "list": - case "object": - return ( - <TableCell key={uiElement.id} component="td" scope="row" align={"left"} > - <Tooltip title={uiElement.description || ''}> - <Link component="a" variant="body2" color="secondary" onClick={() => { - this.props.navigateTo(uiElement.viewId, String(ind)); - }}>{uiElement.label}</Link> - </Tooltip></TableCell> - ); - case "selection": - const option = row[uiElement.id] ? uiElement.options.find(opt => opt.key === row[uiElement.id]) : null; - return ( - <TableCell key={uiElement.id} component="td" scope="row" align={"left"} >{option ? option.value : row[uiElement.id] == null ? "---" : row[uiElement.id] } </TableCell> - ); - default: - if (process.env.NODE_ENV !== "production") { - console.error(`Unknown column type - ${(uiElement as any).uiType} in ${(uiElement as any).id}.`) - } - return null; - } - })} - <TableCell align={"right"} ><Button onClick={() => { - this.props.navigateTo(this.props.viewId || '', String(/*keyProperty && row[keyProperty] || */ ind)); - }} >Details</Button> - </TableCell> - </TableRow> - ))} - </TableBody> - </Table> - ); - } - - private renderUIElement = (viewSpecification: ViewSpecification, viewData: { [key: string]: string | number }) => ( - viewSpecification.elements.map(uiElement => { - if (uiElement.leafrefPath) { - return null; - } - switch (uiElement.uiType) { - case "selection": - return (viewData[uiElement.id] != null - ? (<FormControl key={uiElement.id} style={{ width: 485, marginLeft: 20, marginRight: 20 }}> - <InputLabel htmlFor={`select-${uiElement.id}`} >{uiElement.label}</InputLabel> - <Select - readOnly={ true } - value={(viewData[uiElement.id] || '').toString().toLowerCase()} - inputProps={{ - name: uiElement.id, - id: `select-${uiElement.id}`, - }} - > - {uiElement.options.map(option => (<MenuItem title={option.description} value={option.value}>{option.key}</MenuItem>))} - </Select> - </FormControl>) - : null - ); - case "boolean": - return (viewData[uiElement.id] != null - ? (<FormControl key={uiElement.id} style={{ width: 485, marginLeft: 20, marginRight: 20 }}> - <InputLabel htmlFor={`select-${uiElement.id}`} >{uiElement.label}</InputLabel> - <Select - readOnly={ true } - - value={String(viewData[uiElement.id]).toLowerCase()} - inputProps={{ - name: uiElement.id, - id: `select-${uiElement.id}`, - }} - > - <MenuItem value={'true'}>{uiElement.trueValue || 'True'}</MenuItem> - <MenuItem value={'false'}>{uiElement.falseValue || 'False'}</MenuItem> - - </Select> - </FormControl>) - : null - ); - case "string": - return ( - <Tooltip key={uiElement.id} title={uiElement.description || ''}> - <TextField InputProps={{ readOnly: true }} spellCheck={false} autoFocus margin="dense" - id={uiElement.id} label={uiElement.label} type="text" value={viewData[uiElement.id] || ''} style={{ width: 485, marginLeft: 20, marginRight: 20 }} /> - </Tooltip> - ); - case "number": - return ( - <Tooltip key={uiElement.id} title={uiElement.description || ''}> - <TextField InputProps={{ readOnly: true, startAdornment: uiElement.unit != null ? <InputAdornment position="start">{uiElement.unit}</InputAdornment> : undefined }} spellCheck={false} autoFocus margin="dense" - id={uiElement.id} label={uiElement.label} type="text" value={viewData[uiElement.id] || ''} style={{ width: 485, marginLeft: 20, marginRight: 20 }} /> - </Tooltip> - ); - case "list": - case "object": - return ( - <Tooltip key={uiElement.id} title={uiElement.description || ''}> - <Link component="a" variant="body2" color="secondary" style={{ width: 485, marginLeft: 20, marginRight: 20 }} onClick={() => { - this.props.navigateTo(uiElement.viewId); - }}>{uiElement.label}</Link> - </Tooltip> - ); - default: - if (process.env.NODE_ENV !== "production") { - console.error(`Unknown type - ${(uiElement as any).uiType} in ${(uiElement as any).id}.`) - } - return null; - } - }) - ) - - private createBreadCrump = (viewId: string, viewSpecifications: ViewSpecification[]) => { - const result: JSX.Element[] = []; - const hasIndex = /\/\$\$INDEX:(\d+):?([a-z\-]+)?\$\$/i; - let currentViewSpecification = viewSpecifications.find(s => s.id === viewId); - let indexCounter = 0; - while (currentViewSpecification != null) { - const currentViewId = currentViewSpecification.id; - const currentDataPathHasIndex = hasIndex.test(currentViewSpecification.dataPath); - result.unshift(( - <span> - <Link component="a" variant="body2" color="secondary" onClick={() => { - this.props.navigateTo(currentViewId, currentDataPathHasIndex ? ++indexCounter : indexCounter); - }}>{currentViewSpecification.name}</Link> - {viewId === currentViewId ? null : " | "} - </span> - )); - currentViewSpecification = viewSpecifications.find(s => s.id === (currentViewSpecification && currentViewSpecification.parentView || '')); - } - return result; - } -} - -export const ConfigurationApplication = connect(mapProps, mapDisp)(ConfigurationApplicationComponent); -export default ConfigurationApplication;
\ No newline at end of file |