Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New web ui #2226

Merged
merged 33 commits into from
Apr 27, 2018
Merged

New web ui #2226

merged 33 commits into from
Apr 27, 2018

Conversation

jkuri
Copy link
Contributor

@jkuri jkuri commented Oct 8, 2017

First of all, sorry for making PR this huge, I did read the contributing guide but in that case I believe small PR is not possible.

Hi guys, I really like the project and I decided to help you with transition to latest version of Angular rather than using first version.

screen shot 2017-10-08 at 18 11 30

I also updated UI and started to working on be a slightly more modern but didn't finish things already. First, I would like to know if you guys are even interested of upgrading and improving user interface?
If so, this PR is not finished yet, its a work in progress, but can be done in a day.

I have question if there is a reason why you are sending xhr requests to server in time interval (3000ms)? I believe this is a more or less anti-pattern and should be done with websockets.
All live data on Web UI should transfer data through websockets and if someone is interested of creating server I can update the frontend accordingly.

TODO:

  • health
  • frondend implementation of reconnecting websocket
  • e2e tests
  • karma tests

Cheers, Jan

@emilevauge
Copy link
Member

@jkuri Wow, that's awesome 🎉 Thanks a lot for this 👍

First, I would like to know if you guys are even interested of upgrading and improving user interface?

Definitely 😻 !

I believe this is a more or less anti-pattern and should be done with websockets.

I suggest to do this in another PR if you don't mind ;)

@jkuri
Copy link
Contributor Author

jkuri commented Oct 8, 2017

@emilevauge thanks for that feedback 👍

I will continoue now with live charts and use current implementation of API as you suggested.
Will come back later with new screenshots and commits :)

@ldez ldez removed this from the 1.5 milestone Oct 8, 2017
@errm
Copy link
Contributor

errm commented Oct 9, 2017

I wonder if we have considered if angular is the correct framework to use, if as I understand upgrading to the latest angular will involve rewriting much of the frontend code.

  • Angular doesn't seem to be quite so popular now as it was a few years ago.
  • The Web UI is (currently) quite simple, perhaps we can make something simpler with a lighter weight framework.

I have no particular preference as to what the best option is, and I am totally willing to be told by anyone who will actually work on this that Angular is indeed still the best tool for the job. I just think it might be wise to at least consciously decide to use Angular or something else if time is going to be spent on reworking this code.

Honestly though @jkuri if you are happy with the direction you are taking this in, please feel free to ignore me :)

@jkuri
Copy link
Contributor Author

jkuri commented Oct 9, 2017

I am not sure about popularity because I am not following statistics about this, I think its irrelevant. What I can say is that is definitely the fastest and the size of the bundle is relevant to how and in which case you include some parts of the Angular. If you have included all packages that it provides then its definitely not the lightest. Also, I think you said that without a solid foundation of knowledge of web frameworks, don't get me wrong, afterall you can do it in jQuery if you like.

I like this project a lot and wanted to help with this thing how I can and where I see that it can be improved. And I got this refactor almost done, in the evening I will push the changes then please check again. Thanks.

@jkuri
Copy link
Contributor Author

jkuri commented Oct 9, 2017

@ldez Vue.js is fast and easy to learn, that's what I heard.
If the issue is maintaing the UI in the future I am also interested to help with the new features.

@SantoDE
Copy link
Collaborator

SantoDE commented Oct 9, 2017

Hey @jkuri ,

first of : Thanks! :) I really like the effort you've put into this.

On technical part, I got to agree that vue.js might be a good starter compared in weight and stuff to angular.

Knowing to you might be up to help is very good to know. Thanks! :)

@jkuri
Copy link
Contributor Author

jkuri commented Oct 9, 2017

no problem at all. for what I have now currently the bundle size (gzipped) is 172 kB for production build and will not increase much in the future as its already have d3 included.

@jkuri
Copy link
Contributor Author

jkuri commented Oct 9, 2017

I think that's not so hardcore and every mobile connection can handle this.

@emilevauge
Copy link
Member

emilevauge commented Oct 9, 2017

IMHO, the framework we will use is not significant here. Regardless which one we will choose, it will be outdated in the coming months 😄 Besides, I don't think the bundle size is something we should really care about as:

  • this UI is not intended to exposed
  • the current size seems reasonable

To my mind, the current refactor is really welcomed, even with the latest & less-hyped Angular ;)

@timoreimann
Copy link
Contributor

I'm with @emilevauge here. One thing we may want to pay attention to at some point is performance: We have one environment with ~300 backends, and the web UI already takes 2-3 secs to load. Scrolling feels a bit sluggish too.

I guess that's more a matter of redesigning the UI than choosing a particular framework, however.

@jkuri
Copy link
Contributor Author

jkuri commented Oct 9, 2017

Emile and Timo thanks for support there.

This is how it looks currently, still status code bar chart and tests missing.

screen shot 2017-10-09 at 21 27 49
screen shot 2017-10-09 at 21 27 44

Btw, I made this thing here as @emilevauge suggested; making request every 3 second, so this is a subject that is going to change in the future prs.

@ldez
Copy link
Contributor

ldez commented Oct 9, 2017

@jkuri don't forget the dashboard filter 😉

@ldez ldez added the kind/enhancement a new or improved feature. label Oct 26, 2017
@ldez
Copy link
Contributor

ldez commented Nov 1, 2017

@jkuri any news?

@jkuri
Copy link
Contributor Author

jkuri commented Nov 1, 2017

@ldez I'll try to finish it today. Sorry but been real busy lately.

@jkuri
Copy link
Contributor Author

jkuri commented Nov 2, 2017

@ldez sorry for that question but is there any sample configuration of multiple providers ready, so I can check search and implement UI for providers?

@ldez ldez changed the base branch from master to v1.6 April 25, 2018 19:04
@ldez ldez added this to the 1.6 milestone Apr 25, 2018
Copy link
Contributor

@ldez ldez left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the great job! 🎉

LGTM

Copy link
Member

@mmatur mmatur left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job 👏
LGTM

@shadycuz
Copy link
Contributor

Amazing, when can we get a docker image to test?

Copy link
Contributor

@nmengin nmengin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Many thanks for this awesome PR @jkuri .

After review with @jbdoumenjou :
LGMT 👏 👏 🎉

@kachkaev
Copy link
Contributor

screen shot 2018-04-27 at 13 02 56 screen shot 2018-04-27 at 13 02 56 screen shot 2018-04-27 at 13 02 56

Does the merge finally clear path for 1.6.0?

@ldez
Copy link
Contributor

ldez commented Apr 27, 2018

@kachkaev it's in 1.6 😸
The final release will come soon 🐁

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.