@girder/core 5.0.0-beta.1 → 5.0.0

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

@@ -0,0 +1,233 @@
+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 ApexCharts from 'apexcharts';
+
+/**
+ * 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.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 = new ApexCharts(el, {
+            series: data.map(d => d[1]),
+            chart: {
+                type: 'pie',
+                animations: { enabled: false }
+            },
+            labels: data.map(d => d[0]),
+            plotOptions: {
+                pie: {
+                    startAngle: -90,
+                    endAngle: 270,
+                    expandOnClick: false,
+                    dataLabels: {
+                        enabled: true
+                    }
+                }
+            },
+            dataLabels: {
+                style: {
+                  colors: ['#000', '#000']
+                },
+                dropShadow: {enabled: false},
+            },
+            legend: { position: 'right' }
+        });
+        plot.render();
+        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 { assetstoreImportViewMap };
+export default AssetstoresView;

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

@@ -0,0 +1,188 @@
+import $ from 'jquery';
+import _ from 'underscore';
+
+import AccessWidget from '@girder/core/views/widgets/AccessWidget';
+import CollectionModel from '@girder/core/models/CollectionModel';
+import EditCollectionWidget from '@girder/core/views/widgets/EditCollectionWidget';
+import FolderModel from '@girder/core/models/FolderModel';
+import HierarchyWidget from '@girder/core/views/widgets/HierarchyWidget';
+import router from '@girder/core/router';
+import View from '@girder/core/views/View';
+import { AccessType } from '@girder/core/constants';
+import { cancelRestRequests } from '@girder/core/rest';
+import { confirm } from '@girder/core/dialog';
+import { renderMarkdown, formatSize } from '@girder/core/misc';
+import events from '@girder/core/events';
+
+import CollectionPageTemplate from '@girder/core/templates/body/collectionPage.pug';
+
+import '@girder/core/stylesheets/body/collectionPage.styl';
+
+import 'bootstrap/js/dropdown';
+
+/**
+ * This view shows a single collection's page.
+ */
+var CollectionView = View.extend({
+    events: {
+        'click .g-edit-collection': 'editCollection',
+        'click .g-collection-access-control': 'editAccess',
+        'click .g-delete-collection': 'deleteConfirmation'
+    },
+
+    initialize: function (settings) {
+        cancelRestRequests('fetch');
+
+        this.upload = settings.upload || false;
+        this.access = settings.access || false;
+        this.edit = settings.edit || false;
+        this.folderAccess = settings.folderAccess || false;
+        this.folderCreate = settings.folderCreate || false;
+        this.folderEdit = settings.folderEdit || false;
+        this.itemCreate = settings.itemCreate || false;
+
+        // If collection model is already passed, there is no need to fetch.
+        if (settings.collection) {
+            this.model = settings.collection;
+
+            if (settings.folderId) {
+                this.folder = new FolderModel();
+                this.folder.set({
+                    _id: settings.folderId
+                }).on('g:fetched', function () {
+                    this.render();
+                }, this).on('g:error', function () {
+                    this.folder = null;
+                    this.render();
+                }, this).fetch();
+            } else {
+                this.render();
+            }
+        } else if (settings.id) {
+            this.model = new CollectionModel();
+            this.model.set('_id', settings.id);
+
+            this.model.on('g:fetched', function () {
+                this.render();
+            }, this).fetch();
+        }
+    },
+
+    editCollection: function () {
+        var container = $('#g-dialog-container');
+
+        if (!this.editCollectionWidget) {
+            this.editCollectionWidget = new EditCollectionWidget({
+                el: container,
+                model: this.model,
+                parentView: this
+            }).on('g:saved', function () {
+                this.render();
+            }, this);
+        }
+        this.editCollectionWidget.render();
+    },
+
+    render: function () {
+        this.$el.html(CollectionPageTemplate({
+            collection: this.model,
+            AccessType: AccessType,
+            renderMarkdown: renderMarkdown
+        }));
+
+        if (!this.hierarchyWidget) {
+            // The HierarchyWidget will self-render when instantiated
+            this.hierarchyWidget = new HierarchyWidget({
+                el: this.$('.g-collection-hierarchy-container'),
+                parentModel: this.folder || this.model,
+                upload: this.upload,
+                folderAccess: this.folderAccess,
+                folderEdit: this.folderEdit,
+                folderCreate: this.folderCreate,
+                itemCreate: this.itemCreate,
+                parentView: this
+            }).on('g:setCurrentModel', () => {
+                // When a user descends into the hierarchy, hide the collection
+                // actions list to avoid confusion.
+                this.$('.g-collection-header .g-collection-actions-button').hide();
+            });
+        } else {
+            this.hierarchyWidget
+                .setElement(this.$('.g-collection-hierarchy-container'))
+                .render();
+        }
+
+        this.upload = false;
+        this.folderAccess = false;
+        this.folderEdit = false;
+        this.folderCreate = false;
+        this.itemCreate = false;
+
+        if (this.edit) {
+            this.editCollection();
+        } else if (this.access) {
+            this.editAccess();
+        }
+
+        return this;
+    },
+
+    editAccess: function () {
+        new AccessWidget({
+            el: $('#g-dialog-container'),
+            modelType: 'collection',
+            model: this.model,
+            parentView: this
+        }).on('g:accessListSaved', function (params) {
+            if (params.recurse) {
+                this.hierarchyWidget.refreshFolderList();
+            }
+        }, this);
+    },
+
+    deleteConfirmation: function () {
+        let params = {
+            text: 'Are you sure you want to delete the collection <b>' +
+                  this.model.escape('name') + this.model.escape('nFolders') + '</b>?',
+            yesText: 'Delete',
+            escapedHtml: true,
+            confirmCallback: () => {
+                this.model.on('g:deleted', function () {
+                    events.trigger('g:alert', {
+                        icon: 'ok',
+                        text: 'Collection deleted.',
+                        type: 'success',
+                        timeout: 4000
+                    });
+                    router.navigate('collections', { trigger: true });
+                }).destroy();
+            }
+        };
+        if (this.model.get('nFolders') !== 0 || this.model.get('size') !== 0) {
+            params = _.extend({
+                additionalText: '<b>' + this.model.escape('name') + '</b>' +
+                                ' contains <b>' + this.model.escape('nFolders') +
+                                ' folders</b> taking up <b>' +
+                                formatSize(parseInt(this.model.get('size'), 10)) + '</b>',
+                msgConfirmation: true,
+                name: this.model.escape('name')
+            }, params);
+        }
+        confirm(params);
+    }
+}, {
+    /**
+     * Helper function for fetching the user and rendering the view with
+     * an arbitrary set of extra parameters.
+     */
+    fetchAndInit: function (cid, params) {
+        var collection = new CollectionModel();
+        collection.set({ _id: cid }).on('g:fetched', function () {
+            events.trigger('g:navigateTo', CollectionView, _.extend({
+                collection: collection
+            }, params || {}));
+        }, this).fetch();
+    }
+});
+
+export default CollectionView;

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

@@ -0,0 +1,120 @@
+import $ from 'jquery';
+
+import CollectionCollection from '@girder/core/collections/CollectionCollection';
+import CollectionModel from '@girder/core/models/CollectionModel';
+import EditCollectionWidget from '@girder/core/views/widgets/EditCollectionWidget';
+import PaginateWidget from '@girder/core/views/widgets/PaginateWidget';
+import router from '@girder/core/router';
+import SearchFieldWidget from '@girder/core/views/widgets/SearchFieldWidget';
+import View from '@girder/core/views/View';
+import { cancelRestRequests } from '@girder/core/rest';
+import { formatDate, formatSize, renderMarkdown, DATE_MINUTE } from '@girder/core/misc';
+import { getCurrentUser } from '@girder/core/auth';
+
+import CollectionListTemplate from '@girder/core/templates/body/collectionList.pug';
+
+import '@girder/core/stylesheets/body/collectionList.styl';
+
+/**
+ * This view lists the collections.
+ */
+var CollectionsView = View.extend({
+    events: {
+        'click a.g-collection-link': function (event) {
+            var cid = $(event.currentTarget).attr('g-collection-cid');
+            router.navigate('collection/' + this.collection.get(cid).id, { trigger: true });
+        },
+        'click button.g-collection-create-button': 'createCollectionDialog',
+        'submit .g-collections-search-form': function (event) {
+            event.preventDefault();
+        },
+        'click .g-show-description': '_toggleDescription'
+    },
+
+    initialize: function (settings) {
+        cancelRestRequests('fetch');
+        this.collection = new CollectionCollection();
+        this.collection.on('g:changed', function () {
+            this.render();
+        }, this).fetch();
+
+        this.paginateWidget = new PaginateWidget({
+            collection: this.collection,
+            parentView: this
+        });
+
+        this.searchWidget = new SearchFieldWidget({
+            placeholder: 'Search collections...',
+            types: ['collection'],
+            parentView: this
+        }).on('g:resultClicked', this._gotoCollection, this);
+
+        this.create = settings.dialog === 'create';
+    },
+
+    /**
+     * Prompt the user to create a new collection
+     */
+    createCollectionDialog: function () {
+        var container = $('#g-dialog-container');
+
+        new EditCollectionWidget({
+            el: container,
+            parentView: this
+        }).on('g:saved', function (collection) {
+            router.navigate('collection/' + collection.get('_id'),
+                { trigger: true });
+        }, this).render();
+    },
+
+    render: function () {
+        this.$el.html(CollectionListTemplate({
+            collections: this.collection.toArray(),
+            getCurrentUser: getCurrentUser,
+            formatDate: formatDate,
+            DATE_MINUTE: DATE_MINUTE,
+            formatSize: formatSize
+        }));
+
+        this.paginateWidget.setElement(this.$('.g-collection-pagination')).render();
+        this.searchWidget.setElement(this.$('.g-collections-search-container')).render();
+
+        if (this.create) {
+            this.createCollectionDialog();
+        }
+
+        return this;
+    },
+
+    /**
+     * When the user clicks a search result collection, this helper method
+     * will navigate them to the view for that specific collection.
+     */
+    _gotoCollection: function (result) {
+        var collection = new CollectionModel();
+        collection.set('_id', result.id).on('g:fetched', function () {
+            router.navigate('/collection/' + collection.get('_id'), { trigger: true });
+        }, this).fetch();
+    },
+
+    _toggleDescription: function (e) {
+        const link = $(e.currentTarget);
+        const cid = link.attr('cid');
+        const dest = this.$(`.g-collection-description[cid="${cid}"]`);
+
+        if (link.attr('state') === 'hidden') {
+            renderMarkdown(this.collection.get(cid).get('description'), dest);
+            dest.removeClass('hide');
+            link.attr('state', 'visible');
+            link.find('i').removeClass('icon-down-dir').addClass('icon-up-dir');
+            link.find('span').text('Hide description');
+        } else {
+            dest.addClass('hide');
+            link.attr('state', 'hidden');
+            link.find('i').removeClass('icon-up-dir').addClass('icon-down-dir');
+            link.find('span').text('Show description');
+        }
+    }
+});
+
+export default CollectionsView;

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

@@ -0,0 +1,83 @@
+import $ from 'jquery';
+
+import BrowserWidget from '@girder/core/views/widgets/BrowserWidget';
+import router from '@girder/core/router';
+import View from '@girder/core/views/View';
+import { restRequest } from '@girder/core/rest';
+
+import FilesystemImportTemplate from '@girder/core/templates/body/filesystemImport.pug';
+
+var FilesystemImportView = View.extend({
+    events: {
+        'submit .g-filesystem-import-form': function (e) {
+            e.preventDefault();
+
+            var destId = this.$('#g-filesystem-import-dest-id').val().trim().split(/\s/)[0],
+                destType = this.$('#g-filesystem-import-dest-type').val(),
+                foldersAsItems = this.$('#g-filesystem-import-leaf-items').val();
+
+            this.$('.g-validation-failed-message').empty();
+
+            this.assetstore.off('g:imported').on('g:imported', function () {
+                router.navigate(destType + '/' + destId, { trigger: true });
+            }, this).on('g:error', function (resp) {
+                this.$('.g-validation-failed-message').text(resp.responseJSON.message);
+            }, this).import({
+                importPath: this.$('#g-filesystem-import-path').val().trim(),
+                leafFoldersAsItems: foldersAsItems,
+                destinationId: destId,
+                destinationType: destType,
+                progress: true
+            });
+        },
+        'click .g-open-browser': '_openBrowser'
+    },
+
+    initialize: function (settings) {
+        this._browserWidgetView = new BrowserWidget({
+            parentView: this,
+            titleText: 'Destination',
+            helpText: 'Browse to a location to select it as the destination.',
+            submitText: 'Select Destination',
+            validate: function (model) {
+                const isValid = $.Deferred();
+                if (!model) {
+                    isValid.reject('Please select a valid root.');
+                } else {
+                    isValid.resolve();
+                }
+                return isValid.promise();
+            }
+        });
+        this.listenTo(this._browserWidgetView, 'g:saved', function (val) {
+            this.$('#g-filesystem-import-dest-id').val(val.id);
+            this.$('#g-filesystem-import-dest-type').val(val.get('_modelType'));
+            restRequest({
+                url: `resource/${val.id}/path`,
+                method: 'GET',
+                data: { type: val.get('_modelType') }
+            }).done((result) => {
+                // Only add the resource path if the value wasn't altered
+                if (this.$('#g-filesystem-import-dest-id').val() === val.id) {
+                    this.$('#g-filesystem-import-dest-id').val(`${val.id} (${result})`);
+                }
+            });
+        });
+        this.assetstore = settings.assetstore;
+        this.render();
+    },
+
+    render: function () {
+        this.$el.html(FilesystemImportTemplate({
+            assetstore: this.assetstore
+        }));
+
+        return this;
+    },
+
+    _openBrowser: function () {
+        this._browserWidgetView.setElement($('#g-dialog-container')).render();
+    }
+});
+
+export default FilesystemImportView;

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

@@ -0,0 +1,54 @@
+import _ from 'underscore';
+
+import FolderModel from '@girder/core/models/FolderModel';
+import HierarchyWidget from '@girder/core/views/widgets/HierarchyWidget';
+import View from '@girder/core/views/View';
+import { cancelRestRequests } from '@girder/core/rest';
+import events from '@girder/core/events';
+
+/**
+ * This view shows a single folder as a hierarchy widget.
+ */
+var FolderView = View.extend({
+    initialize: function (settings) {
+        cancelRestRequests('fetch');
+        this.folder = settings.folder;
+        this.upload = settings.upload || false;
+        this.folderAccess = settings.folderAccess || false;
+        this.folderCreate = settings.folderCreate || false;
+        this.folderEdit = settings.folderEdit || false;
+        this.itemCreate = settings.itemCreate || false;
+
+        this.render();
+    },
+
+    render: function () {
+        this.hierarchyWidget = new HierarchyWidget({
+            el: this.$el,
+            parentModel: this.folder,
+            upload: this.upload,
+            folderAccess: this.folderAccess,
+            folderEdit: this.folderEdit,
+            folderCreate: this.folderCreate,
+            itemCreate: this.itemCreate,
+            parentView: this
+        });
+
+        return this;
+    }
+}, {
+    /**
+     * Helper function for fetching the folder by id, then render the view.
+     */
+    fetchAndInit: function (id, params) {
+        var folder = new FolderModel();
+        folder.set({ _id: id }).on('g:fetched', function () {
+            events.trigger('g:navigateTo', FolderView, _.extend({
+                folder: folder
+            }, params || {}));
+        }, this).fetch();
+    }
+
+});
+
+export default FolderView;