Show which file is currently backuped in the GUI

dbddhkpde · December 3, 2017, 11:17am

Hi,
I try to figure it out myself on how to modify the GUI, without success so I try to get help from this forum.

I want to show the current file which is backuped below the progress bar when a backupjop is running. Due to the fact that I have 4 HDD’s to backup, I would like to know “where” the backup-process is (which file is currently backuped…). As the gui is implemented with Angular.js (little knowledge available…), I thought I modify the html myself…

Can someone give me a hint on how to do this? Anything I have done so far did not show up in the GUI.
I use a Duplicati Windows client and it is installed at "C:\Program
Files\Duplicati 2… " Tried to modify some html within “C:\Program Files\Duplicati 2\webroot\ngax\templates…” also without success.

Can this be done? Any help is welcome, thanks in advance!
Cheers
-Stefan

tophee · December 4, 2017, 8:38am

I’m unable to answer your question, but I’d like to suggest that if you figure out how to make that change, please submit it as a pull request on Github so that other users can benefit from the improvement.

samw · December 4, 2017, 9:52am

Hey @dbddhkpde. I’m not even sure this is possible and what value it would actually bring. Duplicati is threaded so it’s backing multiple files at a time and it backs up in blocks, meaning it is only backing up the changed parts of the files. Duplicati is a really good with unstable connections and resuming backups that haven’t finished so that current percentage indicator is enough to show where it is up to. You can use the command line to spit out a list of files that have been backed up in version 0 (latest version), if that’s of any help?

JonMikelV · December 4, 2017, 6:04pm

Awesome idea! As @tophee, if you figure it out - please share on GitHub so others can benefit!

As I understand it, the Angular code in the web GUI gets its content from calls to the exe files such as Duplicati.CommandLine.exe, Duplicati.GUI.TrayIcon.exe, and/or Duplicati.Server.exe.

So if what you want is available from one of those, then it should indeed be a “simple” Angular code change. However, if the data you are looking for isn’t already presented from an EXE for Angular to consume then a C# update will be needed to so that it’s available for the web GUI to fetch.

dbddhkpde · December 8, 2017, 8:36pm

Hey!
Thanks for your comments!
The reason why I was wondering I could do the modification on my on, was the fact that the file which is currently backuped is shown if you click on >about< and than >system-information<.
If you than look at server-state-property while a backup-job is running, you see many details about the file which is backuped right in front of you! So it is there but then any modification to the template does not show up!

I think I found the place to look at (at the end of the file: about.html):

System properties

… some more HTML…

    <h2 translate>Server state properties</h2>       
	<ul style="overflow: auto;">
        <li ng-repeat="(key,value) in state">{{key}} : {{value}}</li>
    </ul>
	
</div>

So the Angular variable >state< (key value pairs) holds the required values … right? And than I am lost!

Thanks for any more help!
Cheers
-Stefan

kenkendk · December 10, 2017, 9:55pm

Angular.js is very well documented (don’t go for the new version, Duplicati is based on 1.x):

Fortunately, the current file is reported to the WebUI, so you can do it all by fiddling with the web-side only.

You need to first make sure that the path is transferred to the “state” object:

github.com

duplicati/duplicati/blob/master/Duplicati/Server/webroot/ngax/scripts/services/ServerStatus.js#L7


      
          backupApp.service('ServerStatus', function($rootScope, $timeout, AppService, AppUtils, gettextCatalog) {
          
              var longpolltime = 5 * 60 * 1000;
          
              var waitingfortask = {};
          
              var state = {
                  lastEventId: -1,
                  lastDataUpdateId: -1,
                  lastNotificationUpdateId: -1,
                  estimatedPauseEnd: new Date("0001-01-01T00:00:00"),
                  activeTask: null,
                  programState: null,
                  lastErrorMessage: null,
                  connectionState: 'connected',
                  xsfrerror: false,
                  connectionAttemptTimer: 0,

I belive the path is actually part of the lastPgState object, so maybe you can skip that part.

The progress bar is implemented inside this <div>:

github.com

duplicati/duplicati/blob/master/Duplicati/Server/webroot/ngax/index.html#L160


      
          
          <div class="donate" ng-hide="systemInfo.SuppressDonationMessages">
              <external-link link="'https://www.duplicati.com/donate'">{{'Donate' | translate }}</external-link>
          </div>
          
          
          <a href class="menubutton hidden" data-target="mainmenu" translate>Menu</a>
          
          <div class="action-icons-small">
              <div class="pause" ng-class="{'active': state.programState != 'Running'}" ng-click="pauseOptions()" title="{{state.programState == 'Running' ? 'Click to see the pause options' : 'Click to resume'}}"></div>
              <div class="throttle {{throttle_active ? 'active' : 'inactive'}}" ng-click="throttleOptions()" title="{{'Click to set throttle options' | translate}}" alt="{{'Click to set throttle options' | translate}}"></div>
          </div>
          
          <div class="statepadding">
              <div class="state" ng-controller="StateController">
                  <div class="content">
                      <div ng-hide="state.activeTask == null">
                          <span ng-hide="activeBackup == null">
                              <span ng-hide="StopReqId == activeTaskID">
                                  <div class="task-state-info">
                                      <div class="task-name" title="{{activeBackup.Backup.Name}}">

You probably want to just change the StateText value, which is updated in this function:

github.com

duplicati/duplicati/blob/master/Duplicati/Server/webroot/ngax/scripts/controllers/StateController.js#L24


      
          };
          
          $scope.$on('backuplistchanged', updateActiveTask);
          $scope.$on('serverstatechanged', updateActiveTask);
          $scope.$on('serverstatechanged.pauseTimeRemain', function() { $timeout(function() {$scope.$digest(); }) });
          
          $scope.sendResume = function() {
              ServerStatus.resume().then(function() {}, AppUtils.connectionError);
          };
          
          function updateStateDisplay() {
              var text = gettextCatalog.getString('Running …');
              var pg = -1;
              if ($scope.state.lastPgEvent != null && $scope.state.activeTask != null)
              {
                  text = ServerStatus.progress_state_text[$scope.state.lastPgEvent.Phase || ''] || $scope.state.lastPgEvent.Phase;
          
          
                  if ($scope.state.lastPgEvent.Phase == 'Backup_ProcessingFiles' || $scope.state.lastPgEvent.Phase == 'Restore_DownloadingRemoteFiles') {
                      if ($scope.state.lastPgEvent.StillCounting) {
                          text = gettextCatalog.getString('Counting ({{files}} files found, {{size}})', { files: $scope.state.lastPgEvent.TotalFileCount, size: AppUtils.formatSizeString($scope.state.lastPgEvent.TotalFileSize) });

Hope that helps!

JonMikelV · December 11, 2017, 4:22pm

@dbddhkpde, please let us know if you need any help on this (or if you decide not to pursue it) as I think there are other users who would love to see this feature.

dbddhkpde · December 11, 2017, 10:34pm

THANKS!

That was exactly what I was looking for and will help for sure!
I will try to figure it out and if I am successfull (or if I need help) I will post the results here (or try a pull request… in the end…)!

Cheers!
-Stefan

P.S.: may take some time … as I am not a pro programmer!

JonMikelV · December 11, 2017, 11:31pm

Don’t worry about it - take your time and learn what you can while doing it.

I actually am a programmer (granted, not in Angular.js or using GitHub) and it took me over 2 months to get my first UI based fix into a pull request. Yep - 2 months to add a single period to a sentence.

dbddhkpde · March 3, 2018, 2:14pm

So reflecting the points mentioned by Kenneth, the modification is fairly easy and smal:
I just added the following lines to the JavaScript file “…\Duplicati 2\webroot\ngax\scripts\controllers\StateController.js”:

var filename = $scope.state.lastPgEvent.CurrentFilename;
if (filename.length >= 23) {
  var filename2display = ' (...' + filename.substr(filename.length - 23) + ')';
} else {
  var filename2display = ' (' + filename + ')';
}                    
text = gettextCatalog.getString('{{files}} files ({{size}}) to go', { files: filesleft, size: AppUtils.formatSizeString(sizeleft) }) + filename2display;

The file which is currently backuped is already known within the state variable. Just need to extract the CurrentFilename and add it to the StateText. The current filename contains the complete path, so I take the last 23 chars starting right because this was the number of chars which “fitted into” the progress bar…
Any better idea?

This did the job for me

Here the complete function:

function updateStateDisplay() {
    var text = gettextCatalog.getString('Running ...');
    var pg = -1;
    if ($scope.state.lastPgEvent != null && $scope.state.activeTask != null)
    {
        text = ServerStatus.progress_state_text[$scope.state.lastPgEvent.Phase || ''] || $scope.state.lastPgEvent.Phase;

        if ($scope.state.lastPgEvent.Phase == 'Backup_ProcessingFiles') {
            if ($scope.state.lastPgEvent.StillCounting) {
                text = gettextCatalog.getString('Counting ({{files}} files found, {{size}})', { files: $scope.state.lastPgEvent.TotalFileCount, size: AppUtils.formatSizeString($scope.state.lastPgEvent.TotalFileSize) });
                pg = 0;
            } else {
                var filesleft = $scope.state.lastPgEvent.TotalFileCount - $scope.state.lastPgEvent.ProcessedFileCount;
                var sizeleft = $scope.state.lastPgEvent.TotalFileSize - $scope.state.lastPgEvent.ProcessedFileSize - $scope.state.lastPgEvent.CurrentFileoffset;
                
                pg = ($scope.state.lastPgEvent.ProcessedFileSize + $scope.state.lastPgEvent.CurrentFileoffset) / $scope.state.lastPgEvent.TotalFileSize;

                if ($scope.state.lastPgEvent.ProcessedFileCount == 0)
                    pg = 0;
                else if (pg >= 0.90)
                    pg = 0.90;

                var filename = $scope.state.lastPgEvent.CurrentFilename;
                if (filename.length >= 23) {
                    var filename2display = ' (...' + filename.substr(filename.length - 23) + ')';
                } else {
                    var filename2display = ' (' + filename + ')';
                }                    

                text = gettextCatalog.getString('{{files}} files ({{size}}) to go', { files: filesleft, size: AppUtils.formatSizeString(sizeleft) }) + filename2display;
            }
        }
        else if ($scope.state.lastPgEvent.Phase == 'Backup_Finalize' || $scope.state.lastPgEvent.Phase == 'Backup_WaitForUpload')
        {
            pg = 0.90;
        } 
        else if ($scope.state.lastPgEvent.Phase == 'Backup_Delete' || $scope.state.lastPgEvent.Phase == 'Backup_Compact')
        {
            pg = 0.95;
        } 
        else if ($scope.state.lastPgEvent.Phase == 'Backup_VerificationUpload' || $scope.state.lastPgEvent.Phase == 'Backup_PostBackupVerify')
        {
            pg = 0.98;
        } 
        else if ($scope.state.lastPgEvent.Phase == 'Backup_Complete' || $scope.state.lastPgEvent.Phase == 'Backup_WaitForUpload')
        {
            pg = 1;
        } 
        else if ($scope.state.lastPgEvent.OverallProgress > 0) {
            pg = $scope.state.lastPgEvent.OverallProgress;
        }
    }

    $scope.StateText = text;
    $scope.Progress = pg;
};

Hope this helps!

JonMikelV · March 3, 2018, 7:00pm

It’s great that you were able to do that! I knew the data was there, I just didn’t know nginx enough to get it where we want it.

A few questions / suggestions I have are:

Are you using this for yourself or planning to submit it at GitHub?
Is there any system load / performance issues related to this change? (I’m guessing not really as my assumption is it updates only as frequently as the progress bar already does, so it’s not like it’s showing every single file)
How well does the 23 character length (26 including space & parenthesis and 29 including “…”) fit with screen resizes (think mobile display size)?
Did you consider including a piece of the beginning of the path, then “…” (if necessary) then the end of the path? Using indexes of early and last Path.PathSeparator might aid in that soft of formatting (keeping in mind Linux, MacOS and UNC paths might start with one or two path separators.)
Would you mind including a screen shot of the results of your code for those of us that are too lazy to make your change?

One thing to keep in mind is that the current progress bar information is already a bit confusing to some people who think “files to go” means files left to be backed up, rather than the actual “files left to be scanned for changes”. So having actual file NAMES visible might strengthen that “hey, I didn’t change file X why is it being backed up again!”

That being said, personally I’d rather have the path patch you’ve created than not and deal with de-confusing the rest of it another time.

dbddhkpde · March 4, 2018, 5:41pm

Initially it was planed only for “internal” use as I thought no one would be interested in it, but on request I can try to submit it to the project (need to figure out how …).

I have already thought about the different resolutions and the different devices and I know that my “23-char-solution” does not fit in except with my configuration .

Another problem is that, if you have a long name for the backup job you would neither see the “files to go” message nor my extension (will post some screenshots)

I have several ideas on how to do it alternatively and maybe overcome these issues:

extend the progress bar from single line to double line (already tried it but did not work with the knowledge I have on CSS! Need assistance…)
add another section within the backup job overview which will only show up if an active task is running… (or something like that)

Your suggestion to include a piece of the beginning of the path and the end is surely a better way how to to it!

I think performance is not an issue (from my knowledge), because the Angular scope-variables StateText and lastPgEvent are already there. No extras! Only some extra rendering time within the page to show the variables value, which should be OK.

Will post some screenshots!

dbddhkpde · March 4, 2018, 5:45pm

It can look like this, if the backup job name is short enough (old version with only the ending of the current file name):

BUT: if the name is too long, you will see something like this:

Pectojin · March 4, 2018, 5:51pm

Hmm, that may be yet another reason to do something like discussed in Make status bar a link to backup

Also, this will get worse with newer releases where speed is also displayed.

mr-flibble · March 4, 2018, 6:23pm

Hmm, maybe use smaller fond and some text wrapping to two line of text?
Text wrapping is used for example in error popups

Or increase width of green box?
This if size of box when I have duplicati webapge on fullscreen

And this is when browser window is only on half of LCD (full hd)

dbddhkpde · March 4, 2018, 7:29pm

How about that one: separate line within the backup job summery

With long path and filenames one could limit this like JonMikelV said…

JonMikelV · March 5, 2018, 4:10am

Thanks for the screenshots - now we have a better idea how your code looks!

This is YOUR code, so feel free to take / ignore any of the suggestions we all have.

That being said, while I agree with @Pectojin that an expandable bar could provide much more space / detail, I also think implementing something like that could take a while and I’d really like to see this info in there ASAP, even if it’s not in an “optimal” state.

Personally I pictured the satus bar being 2 lines tall (maybe the 2nd line with a smaller font) something like this…

In case you haven’t done it yet, to submit the code you COULD ask somebody else to do it for you, but if you have the time I strongly suggest you do it yourself. That way you can claim to have contributed code to an Open Source project!

If you don’t have one already, you’ll want a (free) account at GitHub.

Once you’ve got that you can submit the proposed change a number of different ways, but the easiest is probably to just use the GitHub web interface to go straight to the file you want to change and click the Edit icon (to the right of the “Raw”, “Blame”, and “History” buttons).

The link directly to the StateController.js file is:

github.com

duplicati/duplicati/blob/master/Duplicati/Server/webroot/ngax/scripts/controllers/StateController.js

backupApp.controller('StateController', function($scope, $timeout, ServerStatus, BackupList, AppService, AppUtils, DialogService, gettextCatalog) {
    $scope.state = ServerStatus.watch($scope);
    $scope.backups = BackupList.watch($scope);
    $scope.ServerStatus = ServerStatus;

    $scope.activeTask = null;

    var updateActiveTask = function() {
        $scope.activeTaskID = $scope.state.activeTask == null ? null : $scope.state.activeTask.Item1;
        $scope.activeBackup = $scope.state.activeTask == null ? null : BackupList.lookup[$scope.state.activeTask.Item2];
        $scope.nextTask = ($scope.state.schedulerQueueIds == null || $scope.state.schedulerQueueIds.length == 0) ? null : BackupList.lookup[$scope.state.schedulerQueueIds[0].Item2];
        $scope.nextScheduledTask = ($scope.state.proposedSchedule == null || $scope.state.proposedSchedule.length == 0) ? null : BackupList.lookup[$scope.state.proposedSchedule[0].Item1];
        $scope.nextScheduledTime = ($scope.state.proposedSchedule == null || $scope.state.proposedSchedule.length == 0) ? null : $scope.state.proposedSchedule[0].Item2;
    };

    $scope.$on('backuplistchanged', updateActiveTask);
    $scope.$on('serverstatechanged', updateActiveTask);
    $scope.$on('serverstatechanged.pauseTimeRemain', function() { $timeout(function() {$scope.$digest(); }) });

    $scope.sendResume = function() {

This file has been truncated. show original

dbddhkpde · March 6, 2018, 9:37pm

Would like to contribute something to the project…
Thanks to point me to the file on GitHub and how to do it, will check that.

I think I somehow figured out how to modify the CSS that two lines show up in the UI:

But for example if someone uses an iPhone6 it looks like this

The extension of the job is maybe the better way to go

Pectojin · March 6, 2018, 10:38pm

To be fair, on my iPhone 7 the task bar currently says “Next schduled task: Server tomor”. And my sever isn’t named “Tomor”

So while it is useable the web UI isn’t perfect by any means on mobile currently

JonMikelV · March 6, 2018, 10:43pm

Awesome work!

I agree with @Pectojin whom I think is saying that “as long as you work within the current UI limitations, it should be fine”.

That being said, there’s no reason you couldn’t put it in BOTH places… Let the toolbar be visible for what it is and let the job details (if expanded) allow line wrapping for full details.