@girder/core 5.0.0-beta.1 → 5.0.0-beta.2

package/dist-lib/src/views/App.js

@@ -0,0 +1,359 @@
+import $ from 'jquery';
+import _ from 'underscore';
+import Backbone from 'backbone';
+import 'typeface-open-sans';
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap/js/alert';
+import '@girder/fontello/dist/css/animation.css';
+import '@girder/fontello/dist/css/fontello.css';
+
+import '@girder/core/utilities/jquery/girderModal';
+
+import events from '@girder/core/events';
+import eventStream from '@girder/core/utilities/EventStream';
+import LayoutFooterView from '@girder/core/views/layout/FooterView';
+import LayoutGlobalNavView from '@girder/core/views/layout/GlobalNavView';
+import LayoutHeaderView from '@girder/core/views/layout/HeaderView';
+import LoginView from '@girder/core/views/layout/LoginView';
+import ProgressListView from '@girder/core/views/layout/ProgressListView';
+import RegisterView from '@girder/core/views/layout/RegisterView';
+import ResetPasswordView from '@girder/core/views/layout/ResetPasswordView';
+import router from '@girder/core/router';
+import UserModel from '@girder/core/models/UserModel';
+import View from '@girder/core/views/View';
+import { fetchCurrentUser, setCurrentUser, getCurrentUser } from '@girder/core/auth';
+import { Layout } from '@girder/core/constants';
+import { splitRoute } from '@girder/core/misc';
+
+import AlertTemplate from '@girder/core/templates/layout/alert.pug';
+import LayoutTemplate from '@girder/core/templates/layout/layout.pug';
+
+import '@girder/core/routes';
+
+import '@girder/core/stylesheets/layout/global.styl';
+import '@girder/core/stylesheets/layout/layout.styl';
+
+var App = View.extend({
+    /**
+     * @param {object} [settings]
+     * @param {bool} [settings.start=true] Run start after initialization
+     */
+    initialize: function (settings) {
+        this._started = false;
+        settings = settings || {};
+        this.contactEmail = settings.contactEmail || null;
+        this.privacyNoticeHref = settings.privacyNoticeHref || null;
+        this.brandName = settings.brandName || null;
+        this.bannerColor = settings.bannerColor || null;
+        this.registrationPolicy = settings.registrationPolicy || null;
+        this.enablePasswordLogin = _.has(settings, 'enablePasswordLogin') ? settings.enablePasswordLogin : true;
+
+        if (settings.start === undefined || settings.start) {
+            this.start();
+        }
+    },
+
+    /**
+     * Start the application with optional components.
+     * @param {object} [settings]
+     * @param {bool} [settings.fetch=true] Fetch the current user modal
+     * @param {bool} [settings.render=true] Render the layout after starting
+     * @param {bool} [settings.history=true] Start backbone's history api
+     * @returns {$.Deferred} A promise-like object that resolves when the app is ready
+     */
+    start: function (settings) {
+        // start is a noop if the app is already running
+        var promise = new $.Deferred().resolve(null).promise();
+        if (this._started) {
+            return promise;
+        }
+
+        // set defaults
+        settings = _.defaults(settings || {}, {
+            fetch: true,
+            render: true,
+            history: true
+        });
+
+        // define a function to be run after fetching the user model
+        var afterFetch = (user) => {
+            this._createLayout();
+
+            if (user) {
+                setCurrentUser(new UserModel(user));
+                eventStream.open();
+            }
+
+            this._started = true;
+
+            if (settings.render) {
+                this.render();
+            }
+
+            if (settings.history) {
+                Backbone.history.stop();
+                Backbone.history.start({
+                    pushState: false
+                });
+            }
+        };
+
+        // If fetching the user from the server then we return the jqxhr object
+        // from the request, otherwise just call the callback.
+        if (settings.fetch) {
+            promise = fetchCurrentUser()
+                .done(afterFetch);
+        } else {
+            afterFetch(null);
+        }
+
+        this.bindGirderEvents();
+        return promise;
+    },
+
+    /**
+     * Bind the application to the global event object.
+     */
+    bindGirderEvents: function () {
+        // Unbind any current handlers in case this happens to be called twice.
+        events.off(null, null, this);
+
+        events.on('g:navigateTo', this.navigateTo, this);
+        events.on('g:loginUi', this.loginDialog, this);
+        events.on('g:registerUi', this.registerDialog, this);
+        events.on('g:resetPasswordUi', this.resetPasswordDialog, this);
+        events.on('g:alert', this.alert, this);
+        events.on('g:login', this.login, this);
+    },
+
+    /**
+     * Create the main layout views.
+     * @private
+     */
+    _createLayout: function () {
+        this.headerView = new LayoutHeaderView({
+            parentView: this,
+            brandName: this.brandName,
+            bannerColor: this.bannerColor,
+            registrationPolicy: this.registrationPolicy
+        });
+
+        this.globalNavView = new LayoutGlobalNavView({
+            parentView: this
+        });
+
+        this.footerView = new LayoutFooterView({
+            parentView: this,
+            contactEmail: this.contactEmail,
+            privacyNoticeHref: this.privacyNoticeHref
+        });
+
+        this.progressListView = new ProgressListView({
+            eventStream: eventStream,
+            parentView: this
+        });
+
+        this.layoutRenderMap = {};
+        this.layoutRenderMap[Layout.DEFAULT] = this._defaultLayout;
+        this.layoutRenderMap[Layout.EMPTY] = this._emptyLayout;
+    },
+
+    _layout: 'default',
+
+    _defaultLayout: {
+        show: function () {
+            this.$('#g-app-header-container,#g-global-nav-container,#g-app-footer-container').show();
+            this.$('#g-app-body-container').addClass('g-default-layout');
+        },
+
+        hide: function () {
+            this.$('#g-app-header-container,#g-global-nav-container,#g-app-footer-container').hide();
+            this.$('#g-app-body-container').removeClass('g-default-layout');
+        }
+    },
+
+    _emptyLayout: {
+        show: function () {
+            this.$('#g-app-body-container').addClass('g-empty-layout');
+        },
+
+        hide: function () {
+            this.$('#g-app-body-container').removeClass('g-empty-layout');
+        }
+    },
+
+    render: function () {
+        if (!this._started) {
+            return;
+        }
+        this.$el.html(LayoutTemplate());
+
+        this.globalNavView.setElement(this.$('#g-global-nav-container')).render();
+        this.headerView.setElement(this.$('#g-app-header-container')).render();
+        this.footerView.setElement(this.$('#g-app-footer-container')).render();
+        this.progressListView.setElement(this.$('#g-app-progress-container')).render();
+
+        return this;
+    },
+
+    /**
+     * Changes the current body view to the view class specified by view.
+     * @param view The view to display in the body.
+     * @param [settings={}] Settings to pass to the view initialize() method.
+     * @param opts Additional options for navigateTo, if any.
+     */
+    navigateTo: function (view, settings, opts) {
+        this.globalNavView.deactivateAll();
+
+        settings = settings || {};
+        opts = opts || {};
+
+        if (opts.layout) {
+            if (this._layout !== opts.layout) {
+                if (_.has(this.layoutRenderMap, opts.layout)) {
+                    // set a layout if opts specifies one different from current
+                    this.layoutRenderMap[this._layout].hide.call(this, opts);
+                    this._layout = opts.layout;
+                    this.layoutRenderMap[this._layout].show.call(this, opts);
+                } else {
+                    console.error('Attempting to set unknown layout type: ' + opts.layout);
+                }
+            }
+        } else if (this._layout !== Layout.DEFAULT) {
+            // reset to default as needed when nothing specified in opts
+            this.layoutRenderMap[this._layout].hide.call(this, opts);
+            this._layout = Layout.DEFAULT;
+            this.layoutRenderMap[this._layout].show.call(this, opts);
+        }
+
+        if (view) {
+            if (this.bodyView) {
+                this.bodyView.destroy();
+            }
+
+            settings = _.extend(settings, {
+                el: this.$('#g-app-body-container'),
+                parentView: this,
+                brandName: this.brandName
+            });
+
+            /* We let the view be created in this way even though it is
+             * normally against convention.
+             */
+            this.bodyView = new view(settings); // eslint-disable-line new-cap
+
+            if (opts.renderNow) {
+                this.bodyView.render();
+            }
+        } else {
+            console.error('Undefined page.');
+        }
+        return this;
+    },
+
+    /**
+     * Close any open dialog if we are already logged in.
+     * :returns: true if we have a current user.
+     */
+    closeDialogIfUser: function () {
+        if (getCurrentUser()) {
+            $('.modal').girderModal('close');
+            return true;
+        }
+        return false;
+    },
+
+    /**
+     * Show a dialog allowing a user to login or register.
+     */
+    loginDialog: function () {
+        if (this.closeDialogIfUser()) {
+            return;
+        }
+        if (!this.loginView) {
+            this.loginView = new LoginView({
+                el: this.$('#g-dialog-container'),
+                parentView: this,
+                registrationPolicy: this.registrationPolicy,
+                enablePasswordLogin: this.enablePasswordLogin
+            });
+        }
+        this.loginView.render();
+    },
+
+    registerDialog: function () {
+        if (this.closeDialogIfUser()) {
+            return;
+        }
+        if (!this.registerView) {
+            this.registerView = new RegisterView({
+                el: this.$('#g-dialog-container'),
+                parentView: this
+            });
+        }
+        this.registerView.render();
+    },
+
+    resetPasswordDialog: function () {
+        if (this.closeDialogIfUser()) {
+            return;
+        }
+        if (!this.resetPasswordView) {
+            this.resetPasswordView = new ResetPasswordView({
+                el: this.$('#g-dialog-container'),
+                parentView: this,
+                registrationPolicy: this.registrationPolicy
+            });
+        }
+        this.resetPasswordView.render();
+    },
+
+    /**
+     * Display a brief alert on the screen with the following options:
+     *   - text: The text to be displayed
+     *   - [type]: The alert class ('info', 'warning', 'success', 'danger').
+     *             Default is 'info'.
+     *   - [icon]: An optional icon to display in the alert.
+     *   - [timeout]: How long before the alert should automatically disappear.
+     *                Default is 6000ms. Set to <= 0 to have no timeout.
+     */
+    alert: function (options) {
+        var el = $(AlertTemplate({
+            text: options.text,
+            type: options.type || 'info',
+            icon: options.icon
+        }));
+        $('#g-alerts-container').append(el);
+        el.fadeIn(500);
+
+        if (options.timeout === undefined) {
+            options.timeout = 6000;
+        }
+        if (options.timeout > 0) {
+            window.setTimeout(function () {
+                el.fadeOut(750, function () {
+                    $(this).remove();
+                });
+            }, options.timeout);
+        }
+    },
+
+    /**
+     * On login we re-render the current body view; whereas on
+     * logout, we redirect to the front page.
+     */
+    login: function () {
+        var route = splitRoute(Backbone.history.fragment).base;
+        Backbone.history.fragment = null;
+        eventStream.close();
+
+        if (getCurrentUser()) {
+            eventStream.open();
+            router.navigate(route, { trigger: true });
+        } else {
+            router.navigate('/', { trigger: true });
+        }
+    }
+});
+
+export default App;

package/dist-lib/src/views/View.js

@@ -0,0 +1,79 @@
+import _ from 'underscore';
+import Backbone from 'backbone';
+
+import events from '@girder/core/events';
+import eventStream from '@girder/core/utilities/EventStream';
+
+var View = Backbone.View.extend({
+    // eslint-disable-next-line backbone/no-constructor
+    constructor: function (opts) {
+        if (opts && _.has(opts, 'parentView')) {
+            if (opts.parentView) {
+                opts.parentView.registerChildView(this);
+                this.parentView = opts.parentView;
+            }
+        } else {
+            console.error('View created with no parentView property set. ' +
+                          'This view may not be garbage collected.');
+        }
+        Backbone.View.prototype.constructor.apply(this, arguments);
+    },
+
+    /**
+     * Remove a view, unbinding its events and removing its listeners on
+     * events so that it can be garbage collected.
+     */
+    destroy: function () {
+        _.each(this._childViews, function (child) {
+            child.destroy();
+        });
+        this._childViews = null;
+
+        this.undelegateEvents();
+        this.stopListening();
+        this.off();
+        events.off(null, null, this);
+        eventStream.off(null, null, this);
+
+        if (this.parentView) {
+            this.parentView.unregisterChildView(this);
+        }
+
+        // Modal views need special cleanup.
+        if (this.$el.is('.modal')) {
+            var el = this.$el;
+            if (el.data('bs.modal') && el.data('bs.modal').isShown) {
+                el.on('hidden.bs.modal', function () {
+                    el.empty().off().removeData();
+                }).modal('hide');
+                el.modal('removeBackdrop');
+            } else {
+                el.modal('hideModal');
+                el.modal('removeBackdrop');
+                el.empty().off().removeData();
+            }
+        } else {
+            this.$el.empty().off().removeData();
+        }
+    },
+
+    /**
+     * It's typically not necessary to call this directly. Instead, instantiate
+     * child views with the "parentView" field.
+     */
+    registerChildView: function (child) {
+        this._childViews = this._childViews || [];
+        this._childViews.push(child);
+    },
+
+    /**
+     * Typically, you will not need to call this method directly. Calling
+     * destroy on a child element will automatically unregister it from its
+     * parent view if the parent view was specified.
+     */
+    unregisterChildView: function (child) {
+        this._childViews = _.without(this._childViews, child);
+    }
+});
+
+export default View;

package/dist-lib/src/views/body/AdminView.js

@@ -0,0 +1,29 @@
+import View from '@girder/core/views/View';
+import { cancelRestRequests } from '@girder/core/rest';
+import { getCurrentUser } from '@girder/core/auth';
+
+import AdminConsoleTemplate from '@girder/core/templates/body/adminConsole.pug';
+
+import '@girder/core/stylesheets/body/adminConsole.styl';
+
+/**
+ * This view shows the admin console, which links to all available admin pages.
+ */
+var AdminView = View.extend({
+    initialize: function () {
+        cancelRestRequests('fetch');
+        this.render();
+    },
+
+    render: function () {
+        if (!getCurrentUser() || !getCurrentUser().get('admin')) {
+            this.$el.text('Must be logged in as admin to view this page.');
+            return;
+        }
+        this.$el.html(AdminConsoleTemplate());
+
+        return this;
+    }
+});
+
+export default AdminView;

package/dist-lib/src/views/body/AssetstoresView.js

@@ -0,0 +1,234 @@
+import $ from 'jquery';
+import _ from 'underscore';
+
+import AssetstoreCollection from '@girder/core/collections/AssetstoreCollection';
+import AssetstoreModel from '@girder/core/models/AssetstoreModel';
+import EditAssetstoreWidget from '@girder/core/views/widgets/EditAssetstoreWidget';
+import NewAssetstoreWidget from '@girder/core/views/widgets/NewAssetstoreWidget';
+import View from '@girder/core/views/View';
+import { AssetstoreType } from '@girder/core/constants';
+import { cancelRestRequests } from '@girder/core/rest';
+import { confirm } from '@girder/core/dialog';
+import events from '@girder/core/events';
+import { formatSize } from '@girder/core/misc';
+import { getCurrentUser } from '@girder/core/auth';
+
+import AssetstoresTemplate from '@girder/core/templates/body/assetstores.pug';
+
+import '@girder/core/stylesheets/body/assetstores.styl';
+
+import 'as-jqplot/dist/jquery.jqplot.js';
+import 'as-jqplot/dist/jquery.jqplot.css'; // jquery.jqplot.min.css
+import 'as-jqplot/dist/plugins/jqplot.pieRenderer.js';
+
+/**
+ * This private data structure is a dynamic way to map assetstore types to the views
+ * that should be rendered to import data into them.
+ */
+import FilesystemImportView from '@girder/core/views/body/FilesystemImportView';
+import S3ImportView from '@girder/core/views/body/S3ImportView';
+var assetstoreImportViewMap = {};
+assetstoreImportViewMap[AssetstoreType.FILESYSTEM] = FilesystemImportView;
+assetstoreImportViewMap[AssetstoreType.S3] = S3ImportView;
+
+/**
+ * This view shows the admin console, which links to all available admin pages.
+ */
+var AssetstoresView = View.extend({
+    events: {
+        'click .g-set-current': 'setCurrentAssetstore',
+        'click .g-delete-assetstore': 'deleteAssetstore',
+        'click .g-edit-assetstore': 'editAssetstore'
+    },
+
+    initialize: function (settings) {
+        cancelRestRequests('fetch');
+        this.plots = [];
+        this.assetstoreEdit = settings.assetstoreEdit || false;
+        this.importableTypes = [
+            AssetstoreType.FILESYSTEM,
+            AssetstoreType.S3
+        ].concat(settings.importableTypes || []);
+
+        this.newAssetstoreWidget = new NewAssetstoreWidget({
+            parentView: this
+        }).on('g:created', this.addAssetstore, this);
+
+        // Fetch all of the current assetstores
+        this.collection = new AssetstoreCollection();
+        this.collection.on('g:changed', function () {
+            this.render();
+        }, this).fetch();
+    },
+
+    destroy: function () {
+        this._destroyPlots();
+        View.prototype.destroy.call(this);
+    },
+
+    _destroyPlots: function () {
+        for (const plot of this.plots) {
+            plot.data('jqplot').destroy();
+        }
+        this.plots = [];
+    },
+
+    render: function () {
+        if (!getCurrentUser() || !getCurrentUser().get('admin')) {
+            this.$el.text('Must be logged in as admin to view this page.');
+            return;
+        }
+        this._destroyPlots();
+        this.$el.html(AssetstoresTemplate({
+            assetstores: this.collection.toArray(),
+            types: AssetstoreType,
+            importableTypes: this.importableTypes,
+            getAssetstoreImportRoute: this.getAssetstoreImportRoute
+        }));
+
+        this.newAssetstoreWidget.setElement(this.$('#g-new-assetstore-container')).render();
+
+        _.each(this.$('.g-assetstore-capacity-chart'),
+            this.capacityChart, this);
+
+        if (this.assetstoreEdit) {
+            this.editAssetstoreDialog(this.assetstoreEdit);
+            this.assetstoreEdit = false;
+        }
+
+        return this;
+    },
+
+    addAssetstore: function (assetstore) {
+        this.collection.add(assetstore);
+        this.render();
+    },
+
+    /**
+     * Renders the capacities of the assetstores in a pie chart using Chart.js.
+     * @param el The canvas element to render in.
+     */
+    capacityChart: function (el) {
+        var assetstore = this.collection.get($(el).attr('cid'));
+        var capacity = assetstore.get('capacity');
+        var used = capacity.total - capacity.free;
+        var data = [
+            ['Used (' + formatSize(used) + ')', used],
+            ['Free (' + formatSize(capacity.free) + ')', capacity.free]
+        ];
+        var plot = $(el).jqplot([data], {
+            seriesDefaults: {
+                renderer: $.jqplot.PieRenderer,
+                rendererOptions: {
+                    sliceMargin: 2,
+                    shadow: false,
+                    highlightMouseOver: false,
+                    showDataLabels: true,
+                    padding: 5,
+                    startAngle: 180
+                }
+            },
+            legend: {
+                show: true,
+                location: 'e',
+                background: 'transparent',
+                border: 'none'
+            },
+            grid: {
+                background: 'transparent',
+                border: 'none',
+                borderWidth: 0,
+                shadow: false
+            },
+            gridPadding: { top: 10, right: 10, bottom: 10, left: 10 }
+        });
+        this.plots.push(plot);
+    },
+
+    setCurrentAssetstore: function (evt) {
+        var el = $(evt.currentTarget);
+        var assetstore = this.collection.get(el.attr('cid'));
+        assetstore.set({ current: true });
+        assetstore.off('g:saved').on('g:saved', function () {
+            events.trigger('g:alert', {
+                icon: 'ok',
+                text: 'Changed current assetstore.',
+                type: 'success',
+                timeout: 4000
+            });
+            this.collection.fetch({}, true);
+        }, this).off('g:error').on('g:error', function (err) {
+            events.trigger('g:alert', {
+                icon: 'cancel',
+                text: err.responseJSON.message,
+                type: 'danger'
+            });
+        }).save();
+    },
+
+    deleteAssetstore: function (evt) {
+        var el = $(evt.currentTarget);
+        var assetstore = this.collection.get(el.attr('cid'));
+
+        confirm({
+            text: 'Are you sure you want to delete the assetstore <b>' +
+                  assetstore.escape('name') + '</b>?  There are no files ' +
+                  'stored in it, and no data will be lost.',
+            escapedHtml: true,
+            yesText: 'Delete',
+            confirmCallback: () => {
+                assetstore.on('g:deleted', function () {
+                    events.trigger('g:alert', {
+                        icon: 'ok',
+                        text: 'Assetstore deleted.',
+                        type: 'success',
+                        timeout: 4000
+                    });
+                    this.collection.fetch({}, true);
+                }, this).off('g:error').on('g:error', function (resp) {
+                    events.trigger('g:alert', {
+                        icon: 'attention',
+                        text: resp.responseJSON.message,
+                        type: 'danger',
+                        timeout: 4000
+                    });
+                }, this).destroy();
+            }
+        });
+    },
+
+    editAssetstore: function (evt) {
+        var cid = $(evt.currentTarget).attr('cid');
+        this.editAssetstoreDialog(cid);
+    },
+
+    editAssetstoreDialog: function (cid) {
+        var assetstore = this.collection.get(cid);
+        var container = $('#g-dialog-container');
+
+        var editAssetstoreWidget = new EditAssetstoreWidget({
+            el: container,
+            model: assetstore,
+            parentView: this
+        }).off('g:saved').on('g:saved', function () {
+            this.render();
+        }, this);
+        editAssetstoreWidget.render();
+    }
+}, {
+    import: function (assetstoreId) {
+        var assetstore = new AssetstoreModel({ _id: assetstoreId });
+        assetstore.once('g:fetched', function () {
+            var View = assetstoreImportViewMap[assetstore.get('type')];
+            if (View) {
+                events.trigger('g:navigateTo', View, {
+                    assetstore: assetstore
+                });
+            } else {
+                throw new Error('No such view');
+            }
+        }).fetch();
+    }
+});
+
+export default AssetstoresView;