From aee5dc5c1a62ba13c792028e9eea5886a680eb79 Mon Sep 17 00:00:00 2001 From: Aijana Schumann Date: Wed, 7 Oct 2020 13:51:14 +0200 Subject: ConfigApp bugfixes fix remove button in lists and boolean filters not working, fix delay-period not configurable Issue-ID: CCSDK-2878 Signed-off-by: Aijana Schumann Change-Id: I49f03840de6092f9ac4641b7c98785b5feb760b4 --- .../configurationApp/src/actions/deviceActions.ts | 5 +- .../configurationApp/src/components/baseProps.ts | 8 +- .../src/components/uiElementLeafList.tsx | 204 ++++++++++++++++++++ .../src/views/configurationApplication.tsx | 214 ++++++++++++++------- .../wt/odlux/framework/src/services/restService.ts | 2 +- sdnr/wt/odlux/framework/src/views/frame.tsx | 97 +++++----- sdnr/wt/odlux/package.json | 1 + sdnr/wt/odlux/yarn.lock | 5 + 8 files changed, 418 insertions(+), 118 deletions(-) create mode 100644 sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx (limited to 'sdnr') diff --git a/sdnr/wt/odlux/apps/configurationApp/src/actions/deviceActions.ts b/sdnr/wt/odlux/apps/configurationApp/src/actions/deviceActions.ts index 1db66c0d4..790d2515c 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/actions/deviceActions.ts +++ b/sdnr/wt/odlux/apps/configurationApp/src/actions/deviceActions.ts @@ -49,6 +49,9 @@ export class UpdatOutputData extends Action { export const updateNodeIdAsyncActionCreator = (nodeId: string) => async (dispatch: Dispatch, getState: () => IApplicationStoreState ) => { + dispatch(new UpdateDeviceDescription("", {}, [])); + dispatch(new SetCollectingSelectionData(true)); + const availableCapabilities = await restService.getCapabilitiesByMoutId(nodeId); if (!availableCapabilities || availableCapabilities.length <= 0) { @@ -70,7 +73,7 @@ export const updateNodeIdAsyncActionCreator = (nodeId: string) => async (dispatc parser.postProcess(); - console.log(parser.modules, parser.views) + dispatch(new SetCollectingSelectionData(false)); return dispatch(new UpdateDeviceDescription(nodeId, parser.modules, parser.views)); } diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts b/sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts index 8f7300cfb..73812a4b8 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts @@ -18,4 +18,10 @@ import { ViewElement } from "../models/uiModels"; -export type BaseProps = { value: ViewElement, inputValue: TValue, readOnly: boolean, disabled: boolean, onChange(newValue: TValue): void }; \ No newline at end of file +export type BaseProps = { + value: ViewElement, + inputValue: TValue, + readOnly: boolean, + disabled: boolean, + onChange(newValue: TValue): void +}; diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx new file mode 100644 index 000000000..c705b982f --- /dev/null +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx @@ -0,0 +1,204 @@ +/** + * ============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 { FormControl, InputLabel, Paper, Chip, FormHelperText, Dialog, DialogTitle, DialogContentText, DialogActions, Button, DialogContent } from "@material-ui/core"; +import { makeStyles } from '@material-ui/core/styles'; +import AddIcon from '@material-ui/icons/Add'; + +import { ViewElement } from "../models/uiModels"; + +import { BaseProps } from "./baseProps"; + +type LeafListProps = BaseProps & { + getEditorForViewElement: (uiElement: ViewElement) => (null | React.ComponentType>) +}; + +const useStyles = makeStyles((theme) => { + const light = theme.palette.type === 'light'; + const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)'; + + return ({ + root: { + display: 'flex', + justifyContent: 'left', + verticalAlign: 'bottom', + flexWrap: 'wrap', + listStyle: 'none', + margin: 0, + padding: 0, + paddingTop: theme.spacing(0.5), + marginTop: theme.spacing(1), + }, + chip: { + margin: theme.spacing(0.5), + }, + underline: { + '&:after': { + borderBottom: `2px solid ${theme.palette.primary.main}`, + left: 0, + bottom: 0, + // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242 + content: '""', + position: 'absolute', + right: 0, + transform: 'scaleX(0)', + transition: theme.transitions.create('transform', { + duration: theme.transitions.duration.shorter, + easing: theme.transitions.easing.easeOut, + }), + pointerEvents: 'none', // Transparent to the hover style. + }, + '&$focused:after': { + transform: 'scaleX(1)', + }, + '&$error:after': { + borderBottomColor: theme.palette.error.main, + transform: 'scaleX(1)', // error is always underlined in red + }, + '&:before': { + borderBottom: `1px solid ${bottomLineColor}`, + left: 0, + bottom: 0, + // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242 + content: '"\\00a0"', + position: 'absolute', + right: 0, + transition: theme.transitions.create('border-bottom-color', { + duration: theme.transitions.duration.shorter, + }), + pointerEvents: 'none', // Transparent to the hover style. + }, + '&:hover:not($disabled):before': { + borderBottom: `2px solid ${theme.palette.text.primary}`, + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + borderBottom: `1px solid ${bottomLineColor}`, + }, + }, + '&$disabled:before': { + borderBottomStyle: 'dotted', + }, + }, + }) +}); + +export const UiElementLeafList = (props: LeafListProps) => { + const { value: element, inputValue, onChange } = props; + + const classes = useStyles(); + + const [open, setOpen] = React.useState(false); + const [editorValue, setEditorValue] = React.useState(""); + const [editorValueIndex, setEditorValueIndex] = React.useState(-1); + + + const handleClickOpen = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + + const onApplyButton = () => { + if (editorValue != null && editorValue != "" && editorValueIndex < 0) { + props.onChange([ + ...inputValue, + editorValue, + ]); + } else if (editorValue != null && editorValue != "") { + props.onChange([ + ...inputValue.slice(0, editorValueIndex), + editorValue, + ...inputValue.slice(editorValueIndex+1), + ]); + } + setOpen(false); + }; + + const onDelete = (index : number) => { + const newValue : any[] = [ + ...inputValue.slice(0, index), + ...inputValue.slice(index+1), + ]; + onChange(newValue); + }; + + const ValueEditor = props.getEditorForViewElement(props.value); + + return ( + <> + + {element.label} +
    + { !props.readOnly ?
  • + } + label={"Add"} + className={classes.chip} + size="small" + color="secondary" + onClick={ () => { + setOpen(true); + setEditorValue(""); + setEditorValueIndex(-1); + } + } + /> +
    • : null } + { inputValue.map((val, ind) => ( +
  • + { onDelete(ind); } : undefined } + onClick={ !props.readOnly ? () => { + setOpen(true); + setEditorValue(val); + setEditorValueIndex(ind); + } : undefined + } + /> +
    • + )) + } +
+ {/* { "Value is mandetory"} */} + + + {editorValueIndex < 0 ? "Add new value" : "Edit value" } + + { ValueEditor && || null } + + + + + + + + ); +}; \ No newline at end of file diff --git a/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx b/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx index 6465feb4e..fc3c68e88 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx @@ -45,15 +45,19 @@ import InputLabel from "@material-ui/core/InputLabel"; import Select from "@material-ui/core/Select"; import MenuItem from "@material-ui/core/MenuItem"; import Breadcrumbs from "@material-ui/core/Breadcrumbs"; +import { Button } from '@material-ui/core'; import Link from "@material-ui/core/Link"; +import { BaseProps } from '../components/baseProps'; import { UIElementReference } from '../components/uiElementReference'; import { UiElementNumber } from '../components/uiElementNumber'; import { UiElementString } from '../components/uiElementString'; import { UiElementBoolean } from '../components/uiElementBoolean'; import { UiElementSelection } from '../components/uiElementSelection'; import { UIElementUnion } from '../components/uiElementUnion'; -import { Button } from '@material-ui/core'; +import { UiElementLeafList } from '../components/uiElementLeafList'; + +import { useConfirm } from 'material-ui-confirm'; const styles = (theme: Theme) => createStyles({ header: { @@ -281,68 +285,130 @@ class ConfigurationApplicationComponent extends React.Component>) => { + if (isViewElementEmpty(uiElement)) { + return null; + } else if (isViewElementSelection(uiElement)) { + return UiElementSelection; + } else if (isViewElementBoolean(uiElement)) { + return UiElementBoolean; + } else if (isViewElementString(uiElement)) { + return UiElementString; + } else if (isViewElementNumber(uiElement)) { + return UiElementNumber; + } 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}.`) + } + return null; + } + } + private renderUIElement = (uiElement: ViewElement, viewData: { [key: string]: any }, keyProperty: string | undefined, editMode: boolean, isNew: boolean) => { const isKey = (uiElement.label === keyProperty); const canEdit = editMode && (isNew || (uiElement.config && !isKey)); - - // do not show elements w/o any value from the backend + + // do not show elements w/o any value from the backend if (viewData[uiElement.id] == null && !editMode) { return null; - } else if (isViewElementEmpty(uiElement)) { + } else if (isViewElementEmpty(uiElement)) { return null; - } else if (isViewElementSelection(uiElement)) { - - return { this.changeValueFor(uiElement.id, e) }} - /> - - } else if (isViewElementBoolean(uiElement)) { - return { this.changeValueFor(uiElement.id, e) }} /> - - } else if (isViewElementString(uiElement)) { - return { this.changeValueFor(uiElement.id, e) }} /> - - } else if (isViewElementNumber(uiElement)) { - return { this.changeValueFor(uiElement.id, e) }} /> - } else if (isViewElementUnion(uiElement)) { - return { this.changeValueFor(uiElement.id, e) }} /> + } else if (uiElement.isList) { + /* element is a leaf-list */ + return { this.changeValueFor(uiElement.id, e) }} + getEditorForViewElement = { this.getEditorForViewElement } + />; } else { - if (process.env.NODE_ENV !== "production") { - console.error(`Unknown element type - ${(uiElement as any).uiType} in ${(uiElement as any).id}.`) - } - return null; + const Element = this.getEditorForViewElement(uiElement); + return Element != null + ? ( + { this.changeValueFor(uiElement.id, e) }} + /> ) + : null ; } + + // // do not show elements w/o any value from the backend + // if (viewData[uiElement.id] == null && !editMode) { + // return null; + // } else if (isViewElementEmpty(uiElement)) { + // return null; + // } else if (uiElement.isList) { + // /* element is a leaf-list */ + // return { this.changeValueFor(uiElement.id, e) }} + // />; + // } else if (isViewElementSelection(uiElement)) { + + // return { this.changeValueFor(uiElement.id, e) }} + // /> + + // } else if (isViewElementBoolean(uiElement)) { + // return { this.changeValueFor(uiElement.id, e) }} /> + + // } else if (isViewElementString(uiElement)) { + // return { this.changeValueFor(uiElement.id, e) }} /> + + // } else if (isViewElementNumber(uiElement)) { + // return { this.changeValueFor(uiElement.id, e) }} /> + // } else if (isViewElementUnion(uiElement)) { + // return { this.changeValueFor(uiElement.id, e) }} /> + // } else { + // if (process.env.NODE_ENV !== "production") { + // console.error(`Unknown element type - ${(uiElement as any).uiType} in ${(uiElement as any).id}.`) + // } + // return null; + // } }; // private renderUIReference = (uiElement: ViewElement, viewData: { [key: string]: any }, keyProperty: string | undefined, editMode: boolean, isNew: boolean) => { @@ -399,7 +465,7 @@ class ConfigurationApplicationComponent extends React.Component { const caseElm = uiElement.cases[caseKey]; return ( - {caseElm.label} +
{caseElm.label}
 ); }) } @@ -508,31 +574,41 @@ class ConfigurationApplicationComponent extends React.Component void} > = (props) => { + const confirm = useConfirm(); + + return ( + + { + e.stopPropagation(); + e.preventDefault(); + confirm({title: "Do you really want to delete this element ?", description: "This action is permanent!", confirmationButtonProps: { color: "secondary" }}) + .then(() => removeElement(`${this.props.vPath}[${props.rowData[listKeyProperty]}]`)) + .then( props.onReload ); + }} > + + + + ); + } + return ( []>((acc, cur) => { const elm = listElements[cur]; 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(elm.uiType === "boolean" ? { property: elm.label, type: ColumnType.boolean } : { 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(elm.uiType === "boolean" ? { property: elm.label, type: ColumnType.boolean } : { 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 })=> { return ( - - { - e.stopPropagation(); - e.preventDefault(); - removeElement(`${this.props.vPath}[${rowData[listKeyProperty]}]`) - }} > - - - - ) + this.props.vPath && this.props.reloadView(this.props.vPath) } /> + ); }) }]) } onHandleClick={(ev, row) => { @@ -725,7 +801,7 @@ class ConfigurationApplicationComponent extends React.Component
-

Collecting Data ...

+

Processing ...

); diff --git a/sdnr/wt/odlux/framework/src/services/restService.ts b/sdnr/wt/odlux/framework/src/services/restService.ts index 19ef34f91..f05c7b89f 100644 --- a/sdnr/wt/odlux/framework/src/services/restService.ts +++ b/sdnr/wt/odlux/framework/src/services/restService.ts @@ -85,7 +85,7 @@ export async function requestRestExt(path: string = '', init: RequestInit }; } const contentType = fetchResult.headers.get("Content-Type") || fetchResult.headers.get("content-type"); - const isJson = contentType && contentType.toLowerCase().startsWith("application/json"); + const isJson = contentType && (contentType.toLowerCase().startsWith("application/json") || contentType.toLowerCase().startsWith("application/yang-data+json")); try { const data = (isJson ? await fetchResult.json() : await fetchResult.text()) as TData; return { diff --git a/sdnr/wt/odlux/framework/src/views/frame.tsx b/sdnr/wt/odlux/framework/src/views/frame.tsx index 521897554..c8e24fdb9 100644 --- a/sdnr/wt/odlux/framework/src/views/frame.tsx +++ b/sdnr/wt/odlux/framework/src/views/frame.tsx @@ -21,6 +21,9 @@ import { HashRouter as Router, Route, Redirect, Switch } from 'react-router-dom' import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles'; import { faHome, faAddressBook, faSignInAlt } from '@fortawesome/free-solid-svg-icons'; +import { SnackbarProvider } from 'notistack'; +import { ConfirmProvider } from 'material-ui-confirm'; + import AppFrame from '../components/routing/appFrame'; import TitleBar from '../components/titleBar'; import Menu from '../components/navigationMenu'; @@ -33,7 +36,7 @@ import About from '../views/about'; import Test from '../views/test'; import applicationService from '../services/applicationManager'; -import { SnackbarProvider } from 'notistack'; + const styles = (theme: Theme) => createStyles({ root: { @@ -63,52 +66,54 @@ class FrameComponent extends React.Component{ const registrations = applicationService.applications; const { classes } = this.props; return ( - - -
- - - - -
- { -
//needed for margins, don't remove! - } - - ( - - - - )} /> - ( - - - - )} /> - {process.env.NODE_ENV === "development" ? ( - - - - )} /> : null} - ( - - - - )} /> - {Object.keys(registrations).map(p => { - const application = registrations[p]; - return ( ( - - + + + +
+ + + + +
+ { +
//needed for margins, don't remove! + } + + ( + + + + )} /> + ( + + + + )} /> + {process.env.NODE_ENV === "development" ? ( + + + + )} /> : null} + ( + + - )} />) - })} - - -
-
- - + )} /> + {Object.keys(registrations).map(p => { + const application = registrations[p]; + return ( ( + + + + )} />) + })} + + +
+
+ + + ); } } diff --git a/sdnr/wt/odlux/package.json b/sdnr/wt/odlux/package.json index 9053e0886..4eaf5fc26 100644 --- a/sdnr/wt/odlux/package.json +++ b/sdnr/wt/odlux/package.json @@ -32,6 +32,7 @@ "jsonwebtoken": "8.3.0", "jss": "10.0.3", "lerna": "3.13.1", + "material-ui-confirm": "2.1.1", "notistack": "0.9.6", "prop-types": "15.7.2", "react": "16.12.0", diff --git a/sdnr/wt/odlux/yarn.lock b/sdnr/wt/odlux/yarn.lock index e71ad3f44..9f1065b28 100644 --- a/sdnr/wt/odlux/yarn.lock +++ b/sdnr/wt/odlux/yarn.lock @@ -7274,6 +7274,11 @@ marked@0.6.0: resolved "https://registry.yarnpkg.com/marked/-/marked-0.6.0.tgz#a18d01cfdcf8d15c3c455b71c8329e5e0f01faa1" integrity sha512-HduzIW2xApSXKXJSpCipSxKyvMbwRRa/TwMbepmlZziKdH8548WSoDP4SxzulEKjlo8BE39l+2fwJZuRKOln6g== +material-ui-confirm@2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/material-ui-confirm/-/material-ui-confirm-2.1.1.tgz#dbc3ff66502a183966a3f0a2ebb2ff8ba22a148d" + integrity sha512-d671LgozdJP54buZTv+Eemo0ySYTCXF3QqfYKO7axoG/8g659G5+aD7PovYupsfSSOXOzyzpYRhjbIhE4yrPHA== + math-random@^1.0.1: version "1.0.4" resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.4.tgz#5dd6943c938548267016d4e34f057583080c514c" -- cgit 1.2.3-korg