From 587fb7a8b712a60def1e931e4a2480687a64f231 Mon Sep 17 00:00:00 2001 From: "saul.gill" Date: Thu, 17 Jun 2021 09:11:55 +0100 Subject: Added Tosca File Upload Functionality Added 2 new components One deals with the file upload to commissioning Other deals with display of the ui elements Issue-ID: POLICY-3222 Change-Id: I3b20489bb9e5c499f842cc8adde8147d3e3e8de0 Signed-off-by: saul.gill --- gui-clamp/ui-react-lib/libIndex.js | 4 + gui-clamp/ui-react/package.json | 3 - gui-clamp/ui-react/src/LoopUI.js | 2 + .../ui-react/src/__snapshots__/LoopUI.test.js.snap | 4 + .../src/__snapshots__/OnapClamp.test.js.snap | 4 + gui-clamp/ui-react/src/api/UploadToscaFile.js | 63 +++++++++ .../dialogs/GetLocalToscaFileForUpload.js | 150 +++++++++++++++++++++ gui-clamp/ui-react/src/components/menu/MenuBar.js | 1 + .../menu/__snapshots__/MenuBar.test.js.snap | 65 +++++++++ 9 files changed, 293 insertions(+), 3 deletions(-) create mode 100644 gui-clamp/ui-react/src/api/UploadToscaFile.js create mode 100644 gui-clamp/ui-react/src/components/dialogs/GetLocalToscaFileForUpload.js diff --git a/gui-clamp/ui-react-lib/libIndex.js b/gui-clamp/ui-react-lib/libIndex.js index 2a91ebf..60b056c 100644 --- a/gui-clamp/ui-react-lib/libIndex.js +++ b/gui-clamp/ui-react-lib/libIndex.js @@ -54,3 +54,7 @@ export { default as ViewAllPolicies } from './src/components/dialogs/Policy/View export { default as PolicyDeploymentEditor } from './src/components/dialogs/Policy/PolicyDeploymentEditor'; export { default as PoliciesTreeViewer } from './src/components/dialogs/Policy/PoliciesTreeViewer'; export { default as PolicyToscaFileSelector } from './src/components/dialogs/Policy/PolicyToscaFileSelector'; +export { default as GetLocalToscaFileForUpload } from './src/components/dialogs/GetLocalToscaFileForUpload'; +export { default as ReadAndConvertYaml } from './src/components/dialogs/ReadAndConvertYaml'; +export { default as UploadToscaFile } from './src/api/UploadToscaFile'; +export { default as GetToscaTemplate } from './src/api/GetToscaTemplate'; diff --git a/gui-clamp/ui-react/package.json b/gui-clamp/ui-react/package.json index 3826255..17f92d0 100644 --- a/gui-clamp/ui-react/package.json +++ b/gui-clamp/ui-react/package.json @@ -33,16 +33,13 @@ "@material-ui/pickers": "3.3.10", "bootstrap-css-only": "4.3.1", "js-yaml": "4.1.0", - "js-yaml-loader": "1.2.2", "material-table": "1.68.1", "react": "17.0.2", "react-bootstrap": "1.5.2", "react-dom": "17.0.2", - "react-native-fs": "2.18.0", "react-router-dom": "5.2.0", "react-scripts": "4.0.3", "react-select": "4.2.1", - "react-uuid": "1.0.2", "styled-components": "5.2.1" }, "devDependencies": { diff --git a/gui-clamp/ui-react/src/LoopUI.js b/gui-clamp/ui-react/src/LoopUI.js index 9461871..6904122 100644 --- a/gui-clamp/ui-react/src/LoopUI.js +++ b/gui-clamp/ui-react/src/LoopUI.js @@ -51,6 +51,7 @@ import Spinner from 'react-bootstrap/Spinner'; import { Link } from 'react-router-dom'; import ReadAndConvertYaml from "./components/dialogs/ReadAndConvertYaml"; +import GetLocalToscaFileForUpload from "./components/dialogs/GetLocalToscaFileForUpload"; const StyledMainDiv = styled.div` background-color: ${ props => props.theme.backgroundColor }; @@ -296,6 +297,7 @@ export default class LoopUI extends React.Component { return ( () }/> + () }/> () }/> () }/> () }/> diff --git a/gui-clamp/ui-react/src/__snapshots__/LoopUI.test.js.snap b/gui-clamp/ui-react/src/__snapshots__/LoopUI.test.js.snap index f30a85d..e9ed817 100644 --- a/gui-clamp/ui-react/src/__snapshots__/LoopUI.test.js.snap +++ b/gui-clamp/ui-react/src/__snapshots__/LoopUI.test.js.snap @@ -9,6 +9,10 @@ exports[`Verify LoopUI Test the render method 1`] = ` path="/readToscaTemplate" render={[Function]} /> + + { + const [windowLocationPathName, setWindowLocationPathname] = useState(''); + + const postServiceTemplateHandler = async (event) => { + + event.preventDefault(); + setWindowLocationPathname(window.location.pathname); + + const response = await fetch(windowLocationPathName + + '/restservices/clds/v2/toscaControlLoop/commissionToscaTemplate', { + method: 'POST', + headers: { + "Content-Type": "application/json" + }, + credentials: 'same-origin', + body: JSON.stringify(props.toscaObject), + }); + + const responseObj = await response; + const responseMessage = await response.text(); + + props.onResponseReceived(responseObj, responseMessage); + + } + + return ( + + + + ); + +}; + +export default UploadToscaFile; diff --git a/gui-clamp/ui-react/src/components/dialogs/GetLocalToscaFileForUpload.js b/gui-clamp/ui-react/src/components/dialogs/GetLocalToscaFileForUpload.js new file mode 100644 index 0000000..f159280 --- /dev/null +++ b/gui-clamp/ui-react/src/components/dialogs/GetLocalToscaFileForUpload.js @@ -0,0 +1,150 @@ +/* + * - + * * ============LICENSE_START======================================================= + * * Copyright (C) 2021 Nordix Foundation. + * * ================================================================================ + * * 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. + * * + * * SPDX-License-Identifier: Apache-2.0 + * * ============LICENSE_END========================================================= + * + */ + +import React, { useState } from 'react'; +import Button from "react-bootstrap/Button"; +import Modal from 'react-bootstrap/Modal'; +import Form from 'react-bootstrap/Form'; +import Row from 'react-bootstrap/Row'; +import styled from 'styled-components'; +import Alert from 'react-bootstrap/Alert'; +import * as yaml from "js-yaml"; +import UploadToscaFile from "../../api/UploadToscaFile"; + +const ModalStyled = styled(Modal)` + background-color: transparent; +` + +const StyledMessagesDiv = styled.div` + overflow: auto; + min-width: 100%; + max-height: 300px; + padding: 5px 5px 0px 5px; + text-align: center; +` + +const GetLocalToscaFileForUpload = (props) => { + const [selectedFile, setSelectedFile] = useState(); + const [fileIsSelected, setFileIsSelected] = useState(false); + const [toscaJsonObject, setToscaJsonObject] = useState({}); + const [show, setShow] = useState(true); + const [alertMessages, setAlertMessages] = useState(); + + const handleClose = () => { + setShow(false); + props.history.push('/'); + } + + const fileChangeHandler = (event) => { + event.preventDefault(); + + if (event.currentTarget.files[0] !== undefined) { + setSelectedFile(event.currentTarget.files[0]); + setFileIsSelected(true); + + const file = event.currentTarget.files[0]; + + setAlertMessages([]); + + const fileReader = new FileReader(); + + fileReader.onload = () => { + const jsonObj = yaml.load(fileReader.result, 'utf8'); + setToscaJsonObject(jsonObj); + } + + fileReader.readAsText(file); + + } else { + return; + } + }; + + const receiveResponseFromUpload = (response, responseMessage) => { + + if (response.ok) { + setAlertMessages( + Upload Success +

Tosca Service Template from { selectedFile.name } was Successfully Uploaded

+
+

Type: { selectedFile.type }

Size: { +selectedFile.size / 1000 }Kb

+ ); + } + else { + setAlertMessages( + Upload Failure +

Tosca Service Template from { selectedFile.name } failed to upload

+

Status code: { response.status }: { response.statusText }

+

Response from CLAMP: { responseMessage }

+
+

Type: { selectedFile.type }

Size: { +selectedFile.size / 1000 }Kb

+ ); + } + }; + + return ( + + + Upload Tosca to Commissioning API + +
+
+ +
+ + + + Only .yaml, .yml and .json files are supported + + + + + + + { alertMessages } + + +
+ +
+ + + + + ); +} + +export default GetLocalToscaFileForUpload; diff --git a/gui-clamp/ui-react/src/components/menu/MenuBar.js b/gui-clamp/ui-react/src/components/menu/MenuBar.js index 75a56d7..978a87a 100644 --- a/gui-clamp/ui-react/src/components/menu/MenuBar.js +++ b/gui-clamp/ui-react/src/components/menu/MenuBar.js @@ -89,6 +89,7 @@ export default class MenuBar extends React.Component { View Tosca Template + Upload Tosca to Commissioning View All Policies diff --git a/gui-clamp/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap b/gui-clamp/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap index 01f692b..2fef6c7 100644 --- a/gui-clamp/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap +++ b/gui-clamp/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap @@ -70,6 +70,71 @@ exports[`Verify MenuBar Test the render method 1`] = ` > View Tosca Template + + Upload Tosca to Commissioning +