Workflow list #11

Sinclert · 2018-07-19T08:32:02Z

First steps of the workflow-list implementation
Connect #10

Sinclert · 2018-07-23T14:26:07Z

Update: I am encountering some problems while trying to access the API. The error is related with the Access-Control-Allow-Origin. I have encounter this problem both in Safari and Chrome, using 2 separate methods: the default fetch, and the library reqwest.

UPDATE: Solved ✅

diegodelemos · 2018-07-24T14:52:09Z

@reanahub/developers I think we should impose some format rules, I have found https://standardjs.com/ to be really useful after researching a bit about JavaScript formatters. It is not only the absence of configuration but also how easy it is to use from the CLI and integration with editors (emacs, VS Code...).

tiborsimko · 2018-07-25T09:48:40Z

What about ESLint? It comes with AirBnB, Google, React styles, so that one could opt for a more popular style (AirBnB over Standard) or even use the same style rules that the React project uses. Here are some pages to read and ponder:

ioannistsanaktsidis · 2018-07-25T12:16:15Z

@reanahub/developers in CAP we are using this one https://prettier.io/ . We have set it up to trigger the moment you commit the files. It is working really good in case you want to check!

diegodelemos · 2018-07-26T08:21:31Z

I would keep it simple and use standard (which we are already using in Invenio and is close to Python style) with no configuration if possible, only if really necessary (the only thing that I am not personally really happy with in standard defaults it is that it does not allow trailing commas, which in my opinion are necessary to simplify diffs). My second pick would be https://prettier.io/

I kind of agree with prettier/prettier#40 (comment).

Sinclert · 2018-07-26T12:29:57Z

I have been testing Standard, some comments:

It is not native compatible with ES2017+ 'experimental features'. Even if this sounds exotic, it is something very common to have. For example:

It is easy to make it compatible with the new syntax. A package called babel-eslint can be installed and added to the parsing option to make it compatible (source):
standard --parser babel-eslint
I have found some parsing inconsistencies while parsing the JSX tags inside a render() functions. However, it doesn't happen in all the cases.

Regarding Prettier, some comments:

It has some configuration level over CLI (source). I was gonna suggest to use the --use-tabs flag, for instance.
Haven't encounter any problems with neither ES2017+ 'experimental syntax' nor JSX code inside a render() function.

Regarding ESlint with the AirBnb configuration, some comments:

Exactly as Standard, ES2017+ syntax is not natively supported. It can be supported by adding the experimentalObjectRestSpread option in the config file (source).
The default Vanilla / AirBnb config present some problems with JSX and React (commented here). They are not major, but requires to modify and build our own config file.

tiborsimko · 2018-07-26T15:56:13Z

Looks like Prettier may be the most advantageous; let's see IRL tomorrow?

diegodelemos · 2018-07-30T11:53:09Z

reana-ui/public/index.html

+      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>React App</title>


REANA instead of React App.

diegodelemos · 2018-07-30T11:53:50Z

reana-ui/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "Reana-UI",


Capital letters REANA here and everywhere else

I guess the name of the package still needs to be reana-ui, right?

yes! you are right https://docs.npmjs.com/files/package.json#name

diegodelemos · 2018-07-30T16:07:25Z

reana-ui/src/components/Table.js

+   * Transforms millisecond into a 'HH MM SS' string format
+   */
+  static msToTime(millis) {
+    let seconds = Math.floor((millis / 1000) % 60);


what about using the Date object? something like

let string_date = "2018-07-30T15:52:44"; let date_obj = new Date(string_date) let seconds = date_obj.getSeconds() let minutes = date_obj.getMinutes() let hours = date_obj.getHours()

That way of operating is used to plot the creation date. However, for the Duration field, we should compare every date entity (secs, mins, hours, days, months, year).

Because of this reason, I transformed the date into a UNIX stamp number, and compute the difference between Date.now() and that number.

diegodelemos · 2018-07-31T13:11:08Z

run-tests.sh

@@ -21,4 +21,4 @@
 # submit itself to any jurisdiction.

 sphinx-build -qnN docs docs/_build/html
-prettier reana-ui/src/**/*.js --list-different
+#prettier reana-ui/src/**/*.js --list-different


Can you uncomment so we see if Travis is happy?

diegodelemos · 2018-07-31T13:11:54Z

reana-ui/src/registerServiceWorker.js

@@ -0,0 +1,117 @@
+// In production, we register a service worker to serve assets from local cache.


I would remove this, we are not going to use Service Workers now, let see what happens after first implementation.

Do you mean removing the whole file? or just that line?

tiborsimko · 2018-07-31T13:30:03Z

reana-ui/src/components/Header.js

+
+import React, { Component } from "react";
+import { Segment, Image, Button, Menu, Icon } from "semantic-ui-react";
+import LogoImg from "../images/logo.svg";


It may be good to call the logo logo-reana.svg as we have in other repositories... Would be more comfortable for finding and updating files.

tiborsimko · 2018-07-31T13:31:28Z

reana-ui/src/components/Table.js

+import TableActions from "./TableActions";
+import _ from "lodash";
+
+const URL = "http://reana-dev.cern.ch/api/workflows?";


Do we need to have this hardcoded? If so, perhaps create config.js in the toplevel?

* Initial component structure (closes reanahub#10). * Data fetching from REANA-server URL. * Dynamic workflow actions. * Global interface Header.

Sinclert added the Status: in work label Jul 19, 2018

Sinclert added this to the UI-Basics milestone Jul 19, 2018

Sinclert self-assigned this Jul 19, 2018

tiborsimko added Status: in review and removed Status: in work labels Jul 19, 2018

Sinclert added the Status: in work label Jul 19, 2018

Sinclert force-pushed the workflow-list branch 7 times, most recently from 2f1fa2b to 64625cd Compare July 20, 2018 08:52

dinosk mentioned this pull request Jul 23, 2018

global: flask-cors reanahub/reana-server#68

Closed

Sinclert force-pushed the workflow-list branch 8 times, most recently from 9f77751 to 77a8a7a Compare July 24, 2018 14:40

Sinclert force-pushed the workflow-list branch from 77a8a7a to 922a4f8 Compare July 25, 2018 07:55

Sinclert added the type/rfc label Jul 26, 2018

Sinclert removed the Status: in work label Jul 26, 2018

Sinclert force-pushed the workflow-list branch from 922a4f8 to be34eaf Compare July 30, 2018 11:37

diegodelemos reviewed Jul 30, 2018

View reviewed changes

Sinclert force-pushed the workflow-list branch from be34eaf to 17f0601 Compare July 30, 2018 12:08

diegodelemos reviewed Jul 30, 2018

View reviewed changes

Sinclert force-pushed the workflow-list branch 3 times, most recently from 7ae33ef to df2c1a4 Compare July 31, 2018 07:47

diegodelemos mentioned this pull request Jul 31, 2018

travis: initial configuration #16

Merged

diegodelemos reviewed Jul 31, 2018

View reviewed changes

tiborsimko reviewed Jul 31, 2018

View reviewed changes

package: project dependencies

c975acd

Sinclert force-pushed the workflow-list branch from 541f80f to 2222d93 Compare July 31, 2018 14:11

workflow-list: initial implementation

460b20d

* Initial component structure (closes reanahub#10). * Data fetching from REANA-server URL. * Dynamic workflow actions. * Global interface Header.

Sinclert force-pushed the workflow-list branch from 2222d93 to fce76aa Compare July 31, 2018 14:26

Sinclert removed the type/rfc label Jul 31, 2018

Sinclert force-pushed the workflow-list branch from fce76aa to 36f709e Compare July 31, 2018 14:40

diegodelemos approved these changes Jul 31, 2018

View reviewed changes

Sinclert force-pushed the workflow-list branch from 36f709e to 460b20d Compare July 31, 2018 14:45

diegodelemos merged commit 460b20d into reanahub:master Jul 31, 2018

diegodelemos removed the Status: in review label Jul 31, 2018

Sinclert deleted the workflow-list branch July 31, 2018 14:54

tiborsimko added this to Done in UI-Basics Oct 7, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Workflow list #11

Workflow list #11

Sinclert commented Jul 19, 2018 •

edited by diegodelemos

Sinclert commented Jul 23, 2018 •

edited

diegodelemos commented Jul 24, 2018

tiborsimko commented Jul 25, 2018

ioannistsanaktsidis commented Jul 25, 2018 •

edited

diegodelemos commented Jul 26, 2018 •

edited

Sinclert commented Jul 26, 2018 •

edited

tiborsimko commented Jul 26, 2018

diegodelemos Jul 30, 2018

diegodelemos Jul 30, 2018

Sinclert Jul 30, 2018

diegodelemos Jul 30, 2018

diegodelemos Jul 30, 2018

Sinclert Jul 31, 2018 •

edited

diegodelemos Jul 31, 2018

diegodelemos Jul 31, 2018

Sinclert Jul 31, 2018

tiborsimko Jul 31, 2018

tiborsimko Jul 31, 2018

		@@ -0,0 +1,117 @@
		// In production, we register a service worker to serve assets from local cache.

Workflow list #11

Workflow list #11

Conversation

Sinclert commented Jul 19, 2018 • edited by diegodelemos

Sinclert commented Jul 23, 2018 • edited

diegodelemos commented Jul 24, 2018

tiborsimko commented Jul 25, 2018

ioannistsanaktsidis commented Jul 25, 2018 • edited

diegodelemos commented Jul 26, 2018 • edited

Sinclert commented Jul 26, 2018 • edited

I have been testing Standard, some comments:

Regarding Prettier, some comments:

Regarding ESlint with the AirBnb configuration, some comments:

tiborsimko commented Jul 26, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Sinclert Jul 31, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Sinclert commented Jul 19, 2018 •

edited by diegodelemos

Sinclert commented Jul 23, 2018 •

edited

ioannistsanaktsidis commented Jul 25, 2018 •

edited

diegodelemos commented Jul 26, 2018 •

edited

Sinclert commented Jul 26, 2018 •

edited

Sinclert Jul 31, 2018 •

edited