| /** |
| * Licensed to the Apache Software Foundation (ASF) under one |
| * or more contributor license agreements. See the NOTICE file |
| * distributed with this work for additional information |
| * regarding copyright ownership. The ASF licenses this file |
| * to you under the Apache License, Version 2.0 (the |
| * "License"); you may not use this file except in compliance |
| * with the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| |
| define(['require', |
| 'backbone', |
| 'views/site/d3.v3.min', |
| 'hbs!tmpl/site/Statistics_Timeline_tmlp', |
| 'hbs!tmpl/site/Statistics_Notification_table_tmpl', |
| 'hbs!tmpl/site/Statistics_Topic_Offset_table_tmpl', |
| 'hbs!tmpl/site/entity_tmpl', |
| 'modules/Modal', |
| 'models/VCommon', |
| 'utils/UrlLinks', |
| 'collection/VTagList', |
| 'utils/CommonViewFunction', |
| 'utils/Enums', |
| 'utils/MigrationEnums', |
| 'moment', |
| 'utils/Utils', |
| 'utils/Globals', |
| 'views/site/nv.d3', |
| 'moment-timezone', |
| 'daterangepicker' |
| ], function(require, Backbone, d3, StatTimelineTmpl, StatsNotiTable, TopicOffsetTable, EntityTable, Modal, VCommon, UrlLinks, VTagList, CommonViewFunction, Enums, MigrationEnums, moment, Utils, Globals) { |
| 'use strict'; |
| |
| var StatisticsTimelineView = Backbone.Marionette.LayoutView.extend( |
| /** @lends AboutAtlasView */ |
| { |
| template: StatTimelineTmpl, |
| |
| /** Layout sub regions */ |
| regions: {}, |
| /** ui selector cache */ |
| ui: { |
| entity: "[data-id='entity']", |
| classification: "[data-id='classification']", |
| serverCard: "[data-id='server-card']", |
| connectionCard: "[data-id='connection-card']", |
| notificationCard: "[data-id='notification-card']", |
| statsNotificationTable: "[data-id='stats-notification-table']", |
| entityCard: "[data-id='entity-card']", |
| classificationCard: "[data-id='classification-card']", |
| offsetCard: "[data-id='offset-card']", |
| osCard: "[data-id='os-card']", |
| runtimeCard: "[data-id='runtime-card']", |
| memoryCard: "[data-id='memory-card']", |
| memoryPoolUsage: "[data-id='memory-pool-usage-card']", |
| statisticsRefresh: "[data-id='statisticsRefresh']", |
| notificationDetails: "[data-id='notificationDetails']", |
| migrationProgressBar: "[data-id='migrationProgressBar']", |
| migrationProgressBarValue: "[data-id='migrationProgressBarValue']", |
| metricsTimeLine: "[data-id='metricsTimeLine']", |
| metricsTimeList: "[data-id='metricsTimeList']", |
| chartTitle: "[data-id='chartTitle']", |
| chartTimeLineList: "[data-id='chartTimeLineList']", |
| chartButtons: ".chart-buttons", |
| compareGraph: "[data-id='compareGraph']", |
| entityChartCollapseHeading: "[data-id='entityChartCollapseHeading']", |
| entityChartCollapse: "[data-id='entityChartCollapse']", |
| entityTypeSelection: ".entity-type-chart", |
| chartButton: ".chart-button" |
| }, |
| /** ui events hash */ |
| events: function() { |
| var events = {}, |
| that = this; |
| events["click " + this.ui.statisticsRefresh] = function(e) { |
| this.showLoader(); |
| this.fetchMetricData(); |
| this.fetchStatusData(); |
| this.createMetricsChart(); |
| }; |
| events["change " + this.ui.metricsTimeList] = function(e) { |
| var that = this, |
| selectedTime = this.ui.metricsTimeList.val(), |
| options = { isMetricsCollectionTime: true }; |
| if (selectedTime.length) { |
| that.metricTime.url = UrlLinks.metricsCollectionTimeApiUrl() + selectedTime; |
| that.showLoader(); |
| (selectedTime === "Current") ? that.fetchMetricData(): that.fetchMetricData(options); |
| that.metricsChartDateRange = "7d"; |
| that.createMetricsChart(); |
| that.selectDefaultValueTimer(); |
| |
| //that.ui.chartTimeLineList.val(that.metricsChartDateRange).trigger("change"); |
| } |
| }; |
| |
| // events["change " + this.ui.chartTimeLineList] = function(e) { |
| // var that = this; |
| // that.metricsChartDateRange = this.ui.chartTimeLineList.val(); |
| // that.createMetricsChart(); |
| // }; |
| |
| events["click " + this.ui.chartButton] = function(e) { |
| e.stopPropagation(); |
| that.$el.find('.chart-button').removeClass('active'); |
| $(e.currentTarget).addClass("active"); |
| that.metricsChartDateRange = $(e.currentTarget).children().text(); |
| that.createMetricsChart(); |
| |
| }; |
| return events; |
| }, |
| createMetricsChart: function() { |
| var that = this, |
| selectedDateRange = that.dateRangesMap[that.metricsChartDateRange], |
| startTime = Date.parse(that.getValue({ value: selectedDateRange[0], type: "day" })), |
| endTime = Date.parse(that.getValue({ value: selectedDateRange[1], type: "day" })); |
| $(that.ui.chartTitle).text(that.entityType + " chart for " + that.dateRangeText[that.metricsChartDateRange]); |
| var options = { |
| "startTime": startTime, |
| "endTime": endTime, |
| "typeName": that.entityType |
| }; |
| that.showChartLoader(); |
| that.createChartFromCollection(options); |
| }, |
| /** |
| * intialize a new AboutAtlasView Layout |
| * @constructs |
| */ |
| initialize: function(options) { |
| _.extend(this, options); |
| var that = this; |
| this.DATA_MAX_LENGTH = 25; |
| this.loaderCount = 0; |
| this.chartLoaderCount = 0; |
| this.metricCollectctionTime = new VTagList(); |
| this.metricTime = new VTagList(); |
| this.metricCollectctionTime.url = UrlLinks.metricsAllCollectionTimeApiUrl(); |
| this.entityTypeChartCollection = new VTagList(); |
| this.entityTypeChartCollection.url = UrlLinks.metricsGraphUrl(); |
| this.entityType = "hive_table"; //default entity type for metrics chart |
| this.metricsChartDateRange = "7d"; //default range for metrics chart |
| this.freshLoad = true; |
| this.dateRangesMap = { |
| 'Today': moment(), |
| '1d': [moment().subtract(1, 'days'), moment()], |
| '7d': [moment().subtract(6, 'days'), moment()], |
| '14d': [moment().subtract(13, 'days'), moment()], |
| '30d': [moment().subtract(29, 'days'), moment()], |
| 'This Month': [moment().startOf('month'), moment().endOf('month')], |
| 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')], |
| 'Last 3 Months': [moment().subtract(3, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')], |
| 'Last 6 Months': [moment().subtract(6, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')], |
| 'Last 12 Months': [moment().subtract(12, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')], |
| 'This Quarter': [moment().startOf('quarter'), moment().endOf('quarter')], |
| 'Last Quarter': [moment().subtract(1, 'quarter').startOf('quarter'), moment().subtract(1, 'quarter').endOf('quarter')], |
| 'This Year': [moment().startOf('year'), moment().endOf('year')], |
| 'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')] |
| }; |
| this.dateRangeText = { |
| '1d': "last 1 day", |
| '7d': "last 7 days", |
| '14d': "last 14 days", |
| '30d': "last 30 days", |
| }; |
| if (this.isMigrationView) { |
| this.migrationImportStatus = new VTagList(); |
| this.migrationImportStatus.url = UrlLinks.migrationStatusApiUrl(); |
| } else { |
| var modal = new Modal({ |
| title: 'Statistics', |
| content: this, |
| okCloses: true, |
| okText: "Close", |
| showFooter: true, |
| allowCancel: false, |
| width: "60%", |
| headerButtons: [{ |
| title: "Refresh Data", |
| btnClass: "fa fa-refresh", |
| onClick: function() { |
| modal.$el.find('.header-button .fa-refresh').tooltip('hide').prop('disabled', true).addClass('fa-spin'); |
| // that.fetchMetricData({ update: true }); |
| that.freshChart = true; |
| d3.selectAll("#compareGraph > svg > *").remove(); |
| that.fetchAllMetricsData({ update: true }); |
| } |
| }] |
| }); |
| modal.on('closeModal', function() { |
| modal.trigger('cancel'); |
| }); |
| this.modal = modal; |
| modal.open(); |
| } |
| }, |
| bindEvents: function() { |
| var that = this; |
| if (this.modal) { |
| this.$el.on('click', '.linkClicked', function() { |
| that.modal.close(); |
| }) |
| } |
| this.$el.find("table").on('click', function(e) { |
| var clickElement = $(e.target); |
| if ($(this).hasClass("entityTable") && clickElement.parents().hasClass("entity-type-chart")) { |
| $(this).find("tr").removeClass("table-row-selected"); |
| var parentRow = clickElement.parents("tr"); |
| parentRow.addClass("table-row-selected"); |
| if (that.entityType === parentRow.attr('id')) { |
| that.ui.entityChartCollapse.toggleClass('in'); |
| } else { |
| that.entityType = parentRow.attr('id'); |
| that.freshLoad = true; |
| that.createMetricsChart(); |
| if (!that.ui.entityChartCollapse.hasClass('in')) { |
| that.ui.entityChartCollapse.toggleClass('in'); |
| } |
| } |
| } |
| }); |
| }, |
| onRender: function() { |
| this.bindEvents(); |
| this.createChartTimeLineDropdown(); //create dropdown for chart with days options |
| this.fetchAllMetricsData(); |
| this.createTimeLineDropdown(); |
| }, |
| fetchStatusData: function() { |
| var that = this; |
| ++this.loaderCount; |
| that.migrationImportStatus.fetch({ |
| success: function(data) { |
| var data = _.first(data.toJSON()), |
| migrationStatus = data.MigrationStatus || null, |
| operationStatus = migrationStatus.operationStatus, |
| showProgress = true, |
| totalProgress = 0, |
| progressMessage = ""; |
| if (migrationStatus) { |
| if (MigrationEnums.migrationStatus[operationStatus] === "DONE") { |
| showProgress = false; |
| } else if (MigrationEnums.migrationStatus[operationStatus] === "IN_PROGRESS" || MigrationEnums.migrationStatus[operationStatus] === "STARTED") { |
| var currentIndex = migrationStatus.currentIndex || 0, |
| totalCount = migrationStatus.totalCount || 0; |
| totalProgress = Math.ceil((migrationStatus.currentIndex / migrationStatus.totalCount) * 100) |
| progressMessage = totalProgress + "%"; |
| that.ui.migrationProgressBar.removeClass("progress-bar-danger"); |
| that.ui.migrationProgressBar.addClass("progress-bar-success"); |
| } else if (MigrationEnums.migrationStatus[operationStatus] === "FAIL") { |
| totalProgress = "100"; |
| progressMessage = "Failed"; |
| that.ui.migrationProgressBar.addClass("progress-bar-danger"); |
| that.ui.migrationProgressBar.removeClass("progress-bar-success"); |
| } |
| if (showProgress) { |
| that.$el.find(".statistics-header>.progress").removeClass("hide"); |
| that.$el.find(".statistics-header>.successStatus").addClass("hide"); |
| that.ui.migrationProgressBar.css({ width: totalProgress + '%' }); |
| that.ui.migrationProgressBarValue.text(progressMessage); |
| } else { |
| that.$el.find(".statistics-header>.progress").addClass("hide"); |
| that.$el.find(".statistics-header>.successStatus").removeClass("hide"); |
| } |
| } |
| |
| }, |
| complete: function() { |
| --that.loaderCount; |
| that.hideLoader(); |
| } |
| }); |
| }, |
| fetchAllMetricsData: function(options) { |
| this.fetchMetricCollectionTime(); // create dropdown as per collectionTime |
| this.showLoader(); |
| if (this.isMigrationView) { |
| this.fetchStatusData(); |
| } |
| this.fetchMetricData(options); // display all the required metrics data |
| this.createMetricsChart(); // display Metrics in chart |
| this.selectDefaultValueTimer(); |
| }, |
| selectDefaultValueTimer: function(options) { |
| var that = this; |
| this.defaultValues = setTimeout(function() { |
| that.$el.find('#' + that.entityType).addClass('table-row-selected'); |
| that.resetChartButtonSelection(); |
| that.selectDefaultValueTimerStop(); |
| }, 1200); |
| }, |
| selectDefaultValueTimerStop: function() { |
| clearTimeout(this.defaultValues); |
| }, |
| resetChartButtonSelection: function() { |
| var that = this; |
| this.$el.find('.chart-button').removeClass('active'); |
| _.each(this.$el.find('.chart-button'), function(chartButton) { |
| if (chartButton.innerText === that.metricsChartDateRange) { |
| $(chartButton).addClass("active") |
| } |
| }); |
| }, |
| fetchMetricCollectionTime: function() { |
| var that = this; |
| ++this.loaderCount; |
| this.showLoader(); |
| this.metricCollectctionTime.fetch({ |
| success: function(data) { |
| var data = data ? data.toJSON() : null; |
| data.length ? that.createTimeLineDropdown(data) : that.createTimeLineDropdown(); |
| }, |
| complete: function() { |
| --that.loaderCount; |
| that.hideLoader() |
| } |
| }); |
| }, |
| fetchMetricData: function(options) { |
| var that = this, |
| collectionTofetch = (options && options.isMetricsCollectionTime) ? that.metricTime : that.metricCollection; |
| ++this.loaderCount; |
| |
| collectionTofetch.fetch({ |
| success: function(data) { |
| var data = _.first(data.toJSON()); |
| // data = (options && options.isMetricsCollectionTime) ? data.data : data; |
| if (options && options.isMetricsCollectionTime) { |
| data = (data.metrics && data.metrics.data) ? data.metrics.data : data; |
| } |
| that.renderStats({ valueObject: data.general.stats, dataObject: data.general }); |
| that.renderEntities({ data: data }); |
| that.renderSystemDeatils({ data: data }); |
| that.renderClassifications({ data: data }); |
| if (options && options.update) { |
| if (that.modal) { |
| that.modal.$el.find('.header-button .fa-refresh').prop('disabled', false).removeClass('fa-spin'); |
| } |
| Utils.notifySuccess({ |
| content: "Metric data is refreshed" |
| }) |
| } |
| }, |
| complete: function() { |
| --that.loaderCount; |
| that.hideLoader(); |
| } |
| }); |
| }, |
| createChartFromCollection: function(params) { |
| var that = this, |
| chartData = {}; |
| ++that.chartLoaderCount; |
| console.log("startTime: " + new Date(params.startTime) + ", endTime: " + new Date(params.endTime) + " ,typeName: " + params.typeName); |
| that.entityTypeChartCollection.queryParams = params; |
| that.entityTypeChartCollection.fetch({ |
| success: function(data) { |
| chartData = _.first(data.toJSON()); |
| that.renderStackAreaGraps(chartData[that.entityType]); |
| if (that.freshLoad) { |
| that.freshLoad = false; |
| that.selectDefaultChartTimer(chartData[that.entityType]); |
| } |
| }, |
| complete: function() { |
| --that.chartLoaderCount; |
| that.hideChartLoader(); |
| } |
| }); |
| }, |
| selectDefaultChartTimer: function(chartData) { |
| var that = this; |
| this.chartRenderTimer = setTimeout(function() { |
| that.renderStackAreaGraps(chartData); |
| that.selectDefaultChartTimerStop(); |
| }, 1500); |
| }, |
| selectDefaultChartTimerStop: function() { |
| clearTimeout(this.chartRenderTimer); |
| }, |
| createTimeLineDropdown: function(data) { |
| var that = this, |
| options = '<option value="Current" data-name="Current" selected>Current</option>'; |
| that.ui.metricsTimeList.empty(); |
| _.each(data, function(data) { |
| var collectionTime = that.getValue({ type: "day", value: data.collectionTime }); |
| options += '<option value="' + (data.collectionTime) + '" data-name="' + (data.collectionTime) + '">' + collectionTime + '</option>'; |
| }); |
| that.ui.metricsTimeList.html(options); |
| }, |
| createChartTimeLineDropdown: function() { |
| var that = this, |
| options = '<ul class="pull-right">'; |
| options += '<li class="chart-button"><a href="javascript:void(0);" title="Last 1 day" data-day="1d">1d</a></li>'; |
| options += '<li class="chart-button active"><a href="javascript:void(0);" title="Last 7 days" data-day="7d">7d</a></li>'; |
| options += '<li class="chart-button"><a href="javascript:void(0);" title="Last 14 days" data-day="14d">14d</a></li>'; |
| options += '<li class="chart-button"><a href="javascript:void(0);" title="Last 30 days" data-day="30d">30d</a></li>'; |
| options += '</ul>' |
| that.ui.chartTimeLineList.empty(); |
| that.ui.chartTimeLineList.html(options); |
| }, |
| createTimeLineDropdownGraph: function() { |
| this.defaultRange = "7d"; |
| this.dateValue = null; |
| var that = this, |
| isTimeRange = true, |
| obj = { |
| opens: "center", |
| autoApply: true, |
| autoUpdateInput: false, |
| timePickerSeconds: true, |
| timePicker: true, |
| locale: { |
| format: Globals.dateTimeFormat |
| } |
| }; |
| if (isTimeRange) { |
| var defaultRangeDate = this.dateRangesMap[this.defaultRange]; |
| obj.startDate = defaultRangeDate[0]; |
| obj.endDate = defaultRangeDate[1]; |
| obj.singleDatePicker = false; |
| obj.ranges = this.dateRangesMap; |
| } else { |
| obj.singleDatePicker = true; |
| obj.startDate = moment(); |
| obj.endDate = obj.startDate; |
| } |
| var inputEl = this.ui.metricsTimeLine; |
| |
| inputEl.attr('readonly', true); |
| inputEl.daterangepicker(obj); |
| inputEl.on('apply.daterangepicker', function(ev, picker) { |
| picker.setStartDate(picker.startDate); |
| picker.setEndDate(picker.endDate); |
| var valueString = ""; |
| if (picker.chosenLabel) { |
| if (picker.chosenLabel === "Custom Range") { |
| valueString = picker.startDate.format(Globals.dateTimeFormat) + " - " + picker.endDate.format(Globals.dateTimeFormat); |
| } else { |
| valueString = picker.chosenLabel; |
| } |
| } else { |
| valueString = picker.startDate.format(Globals.dateTimeFormat); |
| } |
| picker.element.val(valueString); |
| that.dateValue = valueString; |
| }); |
| }, |
| hideLoader: function() { |
| if (this.loaderCount === 0) { |
| var className = ".statsContainer"; |
| if (this.isMigrationView) { |
| className += ",.statistics-header"; |
| } |
| this.$(className).removeClass('hide'); |
| this.$('.statsLoader').removeClass('show'); |
| } |
| }, |
| showLoader: function() { |
| var className = ".statsContainer"; |
| if (this.isMigrationView) { |
| className += ",.statistics-header"; |
| } |
| this.$(className).addClass('hide'); |
| this.$('.statsLoader').addClass('show'); |
| }, |
| hideChartLoader: function() { |
| if (this.chartLoaderCount === 0) { |
| // var className = ".chart-container"; |
| // this.$(className).removeClass('hide'); |
| this.$('.statsLoader').removeClass('show'); |
| this.$('.modalOverlay').addClass('hide'); |
| } |
| }, |
| showChartLoader: function() { |
| // var className = ".chart-container"; |
| // this.$(className).addClass('hide'); |
| this.$('.statsLoader').addClass('show'); |
| this.$('.modalOverlay').removeClass('hide'); |
| }, |
| closePanel: function(options) { |
| var el = options.el; |
| el.find(">.panel-heading").attr("aria-expanded", "false"); |
| el.find(">.panel-collapse.collapse").removeClass("in"); |
| }, |
| genrateStatusData: function(stateObject) { |
| var that = this, |
| stats = {}; |
| _.each(stateObject, function(val, key) { |
| var keys = key.split(":"), |
| key = keys[0], |
| subKey = keys[1]; |
| if (stats[key]) { |
| stats[key][subKey] = val; |
| } else { |
| stats[key] = {}; |
| stats[key][subKey] = val; |
| } |
| }); |
| return stats; |
| }, |
| createTable: function(obj) { |
| var that = this, |
| tableBody = '', |
| type = obj.type, |
| data = obj.data; |
| _.each(data, function(value, key, list) { |
| var newValue = that.getValue({ |
| "value": value |
| }); |
| if (type === "classification") { |
| newValue = '<a title="Search for entities associated with \'' + key + '\'" class="linkClicked" href="#!/search/searchResult?searchType=basic&tag=' + key + '">' + newValue + '<a>'; |
| } |
| tableBody += '<tr><td>' + key + '</td><td class="">' + newValue + '</td></tr>'; |
| }); |
| return tableBody; |
| }, |
| renderClassifications: function(options) { |
| var that = this, |
| data = options.data, |
| classificationData = data.tag || {}, |
| tagEntitiesData = classificationData ? classificationData.tagEntities || {} : {}, |
| tagsCount = 0, |
| newTagEntitiesData = {}, |
| tagEntitiesKeys = _.keys(tagEntitiesData); |
| _.each(_.sortBy(tagEntitiesKeys, function(o) { |
| return o.toLocaleLowerCase(); |
| }), function(key) { |
| var val = tagEntitiesData[key]; |
| newTagEntitiesData[key] = val; |
| tagsCount += val; |
| }); |
| tagEntitiesData = newTagEntitiesData; |
| |
| if (!_.isEmpty(tagEntitiesData)) { |
| this.ui.classificationCard.html( |
| that.createTable({ |
| "data": tagEntitiesData, |
| "type": "classification" |
| }) |
| ); |
| this.ui.classification.find(".count").html(" (" + _.numberFormatWithComma(tagsCount) + ")"); |
| if (tagEntitiesKeys.length > this.DATA_MAX_LENGTH) { |
| this.closePanel({ |
| el: this.ui.classification |
| }) |
| } |
| } |
| }, |
| renderEntities: function(options) { |
| var that = this, |
| data = options.data, |
| entityData = data.entity, |
| activeEntities = entityData.entityActive || {}, |
| deletedEntities = entityData.entityDeleted || {}, |
| shellEntities = entityData.entityShell || {}, |
| stats = {}, |
| activeEntityCount = 0, |
| deletedEntityCount = 0, |
| shellEntityCount = 0, |
| createEntityData = function(opt) { |
| var entityData = opt.entityData, |
| type = opt.type; |
| _.each(entityData, function(val, key) { |
| var intVal = _.isUndefined(val) ? 0 : val; |
| if (type == "active") { |
| activeEntityCount += intVal; |
| } |
| if (type == "deleted") { |
| deletedEntityCount += intVal; |
| } |
| if (type == "shell") { |
| shellEntityCount += intVal |
| } |
| intVal = _.numberFormatWithComma(intVal) |
| if (stats[key]) { |
| stats[key][type] = intVal; |
| } else { |
| stats[key] = {}; |
| stats[key][type] = intVal; |
| } |
| }) |
| }; |
| |
| createEntityData({ |
| "entityData": activeEntities, |
| "type": "active" |
| }) |
| createEntityData({ |
| "entityData": deletedEntities, |
| "type": "deleted" |
| }); |
| createEntityData({ |
| "entityData": shellEntities, |
| "type": "shell" |
| }); |
| if (!_.isEmpty(stats)) { |
| var statsKeys = _.keys(stats); |
| this.ui.entityCard.html( |
| EntityTable({ |
| "data": _.pick(stats, _.sortBy(statsKeys, function(o) { |
| return o.toLocaleLowerCase(); |
| })), |
| }) |
| ); |
| this.$('[data-id="activeEntity"]').html(" (" + _.numberFormatWithComma(activeEntityCount) + ")"); |
| this.$('[data-id="deletedEntity"]').html(" (" + _.numberFormatWithComma(deletedEntityCount) + ")"); |
| this.$('[data-id="shellEntity"]').html(" (" + _.numberFormatWithComma(shellEntityCount) + ")"); |
| this.ui.entity.find(".count").html(" (" + _.numberFormatWithComma(data.general.entityCount) + ")"); |
| if (statsKeys.length > this.DATA_MAX_LENGTH) { |
| this.closePanel({ |
| el: this.ui.entity |
| }) |
| } |
| } |
| }, |
| renderStats: function(options) { |
| var that = this, |
| data = this.genrateStatusData(options.valueObject), |
| generalData = options.dataObject, |
| createTable = function(obj) { |
| var tableBody = '', |
| enums = obj.enums, |
| data = obj.data; |
| _.each(data, function(value, key, list) { |
| tableBody += '<tr><td>' + key + '</td><td class="">' + that.getValue({ |
| "value": value, |
| "type": enums[key] |
| }) + '</td></tr>'; |
| }); |
| return tableBody; |
| }; |
| if (!that.isMigrationView && data.Notification) { |
| var tableCol = [{ |
| label: "Total <br> (from " + (that.getValue({ |
| "value": data.Server["startTimeStamp"], |
| "type": Enums.stats.Server["startTimeStamp"], |
| })) + ")", |
| key: "total" |
| }, |
| { |
| label: "Current Hour <br> (from " + (that.getValue({ |
| "value": data.Notification["currentHourStartTime"], |
| "type": Enums.stats.Notification["currentHourStartTime"], |
| })) + ")", |
| key: "currentHour" |
| }, |
| { label: "Previous Hour", key: "previousHour" }, |
| { |
| label: "Current Day <br> (from " + (that.getValue({ |
| "value": data.Notification["currentDayStartTime"], |
| "type": Enums.stats.Notification["currentDayStartTime"], |
| })) + ")", |
| key: "currentDay" |
| }, |
| { label: "Previous Day", key: "previousDay" } |
| ], |
| tableHeader = ["count", "AvgTime", "EntityCreates", "EntityUpdates", "EntityDeletes", "Failed"]; |
| that.ui.notificationCard.html( |
| StatsNotiTable({ |
| "enums": Enums.stats.Notification, |
| "data": data.Notification, |
| "tableHeader": tableHeader, |
| "tableCol": tableCol, |
| "getTmplValue": function(argument, args) { |
| var pickValueFrom = argument.key.concat(args); |
| if (argument.key == "total" && args == "EntityCreates") { |
| pickValueFrom = "totalCreates"; |
| } else if (argument.key == "total" && args == "EntityUpdates") { |
| pickValueFrom = "totalUpdates"; |
| } else if (argument.key == "total" && args == "EntityDeletes") { |
| pickValueFrom = "totalDeletes"; |
| } else if (args == "count") { |
| pickValueFrom = argument.key; |
| } |
| var returnVal = data.Notification[pickValueFrom]; |
| return returnVal ? _.numberFormatWithComma(returnVal) : 0; |
| } |
| }) |
| ); |
| |
| var offsetTableColumn = function(obj) { |
| var returnObj = [] |
| _.each(obj, function(value, key) { |
| returnObj.push({ "label": key, "dataValue": value }); |
| }); |
| return returnObj |
| } |
| |
| that.ui.offsetCard.html( |
| TopicOffsetTable({ |
| data: data.Notification.topicDetails, |
| tableHeader: ["offsetStart", "offsetCurrent", "processedMessageCount", "failedMessageCount", "lastMessageProcessedTime"], |
| tableCol: offsetTableColumn(data.Notification.topicDetails), |
| getTmplValue: function(argument, args) { |
| var returnVal = data.Notification.topicDetails[argument.label][args]; |
| return returnVal ? that.getValue({ value: returnVal, type: Enums.stats.Notification[args] }) : 0; |
| } |
| }) |
| ) |
| that.ui.notificationDetails.removeClass('hide'); |
| } |
| |
| if (data.Server) { |
| that.ui.serverCard.html( |
| createTable({ |
| "enums": _.extend(Enums.stats.Server, Enums.stats.ConnectionStatus, Enums.stats.generalData), |
| "data": _.extend( |
| _.pick(data.Server, 'startTimeStamp', 'activeTimeStamp', 'upTime', 'statusBackendStore', 'statusIndexStore'), |
| _.pick(generalData, 'collectionTime')) |
| }) |
| ); |
| } |
| }, |
| renderSystemDeatils: function(options) { |
| var that = this, |
| data = options.data, |
| systemData = data.system, |
| systemOS = systemData.os || {}, |
| systemRuntimeData = systemData.runtime || {}, |
| systemMemoryData = systemData.memory || {}; |
| if (!_.isEmpty(systemOS)) { |
| that.ui.osCard.html( |
| that.createTable({ |
| "data": systemOS |
| }) |
| ); |
| } |
| if (!_.isEmpty(systemRuntimeData)) { |
| that.ui.runtimeCard.html( |
| that.createTable({ |
| "data": systemRuntimeData |
| }) |
| ); |
| } |
| if (!_.isEmpty(systemMemoryData)) { |
| var memoryTable = CommonViewFunction.propertyTable({ |
| scope: this, |
| formatStringVal: true, |
| valueObject: systemMemoryData, |
| numberFormat: _.numberFormatWithBytes |
| }); |
| that.ui.memoryCard.html( |
| memoryTable); |
| } |
| }, |
| getValue: function(options) { |
| var value = options.value, |
| type = options.type; |
| if (type == 'time') { |
| return Utils.millisecondsToTime(value); |
| } else if (type == 'day') { |
| return Utils.formatDate({ date: value }) |
| } else if (type == 'number') { |
| return _.numberFormatWithComma(value); |
| } else if (type == 'millisecond') { |
| return _.numberFormatWithComma(value) + " millisecond/s"; |
| } else if (type == "status-html") { |
| return '<span class="connection-status ' + value + '"></span>'; |
| } else { |
| return value; |
| } |
| }, |
| renderStackAreaGraps: function(data) { |
| var that = this, |
| data = data; |
| |
| nv.addGraph(function() { |
| var chart = nv.models.stackedAreaChart() |
| .margin({ right: 60 }) |
| .x(function(d) { return d[0] }) //We can modify the data accessor functions... |
| .y(function(d) { return d[1] }) //...in case your data is formatted differently. |
| .useInteractiveGuideline(true) //Tooltips which show all data points. Very nice! |
| .rightAlignYAxis(false) //Let's move the y-axis to the right side. |
| //.transitionDuration(500) |
| .showControls(true) //Allow user to choose 'Stacked', 'Stream', 'Expanded' mode. |
| .clipEdge(true); |
| |
| //Format x-axis labels with custom function. |
| chart.xAxis |
| .tickFormat(function(d) { |
| return d3.time.format('%x')(new Date(d)); |
| }); |
| |
| chart.yAxis |
| .tickFormat(d3.format(',.2f')); |
| |
| var graphTimer = setTimeout(function() { |
| d3.select(that.ui.compareGraph[0]) |
| .datum(data).transition().duration(500) |
| .call(chart); |
| clearTimeout(graphTimer); |
| }, 300); |
| |
| d3.select(window).on('mouseout', function() { |
| d3.selectAll('.nvtooltip').style('opacity', '0'); |
| }); |
| |
| nv.utils.windowResize(chart.update); |
| |
| return chart; |
| }); |
| } |
| }); |
| return StatisticsTimelineView; |
| }); |
