aboutsummaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/apps/configurationApp/src/views
diff options
context:
space:
mode:
authorHerbert Eiselt <herbert.eiselt@highstreet-technologies.com>2019-04-03 17:12:30 +0200
committerHerbert Eiselt <herbert.eiselt@highstreet-technologies.com>2019-04-03 17:13:01 +0200
commit97fa6d943c57a784a52462aaacb329ce93cf42d6 (patch)
treeb5f0f2484c0a886fcade7b9bcf1d230e6f9e9501 /sdnr/wt/odlux/apps/configurationApp/src/views
parent3d6dd098db8ec243ca716a09fc55decbdd23b726 (diff)
SDN-R odlux configuration
Add odlux configuration app Change-Id: Ifecd3f6e1e3060a1fd1008f1f625a70cb2475a8a Issue-ID: SDNC-584 Signed-off-by: Herbert Eiselt <herbert.eiselt@highstreet-technologies.com>
Diffstat (limited to 'sdnr/wt/odlux/apps/configurationApp/src/views')
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx297
1 files changed, 297 insertions, 0 deletions
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx b/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx
new file mode 100644
index 000000000..5865c10e5
--- /dev/null
+++ b/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx
@@ -0,0 +1,297 @@
+import * as React from 'react';
+
+import { MaterialTable, ColumnType, 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 (
+ <>
+ <h2>Please select an existing LP first !</h2>
+ <ul>
+ { this.props.coreModel && 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>
+ </>
+ );
+ } 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 Not Found</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