[WIP] Add a GUI #59

CapriciousRebel · 2021-10-23T16:54:57Z

Currently, the GUI is a work in progress.

How to use it?

run npm install.
add your GH_TOKEN in the .env file.
run any command and pass the --gui option
open localhost:3000!
To run a different command, go back to terminal, and run another command along with the --gui option (close the terminal that was running first with Cmd + C), then come back and refresh the browser

At this stage, I have used the following stack:
Ejs: Generating HTML using templating.
Express: Serving the generated HTML and the static files(CSS styles).
TailwindCSS: For styling the HTML.

Tasks:

Stage 1 + 2

Lint the current code and squash : @CapriciousRebel
Fix the overflow scroll : @rosekamallove
Fix the \n issue: @rosekamallove
Add a purge command in tailwind config: @CapriciousRebel

Stage 3a: Building the API for the server

Brainstorm the API endpoints: @CapriciousRebel
Push the sample API endpoints to the PR: @CapriciousRebel
Finish up writing all the API endpoints: @CapriciousRebel

Stage 3b: Updating the frontend and integrating it with the server

Finalize the design for the frontend with @ljharb
Implement the designs in the frontend
[x ] Integrate with the backend

Transition Stage [3-4]: Do extensive testing of the solution and fix any issues, write tests

Stage 4: Host the solution?

thehanimo · 2021-10-24T07:21:50Z

Hey @CapriciousRebel! Nice work all around. Really excited for the GUI! Just thought I'll add a few thoughts here:

I don't think we're using tailwindcss the right way. Pretty sure we don't have to add that huge static/style.css in our repo. I see a lot of similar stylesheets in node_modules/tailwindcss/dist/ so double check if this is the right way.
Do we need a server to view the static file? Why don't we generate the html file with ejs, store it in a folder (like cache) and just open up the file on the browser? Doesn't that seem simpler?
We have an eslint config set up so It'd be nice if you could lint the code before each commit :)

CapriciousRebel · 2021-10-24T09:08:07Z

@thehanimo thanks for your comments!
I agree with each point that you have mentioned. I just wanted to create a Proof of Concept as soon as possible and so I worked on this over the weekend. I will address each point you mentioned in future commits :)

CapriciousRebel · 2021-10-26T18:04:57Z

@rosekamallove I have squashed all the commits into one, and fixed all eslint issues as well, now you can rebase and continue work!

thehanimo

@CapriciousRebel I still see src/static/style.css with 188,032 lines?

rosekamallove · 2021-10-27T06:44:25Z

It is the 4th task, see the first comment

thehanimo · 2021-10-27T06:45:53Z

It is the 4th task, see the first comment

Got it! My bad.

CapriciousRebel · 2021-10-27T18:03:01Z

@rosekamallove added the purge command, kindly rebase once.
You can run it using npm run build:css

CapriciousRebel · 2021-11-03T17:18:20Z

@rosekamallove what is the update on your tasks?

rosekamallove · 2021-11-03T17:19:43Z

Will push the changes by the end of this week, Diwali

views/index.ejs

ljharb · 2021-11-16T00:51:46Z

src/server/controllers.js

+const { getMetrics } = require('../metrics');
+
+// Metric names and their extraction method to be used on the query result (Order is preserved)
+const metricNames = [


seems like this file contains a lot of copied code from elsewhere in the repo?

Yes, it is the code from the details.js file. Kindly consider this commit as an intermediate step. I was having some trouble with the exports(for some reason importing the detail function gave errors, saying detail wasn't a function). So I just copy-pasted the code instead to make things work for the time being. I will fix this in a future commit and perhaps squash this commit.

Sounds good :-) just calling it out so it's not forgotten.

This is still a doubt for me, could you probably suggest me a fix for this? I'm not sure why importing from detail.js is not working. Perhaps there is some issue with express js? Not really sure

I'm not sure either. Can you restore the import, and i'll try it locally?

Let's address this issue at the very end of this PR, once we have everything in working order.

CapriciousRebel · 2021-12-21T16:32:06Z

@ljharb a gentle reminder for a review on this PR

src/server/controllers.js

src/static/index.html

src/utils.js

CapriciousRebel · 2021-12-27T16:01:32Z

Will update the PR before the end of the year :)

CapriciousRebel · 2021-12-28T18:29:04Z

@ljharb updated my PR, left replies on your comments. Could you please give a further review?

.gitignore

src/commands/detail.js

src/server/app.js

src/server/controllers.js

src/static/index.html

src/static/style.css

src/utils.js

CapriciousRebel · 2021-12-29T11:53:19Z

@ljharb updated my PR, also left replies on some comments for further discussion.

CapriciousRebel · 2021-12-30T00:46:59Z

@ljharb I have left more replies on our conversations, I guess we are really close to finishing this PR :)
:excited:

ljharb · 2021-12-30T07:31:40Z

also see some of the hidden conversations (#59 (comment))

…or showing ability

CapriciousRebel · 2022-01-01T14:46:31Z

@ljharb updated my PR to include the token as a flag or positional argument from the frontend itself, also added a minimal error handler as well for when the user doesn't provide the token, maybe someday we could evolve the error handling to a modal in the frontend, after having handled all errors in the backend (ex: Bad Credentials error for GitHub token is not handled yet in the backend)
Could you please give the PR another glance and leave your comments?

Also could you please address #59 (comment)

ljharb · 2022-01-01T21:31:19Z

I'm confused; the frontend shouldn't be supplying the token - the invocation to start the server should be.

CapriciousRebel · 2022-01-03T03:27:54Z

I see, so basically, a person does this:

opens up terminal and types repo-report --gui --token=<token>
browser opens up with the gui
now the person can type in their command without having the need to pass the token every time.

This flow makes perfect sense to me, but I am a bit confused as to where will the token be stored during this time?

The token cannot be stored on the server, unless we use some in-memory store or a global variable that remains persistent through the operation because the most important point to focus on is that we run yargs-parser every time a command is sent from the frontend:

In normal cases, the token is stored in the frontend as an HTTP-only cookie (safe from XSS attacks) or as a session variable that can be killed the moment the session ends, but we ruled out the possibility of storing the token in the frontend in our earlier discussions.

Summary: Where would the GitHub token be stored once the user provides it at the time of GUI invocation so that the user doesn't have to provide it every time from the frontend via the command?

CapriciousRebel · 2022-01-09T17:29:11Z

@ljharb gentle reminder to give an update on this PR

CapriciousRebel changed the title ~~[WIP] Add a GUI for repo-report~~ [WIP] Add a GUI Oct 23, 2021

[Feature]: Add a POC for the web app

fc3d95a

CapriciousRebel force-pushed the add-gui branch from 3454928 to fc3d95a Compare October 26, 2021 18:04

CapriciousRebel requested review from thehanimo and ljharb and removed request for thehanimo October 26, 2021 18:11

CapriciousRebel assigned CapriciousRebel and rosekamallove Oct 26, 2021

CapriciousRebel added the enhancement New feature or request label Oct 26, 2021

CapriciousRebel requested a review from thehanimo October 26, 2021 18:12

thehanimo requested changes Oct 27, 2021

View reviewed changes

[Feature]: Add purge configuration to remove unused tailwindcss classes

6f41c1e

ljharb reviewed Nov 8, 2021

View reviewed changes

views/index.ejs Outdated Show resolved Hide resolved

rosekamallove and others added 3 commits November 10, 2021 20:19

\n issue fixed

c3e725e

[Feature]: Add express server to expose an api

57863d2

Rebase with remote

7e45b9d

ljharb reviewed Nov 16, 2021

View reviewed changes

CapriciousRebel added 5 commits December 7, 2021 22:57

[Feat]: Add input command box

eb59c43

[Refactor]: Remove unused repos

caad47a

[Refactor]: Update CSS

f6d2c4e

[Refactor]: Remove unnecessary files and config

0ec8e68

Remove DS_Store file

091e52d

ljharb reviewed Dec 22, 2021

View reviewed changes

CapriciousRebel added 8 commits December 28, 2021 20:41

[Fix]: Seperate the styles into another file

8384471

[Fix]: apply formatting on index.html

da8ca7e

[Fix]: remove hardcoded url

b040819

[Fix]: remove unnecessary implicit string conversion

1d2f06a

[Fix]: remove unnecessary implicit string conversion

84ff4d8

[Fix]: add GITHUB_TOKEN along with GH_TOKEN

124f9f7

[Refactor]: remove unnecessary forEach loop

9cd20ba

[Refactor]: generateGui

bf53a70

Merge branch 'main' into add-gui

e24218a

ljharb reviewed Dec 28, 2021

View reviewed changes

CapriciousRebel added 7 commits December 29, 2021 16:34

[Refactor]: utils file

d7b8e79

[Revert]: remove DS_Store from gitignore

295eac2

[Refactor]: conversion of table output to sting

ebe3900

[Refactor]: remove unnecessary branch from detail.js

5e3df41

[Refactor]: server/app.js

0a87131

[Fix, Refactor]: server import fix and better syntax to check for array

bf7726c

[Refactor]: better export syntax

d88896d

CapriciousRebel added 2 commits January 1, 2022 19:06

[Refactor]: remove css variables

568e7e0

[Fix, Refactor, Feature]: fix token issue, refactor css file, add err…

b57f665

…or showing ability

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] Add a GUI #59

[WIP] Add a GUI #59

CapriciousRebel commented Oct 23, 2021 •

edited

Loading

thehanimo commented Oct 24, 2021

CapriciousRebel commented Oct 24, 2021

CapriciousRebel commented Oct 26, 2021

thehanimo left a comment

rosekamallove commented Oct 27, 2021

thehanimo commented Oct 27, 2021

CapriciousRebel commented Oct 27, 2021

CapriciousRebel commented Nov 3, 2021

rosekamallove commented Nov 3, 2021

ljharb Nov 16, 2021

CapriciousRebel Nov 16, 2021

ljharb Nov 16, 2021

CapriciousRebel Dec 9, 2021

ljharb Jan 1, 2022

CapriciousRebel Jan 3, 2022

CapriciousRebel commented Dec 21, 2021

CapriciousRebel commented Dec 27, 2021

CapriciousRebel commented Dec 28, 2021

CapriciousRebel commented Dec 29, 2021 •

edited

Loading

CapriciousRebel commented Dec 30, 2021

ljharb commented Dec 30, 2021

CapriciousRebel commented Jan 1, 2022

ljharb commented Jan 1, 2022

CapriciousRebel commented Jan 3, 2022

CapriciousRebel commented Jan 9, 2022

[WIP] Add a GUI #59

Are you sure you want to change the base?

[WIP] Add a GUI #59

Conversation

CapriciousRebel commented Oct 23, 2021 • edited Loading

thehanimo commented Oct 24, 2021

CapriciousRebel commented Oct 24, 2021

CapriciousRebel commented Oct 26, 2021

thehanimo left a comment

Choose a reason for hiding this comment

rosekamallove commented Oct 27, 2021

thehanimo commented Oct 27, 2021

CapriciousRebel commented Oct 27, 2021

CapriciousRebel commented Nov 3, 2021

rosekamallove commented Nov 3, 2021

ljharb Nov 16, 2021

Choose a reason for hiding this comment

CapriciousRebel Nov 16, 2021

Choose a reason for hiding this comment

ljharb Nov 16, 2021

Choose a reason for hiding this comment

CapriciousRebel Dec 9, 2021

Choose a reason for hiding this comment

ljharb Jan 1, 2022

Choose a reason for hiding this comment

CapriciousRebel Jan 3, 2022

Choose a reason for hiding this comment

CapriciousRebel commented Dec 21, 2021

CapriciousRebel commented Dec 27, 2021

CapriciousRebel commented Dec 28, 2021

CapriciousRebel commented Dec 29, 2021 • edited Loading

CapriciousRebel commented Dec 30, 2021

ljharb commented Dec 30, 2021

CapriciousRebel commented Jan 1, 2022

ljharb commented Jan 1, 2022

CapriciousRebel commented Jan 3, 2022

CapriciousRebel commented Jan 9, 2022

CapriciousRebel commented Oct 23, 2021 •

edited

Loading

CapriciousRebel commented Dec 29, 2021 •

edited

Loading