Consider PatternFly interface

Have a look at the PatternFly project for the UI. https://www.patternfly.org/get-started/about-patternfly/

Built on top of the Bootstrap 3 framework, it provides an interface designed by UI professionals, leaving the project engineers free to concentrate on the under-the-hood coding.

Of the projects I’ve seen adopting this UI, the benefits to the user have been clear.

3 Likes

Thanks @duncaninnes, the examples look great! Please take a note @ganti_priya @snamstorm @gkadillak

The enterprise IT part is what stood out to me most. If companies are going to use this product, they do expect it to look a certain way. I shudder to think about the poor soul that would have to reimplement the functionality of the UI.

Have a look at the Cockpit project (http://cockpit-project.org/) to see a project using PatternFly heavily.

Messing around with an installation of Cockpit on CentOS7 will be the best way to see it in operation. I particularly like the real time graphs to render various performance metrics. PatternFly enables the Cockpit app to provide a polished with a single approach.

While the screenshots look pretty that site is terrible, sure it looks nice but it seems to do little to actually tell you what the software is capable of other than it’s a tool for monitoring/managing multiple servers.

You’d at least expect a feature list.

Yes - it’s a pretty thin website, but it does detail how to get access to a running Cockpit instance. The best way to see Cockpit (and the PatternFly UI) is to see it in action. Screenshots don’t convey how the whole thing interacts and hangs together. Much better to see it in action for yourself.

There are perhaps better demonstrations of PatternFly out there, but this is one of the best I’ve come across.

https://www.patternfly.org/patterns/

1 Like

The Dashboards and Cards
https://rawgit.com/patternfly/patternfly/master/tests/dashboard.html
https://rawgit.com/patternfly/patternfly/master/tests/cards.html
templates give a sense of what can be achieved with relatively little effort.

I tried to poke around with my own fork of PatternFly - the results of which can be seen at:

https://rawgit.com/duncaninnes/patternfly/master/tests/rockstor5.html

D

2 Likes

@duncaninnes, thanks for all the info. The mockup looks nice. Please consider submitting a pull request, that’s a sure way to speed things up :smile:

Defintely! That interface is definitely a step up.

Unfortunately @suman, this is about as far as I’m able to go with any coding I’m afraid. I’m surprised I got this far to be honest. I put it together part out of curiosity.

But if I managed to get this far, think how far someone with actual web coding expertise could go! :wink:

Fair enough! Here’s the issue:

1 Like

Patternfly looks very sweet, good stuff! After handling some of the dashboard widget code today I definitely think it could do with a more uniform and clean look (and hopefully a few lines shorter). I think I’ll look into this a little further for our dashboard.

1 Like

Hello everyone,

Since my previous post, I have spent some time integrating PatternFly into Rockstor. I am now just about happy with my first iteration, which consists mainly of a new navigation bar and some Backbone code for PatternFly elements. My idea for its release is to, for now, make the new dashboard/interface available separately from a “New Features” menu in the current navigation bar. This way users of the testing release and developers can preview the design and contribute ideas and code as it progresses. Please take a look at the PatternFly design library, especially the Cards and Dashboard sections, for various ways of displaying data.

I have taken some screenshots of my current dashboard mock-up. Note that I’ve only made an exact port of two of our current widgets. This is because @Flyer has recently revised the rest of them and I want to wait for his code to be merged before seeing about integrating it with a PatternFly card. Also, I haven’t yet made any customisations to the CSS, which has blue colour accents by default instead of our orange. Anyway, here they are:

Please let me, and everyone else, know what you think. :smile:

6 Likes

Steven,

Can only have a brief scan at the moment, but initial thoughts are that the screenshots are very good. I struggled trying to create a top menu with a sidebar for 2nd level navigation, but I think the PatternFly team are trying to prevent setups like that. At least that’s what I’m putting my poor efforts down to.
Great work. Will be interesting to see how other screens and data translate into PatternFly widgets.

1 Like

Did you make any further progress with this @sfranzen?

I’ve been busy moving house etc. so haven’t been able to check in recently.

1 Like

Looks like a potentially step up for the dashboard.
Will this be tested in the testing channel in the future?