Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/system/submenu/backup/backup.controller.js
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/system/submenu/backup/backup.controller.js	(revision 0)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/system/submenu/backup/backup.controller.js	(working copy)
@@ -0,0 +1,80 @@
+angular
+    .module('cm.system')
+    .controller('backupCtrl', [
+        '$scope',
+        '$rootScope',
+        '$state',
+        '$uibModal',
+        '$filter',
+        'systemService',
+        '$interval',
+        function ($scope, $rootScope, $state, $uibModal, $filter, systemService, $interval) {
+            $rootScope.title = "Backup";
+            $rootScope.allow_config = true;
+            let backupModel = this;
+
+            backupModel.dataList = [];
+
+            function getBackupStatus() {
+                backupModel.dataList = [];
+                systemService
+                    .getBackupStatus()
+                    .then(function (res) {
+                        if (res && res.status === 200) {
+                            let backupStatusResponse = res.data;
+                            if (!Object.keys(backupStatusResponse).includes('download_url')){
+                                backupStatusResponse['download_url'] = 'N/A';
+                            }
+                            backupModel.dataList = [backupStatusResponse];
+                        }
+                    });
+            }
+
+            getBackupStatus();
+
+            if (!angular.isDefined($scope.DataTimer)) {
+                $scope.DataTimer = $interval(function () {
+                    getBackupStatus();
+                }, 10000);
+            }
+
+            $scope.$on('$destroy', function () {
+                if (angular.isDefined($scope.DataTimer)) {
+                    $interval.cancel($scope.DataTimer);
+                    $scope.DataTimer = undefined;
+                }
+            });
+
+            backupModel.startBackup = function () {
+                backupModel.showProgressBar();
+                systemService
+                    .startBackup({})
+                    .then(function (res) {
+                        $rootScope.$broadcast('endLoading', true);
+                        if (res && res.status === 200) {
+                            $rootScope.TipService.setMessage($filter('T')(res.data.message));
+                        } else {
+                            $rootScope.TipService.setMessage($filter('T')("The attempt to back up the system failed."));
+                        }
+                    })
+            }
+
+            backupModel.showProgressBar = function () {
+                let modalInstance = $uibModal.open({
+                    templateUrl: 'app/modules/common/templates/progress.html',
+                    controller: 'showProgressCtrl',
+                    controllerAs: 'progress',
+                    backdrop: false
+                });
+            };
+
+            backupModel.cancel = function () {
+                backupModel.showProgressBar();
+                getBackupStatus(function () {
+                    $rootScope.$broadcast('endLoading', true);
+                });
+            };
+
+        }
+    ]);
+
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/system/submenu/backup/backup.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/system/submenu/backup/backup.html	(revision 0)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/system/submenu/backup/backup.html	(working copy)
@@ -0,0 +1,43 @@
+<div class="row">
+    <div class="col-lg-12">
+        <div class="widget">
+            <div class="widget-header">
+                <span>{{ 'Backup' | T }}</span>
+            </div>
+            <br>
+            <div class="align-right">
+                <button class="btn btn-primary" ng-click="backup.startBackup()" style="margin-right: 4px">
+                    {{ 'Create Backup' | T }}
+                </button>
+            </div>
+            <br>
+            <div class="table-responsive">
+                <table st-table="displayedCollection" st-safe-src="backup.dataList"
+                       class="table table-hover table-striped">
+                    <thead>
+                    <tr>
+                        <th class="d-num">No.</th>
+                        <th class="d-name">{{ 'Status' | T }}</th>
+                        <th class="d-name">{{ 'Action' | T }}</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr ng-repeat="item in displayedCollection">
+                        <td class="d-num">{{ $index + 1 }}</td>
+                        <td>{{item.message}}</td>
+                        <td>
+                            <a class="name" href="{{item.download_url}}" ng-if="item.download_url != 'N/A'"> <i
+                                class="fa fa-2x fa-download"></i> </a>
+                            <span ng-if="item.download_url == 'N/A'"> {{item.download_url}}</span>
+                        </td>
+                    </tr>
+                    <tr ng-if="backup.dataList.length === 0">
+                        <td colspan="3" class="text-center">No matching records found.</td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/system/system.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/system/system.html	(revision 2491)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/system/system.html	(working copy)
@@ -37,6 +37,9 @@
             <li role="presentation" ng-class="{ active: url_contain('/system/log') }">
                 <a ui-sref="index.system.log">{{ 'Log Setting' | T }}</a>
             </li>
+            <li role="presentation" ng-class="{ active: url_contain('/system/backup') }">
+                <a ui-sref="index.system.backup">{{ 'Backup' | T }}</a>
+            </li>
         </ul>
     </div>
 </div>
@@ -53,4 +56,6 @@
     <div class="" ng-show="url_contain('/system/ssl_webui')" ui-view="ssl_webui"></div>
     <div class="" ng-show="url_contain('/system/auth_aaa')" ui-view="admin_aaa"></div>
     <div class="" ng-show="url_contain('/system/log')" ui-view="log"></div>
+    <div class="" ng-show="url_contain('/system/backup')" ui-view="backup"></div>
 </div>
+
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/system/system.module.js
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/system/system.module.js	(revision 2491)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/system/system.module.js	(working copy)
@@ -1,170 +1,170 @@
 angular.module('cm.system', [
     'ui.router',
     'smart-table'
-    ])
+])
     .config(['$stateProvider', function ($stateProvider) {
         $stateProvider
             .state('index.system', {
-                url :'^/system',
-                views:{
-                    'main@index' : {
-                        templateUrl:'app/modules/system/system.html',
-                        controller:'systemCtrl',
-                        controllerAs:'system'
+                url: '^/system',
+                views: {
+                    'main@index': {
+                        templateUrl: 'app/modules/system/system.html',
+                        controller: 'systemCtrl',
+                        controllerAs: 'system'
                     }
                 }
             });
 
         $stateProvider
             .state('index.system.host', {
-                url :'^/system/host',
-                views:{
-                    'host@index.system' : {
-                        templateUrl:'app/modules/system/submenu/host/host.html',
-                        controller:'hostSettingsCtrl',
-                        controllerAs:'hostSettings'
+                url: '^/system/host',
+                views: {
+                    'host@index.system': {
+                        templateUrl: 'app/modules/system/submenu/host/host.html',
+                        controller: 'hostSettingsCtrl',
+                        controllerAs: 'hostSettings'
                     }
                 }
             });
 
         $stateProvider
             .state('index.system.time', {
-                url :'^/system/time',
-                views:{
-                    'time@index.system' : {
-                        templateUrl:'app/modules/system/submenu/time/time.html',
-                        controller:'systemTimeCtrl',
-                        controllerAs:'systemTime'
+                url: '^/system/time',
+                views: {
+                    'time@index.system': {
+                        templateUrl: 'app/modules/system/submenu/time/time.html',
+                        controller: 'systemTimeCtrl',
+                        controllerAs: 'systemTime'
                     }
                 }
             });
 
         $stateProvider
             .state('index.system.ntp', {
-                url :'^/system/ntp',
-                views:{
-                    'ntp@index.system' : {
-                        templateUrl:'app/modules/system/submenu/ntp/ntp.html',
-                        controller:'systemNtpCtrl',
-                        controllerAs:'systemNtp'
+                url: '^/system/ntp',
+                views: {
+                    'ntp@index.system': {
+                        templateUrl: 'app/modules/system/submenu/ntp/ntp.html',
+                        controller: 'systemNtpCtrl',
+                        controllerAs: 'systemNtp'
                     }
                 }
             });
 
         $stateProvider
             .state('index.system.update', {
-                url :'^/system/update',
-                views:{
-                    'update@index.system' : {
-                        templateUrl:'app/modules/system/submenu/update/update.html',
-                        controller:'systemUpdateCtrl',
-                        controllerAs:'systemUpdate'
+                url: '^/system/update',
+                views: {
+                    'update@index.system': {
+                        templateUrl: 'app/modules/system/submenu/update/update.html',
+                        controller: 'systemUpdateCtrl',
+                        controllerAs: 'systemUpdate'
                     }
                 }
             });
 
         $stateProvider
             .state('index.system.network', {
-                url :'^/system/network',
-                views:{
-                    'network@index.system' : {
-                        templateUrl:'app/modules/system/submenu/network/network.html',
-                        controller:'systemNetworkCtrl',
-                        controllerAs:'systemNetwork'
+                url: '^/system/network',
+                views: {
+                    'network@index.system': {
+                        templateUrl: 'app/modules/system/submenu/network/network.html',
+                        controller: 'systemNetworkCtrl',
+                        controllerAs: 'systemNetwork'
                     }
                 }
             })
             .state('index.system.network.interface', {
-                url :'^/system/network/interface',
-                views:{
-                    'net_interface@index.system.network' : {
-                        templateUrl:'app/modules/system/submenu/network/network-interface.html',
-                        controller:'networkInterfaceCtrl',
-                        controllerAs:'networkInterface'
+                url: '^/system/network/interface',
+                views: {
+                    'net_interface@index.system.network': {
+                        templateUrl: 'app/modules/system/submenu/network/network-interface.html',
+                        controller: 'networkInterfaceCtrl',
+                        controllerAs: 'networkInterface'
                     }
                 }
             })
             .state('index.system.network.dns', {
-                url :'^/system/network/dns',
-                views:{
-                    'net_dns@index.system.network' : {
-                        templateUrl:'app/modules/system/submenu/network/network-dns.html',
-                        controller:'networkDnsCtrl',
-                        controllerAs:'networkDns'
+                url: '^/system/network/dns',
+                views: {
+                    'net_dns@index.system.network': {
+                        templateUrl: 'app/modules/system/submenu/network/network-dns.html',
+                        controller: 'networkDnsCtrl',
+                        controllerAs: 'networkDns'
                     }
                 }
             })
             .state('index.system.network.route', {
-                url :'^/system/network/route',
-                views:{
-                    'net_route@index.system.network' : {
-                        templateUrl:'app/modules/system/submenu/network/network-route.html',
-                        controller:'networkRouteCtrl',
-                        controllerAs:'networkRoute'
+                url: '^/system/network/route',
+                views: {
+                    'net_route@index.system.network': {
+                        templateUrl: 'app/modules/system/submenu/network/network-route.html',
+                        controller: 'networkRouteCtrl',
+                        controllerAs: 'networkRoute'
                     }
                 }
             });
 
         $stateProvider
             .state('index.system.license', {
-                url :'^/system/license',
-                views:{
-                    'license@index.system' : {
-                        templateUrl:'app/modules/system/submenu/license/license.html',
-                        controller:'sysLicenseCtrl',
-                        controllerAs:'sysLicense'
+                url: '^/system/license',
+                views: {
+                    'license@index.system': {
+                        templateUrl: 'app/modules/system/submenu/license/license.html',
+                        controller: 'sysLicenseCtrl',
+                        controllerAs: 'sysLicense'
                     }
                 }
             });
         $stateProvider
             .state('index.system.setting', {
-                url :'^/system/setting',
-                views:{
-                    'setting@index.system' : {
-                        templateUrl:'app/modules/system/submenu/setting/setting.html',
-                        controller:'sysSettingCtrl',
-                        controllerAs:'sysSetting'
+                url: '^/system/setting',
+                views: {
+                    'setting@index.system': {
+                        templateUrl: 'app/modules/system/submenu/setting/setting.html',
+                        controller: 'sysSettingCtrl',
+                        controllerAs: 'sysSetting'
                     }
                 }
             });
         $stateProvider
             .state('index.system.system_ha', {
-                url :'^/system/system_ha',
-                views:{
-                    'system_ha@index.system' : {
-                        templateUrl:'app/modules/system/submenu/system_ha/system_ha.html',
-                        controller:'systemHACtrl',
-                        controllerAs:'systemHA'
+                url: '^/system/system_ha',
+                views: {
+                    'system_ha@index.system': {
+                        templateUrl: 'app/modules/system/submenu/system_ha/system_ha.html',
+                        controller: 'systemHACtrl',
+                        controllerAs: 'systemHA'
                     }
                 }
             })
             .state('index.system.system_ha.status', {
-                url :'^/system/system_ha/status',
-                views:{
-                    'status@index.system.system_ha' : {
-                        templateUrl:'app/modules/system/submenu/system_ha/status.html',
-                        controller:'systemHAStatusCtrl',
-                        controllerAs:'systemHAStatus'
+                url: '^/system/system_ha/status',
+                views: {
+                    'status@index.system.system_ha': {
+                        templateUrl: 'app/modules/system/submenu/system_ha/status.html',
+                        controller: 'systemHAStatusCtrl',
+                        controllerAs: 'systemHAStatus'
                     }
                 }
             })
             .state('index.system.system_ha.setting', {
-                url :'^/system/system_ha/setting',
-                views:{
-                    'setting@index.system.system_ha' : {
-                        templateUrl:'app/modules/system/submenu/system_ha/setting.html',
-                        controller:'systemHASettingCtrl',
-                        controllerAs:'systemHASetting'
+                url: '^/system/system_ha/setting',
+                views: {
+                    'setting@index.system.system_ha': {
+                        templateUrl: 'app/modules/system/submenu/system_ha/setting.html',
+                        controller: 'systemHASettingCtrl',
+                        controllerAs: 'systemHASetting'
                     }
                 }
             })
             .state('index.system.system_ha.log', {
-                url :'^/system/system_ha/log',
-                views:{
-                    'log@index.system.system_ha' : {
-                        templateUrl:'app/modules/system/submenu/system_ha/log.html',
-                        controller:'systemHALogCtrl',
-                        controllerAs:'systemHALog'
+                url: '^/system/system_ha/log',
+                views: {
+                    'log@index.system.system_ha': {
+                        templateUrl: 'app/modules/system/submenu/system_ha/log.html',
+                        controller: 'systemHALogCtrl',
+                        controllerAs: 'systemHALog'
                     }
                 }
             });
@@ -204,35 +204,47 @@
             });
         $stateProvider
             .state('index.system.log', {
-                url :'^/system/log',
-                views:{
-                    'log@index.system' : {
-                        templateUrl:'app/modules/system/submenu/log/log.html',
-                        controller:'systemLogCtrl',
-                        controllerAs:'systemLog'
+                url: '^/system/log',
+                views: {
+                    'log@index.system': {
+                        templateUrl: 'app/modules/system/submenu/log/log.html',
+                        controller: 'systemLogCtrl',
+                        controllerAs: 'systemLog'
                     }
                 }
             })
             .state('index.system.log.basic', {
-                url :'^/system/log/basic',
-                views:{
-                    'basic@index.system.log' : {
-                        templateUrl:'app/modules/system/submenu/log/basic.html',
-                        controller:'systemLogBasicCtrl',
-                        controllerAs:'systemLogBasic'
+                url: '^/system/log/basic',
+                views: {
+                    'basic@index.system.log': {
+                        templateUrl: 'app/modules/system/submenu/log/basic.html',
+                        controller: 'systemLogBasicCtrl',
+                        controllerAs: 'systemLogBasic'
                     }
                 }
             })
             .state('index.system.log.host', {
-                url :'^/system/log/host',
-                views:{
-                    'host@index.system.log' : {
-                        templateUrl:'app/modules/system/submenu/log/host.html',
-                        controller:'systemLogHostCtrl',
-                        controllerAs:'systemLogHost'
+                url: '^/system/log/host',
+                views: {
+                    'host@index.system.log': {
+                        templateUrl: 'app/modules/system/submenu/log/host.html',
+                        controller: 'systemLogHostCtrl',
+                        controllerAs: 'systemLogHost'
+                    }
+                }
+            });
+        $stateProvider
+            .state('index.system.backup', {
+                url: '^/system/backup',
+                views: {
+                    'backup@index.system': {
+                        templateUrl: 'app/modules/system/submenu/backup/backup.html',
+                        controller: 'backupCtrl',
+                        controllerAs: 'backup'
                     }
                 }
             });
     }]);
 
 angular.module("cmApp").requires.push('cm.system');
+
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/system/system.service.js
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/system/system.service.js	(revision 2491)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/system/system.service.js	(working copy)
@@ -77,6 +77,10 @@
                 update_ha_setting: update_ha_setting,
                 delete_ha_setting: delete_ha_setting,
                 clear_ip_route: clear_ip_route,
+
+                //Backup
+                getBackupStatus: getBackupStatus,
+                startBackup: startBackup,
             };
 
             function getUpdateVersion() {
@@ -360,4 +364,11 @@
                 var post_data = { "action": "Clear", "options": JSON.stringify(options) };
                 return apiService.post(url, post_data);
             }
+            function getBackupStatus() {
+                return apiService.get('/backup/status');
+            }
+            function startBackup(payload) {
+                return apiService.post2('/backup/start', payload);
+            }
         }]);
+
