From 84d5aeb7a571992ee392bd10f2ed8d6c6df2a5d4 Mon Sep 17 00:00:00 2001 From: Rohit Yadav Date: Fri, 6 Nov 2015 23:04:43 +0530 Subject: [PATCH] ui/quota: implement a better quota UI plugin Signed-off-by: Rohit Yadav --- ui/plugins/quota/quota.js | 671 ++++++++++++++++++++------------------ 1 file changed, 357 insertions(+), 314 deletions(-) diff --git a/ui/plugins/quota/quota.js b/ui/plugins/quota/quota.js index c4c621d238c..70bf49ebf0f 100644 --- a/ui/plugins/quota/quota.js +++ b/ui/plugins/quota/quota.js @@ -15,7 +15,6 @@ // specific language governing permissions and limitations // under the License. -var g_quotaCurrency = ''; (function (cloudStack) { cloudStack.plugins.quota = function(plugin) { plugin.ui.addSection({ @@ -25,344 +24,388 @@ var g_quotaCurrency = ''; preFilter: function(args) { return true; }, - show: function() { - var $quotaView = $('
'); - var $toolbar = $('
'); - var $tabs = $('
    '); - var $tabViews = []; - - var sections = [{'id': 'quota-statement', - 'name': 'Statement', - 'render': function ($node) { - var statementView = $('
    '); - var generatedStatement = $('
    '); - - - $.ajax({ - url: createURL('quotaSummary'), - success: function(json) { - var quotaSummary = json.quotasummaryresponse.summary; - - generatedStatement.empty(); - $("
    ").appendTo(generatedStatement); - - if (quotaSummary.length < 1) { - return; - } - - var statementTable = $(''); - statementTable.appendTo($('
    ').appendTo(generatedStatement)); - - var statementTableHead = $('
    '); - $('').appendTo(statementTable)); - - var statementTableBody = $(''); - for (var i = 0; i < quotaSummary.length; i++) { - var statementTableBodyRow = $(''); - if (i % 2 == 0) { - statementTableBodyRow.addClass('even'); - } else { - statementTableBodyRow.addClass('odd'); - } - var g_quotaCurrency = quotaSummary[i].currency.trim() + ' '; - $('
    ').html(_l('label.name')).appendTo(statementTableHead); - $('').html(_l('label.domain')).appendTo(statementTableHead); - $('').html(_l('label.balance')).appendTo(statementTableHead); - $('').html(_l('label.totalusage')).appendTo(statementTableHead); - $('').html(_l('label.state')).appendTo(statementTableHead); - $('').html(_l('label.quickview')).appendTo(statementTableHead); - statementTableHead.appendTo($('
    ').html(quotaSummary[i].account).appendTo(statementTableBodyRow); - $('').html(quotaSummary[i].domain).appendTo(statementTableBodyRow); - $('').html(g_quotaCurrency + quotaSummary[i].quota).appendTo(statementTableBodyRow); - $('').html(g_quotaCurrency + quotaSummary[i].balance).appendTo(statementTableBodyRow); - $('').html(quotaSummary[i].state).appendTo(statementTableBodyRow); - $('').html(_l('label.quickview')).addClass('quick-view reduced-hide').appendTo(statementTableBodyRow); - statementTableBodyRow.appendTo(statementTableBody); - } - statementTableBody.appendTo(statementTable); - }, - error: function(data) { - generatedStatement.empty(); - cloudStack.dialog.notice({ - message: parseXMLHttpResponse(data) - }); - } - }); - - - generatedStatement.appendTo(statementView); - statementView.appendTo($node); + sectionSelect: { + label: 'label.select-view' + }, + sections: { + statement: { + type: 'select', + title: 'label.quota.statement', + listView: { + label: 'label.quota.statement', + fields: { + account: { + label: 'label.account', + truncate: true + }, + domain: { + label: 'label.domain' + }, + balance: { + label: 'label.quota.balance', + }, + quota: { + label: 'label.quota.totalusage', + editable: true, + truncate: true + }, + state: { + label: 'label.quota.state', + indicator: { + 'Enabled': 'on', + 'Disabled': 'off', } - }, - { - 'id': 'quota-tariff', - 'name' : 'Tariff Plan', - 'render': function($node) { - var tariffView = $('
    '); - var tariffViewList = $('
    '); - tariffViewList.appendTo(tariffView); + }, + }, + dataProvider: function(args) { + var data = { + page: args.page, + pagesize: pageSize + }; - var renderDateForm = function(lastDate) { - var startDateInput = $(''); - if (lastDate) { - startDateInput.val(lastDate); + // FIXME: add logic in mgmt server to filter by account + if (args.filterBy.search.value) { + data.account = args.filterBy.search.value; + } + + $.ajax({ + url: createURL('quotaSummary'), + data: data, + dataType: "json", + async: true, + success: function(json) { + var items = json.quotasummaryresponse.summary; + $.each(items, function(idx, item) { + items[idx].quota = items[idx].currency + ' ' + items[idx].quota; + items[idx].balance = items[idx].currency + ' ' + items[idx].balance; + // FIXME: state is boolean, this needs to be string? + if (items[idx].state) { + items[idx].state = 'Enabled'; + } else { + items[idx].state = 'Disabled'; } + }); + args.response.success({ + data: items + }); + }, + error: function(data) { + cloudStack.dialog.notice({ + message: parseXMLHttpResponse(data) + }); + } + }); + }, + detailView: { + actions: { + addCredits: { + label: 'label.quota.add.credits', + messages: { + notification: function(args) { + return 'label.quota.add.credits'; + } + }, + action: function(args) { + // FIX add code to show add credits form and fix css to show an icon + } + }, - startDateInput.datepicker({ - defaultDate: new Date(), - changeMonth: true, - dateFormat: "yy-mm-dd", - onClose: function (selectedDate) { - if (!selectedDate) { - return; - } - tariffViewList.empty(); - renderDateForm(selectedDate); - renderTariffTable(selectedDate); - } - }); - startDateInput.appendTo($('
    ').html('Effective Date ').appendTo(tariffViewList)); - }; + quotaStatementByDates: { + label: 'label.quota.statement.bydates', + messages: { + notification: function(args) { + return 'label.quota.statement.bydates'; + } + }, + action: function(args) { + // FIX add code to show form start/end date with datepicker injected, fix css + } + } - var renderTariffTable = function(startDate) { - var tariffTable = $(''); - tariffTable.appendTo(tariffViewList); + }, - var tariffTableHead = $(''); - $('').appendTo(tariffTable)); + tabs: { + details: { + title: 'label.details', + fields: [{ + name: { + label: 'label.quota.statement.balance' + } + }, { + balance: { + label: 'label.quota.statement.balance', + }, + startdate: { + label: 'label.quota.statement.date', + }, + }], + dataProvider: function(args) { + console.log('staetment view'); + console.log(args); $.ajax({ - url: createURL('quotaTariffList'), - data: {startdate: startDate }, - success: function(json) { - var items = json.quotatarifflistresponse.quotatariff; - if (items.constructor === Array && items[0].currency) { - g_quotaCurrency = items[0].currency.trim() + ' '; - } - - var tariffTableBody = $(''); - - for (var i = 0; i < items.length; i++) { - var tariffTableBodyRow = $(''); - if (i % 2 == 0) { - tariffTableBodyRow.addClass('even'); - } else { - tariffTableBodyRow.addClass('odd'); - } - $('
    ').html(_l('label.usage.type')).appendTo(tariffTableHead); - $('').html(_l('label.usage.unit')).appendTo(tariffTableHead); - $('').html(_l('label.quota.value')).appendTo(tariffTableHead); - $('').html(_l('label.quota.description')).appendTo(tariffTableHead); - tariffTableHead.appendTo($('
    ').html(items[i].usageName).appendTo(tariffTableBodyRow); - $('').html(items[i].usageUnit).appendTo(tariffTableBodyRow); - - if (isAdmin()) { - var valueCell = $(''); - var value = $('').html(g_quotaCurrency + items[i].tariffValue); - value.appendTo(valueCell); - valueCell.appendTo(tariffTableBodyRow); - - var usageType = items[i].usageType; - var editButton = $('
     
    '); - editButton.appendTo(valueCell); - editButton.attr('id', 'quota-tariff-edit-' + items[i].usageType); - editButton.click(function() { - var usageTypeId = $(this).context.id.replace('quota-tariff-edit-', ''); - var updateTariffForm = cloudStack.dialog.createForm({ - form: { - title: 'label.quota.configuration', - fields: { - quotaValue: { - label: 'label.quota.value', - validation: { - required: true - } - }, - effectiveDate: { - label: 'Effective Date', - validation: { - required: true - } - }, - } - }, - after: function(args) { - $.ajax({ - url: createURL('quotaTariffUpdate'), - data: { - usagetype: usageTypeId, - value: args.data.quotaValue, - startDate: args.data.effectiveDate - }, - type: "POST", - success: function(json) { - $('#quota-tariff').click(); - }, - error: function(data) { - cloudStack.dialog.notice({ - message: parseXMLHttpResponse(data) - }); - } - }); - } - }); - updateTariffForm.find('input[name=effectiveDate]').datepicker({ - defaultDate: new Date(), - changeMonth: true, - dateFormat: "yy-mm-dd", - }); - }); - } else { - $('    		').html(g_quotaCurrency + items[i].tariffValue).appendTo(tariffTableBodyRow); - } - $('').html(items[i].description).appendTo(tariffTableBodyRow); - tariffTableBodyRow.appendTo(tariffTableBody); - } - tariffTableBody.appendTo(tariffTable); + url: createURL('quotaBalance'), + data: { + domainid: args.context.statement[0].domainid, + account: args.context.statement[0].account }, - error: function(data) { - cloudStack.dialog.notice({ - message: parseXMLHttpResponse(data) + success: function(json) { + var item = json.quotabalanceresponse.balance; + item.name = args.context.statement[0].account; + item.balance = item.currency + ' ' + item.startquota; + args.response.success({ + data: item }); } }); + } + } + } + } + + } + }, + + tariff: { + type: 'select', + title: 'label.quota.tariff', + listView: { + label: 'label.quota.tariff', + disableInfiniteScrolling: true, + actions: { + edit: { + label: 'label.change.value', + action: function(args) { + var data = { + usagetype: args.data.jsonObj.usageType, + value: args.data.tariffValue.split(' ')[1] }; + var updateTariffForm = cloudStack.dialog.createForm({ + form: { + title: 'label.quota.configuration', + fields: { + quotaValue: { + label: 'label.quota.value', + validation: { + required: true + } + }, + effectiveDate: { + label: 'Effective Date', + validation: { + required: true + } + }, + } + }, + after: function(argsLocal) { + data.startDate = argsLocal.data.effectiveDate; + $.ajax({ + url: createURL('quotaTariffUpdate'), + data: data, + type: "POST", + success: function(json) { + args.response.success({ + data: json.quotatariffupdateresponse.quotatariff + }); + // Refresh listings on chosen date to reflect new tariff + $($.find('div.search-bar input')).val(data.startDate); + $('#basic_search').click(); + }, + error: function(data) { + cloudStack.dialog.notice({ + message: parseXMLHttpResponse(data) + }); + } + }); + } + }); + updateTariffForm.find('input[name=quotaValue]').val(data.value); + updateTariffForm.find('input[name=effectiveDate]').datepicker({ + defaultDate: new Date(), + changeMonth: true, + dateFormat: "yy-mm-dd", + }).focus(); + } + } + }, + fields: { + usageName: { + label: 'label.usage.type', + id: true, + truncate: true + }, + usageUnit: { + label: 'label.usage.unit' + }, + tariffValue: { + label: 'label.quota.tariffvalue', + editable: true + }, + description: { + label: 'label.quota.description', + truncate: true + } + }, + dataProvider: function(args) { + var data = {}; + if (args.filterBy.search.value) { + data.startdate = args.filterBy.search.value; + } + $.ajax({ + url: createURL('quotaTariffList'), + data: data, + dataType: "json", + async: true, + success: function(json) { + var items = json.quotatarifflistresponse.quotatariff; + $.each(items, function(idx, item) { + items[idx].tariffValue = items[idx].currency + ' ' + items[idx].tariffValue; + }); + args.response.success({ + data: items + }); - renderDateForm(); - renderTariffTable(); - tariffView.appendTo($node); - } - }, - - {'id': 'quota-email', - 'name': 'Email Templates', - 'render': function($node) { - var manageTemplatesView = $('
    '); + // Hook up date picker + var input = $($.find('div.search-bar input')); + input.datepicker({ + defaultDate: new Date(), + changeMonth: true, + dateFormat: "yy-mm-dd", + }); + input.parent().attr('title', _l('label.quota.effectivedate')); + }, + error: function(data) { + cloudStack.dialog.notice({ + message: parseXMLHttpResponse(data) + }); + } + }); + } + } + }, - var emailTemplateForm = $('
    '); - var templateDropdown = $('
    '); - var templateOptions = $(''); - $('

    ').html('Email Template').appendTo(templateDropdown); - templateOptions.appendTo(templateDropdown); - // templateOptions.appendTo($('

    Email - // Template

    ').appendTo(templateDropdown)); + emailTemplates: { + type: 'select', + title: 'label.quota.email.template', + listView: { + label: 'label.quota.email.template', + disableInfiniteScrolling: true, + fields: { + templatetype: { + label: 'label.quota.email.template', + }, + templatesubject: { + label: 'label.quota.email.subject', + truncate: true + }, + templatebody: { + label: 'label.quota.email.body', + truncate: true + }, + last_updated: { + label: 'label.quota.email.lastupdated', + truncate: true + }, + }, + dataProvider: function(args) { + var data = {}; + if (args.filterBy.search.value) { + data.templatetype = args.filterBy.search.value; + } - var templateSubjectTextArea = $(''); - var saveTemplateButton = $('