summaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/apps/configurationApp/src/views
diff options
context:
space:
mode:
authorsai-neetha <sai-neetha.phulmali@highstreet-technologies.com>2023-03-20 08:05:47 +0100
committerhighstreetherbert <herbert.eiselt@highstreet-technologies.com>2023-03-29 19:06:25 +0200
commit15e2d3a29b0d1a304965e34f114a911e5a7abdb3 (patch)
tree711ef5616aceb115a1081cccd152eeae0e87bc79 /sdnr/wt/odlux/apps/configurationApp/src/views
parentac5e2dc8f1ee4d5549f7260374e8164d52b07f55 (diff)
Odlux Update
Add eslint and custom icons update Issue-ID: CCSDK-3871 Signed-off-by: sai-neetha <sai-neetha.phulmali@highstreet-technologies.com> Change-Id: If6b676128cc9cff0437a5dc54f85eaafd3b8c586 Signed-off-by: highstreetherbert <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.tsx320
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/views/networkElementSelector.tsx28
2 files changed, 187 insertions, 161 deletions
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx b/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx
index 0e2ddb395..0f143d818 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx
@@ -25,17 +25,41 @@ import { WithStyles } from '@mui/styles';
import withStyles from '@mui/styles/withStyles';
import createStyles from '@mui/styles/createStyles';
-import connect, { IDispatcher, Connect } from "../../../../framework/src/flux/connect";
-import { IApplicationStoreState } from "../../../../framework/src/store/applicationStore";
-import MaterialTable, { ColumnModel, ColumnType, MaterialTableCtorType } from "../../../../framework/src/components/material-table";
-import { Loader } from "../../../../framework/src/components/material-ui/loader";
+import { useConfirm } from 'material-ui-confirm';
+
+import { connect, IDispatcher, Connect } from '../../../../framework/src/flux/connect';
+import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
+import MaterialTable, { ColumnModel, ColumnType, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { Loader } from '../../../../framework/src/components/material-ui/loader';
import { renderObject } from '../../../../framework/src/components/objectDump';
import { DisplayModeType } from '../handlers/viewDescriptionHandler';
-import { SetSelectedValue, splitVPath, updateDataActionAsyncCreator, updateViewActionAsyncCreator, removeElementActionAsyncCreator, executeRpcActionAsyncCreator } from "../actions/deviceActions";
-import { ViewSpecification, isViewElementString, isViewElementNumber, isViewElementBoolean, isViewElementObjectOrList, isViewElementSelection, isViewElementChoise, ViewElement, ViewElementChoise, isViewElementUnion, isViewElementRpc, ViewElementRpc, isViewElementEmpty, isViewElementDate } from "../models/uiModels";
-
-import { getAccessPolicyByUrl } from "../../../../framework/src/services/restService";
+import {
+ SetSelectedValue,
+ updateDataActionAsyncCreator,
+ updateViewActionAsyncCreator,
+ removeElementActionAsyncCreator,
+ executeRpcActionAsyncCreator,
+} from '../actions/deviceActions';
+
+import {
+ ViewElement,
+ ViewSpecification,
+ ViewElementChoice,
+ ViewElementRpc,
+ isViewElementString,
+ isViewElementNumber,
+ isViewElementBoolean,
+ isViewElementObjectOrList,
+ isViewElementSelection,
+ isViewElementChoice,
+ isViewElementUnion,
+ isViewElementRpc,
+ isViewElementEmpty,
+ isViewElementDate,
+} from '../models/uiModels';
+
+import { getAccessPolicyByUrl } from '../../../../framework/src/services/restService';
import Fab from '@mui/material/Fab';
import AddIcon from '@mui/icons-material/Add';
@@ -44,23 +68,22 @@ import ArrowBack from '@mui/icons-material/ArrowBack';
import RemoveIcon from '@mui/icons-material/RemoveCircleOutline';
import SaveIcon from '@mui/icons-material/Save';
import EditIcon from '@mui/icons-material/Edit';
-import Tooltip from "@mui/material/Tooltip";
-import FormControl from "@mui/material/FormControl";
-import IconButton from "@mui/material/IconButton";
-
-import InputLabel from "@mui/material/InputLabel";
-import Select from "@mui/material/Select";
-import MenuItem from "@mui/material/MenuItem";
-import Breadcrumbs from "@mui/material/Breadcrumbs";
+import Tooltip from '@mui/material/Tooltip';
+import FormControl from '@mui/material/FormControl';
+import IconButton from '@mui/material/IconButton';
+
+import InputLabel from '@mui/material/InputLabel';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
import Button from '@mui/material/Button';
-import Link from "@mui/material/Link";
+import Link from '@mui/material/Link';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-
import { BaseProps } from '../components/baseProps';
import { UIElementReference } from '../components/uiElementReference';
import { UiElementNumber } from '../components/uiElementNumber';
@@ -70,44 +93,43 @@ import { UiElementSelection } from '../components/uiElementSelection';
import { UIElementUnion } from '../components/uiElementUnion';
import { UiElementLeafList } from '../components/uiElementLeafList';
-import { useConfirm } from 'material-ui-confirm';
-import restService from '../services/restServices';
+import { splitVPath } from '../utilities/viewEngineHelper';
const styles = (theme: Theme) => createStyles({
header: {
- "display": "flex",
- "justifyContent": "space-between",
+ 'display': 'flex',
+ 'justifyContent': 'space-between',
},
leftButton: {
- "justifyContent": "left"
+ 'justifyContent': 'left',
},
outer: {
- "flex": "1",
- "height": "100%",
- "display": "flex",
- "alignItems": "center",
- "justifyContent": "center",
+ 'flex': '1',
+ 'height': '100%',
+ 'display': 'flex',
+ 'alignItems': 'center',
+ 'justifyContent': 'center',
},
inner: {
},
container: {
- "height": "100%",
- "display": "flex",
- "flexDirection": "column",
+ 'height': '100%',
+ 'display': 'flex',
+ 'flexDirection': 'column',
},
- "icon": {
- "marginRight": theme.spacing(0.5),
- "width": 20,
- "height": 20,
+ 'icon': {
+ 'marginRight': theme.spacing(0.5),
+ 'width': 20,
+ 'height': 20,
},
- "fab": {
- "margin": theme.spacing(1),
+ 'fab': {
+ 'margin': theme.spacing(1),
},
button: {
margin: 0,
- padding: "6px 6px",
- minWidth: 'unset'
+ padding: '6px 6px',
+ minWidth: 'unset',
},
readOnly: {
'& label.Mui-focused': {
@@ -129,29 +151,29 @@ const styles = (theme: Theme) => createStyles({
},
},
uiView: {
- overflowY: "auto",
+ overflowY: 'auto',
},
section: {
- padding: "15px",
+ padding: '15px',
borderBottom: `2px solid ${theme.palette.divider}`,
},
viewElements: {
- width: 485, marginLeft: 20, marginRight: 20
+ width: 485, marginLeft: 20, marginRight: 20,
},
verificationElements: {
- width: 485, marginLeft: 20, marginRight: 20
+ width: 485, marginLeft: 20, marginRight: 20,
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular,
},
moduleCollection: {
- marginTop: "16px",
- overflow: "auto",
+ marginTop: '16px',
+ overflow: 'auto',
},
objectReult: {
- overflow: "auto"
- }
+ overflow: 'auto',
+ },
});
const mapProps = (state: IApplicationStoreState) => ({
@@ -183,10 +205,10 @@ type ConfigurationApplicationComponentState = {
editMode: boolean;
canEdit: boolean;
viewData: { [key: string]: any } | null;
- choises: { [path: string]: { selectedCase: string, data: { [property: string]: any } } };
-}
+ choices: { [path: string]: { selectedCase: string; data: { [property: string]: any } } };
+};
-type GetStatelessComponentProps<T> = T extends (props: infer P & { children?: React.ReactNode }) => any ? P : any
+type GetStatelessComponentProps<T> = T extends (props: infer P & { children?: React.ReactNode }) => any ? P : any;
const AccordionSummaryExt: React.FC<GetStatelessComponentProps<typeof AccordionSummary>> = (props) => {
const [disabled, setDisabled] = useState(true);
const onMouseDown = (ev: React.MouseEvent<HTMLElement>) => {
@@ -202,7 +224,7 @@ const AccordionSummaryExt: React.FC<GetStatelessComponentProps<typeof AccordionS
);
};
-const OldProps = Symbol("OldProps");
+const OldProps = Symbol('OldProps');
class ConfigurationApplicationComponent extends React.Component<ConfigurationApplicationComponentProps, ConfigurationApplicationComponentState> {
/**
@@ -216,17 +238,17 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
canEdit: false,
editMode: false,
viewData: null,
- choises: {},
- }
+ choices: {},
+ };
}
- private static getChoisesFromElements = (elements: { [name: string]: ViewElement }, viewData: any) => {
+ private static getChoicesFromElements = (elements: { [name: string]: ViewElement }, viewData: any) => {
return Object.keys(elements).reduce((acc, cur) => {
const elm = elements[cur];
- if (isViewElementChoise(elm)) {
+ if (isViewElementChoice(elm)) {
const caseKeys = Object.keys(elm.cases);
- // find the right case for this choise, use the first one with data, at least use index 0
+ // find the right case for this choice, use the first one with data, at least use index 0
const selectedCase = caseKeys.find(key => {
const caseElm = elm.cases[key];
return Object.keys(caseElm.elements).some(caseElmKey => {
@@ -255,26 +277,26 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
};
}
return acc;
- }, {} as { [path: string]: { selectedCase: string, data: { [property: string]: any } } }) || {}
- }
+ }, {} as { [path: string]: { selectedCase: string; data: { [property: string]: any } } }) || {};
+ };
static getDerivedStateFromProps(nextProps: ConfigurationApplicationComponentProps, prevState: ConfigurationApplicationComponentState & { [OldProps]: ConfigurationApplicationComponentProps }) {
if (!prevState || !prevState[OldProps] || (prevState[OldProps].viewData !== nextProps.viewData)) {
- const isNew: boolean = nextProps.vPath?.endsWith("[]") || false;
+ const isNew: boolean = nextProps.vPath?.endsWith('[]') || false;
const state = {
...prevState,
isNew: isNew,
editMode: isNew,
viewData: nextProps.viewData || null,
[OldProps]: nextProps,
- choises: nextProps.displaySpecification.displayMode === DisplayModeType.doNotDisplay
+ choices: nextProps.displaySpecification.displayMode === DisplayModeType.doNotDisplay
|| nextProps.displaySpecification.displayMode === DisplayModeType.displayAsMessage
? null
: nextProps.displaySpecification.displayMode === DisplayModeType.displayAsRPC
- ? nextProps.displaySpecification.inputViewSpecification && ConfigurationApplicationComponent.getChoisesFromElements(nextProps.displaySpecification.inputViewSpecification.elements, nextProps.viewData) || []
- : ConfigurationApplicationComponent.getChoisesFromElements(nextProps.displaySpecification.viewSpecification.elements, nextProps.viewData)
- }
+ ? nextProps.displaySpecification.inputViewSpecification && ConfigurationApplicationComponent.getChoicesFromElements(nextProps.displaySpecification.inputViewSpecification.elements, nextProps.viewData) || []
+ : ConfigurationApplicationComponent.getChoicesFromElements(nextProps.displaySpecification.viewSpecification.elements, nextProps.viewData),
+ };
return state;
}
return null;
@@ -282,24 +304,24 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
private navigate = (path: string) => {
this.props.history.push(`${this.props.match.url}${path}`);
- }
+ };
private changeValueFor = (property: string, value: any) => {
this.setState({
viewData: {
...this.state.viewData,
- [property]: value
- }
+ [property]: value,
+ },
});
- }
+ };
private collectData = (elements: { [name: string]: ViewElement }) => {
- // ensure only active choises will be contained
+ // ensure only active choices will be contained
const viewData: { [key: string]: any } = { ...this.state.viewData };
- const choiseKeys = Object.keys(elements).filter(elmKey => isViewElementChoise(elements[elmKey]));
- const elementsToRemove = choiseKeys.reduce((acc, curChoiceKey) => {
- const currentChoice = elements[curChoiceKey] as ViewElementChoise;
- const selectedCase = this.state.choises[curChoiceKey].selectedCase;
+ const choiceKeys = Object.keys(elements).filter(elmKey => isViewElementChoice(elements[elmKey]));
+ const elementsToRemove = choiceKeys.reduce((acc, curChoiceKey) => {
+ const currentChoice = elements[curChoiceKey] as ViewElementChoice;
+ const selectedCase = this.state.choices[curChoiceKey].selectedCase;
Object.keys(currentChoice.cases).forEach(caseKey => {
const caseElements = currentChoice.cases[caseKey].elements;
if (caseKey === selectedCase) {
@@ -311,7 +333,7 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
}
});
return;
- };
+ }
Object.keys(caseElements).forEach(caseElementKey => {
acc.push(caseElements[caseElementKey]);
});
@@ -325,17 +347,17 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
}
return acc;
}, {} as { [key: string]: any });
- }
+ };
private isPolicyViewElementForbidden = (element: ViewElement, dataPath: string): boolean => {
const policy = getAccessPolicyByUrl(`${dataPath}/${element.id}`);
return !(policy.GET && policy.POST);
- }
+ };
private isPolicyModuleForbidden = (moduleName: string, dataPath: string): boolean => {
const policy = getAccessPolicyByUrl(`${dataPath}/${moduleName}`);
return !(policy.GET && policy.POST);
- }
+ };
private getEditorForViewElement = (uiElement: ViewElement): (null | React.ComponentType<BaseProps<any>>) => {
if (isViewElementEmpty(uiElement)) {
@@ -353,12 +375,12 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
} else if (isViewElementUnion(uiElement)) {
return UIElementUnion;
} else {
- if (process.env.NODE_ENV !== "production") {
- console.error(`Unknown element type - ${(uiElement as any).uiType} in ${(uiElement as any).id}.`)
+ if (process.env.NODE_ENV !== 'production') {
+ console.error(`Unknown element type - ${(uiElement as any).uiType} in ${(uiElement as any).id}.`);
}
return null;
}
- }
+ };
private renderUIElement = (uiElement: ViewElement, viewData: { [key: string]: any }, keyProperty: string | undefined, editMode: boolean, isNew: boolean) => {
const isKey = (uiElement.label === keyProperty);
@@ -377,7 +399,7 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
value={uiElement}
readOnly={!canEdit}
disabled={editMode && !canEdit}
- onChange={(e) => { this.changeValueFor(uiElement.id, e) }}
+ onChange={(e) => { this.changeValueFor(uiElement.id, e); }}
getEditorForViewElement={this.getEditorForViewElement}
/>;
} else {
@@ -391,7 +413,7 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
value={uiElement}
readOnly={!canEdit}
disabled={editMode && !canEdit}
- onChange={(e) => { this.changeValueFor(uiElement.id, e) }}
+ onChange={(e) => { this.changeValueFor(uiElement.id, e); }}
/>)
: null;
}
@@ -418,14 +440,14 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
// }
// };
- private renderUIChoise = (uiElement: ViewElementChoise, viewData: { [key: string]: any }, keyProperty: string | undefined, editMode: boolean, isNew: boolean) => {
+ private renderUIChoice = (uiElement: ViewElementChoice, viewData: { [key: string]: any }, keyProperty: string | undefined, editMode: boolean, isNew: boolean) => {
const isKey = (uiElement.label === keyProperty);
- const currentChoise = this.state.choises[uiElement.id];
- const currentCase = currentChoise && uiElement.cases[currentChoise.selectedCase];
+ const currentChoice = this.state.choices[uiElement.id];
+ const currentCase = currentChoice && uiElement.cases[currentChoice.selectedCase];
const canEdit = editMode && (isNew || (uiElement.config && !isKey));
- if (isViewElementChoise(uiElement)) {
+ if (isViewElementChoice(uiElement)) {
const subElements = currentCase?.elements;
return (
<>
@@ -435,14 +457,14 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
aria-label={uiElement.label + '-selection'}
required={!!uiElement.mandatory}
onChange={(e) => {
- if (currentChoise.selectedCase === e.target.value) {
+ if (currentChoice.selectedCase === e.target.value) {
return; // nothing changed
}
- this.setState({ choises: { ...this.state.choises, [uiElement.id]: { ...this.state.choises[uiElement.id], selectedCase: e.target.value as string } } });
+ this.setState({ choices: { ...this.state.choices, [uiElement.id]: { ...this.state.choices[uiElement.id], selectedCase: e.target.value as string } } });
}}
readOnly={!canEdit}
disabled={editMode && !canEdit}
- value={this.state.choises[uiElement.id].selectedCase}
+ value={this.state.choices[uiElement.id].selectedCase}
inputProps={{
name: uiElement.id,
id: `select-${uiElement.id}`,
@@ -452,7 +474,7 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
Object.keys(uiElement.cases).map(caseKey => {
const caseElm = uiElement.cases[caseKey];
return (
- <MenuItem key={caseElm.id} value={caseKey} aria-label={caseKey}><Tooltip title={caseElm.description || ''}><div style={{ width: "100%" }}>{caseElm.label}</div></Tooltip></MenuItem>
+ <MenuItem key={caseElm.id} value={caseKey} aria-label={caseKey}><Tooltip title={caseElm.description || ''}><div style={{ width: '100%' }}>{caseElm.label}</div></Tooltip></MenuItem>
);
})
}
@@ -463,13 +485,13 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
const elm = subElements[elmKey];
return this.renderUIElement(elm, viewData, keyProperty, editMode, isNew);
})
- : <h3>Invalid Choise</h3>
+ : <h3>Invalid Choice</h3>
}
</>
);
} else {
- if (process.env.NODE_ENV !== "production") {
- console.error(`Unknown type - ${(uiElement as any).uiType} in ${(uiElement as any).id}.`)
+ if (process.env.NODE_ENV !== 'production') {
+ console.error(`Unknown type - ${(uiElement as any).uiType} in ${(uiElement as any).id}.`);
}
return null;
}
@@ -478,8 +500,6 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
private renderUIView = (viewSpecification: ViewSpecification, dataPath: string, viewData: { [key: string]: any }, keyProperty: string | undefined, editMode: boolean, isNew: boolean) => {
const { classes } = this.props;
-
-
const orderFunc = (vsA: ViewElement, vsB: ViewElement) => {
if (keyProperty) {
// if (vsA.label === vsB.label) return 0;
@@ -497,15 +517,15 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
const elm = viewSpecification.elements[cur];
if (isViewElementObjectOrList(elm)) {
acc.references.push(elm);
- } else if (isViewElementChoise(elm)) {
- acc.choises.push(elm);
+ } else if (isViewElementChoice(elm)) {
+ acc.choices.push(elm);
} else if (isViewElementRpc(elm)) {
acc.rpcs.push(elm);
} else {
acc.elements.push(elm);
}
return acc;
- }, { elements: [] as ViewElement[], references: [] as ViewElement[], choises: [] as ViewElementChoise[], rpcs: [] as ViewElementRpc[] });
+ }, { elements: [] as ViewElement[], references: [] as ViewElement[], choices: [] as ViewElementChoice[], rpcs: [] as ViewElementRpc[] });
sections.elements = sections.elements.sort(orderFunc);
@@ -523,15 +543,15 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
? (
<div className={classes.section}>
{sections.references.map(element => (
- <UIElementReference key={element.id} element={element} disabled={editMode || this.isPolicyViewElementForbidden(element, dataPath)} onOpenReference={(elm) => { this.navigate(`/${elm.id}`) }} />
+ <UIElementReference key={element.id} element={element} disabled={editMode || this.isPolicyViewElementForbidden(element, dataPath)} onOpenReference={(elm) => { this.navigate(`/${elm.id}`); }} />
))}
</div>
) : null
}
- {sections.choises.length > 0
+ {sections.choices.length > 0
? (
<div className={classes.section}>
- {sections.choises.map(element => this.renderUIChoise(element, viewData, keyProperty, editMode, isNew))}
+ {sections.choices.map(element => this.renderUIChoice(element, viewData, keyProperty, editMode, isNew))}
</div>
) : null
}
@@ -539,7 +559,7 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
? (
<div className={classes.section}>
{sections.rpcs.map(element => (
- <UIElementReference key={element.id} element={element} disabled={editMode || this.isPolicyViewElementForbidden(element, dataPath)} onOpenReference={(elm) => { this.navigate(`/${elm.id}`) }} />
+ <UIElementReference key={element.id} element={element} disabled={editMode || this.isPolicyViewElementForbidden(element, dataPath)} onOpenReference={(elm) => { this.navigate(`/${elm.id}`); }} />
))}
</div>
) : null
@@ -550,6 +570,7 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
private renderUIViewSelector = (viewSpecification: ViewSpecification, dataPath: string, viewData: { [key: string]: any }, keyProperty: string | undefined, editMode: boolean, isNew: boolean) => {
const { classes } = this.props;
+
// group by module name
const modules = Object.keys(viewSpecification.elements).reduce<{ [key: string]: ViewSpecification }>((acc, cur) => {
const elm = viewSpecification.elements[cur];
@@ -565,6 +586,7 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
{
moduleKeys.map(key => {
const moduleView = modules[key];
+
return (
<Accordion key={key} defaultExpanded={moduleKeys.length < 4} aria-label={key + '-panel'} >
<AccordionSummaryExt expandIcon={<ExpandMoreIcon />} aria-controls={`content-${key}`} id={`header-${key}`} disabled={this.isPolicyModuleForbidden(`${key}:`, dataPath)} >
@@ -584,8 +606,8 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
private renderUIViewList(listSpecification: ViewSpecification, dataPath: string, listKeyProperty: string, apiDocPath: string, listData: { [key: string]: any }[]) {
const listElements = listSpecification.elements;
const apiDocPathCreate = apiDocPath ? `${location.origin}${apiDocPath
- .replace("$$$standard$$$", "topology-netconfnode%20resources%20-%20RestConf%20RFC%208040")
- .replace("$$$action$$$", "put")}${listKeyProperty ? `_${listKeyProperty.replace(/[\/=\-\:]/g, '_')}_` : '' }` : undefined;
+ .replace('$$$standard$$$', 'topology-netconfnode%20resources%20-%20RestConf%20RFC%208040')
+ .replace('$$$action$$$', 'put')}${listKeyProperty ? `_${listKeyProperty.replace(/[\/=\-\:]/g, '_')}_` : '' }` : undefined;
const config = listSpecification.config && listKeyProperty; // We can not configure a list with no key.
@@ -598,7 +620,7 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
tooltip: 'Add',
ariaLabel:'add-element',
onClick: () => {
- navigate("[]"); // empty key means new element
+ navigate('[]'); // empty key means new element
},
disabled: !config,
};
@@ -615,11 +637,11 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
const { classes, removeElement } = this.props;
- const DeleteIconWithConfirmation: React.FC<{disabled?: boolean, rowData: { [key: string]: any }, onReload: () => void }> = (props) => {
+ const DeleteIconWithConfirmation: React.FC<{ disabled?: boolean; rowData: { [key: string]: any }; onReload: () => void }> = (props) => {
const confirm = useConfirm();
return (
- <Tooltip disableInteractive title={"Remove"} >
+ <Tooltip disableInteractive title={'Remove'} >
<IconButton
disabled={props.disabled}
className={classes.button}
@@ -627,15 +649,15 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
onClick={async (e) => {
e.stopPropagation();
e.preventDefault();
- confirm({ title: "Do you really want to delete this element ?", description: "This action is permanent!", confirmationButtonProps: { color: "secondary" }, cancellationButtonProps: { color:"inherit" } })
- .then(() => {
- let keyId = "";
- if (listKeyProperty && listKeyProperty.split(" ").length > 1) {
- keyId += listKeyProperty.split(" ").map(id => props.rowData[id]).join(",");
+ confirm({ title: 'Do you really want to delete this element ?', description: 'This action is permanent!', confirmationButtonProps: { color: 'secondary' }, cancellationButtonProps: { color:'inherit' } })
+ .then(() => {
+ let keyId = '';
+ if (listKeyProperty && listKeyProperty.split(' ').length > 1) {
+ keyId += listKeyProperty.split(' ').map(id => props.rowData[id]).join(',');
} else {
- keyId = props.rowData[listKeyProperty];
- }
- return removeElement(`${this.props.vPath}[${keyId}]`)
+ keyId = props.rowData[listKeyProperty];
+ }
+ return removeElement(`${this.props.vPath}[${keyId}]`);
}).then(props.onReload);
}}
size="large">
@@ -643,44 +665,46 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
</IconButton>
</Tooltip>
);
- }
+ };
return (
<SelectElementTable stickyHeader idProperty={listKeyProperty} tableId={null} rows={listData} customActionButtons={apiDocPathCreate ? [addNewElementAction, addWithApiDocElementAction] : [addNewElementAction]} columns={
Object.keys(listElements).reduce<ColumnModel<{ [key: string]: any }>[]>((acc, cur) => {
const elm = listElements[cur];
- if (elm.uiType !== "object" && listData.every(entry => entry[elm.label] != null)) {
+ if (elm.uiType !== 'object' && listData.every(entry => entry[elm.label] != null)) {
if (elm.label !== listKeyProperty) {
- acc.push(elm.uiType === "boolean"
+ acc.push(elm.uiType === 'boolean'
? { property: elm.label, type: ColumnType.boolean }
- : elm.uiType === "date"
+ : elm.uiType === 'date'
? { property: elm.label, type: ColumnType.date }
- : { property: elm.label, type: elm.uiType === "number" ? ColumnType.numeric : ColumnType.text });
+ : { property: elm.label, type: elm.uiType === 'number' ? ColumnType.numeric : ColumnType.text });
} else {
- acc.unshift(elm.uiType === "boolean"
+ acc.unshift(elm.uiType === 'boolean'
? { property: elm.label, type: ColumnType.boolean }
- : elm.uiType === "date"
+ : elm.uiType === 'date'
? { property: elm.label, type: ColumnType.date }
- : { property: elm.label, type: elm.uiType === "number" ? ColumnType.numeric : ColumnType.text });
+ : { property: elm.label, type: elm.uiType === 'number' ? ColumnType.numeric : ColumnType.text });
}
}
return acc;
}, []).concat([{
- property: "Actions", disableFilter: true, disableSorting: true, type: ColumnType.custom, customControl: (({ rowData }) => {
+ property: 'Actions', disableFilter: true, disableSorting: true, type: ColumnType.custom, customControl: (({ rowData }) => {
return (
<DeleteIconWithConfirmation disabled={!config} rowData={rowData} onReload={() => this.props.vPath && this.props.reloadView(this.props.vPath)} />
);
- })
+ }),
}])
} onHandleClick={(ev, row) => {
ev.preventDefault();
- let keyId = ""
- if (listKeyProperty && listKeyProperty.split(" ").length > 1) {
- keyId += listKeyProperty.split(" ").map(id => row[id]).join(",");
+ let keyId = '';
+ if (listKeyProperty && listKeyProperty.split(' ').length > 1) {
+ keyId += listKeyProperty.split(' ').map(id => row[id]).join(',');
} else {
keyId = row[listKeyProperty];
}
- listKeyProperty && navigate(`[${encodeURIComponent(keyId)}]`); // Do not navigate without key.
+ if (listKeyProperty) {
+ navigate(`[${encodeURIComponent(keyId)}]`); // Do not navigate without key.
+ }
}} ></SelectElementTable>
);
}
@@ -704,17 +728,17 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
const sections = inputViewSpecification && Object.keys(inputViewSpecification.elements).reduce((acc, cur) => {
const elm = inputViewSpecification.elements[cur];
if (isViewElementObjectOrList(elm)) {
- console.error("Object should not appear in RPC view !");
- } else if (isViewElementChoise(elm)) {
- acc.choises.push(elm);
+ console.error('Object should not appear in RPC view !');
+ } else if (isViewElementChoice(elm)) {
+ acc.choices.push(elm);
} else if (isViewElementRpc(elm)) {
- console.error("RPC should not appear in RPC view !");
+ console.error('RPC should not appear in RPC view !');
} else {
acc.elements.push(elm);
}
return acc;
- }, { elements: [] as ViewElement[], references: [] as ViewElement[], choises: [] as ViewElementChoise[], rpcs: [] as ViewElementRpc[] })
- || { elements: [] as ViewElement[], references: [] as ViewElement[], choises: [] as ViewElementChoise[], rpcs: [] as ViewElementRpc[] };
+ }, { elements: [] as ViewElement[], references: [] as ViewElement[], choices: [] as ViewElementChoice[], rpcs: [] as ViewElementRpc[] })
+ || { elements: [] as ViewElement[], references: [] as ViewElement[], choices: [] as ViewElementChoice[], rpcs: [] as ViewElementRpc[] };
sections.elements = sections.elements.sort(orderFunc);
@@ -728,10 +752,10 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
</div>
) : null
}
- { sections.choises.length > 0
+ { sections.choices.length > 0
? (
<div className={classes.section}>
- {sections.choises.map(element => this.renderUIChoise(element, inputViewData, keyProperty, editMode, isNew))}
+ {sections.choices.map(element => this.renderUIChoice(element, inputViewData, keyProperty, editMode, isNew))}
</div>
) : null
}
@@ -747,13 +771,13 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
</div>
</>
);
- };
+ }
private renderBreadCrumps() {
const { editMode } = this.state;
const { displaySpecification, vPath, nodeId } = this.props;
const pathParts = splitVPath(vPath!, /(?:([^\/\["]+)(?:\[([^\]]*)\])?)/g); // 1 = property / 2 = optional key
- let lastPath = `/configuration`;
+ let lastPath = '/configuration';
let basePath = `/configuration/${nodeId}`;
return (
<div className={this.props.classes.header}>
@@ -774,7 +798,7 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
pathParts.map(([prop, key], ind) => {
const path = `${basePath}/${prop}`;
const keyPath = key && `${basePath}/${prop}[${key}]`;
- const propTitle = prop.replace(/^[^:]+:/, "");
+ const propTitle = prop.replace(/^[^:]+:/, '');
const ret = (
<span key={ind}>
<Link underline="hover" color="inherit" href="#"
@@ -789,8 +813,8 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
onClick={(ev: React.MouseEvent<HTMLElement>) => {
ev.preventDefault();
this.props.history.push(keyPath);
- }}>{`[${key && key.replace(/\%2C/g, ",")}]`}</Link> || null
- }
+ }}>{`[${key && key.replace(/\%2C/g, ',')}]`}</Link> || null
+ }
</span>
);
lastPath = basePath;
@@ -802,7 +826,9 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
</div>
{this.state.editMode && (
<Fab color="secondary" aria-label="back-button" className={this.props.classes.fab} onClick={async () => {
- this.props.vPath && (await this.props.reloadView(this.props.vPath));
+ if (this.props.vPath) {
+ await this.props.reloadView(this.props.vPath);
+ }
this.setState({ editMode: false });
}} ><ArrowBack /></Fab>
) || null}
@@ -810,7 +836,7 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
displaySpecification.displayMode === DisplayModeType.displayAsObject && displaySpecification.viewSpecification.canEdit && (<div>
<Fab color="secondary" aria-label={editMode ? 'save-button' : 'edit-button'} className={this.props.classes.fab} onClick={() => {
if (this.state.editMode) {
- // ensure only active choises will be contained
+ // ensure only active choices will be contained
const resultingViewData = this.collectData(displaySpecification.viewSpecification.elements);
this.props.onUpdateData(this.props.vPath!, resultingViewData);
}
@@ -830,7 +856,7 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
private renderValueSelector() {
const { listKeyProperty, listSpecification, listData, onValueSelected } = this.props;
if (!listKeyProperty || !listSpecification) {
- throw new Error("ListKex ot view not specified.");
+ throw new Error('ListKex ot view not specified.');
}
return (
@@ -838,11 +864,11 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp
<SelectElementTable stickyHeader idProperty={listKeyProperty} tableId={null} rows={listData} columns={
Object.keys(listSpecification.elements).reduce<ColumnModel<{ [key: string]: any }>[]>((acc, cur) => {
const elm = listSpecification.elements[cur];
- if (elm.uiType !== "object" && listData.every(entry => entry[elm.label] != null)) {
+ if (elm.uiType !== 'object' && listData.every(entry => entry[elm.label] != null)) {
if (elm.label !== listKeyProperty) {
- acc.push({ property: elm.label, type: elm.uiType === "number" ? ColumnType.numeric : ColumnType.text });
+ acc.push({ property: elm.label, type: elm.uiType === 'number' ? ColumnType.numeric : ColumnType.text });
} else {
- acc.unshift({ property: elm.label, type: elm.uiType === "number" ? ColumnType.numeric : ColumnType.text });
+ acc.unshift({ property: elm.label, type: elm.uiType === 'number' ? ColumnType.numeric : ColumnType.text });
}
}
return acc;
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/views/networkElementSelector.tsx b/sdnr/wt/odlux/apps/configurationApp/src/views/networkElementSelector.tsx
index 1a1008dad..e96f40d61 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/views/networkElementSelector.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/views/networkElementSelector.tsx
@@ -16,15 +16,15 @@
* ============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 { createConnectedNetworkElementsProperties, createConnectedNetworkElementsActions } from "../../../configurationApp/src/handlers/connectedNetworkElementsHandler";
+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 { NetworkElementConnection } from "../models/networkElementConnection";
+import { NetworkElementConnection } from '../models/networkElementConnection';
+import { createConnectedNetworkElementsProperties, createConnectedNetworkElementsActions } from '../../../configurationApp/src/handlers/connectedNetworkElementsHandler';
const mapProps = (state: IApplicationStoreState) => ({
@@ -47,20 +47,20 @@ class NetworkElementSelectorComponent extends React.Component<NetworkElementSele
if (!initialSorted) {
initialSorted = true;
- this.props.connectedNetworkElementsActions.onHandleRequestSort("node-id");
+ this.props.connectedNetworkElementsActions.onHandleRequestSort('node-id');
} else
this.props.connectedNetworkElementsActions.onRefresh();
}
render() {
return (
- <ConnectedElementTable stickyHeader tableId="configurable-elements-table" onHandleClick={(e, row) => { this.props.history.push(`${this.props.match.path}/${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 },
+ <ConnectedElementTable stickyHeader tableId="configurable-elements-table" onHandleClick={(e, row) => { this.props.history.push(`${this.props.match.path}/${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 >
</ConnectedElementTable>
);