System now uses tabs instead of toolbar

Gruntfile.js

@@ -71,9 +71,9 @@ module.exports = function (grunt) {
                             'UI/AddSeries/addSeries.less',
                             'UI/Calendar/calendar.less',
                             'UI/Cells/cells.less',
-                            'UI/Logs/logs.less',
                             'UI/Settings/settings.less',
-                            'UI/Update/update.less'
+                            'UI/System/Logs/logs.less',
+                            'UI/System/Update/update.less'
                         ],
                 dest  : outputRoot,
                 ext: '.css'

UI/Content/icons.less

@@ -127,3 +127,33 @@
 .icon-nd-unmonitored:before {
   .icon(@bookmark-empty);
 }
+
+.icon-info:before {
+  .icon(@info-sign);
+  color : dodgerblue;
+}
+
+.icon-debug:before {
+  .icon(@info-sign);
+  color : gray;
+}
+
+.icon-trace:before {
+  .icon(@info-sign);
+  color : lightgrey;
+}
+
+.icon-warn:before {
+  .icon(@exclamation-sign);
+  color : orange;
+}
+
+.icon-error:before {
+  .icon(@bug);
+  color : red;
+}
+
+.icon-fatal:before {
+  .icon(@remove-sign);
+  color : purple;
+}

UI/Controller.js

@@ -11,16 +11,27 @@ define(
         'Series/SeriesCollection',
         'Missing/MissingLayout',
         'Calendar/CalendarLayout',
-        'Logs/Layout',
-        'Logs/Files/Layout',
         'Release/Layout',
-        'System/Layout',
+        'System/SystemLayout',
         'SeasonPass/SeasonPassLayout',
-        'Update/UpdateLayout',
+        'System/Update/UpdateLayout',
         'Shared/NotFoundView',
         'Shared/Modal/Region'
-    ], function (App, Marionette, HistoryLayout, SettingsLayout, AddSeriesLayout, SeriesIndexLayout, SeriesDetailsLayout, SeriesCollection, MissingLayout, CalendarLayout,
+    ], function (App,
-        LogsLayout, LogFileLayout, ReleaseLayout, SystemLayout, SeasonPassLayout, UpdateLayout, NotFoundView) {
+                 Marionette,
+                 HistoryLayout,
+                 SettingsLayout,
+                 AddSeriesLayout,
+                 SeriesIndexLayout,
+                 SeriesDetailsLayout,
+                 SeriesCollection,
+                 MissingLayout,
+                 CalendarLayout,
+                 ReleaseLayout,
+                 SystemLayout,
+                 SeasonPassLayout,
+                 UpdateLayout,
+                 NotFoundView) {
         return Marionette.Controller.extend({
 
             series: function () {
@@ -31,7 +42,7 @@ define(
             seriesDetails: function (query) {
                 var series = SeriesCollection.where({titleSlug: query});
 
-                if (series.length != 0) {
+                if (series.length !== 0) {
                     var targetSeries = series[0];
                     this._setTitle(targetSeries.get('title'));
                     App.mainRegion.show(new SeriesDetailsLayout({ model: targetSeries }));
@@ -73,21 +84,9 @@ define(
                 App.mainRegion.show(new ReleaseLayout());
             },
 
-            logs: function (action) {
+            system: function (action) {
-                if (action) {
+                this._setTitle('System');
-                    this._setTitle('log files');
+                App.mainRegion.show(new SystemLayout({ action: action }));
-                    App.mainRegion.show(new LogFileLayout());
-                }
-
-                else {
-                    this._setTitle('logs');
-                    App.mainRegion.show(new LogsLayout());
-                }
-            },
-
-            system: function () {
-                this._setTitle('system');
-                App.mainRegion.show(new SystemLayout());
             },
 
             seasonPass: function () {

UI/Logs/Logs.less

@@ -1,53 +0,0 @@
-@import "../Content/FontAwesome/font-awesome";
-@import "../Shared/Styles/clickable";
-
-#logs-screen {
-
-  .log-time-cell{
-    width: 80px;
-  }
-
-  .log-level-cell{
-    width: 12px;
-    font-size: 14px;
-  }
-
-  td{
-    font-size: 13px;
-  }
-
-
-  .icon-info:before {
-    .icon(@info-sign);
-    color : dodgerblue;
-  }
-
-  .icon-debug:before {
-    .icon(@info-sign);
-    color : gray;
-  }
-
-  .icon-trace:before {
-    .icon(@info-sign);
-    color : lightgrey;
-  }
-
-  .icon-warn:before {
-    .icon(@exclamation-sign);
-    color : orange;
-  }
-
-  .icon-error:before {
-    .icon(@bug);
-    color : red;
-  }
-
-  .icon-fatal:before {
-    .icon(@remove-sign);
-    color : purple;
-  }
-}
-
-.log-file-row {
-  .clickable;
-}

UI/Router.js

@@ -2,6 +2,7 @@
 require(
     [
         'app',
+        'backbone',
         'marionette',
         'Controller',
         'Series/SeriesCollection',
@@ -10,7 +11,16 @@ require(
         'Navbar/NavbarView',
         'jQuery/RouteBinder',
         'jquery'
-    ], function (App, Marionette, Controller, SeriesCollection, ProgressMessageCollection, CommandMessengerCollectionView, NavbarView, RouterBinder, $) {
+    ], function (App,
+                 Backbone,
+                 Marionette,
+                 Controller,
+                 SeriesCollection,
+                 ProgressMessageCollection,
+                 CommandMessengerCollectionView,
+                 NavbarView,
+                 RouterBinder,
+                 $) {
 
         var Router = Marionette.AppRouter.extend({
 
@@ -26,12 +36,10 @@ require(
                 'settings/:action(/:query)' : 'settings',
                 'missing'                   : 'missing',
                 'history'                   : 'history',
-                'logs'                      : 'logs',
-                'logs/:action'              : 'logs',
                 'rss'                       : 'rss',
                 'system'                    : 'system',
+                'system/:action'            : 'system',
                 'seasonpass'                : 'seasonPass',
-                'update'                    : 'update',
                 ':whatever'                 : 'notFound'
             }
         });

UI/System/About/AboutView.js

@@ -0,0 +1,14 @@
+'use strict';
+define(
+    [
+        'marionette',
+        'System/StatusModel'
+    ], function (Marionette, StatusModel) {
+        return Marionette.ItemView.extend({
+            template: 'System/About/AboutViewTemplate',
+
+            initialize: function () {
+                this.model = StatusModel;
+            }
+        });
+    });

UI/System/About/View.js

@@ -1,9 +0,0 @@
-'use strict';
-define(
-    [
-        'marionette'
-    ], function (Marionette) {
-        return Marionette.ItemView.extend({
-            template: 'System/About/ViewTemplate'
-        });
-    });

UI/System/Layout.js

@@ -1,63 +0,0 @@
-'use strict';
-define(
-    [
-        'app',
-        'marionette',
-        'System/StatusModel',
-        'System/About/View',
-        'Logs/Layout',
-        'Shared/Toolbar/ToolbarLayout'
-    ], function (App,
-                 Marionette,
-                 StatusModel,
-                 AboutView,
-                 LogsLayout,
-                 ToolbarLayout) {
-        return Marionette.Layout.extend({
-            template: 'System/LayoutTemplate',
-
-            regions: {
-                toolbar : '#toolbar',
-                about   : '#about',
-                loading : '#loading'
-            },
-
-            leftSideButtons: {
-                type      : 'default',
-                storeState: false,
-                items     :
-                    [
-                        {
-                            title: 'Logs',
-                            icon : 'icon-book',
-                            route: 'logs'
-                        },
-                        {
-                            title  : 'Updates',
-                            icon   : 'icon-upload-alt',
-                            route  : 'update'
-                        }
-                    ]
-            },
-
-            initialize: function () {
-                this.statusModel = StatusModel;
-            },
-
-            onRender: function () {
-                this._showToolbar();
-                this.about.show(new AboutView({ model: this.statusModel }));
-            },
-
-            _showToolbar: function () {
-                this.toolbar.show(new ToolbarLayout({
-                    left   :
-                        [
-                            this.leftSideButtons
-                        ],
-                    context: this
-                }));
-            }
-        });
-    });
-

UI/System/LayoutTemplate.html

@@ -1,17 +0,0 @@
-<div class="row">
-    <div class="span12">
-        <div id="toolbar"></div>
-    </div>
-</div>
-
-<div class="row">
-    <div class="span12">
-        <div id="about"></div>
-    </div>
-</div>
-
-<div class="row">
-    <div class="span12">
-        <div id="loading"></div>
-    </div>
-</div>

UI/System/Logs/Files/ContentsView.js

@@ -6,6 +6,6 @@ define(
         'marionette'
     ], function (App, Marionette) {
         return Marionette.ItemView.extend({
-            template: 'Logs/Files/ContentsViewTemplate'
+            template: 'System/Logs/Files/ContentsViewTemplate'
         });
     });

UI/System/Logs/Files/LogFileCollection.js

@@ -1,5 +1,6 @@
 'use strict';
-define(['Logs/Files/Model' ],
+
+define(['System/Logs/Files/LogFileModel' ],
 function (LogFileModel) {
     return Backbone.Collection.extend({
         url  : window.NzbDrone.ApiRoot + '/log/files',

UI/System/Logs/Files/LogFileLayout.js

@@ -4,16 +4,17 @@ define(
         'app',
         'marionette',
         'backgrid',
-        'Logs/Files/FilenameCell',
+        'System/Logs/Files/FilenameCell',
         'Cells/RelativeDateCell',
-        'Logs/Files/Collection',
+        'System/Logs/Files/LogFileCollection',
-        'Logs/Files/Row',
+        'System/Logs/Files/Row',
-        'Logs/Files/ContentsView',
+        'System/Logs/Files/ContentsView',
-        'Logs/Files/ContentsModel',
+        'System/Logs/Files/ContentsModel',
-        'Shared/Toolbar/ToolbarLayout'
+        'Shared/Toolbar/ToolbarLayout',
-    ], function (App, Marionette, Backgrid, FilenameCell, RelativeDateCell, LogFileCollection, LogFileRow, ContentsView, ContentsModel, ToolbarLayout) {
+        'Shared/LoadingView'
+    ], function (App, Marionette, Backgrid, FilenameCell, RelativeDateCell, LogFileCollection, LogFileRow, ContentsView, ContentsModel, ToolbarLayout, LoadingView) {
         return Marionette.Layout.extend({
-            template: 'Logs/Files/LayoutTemplate',
+            template: 'System/Logs/Files/LogFileLayoutTemplate',
 
             regions: {
                 toolbar  : '#x-toolbar',
@@ -38,8 +39,8 @@ define(
             initialize: function () {
                 this.collection = new LogFileCollection();
 
-
                 App.vent.on(App.Commands.ShowLogFile, this._showLogFile, this);
+                App.vent.on(App.Events.CommandComplete, this._commandComplete, this);
             },
 
             onShow: function () {
@@ -51,15 +52,19 @@ define(
             _fetchAndShow: function () {
                 var self = this;
 
+                this.contents.close();
+
                 var promise = this.collection.fetch();
                 promise.done(function () {
+                    if (self.collection.length > 0) {
                         self._showLogFile({ model: self.collection.first() });
+                    }
                 });
             },
 
             _showToolbar: function () {
 
-                var leftSideButtons = {
+                var rightSideButtons = {
                     type      : 'default',
                     storeState: false,
                     items     :
@@ -76,17 +81,15 @@ define(
                                 icon           : 'icon-trash',
                                 command        : 'deleteLogFiles',
                                 successMessage : 'Log files have been deleted',
-                                errorMessage   : 'Failed to delete log files',
+                                errorMessage   : 'Failed to delete log files'
-                                ownerContext   : this,
-                                onSuccess: this._refreshLogs
                             }
                         ]
                 };
 
                 this.toolbar.show(new ToolbarLayout({
-                    left   :
+                    right   :
                         [
-                            leftSideButtons
+                            rightSideButtons
                         ],
                     context: this
                 }));
@@ -102,8 +105,7 @@ define(
             },
 
             _showLogFile: function (options) {
-
+                this.contents.show(new LoadingView());
-                this.contents.close();
 
                 if (!options.model) {
                     return;
@@ -127,6 +129,12 @@ define(
 
             _refreshLogs: function () {
                 this._fetchAndShow();
+            },
+
+            _commandComplete: function (options) {
+                if (options.command.get('name') === 'deletelogfiles') {
+                    this._refreshLogs();
+                }
             }
         });
     });

UI/System/Logs/Files/LogFileLayoutTemplate.html

@@ -1,12 +1,12 @@
 <div id="x-toolbar"/>
 <div class="row">
-    <div class="span12">
+    <div class="span10">
         <div id="x-grid"/>
     </div>
 </div>
 
 <div class="row">
-    <div class="span12">
+    <div class="span10">
         <div id="x-contents"/>
     </div>
 </div>

UI/System/Logs/Logs.less

@@ -0,0 +1,21 @@
+@import "../../Shared/Styles/clickable";
+
+#logs-screen {
+
+  .log-time-cell{
+    width: 80px;
+  }
+
+  .log-level-cell{
+    width: 12px;
+    font-size: 14px;
+  }
+
+  td{
+    font-size: 13px;
+  }
+}
+
+.log-file-row {
+  .clickable;
+}

UI/System/Logs/LogsCollection.js

@@ -1,5 +1,7 @@
 'use strict';
-define(['backbone.pageable', 'Logs/Model', ], function (PagableCollection, LogsModel) {
+
+define(['backbone.pageable', 'System/Logs/LogsModel'],
+    function (PagableCollection, LogsModel) {
     return PagableCollection.extend({
         url  : window.NzbDrone.ApiRoot + '/log',
         model: LogsModel,

UI/System/Logs/LogsLayout.js

@@ -0,0 +1,48 @@
+'use strict';
+define(
+    [
+        'marionette',
+        'System/Logs/Table/LogsTableLayout',
+        'System/Logs/Files/LogFileLayout'
+    ], function (Marionette, LogsTableLayout, LogsFileLayout) {
+        return Marionette.Layout.extend({
+            template: 'System/Logs/LogsLayoutTemplate',
+
+            ui: {
+                tableTab: '.x-table-tab',
+                filesTab: '.x-files-tab'
+            },
+
+            regions: {
+                table: '#table',
+                files: '#files'
+            },
+
+            events: {
+                'click .x-table-tab': '_showTable',
+                'click .x-files-tab': '_showFiles'
+            },
+
+            onShow: function () {
+                this._showTable();
+            },
+
+            _showTable: function (e) {
+                if (e) {
+                    e.preventDefault();
+                }
+
+                this.ui.tableTab.tab('show');
+                this.table.show(new LogsTableLayout());
+            },
+
+            _showFiles: function (e) {
+                if (e) {
+                    e.preventDefault();
+                }
+
+                this.ui.filesTab.tab('show');
+                this.files.show(new LogsFileLayout());
+            }
+        });
+    });

UI/System/Logs/LogsLayoutTemplate.html

@@ -0,0 +1,11 @@
+<div class="tabbable tabs-left">
+    <ul class="nav nav-tabs">
+        <li><a href="#table" class="x-table-tab no-router">Table</a></li>
+        <li><a href="#files" class="x-files-tab no-router">Files</a></li>
+    </ul>
+
+    <div class="tab-content">
+        <div class="tab-pane" id="table"></div>
+        <div class="tab-pane" id="files"></div>
+    </div>
+</div>

UI/System/Logs/Table/LogsTableLayout.js

@@ -3,14 +3,15 @@ define(
     [
         'marionette',
         'backgrid',
-        'Logs/LogTimeCell',
+        'System/Logs/Table/LogTimeCell',
-        'Logs/LogLevelCell',
+        'System/Logs/Table/LogLevelCell',
         'Shared/Grid/Pager',
-        'Logs/Collection',
+        'System/Logs/LogsCollection',
-        'Shared/Toolbar/ToolbarLayout'
+        'Shared/Toolbar/ToolbarLayout',
-    ], function (Marionette, Backgrid, LogTimeCell, LogLevelCell, GridPager, LogCollection, ToolbarLayout) {
+        'Shared/LoadingView'
+    ], function (Marionette, Backgrid, LogTimeCell, LogLevelCell, GridPager, LogCollection, ToolbarLayout, LoadingView) {
         return Marionette.Layout.extend({
-            template: 'Logs/LayoutTemplate',
+            template: 'System/Logs/Table/LogsTableLayoutTemplate',
 
             regions: {
                 grid   : '#x-grid',
@@ -55,16 +56,25 @@ define(
 
             initialize: function () {
                 this.collection = new LogCollection();
-                this.collection.fetch();
+                this.collectionPromise = this.collection.fetch();
+            },
+
+            onRender: function () {
+                this.grid.show(new LoadingView());
             },
 
             onShow: function () {
+                var self = this;
                 this._showToolbar();
-                this._showTable();
+
+                this.collectionPromise.done(function () {
+                    self._showTable();
+                });
             },
 
-            _showTable: function () {
 
+
+            _showTable: function () {
                 this.grid.show(new Backgrid.Grid({
                     row       : Backgrid.Row,
                     columns   : this.columns,
@@ -79,7 +89,7 @@ define(
             },
 
             _showToolbar: function () {
-                var leftSideButtons = {
+                var rightSideButtons = {
                     type      : 'default',
                         storeState: false,
                         items     :
@@ -99,20 +109,14 @@ define(
                             errorMessage   : 'Failed to clear logs',
                             ownerContext   : this,
                             onSuccess      : this._refreshLogs
-                        },
-
-                        {
-                            title: 'Files',
-                            icon : 'icon-file',
-                            route: 'logs/files'
                         }
                     ]
                 };
 
                 this.toolbar.show(new ToolbarLayout({
-                    left   :
+                    right   :
                         [
-                            leftSideButtons
+                            rightSideButtons
                         ],
                     context: this
                 }));

UI/System/Logs/Table/LogsTableLayoutTemplate.html

@@ -1,11 +1,11 @@
 <div id="x-toolbar"/>
 <div class="row">
-    <div class="span12">
+    <div class="span10">
         <div id="x-grid"/>
     </div>
 </div>
 <div class="row">
-    <div class="span12">
+    <div class="span10">
         <div id="x-pager"/>
     </div>
 </div>

UI/System/StatusModel.js

@@ -4,12 +4,12 @@ define(
         'backbone'
     ], function (Backbone) {
 
-        var model = Backbone.Model.extend({
+        var StatusModel = Backbone.Model.extend({
             url: window.NzbDrone.ApiRoot + '/system/status'
         });
 
 
-        var instance = new model();
+        var instance = new StatusModel();
         instance.fetch();
         return instance;
     });

UI/System/SystemLayout.js

@@ -0,0 +1,91 @@
+'use strict';
+define(
+    [
+        'app',
+        'marionette',
+        'System/About/AboutView',
+        'System/Logs/LogsLayout',
+        'System/Update/UpdateLayout'
+    ], function (App,
+                 Marionette,
+                 AboutView,
+                 LogsLayout,
+                 UpdateLayout) {
+        return Marionette.Layout.extend({
+            template: 'System/SystemLayoutTemplate',
+
+            regions: {
+                about   : '#about',
+                logs    : '#logs',
+                updates : '#updates'
+            },
+
+            ui: {
+                aboutTab  : '.x-about-tab',
+                logsTab   : '.x-logs-tab',
+                updatesTab: '.x-updates-tab'
+            },
+
+            events: {
+                'click .x-about-tab'  : '_showAbout',
+                'click .x-logs-tab'   : '_showLogs',
+                'click .x-updates-tab': '_showUpdates'
+            },
+
+            initialize: function (options) {
+                if (options.action) {
+                    this.action = options.action.toLowerCase();
+                }
+            },
+
+            onShow: function () {
+                switch (this.action) {
+                    case 'logs':
+                        this._showLogs();
+                        break;
+                    case 'updates':
+                        this._showUpdates();
+                        break;
+                    default:
+                        this._showAbout();
+                }
+            },
+
+            _navigate:function(route){
+                require(['Router'], function(){
+                    App.Router.navigate(route);
+                });
+            },
+
+            _showAbout: function (e) {
+                if (e) {
+                    e.preventDefault();
+                }
+
+                this.about.show(new AboutView());
+                this.ui.aboutTab.tab('show');
+                this._navigate('system/about');
+            },
+
+            _showLogs: function (e) {
+                if (e) {
+                    e.preventDefault();
+                }
+
+                this.logs.show(new LogsLayout());
+                this.ui.logsTab.tab('show');
+                this._navigate('system/logs');
+            },
+
+            _showUpdates: function (e) {
+                if (e) {
+                    e.preventDefault();
+                }
+
+                this.updates.show(new UpdateLayout());
+                this.ui.updatesTab.tab('show');
+                this._navigate('system/updates');
+            }
+        });
+    });
+

UI/System/SystemLayoutTemplate.html

@@ -0,0 +1,11 @@
+<ul class="nav nav-tabs">
+    <li><a href="#about" class="x-about-tab no-router">About</a></li>
+    <li><a href="#logs" class="x-logs-tab no-router">Logs</a></li>
+    <li><a href="#updates" class="x-updates-tab no-router">Updates</a></li>
+</ul>
+
+<div class="tab-content">
+    <div class="tab-pane" id="about"></div>
+    <div class="tab-pane" id="logs"></div>
+    <div class="tab-pane" id="updates"></div>
+</div>

UI/System/Update/UpdateCollection.js

@@ -2,7 +2,7 @@
 define(
     [
         'backbone',
-        'Update/UpdateModel'
+        'System/Update/UpdateModel'
     ], function (Backbone, UpdateModel) {
         return  Backbone.Collection.extend({
             url  : window.NzbDrone.ApiRoot + '/update',

UI/System/Update/UpdateCollectionView.js

@@ -2,7 +2,7 @@
 define(
     [
         'marionette',
-        'Update/UpdateItemView'
+        'System/Update/UpdateItemView'
     ], function (Marionette, UpdateItemView) {
         return Marionette.CollectionView.extend({
             itemView: UpdateItemView

UI/System/Update/UpdateItemView.js

@@ -6,6 +6,6 @@ define(
         'marionette'
     ], function (App, Marionette) {
         return Marionette.ItemView.extend({
-            template: 'Update/UpdateItemViewTemplate'
+            template: 'System/Update/UpdateItemViewTemplate'
         });
     });

UI/System/Update/UpdateLayout.js

@@ -3,13 +3,13 @@ define(
     [
         'marionette',
         'backgrid',
-        'Update/UpdateCollection',
+        'System/Update/UpdateCollection',
-        'Update/UpdateCollectionView',
+        'System/Update/UpdateCollectionView',
         'Shared/Toolbar/ToolbarLayout',
         'Shared/LoadingView'
     ], function (Marionette, Backgrid, UpdateCollection, UpdateCollectionView, ToolbarLayout, LoadingView) {
         return Marionette.Layout.extend({
-            template: 'Update/UpdateLayoutTemplate',
+            template: 'System/Update/UpdateLayoutTemplate',
 
             regions: {
                 updates: '#x-updates',

UI/index.html

@@ -11,11 +11,11 @@
     <link href="/Content/theme.css" rel='stylesheet' type='text/css'/>
     <link href="/Cells/cells.css" rel='stylesheet' type='text/css'>
     <link href="/Series/series.css" rel='stylesheet' type='text/css'/>
-    <link href="/Logs/logs.css" rel='stylesheet' type='text/css'/>
+    <link href="/System/Logs/logs.css" rel='stylesheet' type='text/css'/>
     <link href="/Settings/settings.css" rel='stylesheet' type='text/css'/>
     <link href="/AddSeries/addSeries.css" rel='stylesheet' type='text/css'/>
     <link href="/Calendar/calendar.css" rel='stylesheet' type='text/css'/>
-    <link href="/Update/update.css" rel='stylesheet' type='text/css'/>
+    <link href="/System/Update/update.css" rel='stylesheet' type='text/css'/>
     <link href="/Content/overrides.css" rel='stylesheet' type='text/css'/>
 
     <link rel="apple-touch-icon" href="/Content/Images/touch/57.png"/>