diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue index fcef9e0bf4d..2993ea2c331 100644 --- a/client/src/components/Masthead/Masthead.vue +++ b/client/src/components/Masthead/Masthead.vue @@ -14,8 +14,7 @@ :active-tab="activeTab" /> - - + @@ -95,10 +94,6 @@ export default { this.baseTabs = fetchMenu(this.menuOptions); loadWebhookMenuItems(this.extensionTabs); }, - mounted() { - //this.mastheadState.quotaMeter.setElement(this.$refs["quota-meter-container"]); - //this.mastheadState.quotaMeter.render(); - }, methods: { addItem(item) { this.tabs.push(item); diff --git a/client/src/components/Masthead/QuotaMeter.vue b/client/src/components/Masthead/QuotaMeter.vue index 835c578603a..cdaebbc468e 100644 --- a/client/src/components/Masthead/QuotaMeter.vue +++ b/client/src/components/Masthead/QuotaMeter.vue @@ -4,7 +4,7 @@ {{ usingString + " " + usage.toFixed(0) }}% - + {{ usingString + " " + totalUsageString }} @@ -25,7 +25,10 @@ export default { ...mapGetters("config", ["config"]), ...mapGetters("user", ["currentUser"]), hasQuota() { - return this.config?.enable_quotas ?? false; + const quotasEnabled = this.config?.enable_quotas ?? false; + const quotaLimited = this.currentUser?.quota !== "unlimited" ?? false; + + return quotasEnabled && quotaLimited; }, usage() { if (this.hasQuota) { @@ -62,6 +65,8 @@ export default { diff --git a/client/src/layout/masthead.js b/client/src/layout/masthead.js index 3c01e8b8523..e53fe382c34 100644 --- a/client/src/layout/masthead.js +++ b/client/src/layout/masthead.js @@ -1,6 +1,5 @@ import $ from "jquery"; import { WindowManager } from "layout/window-manager"; -import QuotaMeter from "mvc/user/user-quotameter"; import { getGalaxyInstance } from "app"; import { getAppRoot } from "onload/loadConfig"; import Masthead from "../components/Masthead/Masthead"; @@ -18,16 +17,6 @@ export class MastheadState { } this.windowManager = Galaxy.frame; - // set up the quota meter (And fetch the current user data from trans) - // add quota meter to masthead - if (!Galaxy.quotaMeter) { - Galaxy.quotaMeter = new QuotaMeter.UserQuotaMeter({ - model: Galaxy.user, - quotaUrl: Galaxy.config.quota_url, - }); - } - this.quotaMeter = Galaxy.quotaMeter; - // loop through beforeunload functions if the user attempts to unload the page $(window) .off() diff --git a/client/src/mvc/user/user-quotameter.js b/client/src/mvc/user/user-quotameter.js deleted file mode 100644 index d20957b52a3..00000000000 --- a/client/src/mvc/user/user-quotameter.js +++ /dev/null @@ -1,167 +0,0 @@ -import $ from "jquery"; -import Backbone from "backbone"; -import _ from "underscore"; -import baseMVC from "mvc/base-mvc"; -import _l from "utils/localization"; -import { getAppRoot } from "onload/loadConfig"; - -var logNamespace = "user"; -//============================================================================== -/** @class View to display a user's disk/storage usage - * either as a progress bar representing the percentage of a quota used - * or a simple text element displaying the human readable size used. - * @name UserQuotaMeter - * @augments Backbone.View - */ -var UserQuotaMeter = Backbone.View.extend(baseMVC.LoggableMixin).extend( - /** @lends UserQuotaMeter.prototype */ { - _logNamespace: logNamespace, - - /** Defaults for optional settings passed to initialize */ - options: { - warnAtPercent: 85, - errorAtPercent: 100, - quotaUrl: "https://galaxyproject.org/support/account-quotas/", - }, - - storageDashboardUrl: `${getAppRoot()}storage`, - - /** Set up, accept options, and bind events */ - initialize: function (options) { - this.log(`${this}.initialize:`, options); - _.extend(this.options, options); - - //this.bind( 'all', function( event, data ){ this.log( this + ' event:', event, data ); }, this ); - this.listenTo(this.model, "change:quota_percent change:total_disk_usage", this.render); - }, - - /** Re-load user model data from the api */ - update: function (options) { - this.log(`${this} updating user data...`, options); - this.model.loadFromApi(this.model.get("id"), options); - return this; - }, - - /** Is the user over their quota (if there is one)? - * @returns {Boolean} true if over quota, false if no quota or under quota - */ - isOverQuota: function () { - return ( - this.model.get("quota_percent") !== null && - this.model.get("quota_percent") >= this.options.errorAtPercent - ); - }, - - /** Render the meter when they have an applicable quota. Will render as a progress bar - * with their percentage of that quota in text over the bar. - * @fires quota:over when user is over quota (>= this.errorAtPercent) - * @fires quota:under when user is under quota - * @fires quota:under:approaching when user is >= this.warnAtPercent of their quota - * @fires quota:under:ok when user is below this.warnAtPercent - * @returns {jQuery} the rendered meter - */ - _render_quota: function () { - var modelJson = this.model.toJSON(); - - var //prevPercent = this.model.previous( 'quota_percent' ), - percent = modelJson.quota_percent; - - var //meter = $( UserQuotaMeter.templates.quota( modelJson ) ); - $meter = $(this._templateQuotaMeter(modelJson)); - - var $bar = $meter.find(".progress-bar"); - //this.log( this + '.rendering quota, percent:', percent, 'meter:', meter ); - - // OVER QUOTA: color the quota bar and show the quota error message - if (this.isOverQuota()) { - //this.log( '\t over quota' ); - $bar.attr("class", "progress-bar bg-danger"); - $meter.find(".quota-meter-text").css("color", "white"); - //TODO: only trigger event if state has changed - this.trigger("quota:over", modelJson); - - // APPROACHING QUOTA: color the quota bar - } else if (percent >= this.options.warnAtPercent) { - //this.log( '\t approaching quota' ); - $bar.attr("class", "progress-bar bg-warning"); - //TODO: only trigger event if state has changed - this.trigger("quota:under quota:under:approaching", modelJson); - - // otherwise, hide/don't use the msg box - } else { - $bar.attr("class", "progress-bar bg-success"); - //TODO: only trigger event if state has changed - this.trigger("quota:under quota:under:ok", modelJson); - } - return $meter; - }, - - /** Render the meter when the user has NO applicable quota. Will render as text - * showing the human readable sum storage their data is using. - * @returns {jQuery} the rendered text - */ - _render_usage: function () { - //var usage = $( UserQuotaMeter.templates.usage( this.model.toJSON() ) ); - var usage = $(this._templateUsage(this.model.toJSON())); - this.log(`${this}.rendering usage:`, usage); - return usage; - }, - - /** Render either the quota percentage meter or the human readable disk usage - * depending on whether the user model has quota info (quota_percent === null -> no quota) - * @returns {Object} this UserQuotaMeter - */ - render: function () { - //this.log( this + '.rendering' ); - var meterHtml = null; - - // no quota on server ('quota_percent' === null (can be valid at 0)), show usage instead - this.log(`${this}.model.quota_percent:`, this.model.get("quota_percent")); - if (this.model.get("quota_percent") === null || this.model.get("quota_percent") === undefined) { - meterHtml = this._render_usage(); - - // otherwise, render percent of quota (and warning, error) - } else { - meterHtml = this._render_quota(); - //TODO: add the original text for unregistered quotas - //tooltip = "Your disk quota is %s. You can increase your quota by registering a Galaxy account." - } - - this.$el.html(meterHtml); - this.$el.find(".quota-meter-text").tooltip(); - return this; - }, - - _templateQuotaMeter: function (data) { - const title = data.nice_total_disk_usage - ? `title="Using ${data.nice_total_disk_usage}. Click for details."` - : ""; - const using = `${_l("Using")} ${data.quota_percent}%`; - return `
-
-
- ${using} -
-
`; - }, - - _templateUsage: function (data) { - return [ - `
`, - '
', - data.nice_total_disk_usage ? _l("Using ") + data.nice_total_disk_usage : "", - "
", - "
", - ].join(""); - }, - - toString: function () { - return `UserQuotaMeter(${this.model})`; - }, - } -); - -//============================================================================== -export default { - UserQuotaMeter: UserQuotaMeter, -};