This is an automated email from the ASF dual-hosted git repository. imesha pushed a commit to branch development in repository https://gitbox.apache.org/repos/asf/oodt.git
commit d313263384bdc9b882e9f99e95bf6ebb2be5987f Author: Imesha Sudasingha <[email protected]> AuthorDate: Sun Sep 22 14:53:01 2019 +0530 Added a new component to show FM, WM status and added an env file to get WM and FM REST API urls. --- react-components/oodt_fm_plugin/README.md | 6 +- react-components/oodt_fm_plugin/package.json | 6 +- .../oodt_opsui_sample_app/.env.development | 2 + .../oodt_opsui_sample_app/package.json | 2 + .../oodt_opsui_sample_app/public/favicon.ico | Bin 3870 -> 1595 bytes .../oodt_opsui_sample_app/public/index.html | 6 +- react-components/oodt_opsui_sample_app/src/App.js | 61 +++------ .../src/components/ComponentStatus.js | 142 +++++++++++++++++++++ .../oodt_opsui_sample_app/src/index.js | 2 +- react-components/oodt_wm_plugin/README.md | 6 +- react-components/oodt_wm_plugin/package.json | 8 +- 11 files changed, 179 insertions(+), 62 deletions(-) diff --git a/react-components/oodt_fm_plugin/README.md b/react-components/oodt_fm_plugin/README.md index 59f60f0..617a868 100644 --- a/react-components/oodt_fm_plugin/README.md +++ b/react-components/oodt_fm_plugin/README.md @@ -1,4 +1,4 @@ -# React OODT File Manager Plugin Sample +# React OODT File Manager Plugin ## Requirements @@ -32,7 +32,7 @@ Since this Plugin is not officially published yet please follow below steps for 4. Local NPM Package installation. Use this command in relevant React project directory. This will link global node_module plugin directory to project's local node_modules directory. ``` - npm link oodt_fm_plugin_sample + npm link oodt_fm_plugin ``` ## Usage @@ -40,7 +40,7 @@ Here's an example of basic usage: ``` import React, { Component } from 'react'; -import { Product } from 'oodt_fm_plugin_sample'; +import { Product } from 'oodt_fm_plugin'; class MyApp extends Component { render() { diff --git a/react-components/oodt_fm_plugin/package.json b/react-components/oodt_fm_plugin/package.json index 327ea3d..26299d8 100644 --- a/react-components/oodt_fm_plugin/package.json +++ b/react-components/oodt_fm_plugin/package.json @@ -1,11 +1,11 @@ { - "name": "oodt_fm_plugin_sample", + "name": "oodt_fm_plugin", "version": "1.0.0", - "description": "This is a Sample React Plugin for Apache OODT File Manager", + "description": "This is the React Plugin for Apache OODT File Manager", "main": "dist/build.js", "repository": { "type": "git", - "url": "https://github.com/NGimhana/oodt_fm_plugin"; + "url": "https://github.com/apache/oodt/tree/development/react-components/oodt_fm_plugin"; }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", diff --git a/react-components/oodt_opsui_sample_app/.env.development b/react-components/oodt_opsui_sample_app/.env.development new file mode 100644 index 0000000..0a40bee --- /dev/null +++ b/react-components/oodt_opsui_sample_app/.env.development @@ -0,0 +1,2 @@ +REACT_APP_FM_REST_API_URL=http://localhost:8080/cas_product_war/jaxrs/v2 +REACT_APP_WM_REST_API_URL=http://localhost:8080/workflow_services_war/wmservice/v2 \ No newline at end of file diff --git a/react-components/oodt_opsui_sample_app/package.json b/react-components/oodt_opsui_sample_app/package.json index 669e93b..20309a2 100644 --- a/react-components/oodt_opsui_sample_app/package.json +++ b/react-components/oodt_opsui_sample_app/package.json @@ -10,6 +10,8 @@ "@material-ui/icons": "^4.2.0", "axios": "^0.19.0", "clsx": "^1.0.4", + "oodt_fm_plugin": "file:../oodt_fm_plugin", + "oodt_wm_plugin": "file:../oodt_wm_plugin", "react-router-dom": "^5.0.1" }, "scripts": { diff --git a/react-components/oodt_opsui_sample_app/public/favicon.ico b/react-components/oodt_opsui_sample_app/public/favicon.ico index a11777c..b6b6c2c 100644 Binary files a/react-components/oodt_opsui_sample_app/public/favicon.ico and b/react-components/oodt_opsui_sample_app/public/favicon.ico differ diff --git a/react-components/oodt_opsui_sample_app/public/index.html b/react-components/oodt_opsui_sample_app/public/index.html index 08d1712..034dff1 100644 --- a/react-components/oodt_opsui_sample_app/public/index.html +++ b/react-components/oodt_opsui_sample_app/public/index.html @@ -2,9 +2,9 @@ <html lang="en"> <head> <meta charset="utf-8" /> -<!-- <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />--> <meta name="viewport" content="width=device-width, initial-scale=1" /> -<!-- <meta name="theme-color" content="#000000" />--> + <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> + <!-- <meta name="theme-color" content="#000000" />--> <!-- manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ @@ -19,7 +19,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - <title>OODT-OPSUI</title> + <title>OODT OPSUI</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> diff --git a/react-components/oodt_opsui_sample_app/src/App.js b/react-components/oodt_opsui_sample_app/src/App.js index 282d097..0efd4c3 100644 --- a/react-components/oodt_opsui_sample_app/src/App.js +++ b/react-components/oodt_opsui_sample_app/src/App.js @@ -1,30 +1,26 @@ -import React, { Component } from "react"; -import { BrowserRouter, Switch, Route } from "react-router-dom"; -import { - ProductList, - Product, - ProductIngest, - ProductIngestWithMetaFile -} from "oodt_fm_plugin_sample"; +import React, {Component} from "react"; +import {BrowserRouter, Route, Switch} from "react-router-dom"; +import {Product, ProductIngest, ProductIngestWithMetaFile, ProductList} from "oodt_fm_plugin"; import OPSUIHome from "./components/OPSUIHome"; import SearchBar from "./components/SearchBar"; -// import { WorkflowList } from "oodt_wm_plugin_sample"; -import Paper from "@material-ui/core/Paper"; -import Typography from "@material-ui/core/Typography"; -import Switch1 from "@material-ui/core/Switch"; -import axios from "axios"; +import {WorkflowList} from "oodt_wm_plugin"; +import ComponentStatus from "./components/ComponentStatus"; class MyApp extends Component { + constructor(props) { super(props); this.setSelectedProductId = this.setSelectedProductId.bind(this); - this.handleChange = this.handleChange.bind(this); // this.timeOut = this.timeOut.bind(this); + + this.fmRestApiUrl = process.env.REACT_APP_FM_REST_API_URL; + this.wmRestApiUrl = process.env.REACT_APP_WM_REST_API_URL; } state = { selectedProductId: "", - checkedA: false + fmAvailable: false, + wmAvailable: false }; setSelectedProductId(productId) { @@ -33,22 +29,9 @@ class MyApp extends Component { } componentDidMount() { - this.handleChange(); // this.timeOut() } - handleChange(){ - axios - .get("http://"+ window.location.hostname +":8080/cas_product_war/jaxrs/v2/fmprodstatus") - .then(result => { - console.log(result.data.FMStatus.serverUp); - if (result.data.FMStatus.serverUp) { - this.setState({ checkedA: true }); - } - }) - .catch(error => {}); - }; - // timeOut() { // setInterval(function () { // axios @@ -74,22 +57,10 @@ class MyApp extends Component { render={() => ( <div> <h1>Dashboard</h1> - <Paper - style={{ - flexGrow: 1, - backgroundColor: "white", - padding: 20 - }} - > - <Typography variant="h5" component="h3"> - File Manager Status - <Switch1 - disabled={true} - checked={this.state.checkedA} - onChange={this.handleChange} - /> - </Typography> - </Paper> + <ComponentStatus + fmRestApiUrl={this.fmRestApiUrl} + wmRestApiUrl={this.wmRestApiUrl}> + </ComponentStatus> </div> )} /> @@ -127,7 +98,7 @@ class MyApp extends Component { path={"/workflows"} render={() => ( <div> - {/*<WorkflowList />*/} + <WorkflowList/> </div> )} /> diff --git a/react-components/oodt_opsui_sample_app/src/components/ComponentStatus.js b/react-components/oodt_opsui_sample_app/src/components/ComponentStatus.js new file mode 100644 index 0000000..d28be3b --- /dev/null +++ b/react-components/oodt_opsui_sample_app/src/components/ComponentStatus.js @@ -0,0 +1,142 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You 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. + */ + +import React, {Component} from "react"; +import Grid from "@material-ui/core/Grid"; +import Chip from "@material-ui/core/Chip"; +import Typography from "@material-ui/core/Typography"; +import {Paper, withStyles} from "@material-ui/core"; +import axios from "axios"; + +const styles = theme => ({ + root: { + flexGrow: 1, + }, + paper: { + padding: theme.spacing(2), + textAlign: 'left' + }, + grid: { + padding: theme.spacing(2) + }, + chip: { + margin: theme.spacing(1), + textAlign: 'center' + }, + online: { + color: 'white', + backgroundColor: 'green' + }, + offline: { + color: 'white', + backgroundColor: 'red' + } +}); + +class ComponentStatus extends Component { + + state = { + fmAvailable: false, + wmAvailable: false + }; + + constructor(props) { + super(props); + + this.handleChange = this.handleChange.bind(this); + + this.fmRestApiUrl = this.props.fmRestApiUrl; + this.wmRestApiUrl = this.props.wmRestApiUrl; + } + + componentDidMount() { + this.handleChange(); + } + + handleChange() { + axios.get(this.fmRestApiUrl + "/fmprodstatus") + .then(result => { + console.log(result.data); + if (result.data.FMStatus.serverUp) { + this.setState({fmAvailable: true}); + } else { + this.setState({fmAvailable: false}); + } + }) + .catch(error => { + console.log("Unable to get file manager status", error); + }); + + axios.get(this.wmRestApiUrl + "/workflow/status") + .then(result => { + console.log(result.data); + if (result.data.WorkflowManagerStatus.serverUp) { + this.setState({wmAvailable: true}); + } else { + this.setState({wmAvailable: false}); + } + }) + .catch(error => { + console.log("Unable to get workflow manager status", error); + }); + }; + + render() { + const {classes} = this.props; + + return ( + <div className={classes.root}> + <Grid container spacing={2}> + <Grid item xs={2}/> + <Grid item xs={8}> + <Paper className={classes.paper}> + <Grid container> + <Grid item xs={8}> + <Typography variant="h6">File Manager Status</Typography> + </Grid> + <Grid item xs={4} style={{textAlign: 'center'}}> + <Chip label={this.state.fmAvailable ? 'Online' : 'Offline'} + className={this.state.fmAvailable ? classes.online : classes.offline}/> + </Grid> + </Grid> + </Paper> + </Grid> + <Grid item xs={2}/> + + <Grid item xs={2}/> + <Grid item xs={8}> + <Paper className={classes.paper}> + <Grid container> + <Grid item xs={8}> + <Typography variant="h6">Workflow Manager Status</Typography> + </Grid> + <Grid item xs={4} style={{textAlign: 'center'}}> + <Chip label={this.state.wmAvailable ? 'Online' : 'Offline'} + className={this.state.wmAvailable ? classes.online : classes.offline}/> + </Grid> + </Grid> + </Paper> + </Grid> + <Grid item xs={2}/> + </Grid> + </div> + ) + } +} + +export default withStyles(styles)(ComponentStatus); + diff --git a/react-components/oodt_opsui_sample_app/src/index.js b/react-components/oodt_opsui_sample_app/src/index.js index 8110e69..61d0f73 100644 --- a/react-components/oodt_opsui_sample_app/src/index.js +++ b/react-components/oodt_opsui_sample_app/src/index.js @@ -3,7 +3,7 @@ import ReactDOM from 'react-dom'; import App from './App'; // import * as serviceWorker from './serviceWorker'; -ReactDOM.render(<App />, document.getElementById('root')); +ReactDOM.render(<App/>, document.getElementById('root')); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. diff --git a/react-components/oodt_wm_plugin/README.md b/react-components/oodt_wm_plugin/README.md index 59f60f0..62defc2 100644 --- a/react-components/oodt_wm_plugin/README.md +++ b/react-components/oodt_wm_plugin/README.md @@ -1,4 +1,4 @@ -# React OODT File Manager Plugin Sample +# React OODT Workflow Manager Plugin ## Requirements @@ -32,7 +32,7 @@ Since this Plugin is not officially published yet please follow below steps for 4. Local NPM Package installation. Use this command in relevant React project directory. This will link global node_module plugin directory to project's local node_modules directory. ``` - npm link oodt_fm_plugin_sample + npm link oodt_wm_plugin ``` ## Usage @@ -40,7 +40,7 @@ Here's an example of basic usage: ``` import React, { Component } from 'react'; -import { Product } from 'oodt_fm_plugin_sample'; +import { Product } from 'oodt_wm_plugin'; class MyApp extends Component { render() { diff --git a/react-components/oodt_wm_plugin/package.json b/react-components/oodt_wm_plugin/package.json index f7cb37a..f5fb9d6 100644 --- a/react-components/oodt_wm_plugin/package.json +++ b/react-components/oodt_wm_plugin/package.json @@ -1,11 +1,11 @@ { - "name": "oodt_fm_plugin_sample", + "name": "oodt_wm_plugin", "version": "1.0.0", - "description": "This is a Sample React Plugin for Apache OODT Workflow Manager", + "description": "This is the React Plugin for Apache OODT Workflow Manager", "main": "dist/build.js", "repository": { "type": "git", - "url": "https://github.com/NGimhana/oodt_fm_plugin"; + "url": "https://github.com/apache/oodt/tree/development/react-components/oodt_wm_plugin"; }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", @@ -16,7 +16,7 @@ "components", "Apache", "OODT", - "File Manager" + "Workflow Manager" ], "author": "Nadeeshan Gimhana", "license": "Apache-2.0",
