"Official" CCNet CI config / Dashboard styles

[Richard Towers]

Hi Guys,

While having a look at the mono build I had a go at setting up a couple of ccnet servers hosted in the so-called "cloud" running my fork:

http://ccnet.richard-towers.com/ - running under windows on a (very slow) Azure VM.

http://ccnet-unix.richard-towers.com/ - running under a DigitalOcean Ubuntu 14.04 image.

At the moment they're just running the NAnt build, not the tests or anything. The official builds (http://build.nauck-it.de) look like they're configured a bit more elegantly, but I can't see a ccnet.config in the repo. Is this something that should be under version control? Or is it more of an ad hoc setup? It would be good to have a look at ccnet.config and dashboard.config so that I can set up my fork the same way.

In other news I've been having a think about how we might modernise the dashboard. I think the work probably falls into three areas:

• Throwing in some HTML 5 features (e.g. "realtime" feedback with server sent events, web notifications)
• Moving away from a table based layout towards more modern HTML 5 markup 
• Restyling

The first one ought to be pretty uncontroversial. I think there's an opportunity for some cool features that wouldn't be all that difficult to implement.

The second two are quite tied together. If we're going to do the work to move away from a table based layout we should probably take the opportunity to redo some styles. I don't want to go off on a tangent that doesn't fit with the image of the project though, so if I'm going to work on that we'd probably need to do a fair bit of discussion. Full disclosure: I'm completely inept as a designer.

I thought a good start might be to use an OS dashboard like http://ehesp.github.io/Responsive-Dashboard/ as a starting point and work from there. I mocked up a example of what that might look like here:

http://richard-towers.com/dash/ (single page, no functionality)

I'd welcome people's thoughts on that. If you think that might be a good approach there are a bunch of technical considerations that I'll bore you with later.

Anyhow, I've probably rambled on long enough.

Cheerio,

Rich

[Matthijs ter Woord]

Wow. Your mockup looks amazing.

1 thing I'd personally like, is to make it responsive, so the Last: and Next: labels appear next to each other when there's enough room for it. That way, when having more projects, it doesn't cost too much room.

Also, have you considered using a datatable for the projects listing? Like for example http://datatables.net/ It would allow to do sorting, regrouping, etc....

Keep up the good work though!

--

---
You received this message because you are subscribed to the Google Groups "ccnet-devel" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ccnet-devel...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Ruben Willems]

Hi

That mockup looks really great, amazing work !

What kind of info / data do you need to continue with the dashboard change?

I'm no designer either :-) but I really like the new look.

Concerning the config, that's hosted on a private account in GitHub because of settings of other projects.

but if you want to set up a build server that runs the CCNet code, it's not hard :

All you have to do is call the 'all' target of the included nant build file

This one looks like this :    
   <target name="all" depends="clean, init, build, runTests, runCodeMetrics, package" description="" />

with kind regards

Ruben Willems

--

[Richard Towers]

Hello,

Glad you guys liked the mockup. As I mentioned, it was largely based on http://ehesp.github.io/Responsive-Dashboard/, which in turn is based on twitter bootstrap so I really can't take any credit for the design skills.

The main question that needs addressing before I proceed is: how much shiny-new should we be using? As you all probably know, the world of front-end development has been moving at a pretty sickening speed over the last few years and I'm a little cautious about using technology the other developers might be less familiar with.

Here's a rough plan of how I would approach things if it were just me:

• Create a fork of the Responsive Dashboard project under the ccnet github organisation
• Add the ccnet fork of Responsive Dashboard to CruiseControl.NET as a git submodule (this is similar to what I've done in https://github.com/richardTowers/dash)
• This will add dependencies on the following development tools which people will need to familiarise themselves with if they want to work on the styles:
  
• node / npm
• gulp
• less

and the following runtime dependencies:

• angular js
• bootstrap
• font-awesome

• Modify the Responsive Dashboard build script to generate CSS in the parent repository and commit this to git so that it isn't necessary to build the styles if you're not working on them.
• Keep non-framework javascript in the parent repository
• Modify the NVelocity templates so that they generate markup compatible with the new stylesheets (I suspect this will be a colossal task) and at the same time customise the LESS in the Responsive Dashboard submodule to our needs, making sure that the markup stays reasonably semantic.

Of course it would be possible to achieve the same result without all the extra tech, but I think it would be more difficult to achieve and more difficult to maintain.

An added advantage of having relatively heavy frameworks like angular and bootstrap loaded is that it gives plugin authors a lot of power basically for free. It should also make it easier to have consistent UI patterns across the dashboard and its plugins.

We'll also need to put together someway of discussing design decisions, so that everyone who wants to be stays involved. Perhaps a branch in the main github repo that we can send PRs to along with attached screenshots / screencasts?

Further down the line I think it would be fun to have a go at a ground up rewrite of the webdashboard server using some of the super-new, super-shiny ASP.NET vNext stuff that's just on the horizon. I suspect a lot of the existing webdashboard code is doing things that are already implemented in ASP.NET (a hangover from the original Java CruiseControl port perhaps?) and so we might be able to produce a much lighter, easier to maintain solution. That's a big job for much later though.

Let me know if people have thoughts on any of that.

Cheers,

Rich

[Ruben Willems]

Hi

From those things you mentioned :

• node / npm
• gulp
• less

• angular js
• bootstrap
• font-awesome

I know 1 (one) : angular.js, and by name only, never used it.

So this means that I have a LOT of catching up to do,
I can't speak for the other devs, because at the time of writing, it seems I'm the only active one.
(besides of the other contributors that is)

This does not mean that I discard this topic, far from it !
I always wanted to get the dashboard to HTML5 one way, and this gives it the perfect opportunity.
Any pointers where I and other people wanting to help / discuss should look at first?
Just so I have a bit of hands on on the matter.

[Daniel Nauck]

Hi Ruben,

i’m working a lot with angular and bootstrap. So i can at least review it.

@Richard: why do you need node? Only for development tools (build tools, js / less processors?) Then its ok.

For the main project we should stay on .NET tech. Maybe NancyFX is a solution for the required REST interface.

Best regards,

Daniel

Further down the line I think it would be fun to have a go at a ground up rewrite of the webdashboard server using some of the super-new, super-shinyASP.NET vNext stuff that's just on the horizon. I suspect a lot of the existing webdashboard code is doing things that are already implemented in ASP.NET (a hangover from the original Java CruiseControl port perhaps?) and so we might be able to produce a much lighter, easier to maintain solution. That's a big job for much later though.

Let me know if people have thoughts on any of that.

Cheers,

Rich

On Friday, September 12, 2014 8:41:33 AM UTC+1, Williams wrote:

Hi

That mockup looks really great, amazing work !

What kind of info / data do you need to continue with the dashboard change?

I'm no designer either :-) but I really like the new look.

Concerning the config, that's hosted on a private account in GitHub because of settings of other projects.

but if you want to set up a build server that runs the CCNet code, it's not hard :

All you have to do is call the 'all' target of the included nant build file

This one looks like this :     
   <target name="all" depends="clean, init, build, runTests, runCodeMetrics, package" description="" />

with kind regards
Ruben Willems

On 10 September 2014 22:21, 'Richard Towers' via ccnet-devel <ccnet...@googlegroups.com> wrote:

Hi Guys,

While having a look at the mono build I had a go at setting up a couple of ccnet servers hosted in the so-called "cloud" running my fork:

http://ccnet.richard-towers.com/ - running under windows on a (very slow) Azure VM.http://ccnet-unix.richard-towers.com/ - running under a DigitalOcean Ubuntu 14.04 image.

[Richard Towers]

Hi,

Yes, node would only be required for the tools, no runtime dependency.

My favored approach would be to leave the server side stuff mostly untouched and just change the templates to generate HTML5, so there probably wouldn't be anything too fancy going on in the JS. It would be nice to overhaul the server too (NancyFX / vNext MVC / angular SPA + web api), but I don't want to let the scope creep into something unmanageable.

In terms of catching up with the tech, I think since the work will mostly be CSS based the most important things to be familiar with would be bootstrap and less. I like Angular, but it is a fairly big bit of learning and since there isn't much JS to refactor maybe it would be better just to stick with jQuery? Not sure.

Gulp is just a build tool, not too dissimilar from NAnt. Node's just a runtime. Probably no learning required really.

Since there don't seem to be any major objections perhaps the best way forward is for me to make a start so that we have something we can collaborate on? 

Cheers,

Rich

[Ruben Willems]

Hi all

Ok,

so for step 1, should I make a fork on the ccnet organization of https://github.com/Ehesp/Responsive-Dashboard

and create a separate branch meaning Richard can do his changes there?

Do we really need that fork at the moment ?

because in the branch, we would lay a reference to files of Ehesp/Responsive-Dashboard.

or am I missing something?

so for fase 1 :
we 'just' update the themplates so they generate html5 with the layout of bootstrap / reponsiveDashboard

and fase 2
we change the dashboard to mvc vNext

that's roughly the plan, correct?

with kind regards
Ruben Willems

[Richard Towers]

Hi Ruben,

That would be my vote, yes. We could submodule Ehesp/Responsive-Dashboard directly, but since we don't have write access to that fork we'd wouldn't be able to change anything. I imagine we'll want to make quite a few changes to the less files in there, so better if we have our own.

Cheers,

Rich

[Ruben Willems]

Hi

The fork of the responsive Dashboard :
https://github.com/ccnet/Responsive-Dashboard

The branch for the redesign of the CCNet Dashboard
https://github.com/ccnet/CruiseControl.NET/tree/DashboardHtml5

I've taken a quick look at bootstrap, and that should not give big problems for me,

I had a small HTML5 course last year, and I recognize most things.

So this change to HTML5 will be my first real app with this technology :-)

I'm eager to see the new dashboard ...

with kind regards
Ruben Willems