tailordev / crick Goto Github PK

A user cannot have teams with the same name. We should implement this uniqueness in the database schema and in the UI.

Project should be sorted alphabetically in the projects page. Is this something we need to handle in the web interface or the API?

If number of frames is 0, let's hide the button.

It would be much easier than setting CRICK_API_TOKEN (especially because we may have to use different tokens). It would ease the process of recalling the last command line call and change the token.

Instead of having many if (this.props.isAuthenticated) {} in the components, we should have a global/common layer to determine whether a user is authenticated or not, and to redirect the user if not. cf. https://reacttraining.com/react-router/web/example/auth-workflow

Scenario: Create a team

In order to aggregate frames among different users
As a user, I should be able to create a team with a name
And I should be able to add existing users
And I should be able to declare project names

Scenario: Edit a team

In order to manage a team
As a team owner, I should be able to edit a team
And I should be able to add or remove users
And I should be able to add or remove projects

Scenario: Delete a team

In order to manage a team
As a team owner, I should be able to delete a team

The link to team management in the dashboard view should not be a secondary raised button. I think we can improve this to avoid confusion between team reports and team management (action).

Considering the /projects/ endpoint, it would be nice to add the following metadata to the response:

• from: the first frame date time for this project
• to: the latest frame date time for this project
• nFrames: the number of frames for this project
• tags: a list of (tag, count), with count the number of occurrences of the tag tag in all project frames

I created a simple schema for storing data. Now that the POC is ready, we should think about it again to make it future-proof. Below is an extract of the database:

crick=# select * from users;
                  id                  |   login    |   auth0_id    |                       api_token
--------------------------------------+------------+---------------+----------------------------------------------------------
 a4e299dc-291b-44bf-bbf9-c17519a5ccbe | willdurand | github|217628 | XxhRCLa9PsKZk8wiLX0Y4HbLWgZkys8gYWUF7arBeQRwRETgyN5agQ==

crick=# select * from projects;
                  id                  |   name   |               user_id
--------------------------------------+----------+--------------------------------------
3f1aec7a-418a-4246-92f4-462b36abad67 | test     | a4e299dc-291b-44bf-bbf9-c17519a5ccbe

crick=# select * from frames;
                id                |      start_at       |       end_at        |              project_id              |      synchronized_at       |         tags
----------------------------------+---------------------+---------------------+--------------------------------------+----------------------------+-----------------------
 5b37098ac971495692a35a81fc0b342b | 2016-10-21 09:43:36 | 2016-10-21 12:03:47 | a0ac4e4a-b10b-435a-b85b-ec4664169f31 | 2017-05-28 12:59:00.965407 | {}
 764ec976bc4b4a07832bcb5485522134 | 2016-10-24 09:46:50 | 2016-10-24 11:42:09 | a0ac4e4a-b10b-435a-b85b-ec4664169f31 | 2017-05-28 12:59:00.96869  | {370}

It was a bit silly to fetch the user info into a component. We should do that in a reducer instead (like for all other API calls).

This makes copy/paste more complicated than it should be.

We need empty screens to tell the users what to do. Once logged in in Crick for the first time, we get an empty page :( Instead, we should have a nice explanation page along with the Watson token and the commands to run:

$ watson config backend.url ...
$ watson config backend.token XXX

Instead of the floating button, we should have a raised button below the table.

We, humans, are bad at remembering keyboard codes. Let's use constants instead, cf. https://github.com/TailorDev/crick/blob/master/web/src/Common/Report/Form.js#L91.

Purpose

With @willdurand, we discussed the eventuality to add an activity calendar (à la github) to the project frames view (or user profile, or team page). We found an interesting package implementing such component: https://github.com/patientslikeme/react-calendar-heatmap

To integrate this component, we need to be able to generate a list of data that looks like:

values = [
    { date: '2016-01-01', count: 12 },
    { date: '2016-01-03', count: 442 },
    { date: '2016-01-06', count: 234 },
    // ...and so on
  ];

with count the number of minutes spend in the day. Depending on the displayed graph (team activity, project activity, user activity), we should be able to sum user contributions on a project basis.

Proposal

1. Compute & store user daily activity on a project basis (could be a cron task):

{
  "user": "user-uuid-here",
  "activity": {
    "project-x": [["2016-01-01", 43], ["2016-01-04", 183]],
    "project-y": [["2016-01-01", 120], ["2016-01-04", 34]]
  }
}

NB: I do not propose to store data as a json object, it's just a projection of the data to store.

2. Create a dedicated endpoint for activity stream with the following filtering parameters:

• team: report for a team
• project: report for a project
• from: from date
• to: to date

By default, this endpoint reports request user activity.

3. Integrate the calendar component to each view where it is required.

I always get this:

Warning: Unknown prop `onKeyboardFocus` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by Avatar)
    in Avatar (at presenter.js:119)
    in div (created by IconMenu)
    in IconMenu (at presenter.js:116)
    in div (at presenter.js:102)
    in Auth (created by Connect(Auth))
    in Connect(Auth) (at presenter.js:16)
    in div (created by AppBar)
    in div (created by Paper)
    in Paper (created by AppBar)
    in AppBar (at presenter.js:14)
    in div (at presenter.js:13)
    in App (at index.js:42)
    in Router (created by BrowserRouter)
    in BrowserRouter (at index.js:41)
    in Provider (at index.js:40)
    in MuiThemeProvider (at index.js:39)

We should have a uniform way of dealing with API errors.

It could be a simple component displaying an error message. This component should have its own reducer, and other reducers would use its action for error (only).

The (dark) prune gradient is too dark, let's make it more engaging.

Most recent frames should come first.

It is configurable in the code but not doable from the command line. It would be cool to be able to load more than 100 frames (especially for the workloads graph).

We should return gzipped responses with this middleware: https://github.com/NYTimes/gziphandler/.

Considering the /projects/{id}/frames endpoint, we would like to be able to add the following query parameters for filtering purpose:

• start: the start date
• end: the end date
• tags: the tag array

PS: results should be paginated (see #40)

See screenshot below:

Is it intended?

A single click on a TagReport should add this tag to report filters. Filtering/view should update consequently.

This would enable URL sharing/bookmarking. I do not know how to do that though, but it would be very cool to be able to have the filters automatically added/updated/removed in the URL bar.

Middleware is uncountable, just like software, so we have to fix this mistake... everywhere.

Currently, there is no index...

This avatar will nicely integrate with the UI.

It could be helpful to quickly spot a date with high activity.

Database table teams:

• id
• owner_id => user_id
• project names
• team members / user ids

When we synchronize frames that have been already sync'ed (thanks to the frame IDs), then we get an error. We should use PostgreSQL UPSERT feature and use ON CONFLICT DO NOTHING on insertion, so that we don't get an error for duplicate frames.

I guess it makes sense since the endpoint for persisting frames is called bulk insert, so it should be tolerant.

Pagination is required for frames listing in the interface. Each page should contain 50 frames.