Further web interface improvements with next major version

Webinterface
1

Hi Guys,

It took me a while to get started and to understand how it all works. Its a bit frustrating that if you want to change just the column order, that the whole javascript breaks down. I’m also not a huge fan of that datatable js library, since its really hard to customize the controls.

Although mambojuice made great improvement on the style, his initial mockups are still quit different that the current code. Also the whole page requires merging of existing funtionality if you ask me. So this is a rough first attempt:

Pasted image1512×809 48.6 KB

My plans are:

  • Make a checkbox in the header, to check and uncheck all clients, instead of the buttons below.
  • Reduce the number of columns in the header and merge some of them and create a detail view (if you click on the row, with the extra information). So for example you have the column status: which indicates both image and file status.
  • Remove or move/style the save button, why do we want to have a pdf/excel of this table?
  • Remove the show/hide columns: Some columns whill be shown in the overview, other when you click on the row.
  • A filter row, to filter on all columns

What do you guys think?

1 Like
2

Moved to a new thread. Hope that’s okay.

Yes, I think there also are some problems with it interacting (badly) with bootstrap and I don’t think it is really responsive, i.e. I could not get the reponsive plugin to work.

Great idea!

Someone also wanted to have comments per clients. I can add a backend api for that. Also perhaps we can show current and last activities of the client (plus link to logs) on the detail page.

If anyone uses this, please join the discussion.

Sounds good.

3

Hi,

Thanks for the feedback :slight_smile: Trying to change the style of the current code is really hard. So I created a html mockup, to form the idea that I have in my head. So I had in mind for the status page something like this:

Pasted image1628×915 31.3 KB

  • In this case I have clicked on ‘johns pc’ and it will show me some more details for that particular client
  • The value in the status column is a summary of both the image and the file backup status. Or just one, if you have enable only one of them.
  • If i check clients, the bulk action button will show up
  • Sorting is still possible, I forgot it, now I’m writing this
  • This template doesn’t performance as good as I wanted on a mobile device, so that still needs some work
  • Good idea about the logs, I will try to fit it in.

What do you think?

I do think that fitting this in the current code is gonna be hard, so I was wonderig, can I rebuild it with for example angular?

4

Looks great!

The problem with that is that this should be conistent throughout the web interface. I’d rather prefer react, as it is smaller and more focused (plus the hype has moved there :wink: ).

Low hanging fruits in terms of clean up are:

  • Separating the functionality into separate js files
  • Add a proper router plus proper URLs for app state (e.g. react-router or flux)
  • Use the loop construct of dust.js for e.g. tables. This is not used in some places because the js-templating before dust.js did not have this

Tell me whats the worst impediment and I’ll do some of that.

5

Im currently working on the mockups for the other pages as well. I will show them when I’ve finished them. So it will be consistent :smile:

To answer your question, the things I don’t like in the current code:

  • The fact that I have to compile my changes in the templates. Everytime I change something I have to compile and copy some files to see the differences. I rather hit save and press refresh directly
  • The datatable js library, it messes up the html and it’s really hard to customize and style it. When you change the order, the complete file is broken
  • The single big js file which contains all the javascript code.

But that is not it, its more that:

  • Reading existing code, understanding it and refactoring it requires quite soms time as well. During my day job I found out that rebuilding something is sometimes wise especially if you take motivation into account.
  • There are only a couple of pages, it shouldn’t require that much time
  • I want use this opportunity tot learn some new skills, I have never written a single page app before.
  • I do like to work in fresh code and create new code, rather maintaining/modifying existing code.

I’m not sure if you already found out, but I’m a web developer myself. So I’m not really asking if you would like to help me with rebuilding, but more if you allow me to rebuild it. And ofcourse I find it really cool if you help me, but I’m fine if I have to do it on my own. In my day job I develop asp.net c# applications, using javascript/jquery as well. So I think I can handle this :smile:

The reason I had angular in mind is that:

  • It supports routing out of the box
  • it does more than just rendering views, its a complete mvc framework.

But tot be honest you brought me in doubt. The cons that I found until now:

  • Angular 2 is a complete rebuild, so learning 1 is not a smart idea.
  • It seems tot mess up the html, something I don’t like
  • it tends tot get complex in bigger applications, but I doubt if our application is gonna be that big.

What I’ve heard from react is that its usefull for rendering, but it would be nice tot have a framework that van do more than that.

(Sorry about all the typos, my phone auto correction is killing me)

6

I actually have a script which automatically recompiles if a template is changed. Have commited this now.

With a certain complexity it becomes unwise to do this. For example I would not want to rewrite the backend. But the web interface does not have that many screens and corner cases, so I think (and as you say) it is doable, if more work than incrementally improving it (but then perhaps not long-term).

The help offer was, because I am aware it needs a little bit refactoring effort. It’s my mess, so I should be the one to clean it up. But it is great if I can avoid this tedious work.

I think you got the framework problematic. Choosing jQuery is currently a no-brainer because it won (against e.g. prototype.js). But choosing Angular, react etc. is risky because it is uncertain which framework will win.

React isn’t a framework, i.e., you have to combine it with other libraries. The advantage is that you can switch those libraries at lower cost.

Another Javascript framework with “batteries included”, which this forum is using, is ember.js ( Why Discourse uses Ember.js | Evil Trout’s Blog ).

7

Hi, once again, excellent product.

What I mostly miss in the WEB interface are just few things:

  • Ability to see all the image backups done so far
  • Ability to delete archives (including image archives)
  • When setting up mail user password the password to be hidden (if saved it stays clear)
  • When set up columns for the clients view, the change to be permanent

All the best regards and keep up the amazing job you are doing, guys.

8

Hi Alexander,

Thanks for your feedback.

What do you mean by that exactly. Do you want to see in the logs both the failed and succeeded backup logs?

In the new design there is no option to show hide columns. All columns are shown, but the most are only shown in the detail. What do you think of it?

BHD

9

Hi,

I’m getting closer to finishing the mockups. So here is another update:

Pasted image1243×667 14.5 KB

No big changes here. Just added the sorting icon; added the logs link in the detail view and renamed status to clients.

Pasted image1243×655 10.2 KB

The activities page. @uroni: Is it possible to show here the failed activities as well? And what about the unfinished backups?

Pasted image1267×655 23.5 KB

The log page, nothing special here.

Pasted image1235×653 11.5 KB

The settings page. (or at least one of them). It still feels a little bit boring this page.

So the only pages which are still missing are:

  • Statistics (I’m still not sure what to put on this page.)
  • Login page

@Uroni: I have read some topics about ember.js, I think its a solid choice. I will give it a try.

1 Like
10

Friendly greetings.

For the image backups… I meant that if you take a computer, having file backup, you can see the list of file backups done in the time. If the computer has only images backup, you do not see what backups have been taken. Also no chance to mark image backup not to be deleted (archived) like you do with file backup.

I was talking about the initial view, where you can show more columns, like IP, OS etc. When you reload the page, the available columns for the clients is reset to default.

About the design, of all I have seen so far as screen shots, I could only say, quite a lovely job. Truly like it.

Alex

11

I have to think about that. Failed/unfinished backups are present till (nightly) cleanup and the database entries get deleted at this point as well. Otherwise the information is still in the logs.

Boring ist good :wink:

Cool. You could also try this boostrap theme: GitHub - scottdorman/bootstrap-flat: A simple flat theme for Twitter Bootstrap 3 Makes it look more modern, perhaps.

This is something that needs to be done in the backend first. It is on the “roadmap”.

This should currently work via cookies. Maybe check with a different browser/check your cookie settings. I think one could argue about if this should be per browser or per user.

12

Hi,

I have implemented the flat theme, looks indeed better, it’s a keeper.

I have a question about the json which you are returning. On my ‘production’ server I see that if a client is in backup progress has the following json:

{
   "client_version_string":"1.4.9",
    "delete_pending":"",
    "done_pc":59,
    "file_ok":false,
    "id":1,
    "image_ok":false,
    "ip":"192.168.0.10",
    "lastbackup":"",
    "lastbackup_image":"2015-10-07 11:37",
    "lastseen":"2015-11-30 19:48",
    "name":"Gaston",
    "online":true,
    "os_version_string":"Microsoft Windows 7 Professional Service Pack 1 (build 7601), 32-bit",
    "status":4
 }

And on the test server, I have no client in progress, it looks like this:

{
"client_version_string": "",
"delete_pending": "",
"file_ok": false,
"id": 12,
"image_ok": false,
"ip": "-",
"lastbackup": "",
"lastbackup_image": "",
"lastseen": "2015-10-03 14:12",
"name": "test12",
"online": false,
"os_version_string": "",
"processes": [],
"status": 0
}

Did you change the ouput? And if so, how does the json look if a client is in progress?

13

It can have multiple simultaneous backups per client. It returns an array of running backups with an “action” property having the same values as the previous “status” property (minus the errors) and a “pcdone” property returning the percentage completed or -1 for indexing.

14

It’s been a while and I haven’t posted an update. I have been busy but after numerous attempts with ember.js I stopped using it:

  1. The documentation is incorrect/outdated. I kept having a hard time to find and follow documentation that was actually accurate.

  2. Ember is also moving to a version 2 which is going to be a rewrite of the current, so all I’am learning now might get useless than…

  3. The learning curve is steep and isn’t motivating to continu after another failed attemp to get something done.

So after 3 months of trying, stopping and trying again I came to the conclusion that I have to try a different approach. It was also the time that angular 2 beta was annouced. So I now started with the angular 2 framework and to be honest it’s a big relieve. The documentation is accurate and the client / status page is getting shape.

So there hasn’t booked much progress as I hoped, but at least I’m more motivated than before.

2 Likes
15

Hello and many thanks for your hard work !

Ability to restore files from image backups will be a great functionnality. It means ability to mount and present content from VHD/VHDX files from the backend i suppose …

16

Ember.js is rubbish. The Discourse team adopted it early on and a lot of their performance issues on boards busier than this one can be traced back to that decision.

Thank you for your hard work. All of us users of UrBackup appreciate it.

17

Forgot to specify : from the GUI of course …
In this way if we only do full/incremental image backups of a client we should be able to restore only one file from a volume or the entire client with the rescue CD.

Regards

18

Hi guys,

Thanks for the warm replies, its motivating :smile:

@TomTomGo: I’m only reimpleting the existing web interface. So for this new feature, the server should implement it before I can implement it in the web interface. So when I finished reimplementing the existing interface, Im happy to try to implement if the server supports it.

1 Like
19

Hi,

There’s already some commands from the urbackupsrv CLI for that purpose :

urbackupsrv mount-vhd
        Mount VHD file

urbackupsrv assemble
        Assemble VHD(Z) volumes into one disk VHD file

BTW, did you have a look at Sencha extJS for the web GUI framework ? Rich and beautiful framework used in many webgui opensource products (Proxmox, OpenMediaVault …)

Regards

20

Hi,

With using this great software every day for tests purpose, i found some little tips which are “missing” and will be usefull :

  • It should be very nice and therefore very usefull to have a “Show logs” or “View logs” button at the end of each activities lines in the Activities section.
  • A tree view when browsing backups
  • In the statistics view it should be usefull to have the total storage capacity with the filling percentage

Thanks !
Regards