@girder/core 5.0.0-beta.1 → 5.0.0

package/dist-lib/src/templates/widgets/searchResults.pug

@@ -0,0 +1,14 @@
+each result in results
+  li.g-search-result
+    a.g-search-result-element(data-resource-id=result.id, data-resource-type=result.type, data-resource-icon=result.icon, tabindex="-1")
+      i(class=`icon-${result.icon}`)
+      | #{result.text}
+if results.length === 0
+  li.g-no-search-results.disabled
+    a(tabindex="-1")
+      i.icon-block
+        | No results found
+else
+  li.g-search-result
+    a.g-search-result-page-link(data-resource-type="resultPage")
+      | ...

package/dist-lib/src/templates/widgets/sortCollectionWidget.pug

@@ -0,0 +1,14 @@
+.btn-group
+  a.g-sort-order-button.g-up.btn.btn-sm(title="Sort order")
+    i.icon-sort-name-up
+  a.g-sort-order-button.g-down.btn.btn-sm(title="Sort order")
+    i.icon-sort-name-down
+  button.g-collection-sort-actions.btn.btn-sm.btn-default.dropdown-toggle(
+      data-toggle="dropdown", title="Sort by Field")
+    | Sort by
+    i.icon-down-dir
+  ul.g-collection-sort-menu.dropdown-menu(role="menu")
+    each fieldName, field in fields
+      li(role="presentation")
+        a.g-collection-sort-link(role="menuitem", g-sort=field)
+          = fieldName

package/dist-lib/src/templates/widgets/taskProgress.pug

@@ -0,0 +1,16 @@
+.g-task-progress-top
+  .g-task-progress-bar.progress(class=progressClass)
+    .progress-bar(class=barClass, style=`width: ${width};`)
+      .progress-status
+        .progress-percent
+          = percentText
+        .progress-left
+          = timeLeftText
+  .g-task-progress-title(title=progress.data.title)
+    if progress.data.resource && progress.data.resource._id && progress.data.resourceName
+      a(title=progress.data.title, href='#' + progress.data.resourceName + '/' + progress.data.resource._id)
+        = progress.data.title
+    else
+      = progress.data.title
+.g-task-progress-bottom
+  .g-task-progress-message= progress.data.message

package/dist-lib/src/templates/widgets/timeline.pug

@@ -0,0 +1,15 @@
+.g-timeline-widget-wrapper
+  .g-timeline-container
+    each segment in segments
+      .g-timeline-segment(
+          title=segment.tooltip, class=segment.class,
+          style=`left: ${segment.left}; width: ${segment.width}; ${segment.color}`)
+    each point in points
+      .g-timeline-point(
+          title=point.tooltip, class=point.class, style=`left: calc(${point.left} - 10px); ${point.color}`)
+  if startLabel !== undefined || endLabel !== undefined
+    .g-timeline-labels-container
+      if startLabel !== undefined
+        .g-timeline-start-label= startLabel
+      if endLabel !== undefined
+        .g-timeline-end-label= endLabel

package/dist-lib/src/templates/widgets/uploadWidget.pug

@@ -0,0 +1,15 @@
+include uploadWidgetMixins
+
+.modal-dialog
+  .modal-content
+    form#g-upload-form.modal-form(role="form")
+      .modal-header
+        button.close(data-dismiss="modal", aria-hidden="true", type="button") ×
+        h4.modal-title= title
+        +g-upload-widget-subtitle
+      .modal-body
+        +g-upload-widget-browse-or-drop
+        +g-upload-widget-progress
+      .modal-footer
+        a.btn.btn-small.btn-default(data-dismiss="modal") Close
+        +g-upload-widget-start-button

package/dist-lib/src/templates/widgets/uploadWidgetMixins.pug

@@ -0,0 +1,31 @@
+mixin g-upload-widget-subtitle
+  if parent && parentType
+    .g-dialog-subtitle
+      if (parentType === 'folder')
+        i.icon-folder-open
+      else if (parentType === 'item')
+        i.icon-doc-text-inv
+      else if (parentType === 'file')
+        i.icon-doc-inv
+      = parent.name()
+
+mixin g-upload-widget-browse-or-drop
+  .g-drop-zone
+    i.icon-docs
+    |  #{browseText}
+  .form-group.hide
+    input#g-files(type="file", multiple=(multiFile ? 'multiple' : null))
+
+mixin g-upload-widget-progress
+  .g-current-progress-message
+  .g-progress-current.progress.progress-striped.hide
+    .progress-bar.progress-bar-info(role="progressbar")
+  .g-overall-progress-message= noneSelectedText
+  .g-progress-overall.progress.progress-striped.hide
+    .progress-bar.progress-bar-info(role="progressbar")
+  .g-upload-error-message.g-validation-failed-message
+
+mixin g-upload-widget-start-button
+  button.g-start-upload.btn.btn-small.btn-primary.disabled(type="submit", disabled)
+    i.icon-upload
+    |  Start Upload

package/dist-lib/src/templates/widgets/uploadWidgetNonModal.pug

@@ -0,0 +1,10 @@
+include uploadWidgetMixins
+
+form#g-upload-form
+  if title
+    h4= title
+  +g-upload-widget-subtitle
+  +g-upload-widget-browse-or-drop
+  +g-upload-widget-progress
+  .g-nonmodal-upload-buttons-container
+    +g-upload-widget-start-button

package/dist-lib/src/templates/widgets/userOtpBegin.pug

@@ -0,0 +1,4 @@
+h2 Enable Two-factor authentication
+
+button#g-user-otp-initialize-enable.btn.btn-primary(type="submit")
+  |  Begin

package/dist-lib/src/templates/widgets/userOtpDisable.pug

@@ -0,0 +1,6 @@
+h2.g-user-otp-heading-enable Two-factor authentication is currently enabled
+
+h3.g-user-otp-heading-disable Disable Two-factor authentication
+
+button#g-user-otp-disable.btn.btn-primary(type="submit")
+  |  Disable

package/dist-lib/src/templates/widgets/userOtpEnable.pug

@@ -0,0 +1,44 @@
+h2 Enable Two-factor authentication
+
+ol.g-account-otp-steps
+  li.g-account-otp-step
+    h3 Install an authenticator app on your mobile device.
+    div.
+      There are many compatible apps, including, but not limited to
+      #[a(href='https://support.google.com/accounts/answer/1066447?hl=en', target='_blank', rel='noopener') Google Authenticator],
+      #[a(href='https://guide.duo.com/third-party-accounts', target='_blank', rel='noopener') Duo Mobile], and
+      #[a(href='https://freeotp.github.io/', target='_blank', rel='noopener') FreeOTP].
+  li.g-account-otp-step
+    h3 Enter your key into the authenticator app
+    .g-account-otp-scan-qr
+      h4 Scan with your mobile device's camera:
+      canvas#g-user-otp-qr
+    .g-account-otp-enter-manual
+      h4 Advanced Users:
+        span You may enter your information manually, instead:
+      table
+        tr
+          th Service
+          td
+            code= totpInfo.issuer
+        tr
+          th Account
+          td
+            code= totpInfo.account
+        tr
+          th Key
+          td
+            // Split into 4-character chunks for human readability
+            code= totpInfo.key.match(/.{1,4}/g).join('-')
+        tr
+          th Type
+          td
+            span #[code Time-based] / #[code TOTP]
+  li.g-account-otp-step
+    h3 Enter the authentication code from your app
+    input#g-user-otp-token(type='text', minlength=6, maxlength=6, placeholder='Your 6-digit code')
+    div
+      span#g-account-otp-error.g-validation-failed-message
+.g-user-otp-footer
+  a#g-user-otp-cancel-enable.btn.btn-default Cancel
+  button#g-user-otp-finalize-enable.btn.btn-primary.btn-success(type="submit") Enable Two-Factor

package/dist-lib/src/utilities/EventStream.js

@@ -0,0 +1,119 @@
+import _ from 'underscore';
+import Backbone from 'backbone';
+
+import { getCurrentToken } from '@girder/core/auth';
+
+const appElement = document.getElementById('app');
+let apiRoot = (appElement && appElement.getAttribute('root')) || '';
+apiRoot += (apiRoot.endsWith('/') ? '' : '/') + 'api/v1';
+if (!apiRoot.startsWith('/') && apiRoot.indexOf(':') < 0) {
+    apiRoot = '/' + apiRoot;
+}
+let notifyRoot = apiRoot.endsWith('/api/v1') ? apiRoot.slice(0, -6) : apiRoot;
+notifyRoot = notifyRoot.endsWith('/') ? notifyRoot.slice(0, -1) : notifyRoot;
+
+/**
+ * The EventStream is an abstraction for server-sent events / long-polling via a
+ * per-user event channel endpoint using a WebSocket. When events are
+ * received on the websocket channel, this triggers a Backbone event of the form
+ * 'g:event.<type>' where <type> is the value of the event type field.
+ * Listeners can bind to specific event types on the channel.
+ */
+function EventStream(settings) {
+    // Possible states are 'closed', 'stopped', 'started'
+    this._state = 'closed';
+
+    // Create context bindings only once, so they can be referenced when unbinding events
+    this._onVisibilityStateChange = _.bind(this._onVisibilityStateChange, this);
+    this._onMessage = _.bind(this._onMessage, this);
+    this._onError = _.bind(this._onError, this);
+
+    return _.extend(this, Backbone.Events);
+}
+
+EventStream.prototype._onVisibilityStateChange = function () {
+    if (document.visibilityState === 'visible' && this._state === 'stopped') {
+        this._start();
+    } else if (document.visibilityState === 'hidden' && this._state === 'started') {
+        this._stop();
+    }
+};
+
+EventStream.prototype._onMessage = function (e) {
+    let obj;
+    try {
+        obj = window.JSON.parse(e.data);
+    } catch (err) {
+        console.error('Invalid JSON from notification stream: ' + e.data + ',' + err);
+        this.trigger('g:error', e);
+        return;
+    }
+    this.trigger('g:event.' + obj.type, obj);
+};
+
+EventStream.prototype._onError = function () {
+    // TODO: Handle error
+};
+
+EventStream.prototype.open = function () {
+    if (!window.EventSource) {
+        console.error('EventSource is not supported on this platform.');
+        this.trigger('g:eventStream.disable');
+        return;
+    }
+    if (this._state !== 'closed') {
+        console.warn('EventStream should be closed.');
+        return;
+    }
+
+    this._state = 'stopped';
+    this._start();
+
+    document.addEventListener('visibilitychange', this._onVisibilityStateChange);
+};
+
+EventStream.prototype._start = function () {
+    if (this._state !== 'stopped') {
+        console.warn('EventStream should be stopped');
+        return;
+    }
+    this._websocket = new WebSocket(`${notifyRoot}/notifications/me?token=${getCurrentToken()}`);
+    this._websocket.onmessage = this._onMessage;
+    this._websocket.onerror = this._onError;
+
+    this._state = 'started';
+    this.trigger('g:eventStream.start');
+};
+
+EventStream.prototype._stop = function () {
+    if (this._state !== 'started') {
+        console.warn('EventStream should be started');
+        return;
+    }
+
+    this._websocket.close();
+    this._websocket = null;
+
+    this._state = 'stopped';
+    this.trigger('g:eventStream.stop');
+};
+
+EventStream.prototype.close = function () {
+    if (this._state === 'closed') {
+        console.warn('EventStream should not be closed');
+        return;
+    }
+
+    document.removeEventListener('visibilitychange', this._onVisibilityStateChange);
+
+    if (this._state === 'started') {
+        this._stop();
+    }
+
+    this._state = 'closed';
+    this.trigger('g:eventStream.close');
+};
+
+const eventStream = new EventStream();
+
+export default eventStream;

package/dist-lib/src/utilities/PluginUtils.js

@@ -0,0 +1,36 @@
+import _ from 'underscore';
+
+/**
+ * Wrap the prototype method of a given object.
+ *
+ * @param obj The object whose prototype to extend, e.g. MyView
+ * @param funcName The name of the function to wrap, e.g. "render"
+ * @param wrapper The wrapper function, which should be a function taking the
+ *     underlying wrapped function as its first argument. The wrapped function
+ *     should be called with .call(this[, arguments]) inside of the wrapper in
+ *     order to preserve "this" semantics.
+ */
+function wrap(obj, funcName, wrapper) {
+    obj.prototype[funcName] = _.wrap(obj.prototype[funcName], wrapper);
+}
+
+var _pluginConfigRoutes = {};
+
+/**
+ * Expose a plugin configuration page via the admin plugins page.
+ * @param pluginName The canonical plugin name, i.e. its directory name
+ * @param route The route to trigger that will render the plugin config.
+ */
+function exposePluginConfig(pluginName, route) {
+    _pluginConfigRoutes[pluginName] = route;
+}
+
+function getPluginConfigRoute(pluginName) {
+    return _pluginConfigRoutes[pluginName];
+}
+
+export {
+    exposePluginConfig,
+    getPluginConfigRoute,
+    wrap
+};

package/dist-lib/src/utilities/S3UploadHandler.js

@@ -0,0 +1,263 @@
+import _ from 'underscore';
+import Backbone from 'backbone';
+
+import { restRequest, uploadHandlers } from '@girder/core/rest';
+
+/**
+ * This is the upload handler for the "s3" behavior, which is responsible for
+ * uploading data to an s3 assetstore type directly from the user agent, using
+ * either the single-request or multi-chunk protocol depending on the size of
+ * the file.
+ *
+ * The flow here is to make requests to Girder for each required chunk of
+ * the upload, which Girder authorizes and signs using HMAC. Those signatures
+ * are sent, along with the bytes, to the appropriate S3 bucket. For multi-
+ * chunk uploads, one final request is required after all chunks have been
+ * sent in order to create the final unified record in S3.
+ */
+// Constructor
+uploadHandlers.s3 = function (params) {
+    this.params = params;
+    this.startByte = 0;
+    return _.extend(this, Backbone.Events);
+};
+
+var prototype = uploadHandlers.s3.prototype;
+
+prototype._xhrProgress = function (event) {
+    if (!event.lengthComputable) {
+        return;
+    }
+
+    // We only want to count bytes of the actual file, not the bytes of
+    // the request body corresponding to the other form parameters model
+    // we are also sending.
+    var loaded = this.payloadLength + event.loaded - event.total;
+
+    if (loaded >= 0) {
+        this.trigger('g:upload.progress', {
+            startByte: this.startByte,
+            loaded: loaded,
+            total: this.params.file.size,
+            file: this.params.file
+        });
+    }
+};
+
+prototype.execute = function () {
+    var s3Info = this.params.upload.s3;
+
+    var xhr = new XMLHttpRequest();
+    xhr.open(s3Info.request.method, s3Info.request.url);
+    _.each(s3Info.request.headers, (v, k) => {
+        xhr.setRequestHeader(k, v);
+    });
+
+    if (s3Info.chunked) {
+        this._multiChunkUpload(xhr);
+    } else {
+        this.payloadLength = this.params.file.size;
+        xhr.onload = () => {
+            if (xhr.status === 200) {
+                this.trigger('g:upload.chunkSent', {
+                    bytes: this.payloadLength
+                });
+
+                restRequest({
+                    url: 'file/completion',
+                    method: 'POST',
+                    data: {
+                        uploadId: this.params.upload._id
+                    },
+                    error: null
+                }).done((resp) => {
+                    this.trigger('g:upload.complete', resp);
+                }).fail((resp) => {
+                    var msg;
+
+                    if (resp.status === 0) {
+                        msg = 'Could not connect to the server.';
+                    } else {
+                        msg = 'An error occurred when resuming upload, check console.';
+                    }
+                    this.trigger('g:upload.error', {
+                        message: msg
+                    });
+                });
+            } else {
+                this.trigger('g:upload.error', {
+                    message: 'Error occurred uploading to S3 (' + xhr.status + ').'
+                });
+            }
+        };
+
+        xhr.upload.addEventListener('progress', (event) => {
+            this._xhrProgress(event);
+        });
+
+        xhr.addEventListener('error', (event) => {
+            this.trigger('g:upload.error', {
+                message: 'Error occurred uploading to S3.',
+                event: event
+            });
+        });
+
+        xhr.send(this.params.file);
+    }
+};
+
+prototype.resume = function () {
+    if (this.params.upload.s3.chunked) {
+        return this._sendNextChunk();
+    }
+
+    // If this is a single-chunk upload, we have to use the offset method
+    // to re-generate the initial request with a new timestamp.
+    restRequest({
+        url: 'file/offset',
+        method: 'GET',
+        data: {
+            uploadId: this.params.upload._id
+        },
+        error: null
+    }).done((resp) => {
+        this.params.upload.s3.request = resp;
+        this.execute();
+    }).fail((resp) => {
+        var msg;
+
+        if (resp.status === 0) {
+            msg = 'Could not connect to the Girder server.';
+        } else {
+            msg = 'An error occurred when resuming upload, check console.';
+        }
+        this.trigger('g:upload.error', {
+            message: msg
+        });
+    });
+};
+
+/**
+ * If the file being uploaded is larger than a single chunk length, it
+ * should be uploaded using the S3 multipart protocol.
+ */
+prototype._multiChunkUpload = function (xhr) {
+    this.eTagList = {};
+    this.startByte = 0;
+    this.chunkN = 1;
+
+    xhr.onload = () => {
+        if (xhr.status === 200) {
+            this.s3UploadId = xhr.responseText.match(/<UploadId>(.*)<\/UploadId>/).pop();
+            this._sendNextChunk();
+        } else {
+            this.trigger('g:upload.error', {
+                message: 'Error while initializing multichunk S3 upload.',
+                event: event
+            });
+        }
+    };
+
+    xhr.addEventListener('error', (event) => {
+        this.trigger('g:upload.error', {
+            message: 'Error occurred uploading to S3.',
+            event: event
+        });
+    });
+
+    xhr.send();
+};
+
+/**
+ * Internal helper method used during multichunk upload protocol. This
+ * requests a signed chunk upload request from Girder, then uses that
+ * authorized request to send the chunk to S3.
+ */
+prototype._sendNextChunk = function () {
+    var sliceFn = this.params.file.webkitSlice ? 'webkitSlice' : 'slice';
+    var data = this.params.file[sliceFn](this.startByte,
+        this.startByte + this.params.upload.s3.chunkLength);
+    this.payloadLength = data.size;
+
+    // Get the authorized request from Girder
+    restRequest({
+        url: 'file/chunk',
+        method: 'POST',
+        data: {
+            offset: 0,
+            chunk: JSON.stringify({
+                s3UploadId: this.s3UploadId,
+                partNumber: this.chunkN,
+                contentLength: this.payloadLength
+            }),
+            uploadId: this.params.upload._id
+        },
+        error: null
+    }).done((resp) => {
+        // Send the chunk to S3
+        var xhr = new XMLHttpRequest();
+        xhr.open(resp.s3.request.method, resp.s3.request.url);
+
+        xhr.onload = () => {
+            if (xhr.status === 200) {
+                this.trigger('g:upload.chunkSent', {
+                    bytes: this.payloadLength
+                });
+                this.eTagList[this.chunkN] = xhr.getResponseHeader('ETag');
+                this.startByte += this.payloadLength;
+                this.chunkN += 1;
+
+                if (this.startByte < this.params.file.size) {
+                    this._sendNextChunk();
+                } else {
+                    this._finalizeMultiChunkUpload();
+                }
+            } else {
+                this.trigger('g:upload.error', {
+                    message: 'Error occurred uploading to S3 (' + xhr.status + ').'
+                });
+            }
+        };
+
+        xhr.upload.addEventListener('progress', (event) => {
+            this._xhrProgress(event);
+        });
+
+        xhr.addEventListener('error', (event) => {
+            this.trigger('g:upload.error', {
+                message: 'Error occurred uploading to S3.',
+                event: event
+            });
+        });
+
+        xhr.send(data);
+    }).fail(() => {
+        this.trigger('g:upload.error', {
+            message: 'Error getting signed chunk request from Girder.'
+        });
+    });
+};
+
+/**
+ * When all chunks of a multichunk upload have been sent, this must be
+ * called in order to finalize the upload.
+ */
+prototype._finalizeMultiChunkUpload = function () {
+    restRequest({
+        url: 'file/completion',
+        method: 'POST',
+        data: {
+            uploadId: this.params.upload._id
+        },
+        error: null
+    }).done((resp) => {
+        this.trigger('g:upload.complete', resp);
+    }).fail((resp) => {
+        const msg = resp.status === 0
+            ? 'Could not connect to the server.'
+            : 'Upload error during finalize, check console.';
+        this.trigger('g:upload.error', {
+            message: msg
+        });
+    });
+};

package/dist-lib/src/utilities/index.js

@@ -0,0 +1,9 @@
+import eventStream from './EventStream';
+import * as PluginUtils from './PluginUtils';
+import * as S3UploadHandler from './S3UploadHandler';
+
+export {
+    eventStream,
+    PluginUtils,
+    S3UploadHandler
+};

package/dist-lib/src/utilities/jquery/girderEnable.js

@@ -0,0 +1,19 @@
+import $ from 'jquery';
+
+/**
+ * Helper selector to enable/disable inputs elements
+ *
+ * @param enable Whether to enable the element or not
+ */
+$.fn.girderEnable = function (enable) {
+    var selection = $(this);
+    if (selection.is(':input')) {
+        selection.prop('disabled', !enable);
+    }
+    if (!enable) {
+        selection.addClass('disabled');
+    } else {
+        selection.removeClass('disabled');
+    }
+    return this;
+};

package/dist-lib/src/utilities/jquery/girderModal.js

@@ -0,0 +1,48 @@
+import $ from 'jquery';
+
+import 'bootstrap/js/modal';
+
+/**
+ * This should be used instead of calling bootstrap's modal() jQuery
+ * method directly. This unbinds all previous events from the dialog,
+ * then calls modal on it and binds the bootstrap close events.
+ * @param view The view object. Pass "false" for special cases where the
+ *             dialog does not correspond to a View object.  Pass 'close'
+ *             to just close an open modal dialog.
+ */
+$.fn.girderModal = function (view) {
+    /* If we have a modal dialog open, or one is in the process of closing,
+     * close that dialog before opening the new one.  This prevents
+     * layering modal dialogs, but also makes sure that we don't have a
+     * problem switching from one modal dialog to another. */
+    if ($(this).is('.modal')) {
+        /* We have to reach into the backbone modal object a little to see
+         * if we need to do anything.  By turning off the fade as we
+         * remove the old dialog, the removal is synchronous and we are
+         * sure it is gone before we add the new dialog. */
+        if ($(this).data('bs.modal') && $(this).data('bs.modal').isShown) {
+            var elem = $($(this).data('bs.modal').$element);
+            var hasFade = elem.hasClass('fade');
+            elem.removeClass('fade');
+            $(this).modal('hide');
+            elem.toggleClass('fade', hasFade);
+        }
+    }
+    if (view !== 'close') {
+        this.off();
+        // It seems as if $foo.girderModal().on('shown.bs.modal', callback)
+        // does not trigger the callback because the call to modal() below is showing
+        // the modal (and sending the 'shown.bs.modal' event) *before* we get to
+        // register the event in .on('shown.bs.modal', cb). Let's show
+        // the modal in the next animation frame to fix this behavior for now.
+        setTimeout(() => {
+            this.modal().find('[data-dismiss="modal"]').off('click').on('click', () => {
+                this.modal('hide');
+            });
+        }, 0);
+        if (view !== false) {
+            view.delegateEvents();
+        }
+    }
+    return this;
+};