workflow-list: initial implementation

* Initial component structure (closes #10). * Data fetching from REANA-server URL. * Dynamic workflow actions. * Global interface Header.
reanahub · Jul 31, 2018 · 460b20d · 460b20d
1 parent c975acd
commit 460b20d
Show file tree

Hide file tree

Showing 11 changed files with 989 additions and 1 deletion.
diff --git a/reana-ui/public/index.html b/reana-ui/public/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      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>REANA</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/reana-ui/public/manifest.json b/reana-ui/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "REANA",
+  "name": "REANA",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/reana-ui/src/App.js b/reana-ui/src/App.js
@@ -0,0 +1,35 @@
+/*
+	-*- coding: utf-8 -*-
+
+	This file is part of REANA.
+	Copyright (C) 2018 CERN.
+
+	REANA is free software; you can redistribute it and/or modify it under the
+	terms of the GNU General Public License as published by the Free Software
+	Foundation; either version 2 of the License, or (at your option) any later
+	version.
+
+	REANA is distributed in the hope that it will be useful, but WITHOUT ANY
+	WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+	A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+	You should have received a copy of the GNU General Public License
+	along with REANA; if not, see <http://www.gnu.org/licenses>.
+
+	In applying this license, CERN does not waive the privileges and immunities
+	granted to it by virtue of its status as an Intergovernmental Organization or
+	submit itself to any jurisdiction.
+*/
+
+import React, { Component } from "react";
+import WorkflowsPage from "./pages/Workflows";
+
+export default class App extends Component {
+  render() {
+    return (
+      <div className="App" style={{ height: "100%" }}>
+        <WorkflowsPage />
+      </div>
+    );
+  }
+}
diff --git a/reana-ui/src/components/Header.js b/reana-ui/src/components/Header.js
@@ -0,0 +1,50 @@
+/*
+	-*- coding: utf-8 -*-
+
+	This file is part of REANA.
+	Copyright (C) 2018 CERN.
+
+	REANA is free software; you can redistribute it and/or modify it under the
+	terms of the GNU General Public License as published by the Free Software
+	Foundation; either version 2 of the License, or (at your option) any later
+	version.
+
+	REANA is distributed in the hope that it will be useful, but WITHOUT ANY
+	WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+	A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+	You should have received a copy of the GNU General Public License
+	along with REANA; if not, see <http://www.gnu.org/licenses>.
+
+	In applying this license, CERN does not waive the privileges and immunities
+	granted to it by virtue of its status as an Intergovernmental Organization or
+	submit itself to any jurisdiction.
+*/
+
+import React, { Component } from "react";
+import { Segment, Image, Button, Menu, Icon } from "semantic-ui-react";
+import LogoImg from "../images/logo-reana.svg";
+
+export default class Header extends Component {
+  render() {
+    return (
+      <Segment secondary clearing attached="top" padded="big">
+        <Image src={LogoImg} size="medium" floated="left" />
+        <Button size="huge" icon primary floated="right">
+          <Icon name="user" />
+        </Button>
+        <Menu size="huge" floated="right">
+          <Menu.Item href="http://www.reana.io" target="_blank">
+            About
+          </Menu.Item>
+          <Menu.Item
+            href="https://reana.readthedocs.io/en/latest/"
+            target="_blank"
+          >
+            Documentation
+          </Menu.Item>
+        </Menu>
+      </Segment>
+    );
+  }
+}
diff --git a/reana-ui/src/components/WorkflowActions.js b/reana-ui/src/components/WorkflowActions.js
@@ -0,0 +1,72 @@
+/*
+	-*- coding: utf-8 -*-
+
+	This file is part of REANA.
+	Copyright (C) 2018 CERN.
+
+	REANA is free software; you can redistribute it and/or modify it under the
+	terms of the GNU General Public License as published by the Free Software
+	Foundation; either version 2 of the License, or (at your option) any later
+	version.
+
+	REANA is distributed in the hope that it will be useful, but WITHOUT ANY
+	WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+	A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+	You should have received a copy of the GNU General Public License
+	along with REANA; if not, see <http://www.gnu.org/licenses>.
+
+	In applying this license, CERN does not waive the privileges and immunities
+	granted to it by virtue of its status as an Intergovernmental Organization or
+	submit itself to any jurisdiction.
+*/
+
+import React, { Component } from "react";
+import { Button } from "semantic-ui-react";
+
+export default class WorkflowActions extends Component {
+  static disableView() {
+    return false;
+  }
+
+  static disablePause() {
+    return true;
+  }
+
+  static disableResume(status) {
+    return status !== "created";
+  }
+
+  static disableRunnable(status) {
+    return status === "created" || status === "running";
+  }
+
+  render() {
+    return (
+      <Button.Group basic icon size="tiny" color="blue" widths="4">
+        <Button
+          disabled={WorkflowActions.disableView()}
+          icon="eye"
+          content=" View"
+          compact
+        />
+        <Button
+          disabled={WorkflowActions.disablePause()}
+          icon="pause"
+          content=" Pause"
+          compact
+        />
+        <Button
+          disabled={WorkflowActions.disableResume(this.props.status)}
+          icon="play"
+          content=" Resume"
+        />
+        <Button
+          disabled={WorkflowActions.disableRunnable(this.props.status)}
+          icon="refresh"
+          content=" Rerun"
+        />
+      </Button.Group>
+    );
+  }
+}