You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@oodt.apache.org by im...@apache.org on 2019/08/25 08:11:32 UTC
[oodt] branch development updated: Add Workflow Manager React Plugin
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
The following commit(s) were added to refs/heads/development by this push:
new c82ab1d Add Workflow Manager React Plugin
new 448cb8e Merge pull request #104 from NGimhana/OODT-1016
c82ab1d is described below
commit c82ab1d6ebb119c7d014ca0feef1a218a3dd9115
Author: ngimhana <gi...@cse.mrt.ac.lk>
AuthorDate: Mon Aug 12 10:12:54 2019 +0530
Add Workflow Manager React Plugin
---
react-components/oodt_wm_plugin/.babelrc | 4 +
react-components/oodt_wm_plugin/.npmignore | 7 +
react-components/oodt_wm_plugin/README.md | 64 +++++++
react-components/oodt_wm_plugin/package.json | 39 ++++
.../src/components/WorkflowList/WorkflowList.js | 208 +++++++++++++++++++++
.../src/components/WorkflowList/index.js | 21 +++
.../oodt_wm_plugin/src/components/index.js | 18 ++
.../oodt_wm_plugin/src/constants/wmconnection.js | 22 +++
react-components/oodt_wm_plugin/src/index.js | 20 ++
react-components/oodt_wm_plugin/webpack.config.js | 21 +++
10 files changed, 424 insertions(+)
diff --git a/react-components/oodt_wm_plugin/.babelrc b/react-components/oodt_wm_plugin/.babelrc
new file mode 100644
index 0000000..e60d303
--- /dev/null
+++ b/react-components/oodt_wm_plugin/.babelrc
@@ -0,0 +1,4 @@
+{
+ "presets": ["@babel/preset-env", "@babel/preset-react"],
+ "plugins": ["@babel/plugin-proposal-class-properties"]
+}
diff --git a/react-components/oodt_wm_plugin/.npmignore b/react-components/oodt_wm_plugin/.npmignore
new file mode 100644
index 0000000..fcfcf05
--- /dev/null
+++ b/react-components/oodt_wm_plugin/.npmignore
@@ -0,0 +1,7 @@
+# IDE temp files
+.idea
+
+# Development Tarball of the plugin
+oodt_fm_plugin_sample-1.0.0.tgz
+
+package-lock.json
\ No newline at end of file
diff --git a/react-components/oodt_wm_plugin/README.md b/react-components/oodt_wm_plugin/README.md
new file mode 100644
index 0000000..59f60f0
--- /dev/null
+++ b/react-components/oodt_wm_plugin/README.md
@@ -0,0 +1,64 @@
+# React OODT File Manager Plugin Sample
+
+
+## Requirements
+
+- [Node.js](https://nodejs.org/en/download/) v6.0.0 or higher
+- NPM (v3.0.0+ recommended) (this comes with Node.js)
+
+## Installation
+
+**Using NPM:**
+
+Since this Plugin is not officially published yet please follow below steps for local testing.
+1. Install Node Modules for web pack dependencies.
+ ```
+ npm install
+ ```
+
+1. In the root of your NPM package, do this to build.
+ ```
+ npm run build
+ ```
+
+2. Install the Package into local node_modules.
+ ```
+ npm install . -g
+ ```
+3. Create a symlink package that points to your working directory.
+ ```
+ npm link
+ ```
+
+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
+ ```
+## Usage
+
+Here's an example of basic usage:
+
+```
+import React, { Component } from 'react';
+import { Product } from 'oodt_fm_plugin_sample';
+
+class MyApp extends Component {
+ render() {
+ return (
+ <div>
+ <Product productId="ce4380c5-d0d2-11e8-89ca-121c29fc9f21" />
+ </div>
+ );
+ }
+}
+
+export default MyApp;
+```
+
+#### props
+
+- `productId`: Product ID key (eg.: `ce4380c5-d0d2-11e8-89ca-121c29fc9f21`).
+
+## Contributing
+
+Developers can add New Components (eg: Product, ProductList...) by following the directory structure and export them accordingly in index.js files.
\ No newline at end of file
diff --git a/react-components/oodt_wm_plugin/package.json b/react-components/oodt_wm_plugin/package.json
new file mode 100644
index 0000000..f7cb37a
--- /dev/null
+++ b/react-components/oodt_wm_plugin/package.json
@@ -0,0 +1,39 @@
+{
+ "name": "oodt_fm_plugin_sample",
+ "version": "1.0.0",
+ "description": "This is a Sample React Plugin for Apache OODT Workflow Manager",
+ "main": "dist/build.js",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/NGimhana/oodt_fm_plugin"
+ },
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack --mode production"
+ },
+ "keywords": [
+ "react",
+ "components",
+ "Apache",
+ "OODT",
+ "File Manager"
+ ],
+ "author": "Nadeeshan Gimhana",
+ "license": "Apache-2.0",
+ "devDependencies": {
+ "@babel/core": "^7.2.2",
+ "@babel/preset-env": "^7.2.3",
+ "@babel/preset-react": "^7.0.0",
+ "@babel/plugin-proposal-class-properties": "^7.4.0",
+ "babel-loader": "^8.0.5",
+ "webpack": "^4.28.3",
+ "webpack-cli": "^3.2.0"
+ },
+ "dependencies": {
+ "@material-ui/core": "^3.9.3",
+ "axios": "^0.18.0",
+ "react": "^16.7.0",
+ "react-dom": "^16.7.0",
+ "prop-types": "latest"
+ }
+}
diff --git a/react-components/oodt_wm_plugin/src/components/WorkflowList/WorkflowList.js b/react-components/oodt_wm_plugin/src/components/WorkflowList/WorkflowList.js
new file mode 100644
index 0000000..35a30a5
--- /dev/null
+++ b/react-components/oodt_wm_plugin/src/components/WorkflowList/WorkflowList.js
@@ -0,0 +1,208 @@
+/*
+ * 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 { Button, withStyles } from "@material-ui/core";
+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 Paper from "@material-ui/core/Paper";
+import PropTypes from "prop-types";
+import { wmconnection } from "../../constants/wmconnection";
+import CircularProgress from "@material-ui/core/CircularProgress";
+
+const styles = theme => ({
+ root: {
+ width: "100%",
+ marginTop: 0,
+ overflowX: "auto"
+ },
+ table: {
+ minWidth: 650
+ },
+ progress: {
+ margin: 2
+ },
+ loading: {
+ textAlign: "center",
+ display: "block",
+ position: "relative"
+ }
+});
+
+class WorkflowList extends Component {
+ constructor(props) {
+ super(props);
+ this.updateWorkflowStatus = this.updateWorkflowStatus.bind(this);
+ this.reloadWorkflow = this.reloadWorkflow.bind(this);
+ }
+
+ componentWillMount() {
+ wmconnection
+ .get("/workflows/firstpage")
+ .then(result => {
+ this.setState({
+ rows: result.data.workflowPageInstance.pageWorkflows
+ });
+ // console.log(this.state.rows)
+ console.log(this.state.rows[0].sharedContext.keyval[0].val);
+ })
+ .catch(error => {
+ console.log(error);
+ });
+ }
+
+ updateWorkflowStatus(workflowInstanceId, state) {
+ let result = confirm(
+ "Are you sure to change workflow " +
+ workflowInstanceId +
+ " state to " +
+ state
+ );
+ if (result === true) {
+ wmconnection
+ .post(
+ "/updatestatus/workflow?workflowInstanceId=" +
+ workflowInstanceId +
+ "&status=" +
+ state
+ )
+ .then(result => {
+ console.log("Success");
+ this.reloadWorkflow();
+ })
+ .catch(error => {
+ console.log(error);
+ });
+ } else {
+ }
+ }
+
+ reloadWorkflow() {
+ wmconnection
+ .get("/workflows/firstpage")
+ .then(result => {
+ this.setState({
+ rows: result.data.workflowPageInstance.pageWorkflows
+ });
+ // console.log(this.state.rows)
+ console.log(this.state.rows[0].sharedContext.keyval[0].val);
+ })
+ .catch(error => {
+ console.log(error);
+ });
+ }
+
+ state = {
+ rows: [],
+ workflowState: []
+ };
+
+ render() {
+ const { classes } = this.props;
+ return (
+ <Paper className={classes.root}>
+ <Table className={classes.table}>
+ <TableHead>
+ <TableRow>
+ <TableCell>Workflow Instance Id</TableCell>
+ <TableCell align="center">Workflow Name</TableCell>
+ <TableCell align="center">Task Id</TableCell>
+ <TableCell align="center">Workflow State</TableCell>
+ <TableCell align="center">Actions</TableCell>
+ </TableRow>
+ </TableHead>
+
+ {this.state.rows.length > 0 && (
+ <TableBody>
+ {this.state.rows.map(row => (
+ <TableRow key={row.workflowInstanceId}>
+ <TableCell component="th" scope="row">
+ {row.workflowInstanceId}
+ </TableCell>
+ <TableCell align="right">
+ {row.sharedContext.keyval[0].val}
+ </TableCell>
+ <TableCell align="right">
+ {row.sharedContext.keyval[1].val}
+ </TableCell>
+ <TableCell align="right">{row.workflowState.name}</TableCell>
+ <TableCell align="center">
+ <div>
+ {row.workflowState.name === "Running" && (
+ <Button
+ color={"primary"}
+ onClick={() =>
+ this.updateWorkflowStatus(
+ row.workflowInstanceId,
+ "PAUSED"
+ )
+ }
+ >
+ Pause
+ </Button>
+ )}
+ {row.workflowState.name === "Running" && (
+ <Button
+ color={"secondary"}
+ onClick={() =>
+ this.updateWorkflowStatus(
+ row.workflowInstanceId,
+ "FINISHED"
+ )
+ }
+ >
+ Stop
+ </Button>
+ )}
+ {row.workflowState.name === "PAUSED" && (
+ <Button
+ color={"secondary"}
+ onClick={() =>
+ this.updateWorkflowStatus(
+ row.workflowInstanceId,
+ "Running"
+ )
+ }
+ >
+ Resume
+ </Button>
+ )}
+ </div>
+ </TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ )}
+ {this.state.rows.length === 0 && (
+ <TableBody className={classes.loading}>
+ <CircularProgress className={classes.progress} />
+ </TableBody>
+ )}
+ </Table>
+ </Paper>
+ );
+ }
+}
+
+WorkflowList.propTypes = {
+ classes: PropTypes.object.isRequired
+};
+
+export default withStyles(styles)(WorkflowList);
diff --git a/react-components/oodt_wm_plugin/src/components/WorkflowList/index.js b/react-components/oodt_wm_plugin/src/components/WorkflowList/index.js
new file mode 100644
index 0000000..57ec730
--- /dev/null
+++ b/react-components/oodt_wm_plugin/src/components/WorkflowList/index.js
@@ -0,0 +1,21 @@
+/*
+ * 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 the WorkflowList component from this folder and send it down to ./components/index.js
+import WorkflowList from "./WorkflowList";
+
+export default WorkflowList;
diff --git a/react-components/oodt_wm_plugin/src/components/index.js b/react-components/oodt_wm_plugin/src/components/index.js
new file mode 100644
index 0000000..1671373
--- /dev/null
+++ b/react-components/oodt_wm_plugin/src/components/index.js
@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+export { default as WorkflowList } from "./WorkflowList";
diff --git a/react-components/oodt_wm_plugin/src/constants/wmconnection.js b/react-components/oodt_wm_plugin/src/constants/wmconnection.js
new file mode 100644
index 0000000..d01205a
--- /dev/null
+++ b/react-components/oodt_wm_plugin/src/constants/wmconnection.js
@@ -0,0 +1,22 @@
+/*
+ * 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 axios from "axios";
+
+export const wmconnection = axios.create({
+ baseURL: "http://localhost:8080/workflow_services_war/jaxrs/v2"
+});
diff --git a/react-components/oodt_wm_plugin/src/index.js b/react-components/oodt_wm_plugin/src/index.js
new file mode 100644
index 0000000..a4cef6b
--- /dev/null
+++ b/react-components/oodt_wm_plugin/src/index.js
@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+// Export all the explicitly exported components, this file will contain our
+// components when built by webpack and sent off to the world.
+export * from "./components";
diff --git a/react-components/oodt_wm_plugin/webpack.config.js b/react-components/oodt_wm_plugin/webpack.config.js
new file mode 100644
index 0000000..d0e1a26
--- /dev/null
+++ b/react-components/oodt_wm_plugin/webpack.config.js
@@ -0,0 +1,21 @@
+const path = require('path');
+
+module.exports = {
+ entry: './src/index.js',
+ module: {
+ rules: [
+ {
+ test: /\.js$/,
+ use:{
+ loader: "babel-loader",
+ },
+ },
+ ]
+ },
+ output: {
+ path: path.resolve(__dirname, 'dist/'),
+ publicPath: '',
+ filename: 'build.js',
+ libraryTarget: 'umd'
+ }
+};
\ No newline at end of file