From 48abe4a64bdf48347452f06c61630b5ae8d75944 Mon Sep 17 00:00:00 2001 From: erundle Date: Tue, 8 Sep 2015 13:15:54 -0400 Subject: [PATCH] Fixes: #35 support i18n --- dist/angular-patternfly.js | 44 ++++++++++++++++--- dist/angular-patternfly.min.js | 2 +- src/charts/donut/donut-pct-chart-directive.js | 44 ++++++++++++++++--- test/charts/donut/donut-pct.spec.js | 21 +++++++++ 4 files changed, 100 insertions(+), 11 deletions(-) diff --git a/dist/angular-patternfly.js b/dist/angular-patternfly.js index 42fe9e755..560868d71 100644 --- a/dist/angular-patternfly.js +++ b/dist/angular-patternfly.js @@ -496,6 +496,14 @@ angular.module('patternfly.card').directive('pfCard', function () { *
  • 'percent' - displays the Usage Percent of the Total amount in the center label *
  • 'none' - does not display the center label * + * + * @param {object} lang translated i18n strings
    + * + * @example @@ -557,15 +565,20 @@ angular.module('patternfly.card').directive('pfCard', function () {
    center-label =
    ' none' -
    -
    Custom Tooltip and Center Label
    +
    +
    +
    +
    + i18n String replacement for Available +
    +
    @@ -582,6 +595,10 @@ angular.module('patternfly.card').directive('pfCard', function () { 'total': '1000' }; + $scope.lang = { + 'available': 'Free', + } + $scope.newUsed = $scope.data.used; $scope.$watch('newUsed', function (val) { @@ -607,6 +624,12 @@ angular.module('patternfly.card').directive('pfCard', function () { 'thresholds':{'warning':'60','error':'90'} }; + $scope.availConfigLang = { + 'chartId': 'availChartLang', + 'units': 'GB', + 'thresholds':{'warning':'60','error':'90'} + }; + $scope.availData = { 'used': '350', 'total': '1000' @@ -663,6 +686,7 @@ angular.module('patternfly.card').directive('pfCard', function () {     */ + angular.module('patternfly.charts').directive('pfDonutPctChart', ["c3ChartDefaults", "$timeout", function (c3ChartDefaults, $timeout) { 'use strict'; @@ -671,6 +695,7 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', ["c3ChartDefaul scope: { config: '=', data: '=', + lang: '=', centerLabel: '=?' }, replace: true, @@ -761,7 +786,7 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', ["c3ChartDefaul // default to 'used' info. centerLabelText = { bigText: $scope.data.used, - smText: $scope.config.units + ' Used' }; + smText: $scope.config.units + ' ' + $scope.lang.used }; if ($scope.config.centerLabelFn) { centerLabelText.bigText = $scope.config.centerLabelFn(); @@ -771,10 +796,10 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', ["c3ChartDefaul centerLabelText.smText = ''; } else if ($scope.centerLabel === 'available') { centerLabelText.bigText = $scope.data.available; - centerLabelText.smText = $scope.config.units + ' Available'; + centerLabelText.smText = $scope.config.units + ' ' + $scope.lang.available; } else if ($scope.centerLabel === 'percent') { centerLabelText.bigText = Math.round($scope.data.used / $scope.data.total * 100.0) + '%'; - centerLabelText.smText = 'of ' + $scope.data.total + ' ' + $scope.config.units; + centerLabelText.smText = $scope.lang.of + ' ' + $scope.data.total + ' ' + $scope.config.units; } return centerLabelText; @@ -792,6 +817,7 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', ["c3ChartDefaul } ], link: function (scope, element) { + var setupDonutChartTitle = function () { $timeout(function () { var donutChartTitle, centerLabelText; @@ -817,6 +843,14 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', ["c3ChartDefaul }, 300); }; + var langDefaults = { + 'available': 'Available', + 'used': 'Used', + 'of': 'of' + }; + + scope.lang = angular.extend({}, langDefaults, scope.lang); + scope.$watch('config', function () { scope.updateAll(scope); setupDonutChartTitle(); diff --git a/dist/angular-patternfly.min.js b/dist/angular-patternfly.min.js index 9b2eeee26..2be1e29ae 100644 --- a/dist/angular-patternfly.min.js +++ b/dist/angular-patternfly.min.js @@ -1,2 +1,2 @@ -angular.module("patternfly.card",[]),angular.module("patternfly.charts",[]),angular.module("patternfly.filters",["patternfly.select"]),angular.module("patternfly.form",[]),angular.module("patternfly",["patternfly.autofocus","patternfly.card","patternfly.filters","patternfly.form","patternfly.notification","patternfly.select","patternfly.utils","patternfly.validation","patternfly.views"]),angular.module("patternfly.utils",[]),angular.module("patternfly.views",["patternfly.utils","patternfly.filters"]),angular.module("patternfly.autofocus",[]).directive("pfFocused",["$timeout",function($timeout){"use strict";return{restrict:"A",link:function(scope,element,attrs){scope.$watch(attrs.pfFocused,function(newValue){$timeout(function(){newValue&&(element[0].focus(),element[0].select&&element[0].select())})})}}}]),angular.module("patternfly.card").directive("pfAggregateStatusCard",function(){"use strict";return{restrict:"A",scope:{status:"=",showTopBorder:"@?",altLayout:"@?"},templateUrl:"card/aggregate-status/aggregate-status-card.html",link:function(scope){scope.shouldShowTopBorder="true"===scope.showTopBorder,scope.isAltLayout="true"===scope.altLayout}}}),angular.module("patternfly.card").directive("pfCard",function(){"use strict";return{restrict:"A",transclude:!0,templateUrl:"card/basic/card.html",scope:{headTitle:"@",subTitle:"@?",showTopBorder:"@?"}}}),function(){"use strict";angular.module("patternfly.charts").constant("c3ChartDefaults",{getDefaultDonut:function(title){return{title:title,label:{show:!1},width:12}},getDefaultDonutSize:function(){return{height:185}},getDefaultDonutColor:function(){return{pattern:["#0088CE","#D1D1D1"]}},getDefaultDonutTooltip:function(){return{show:!1}},getDefaultDonutLegend:function(){return{show:!1}},getDefaultDonutConfig:function(title){return{donut:this.getDefaultDonut(title),size:this.getDefaultDonutSize(),legend:this.getDefaultDonutLegend(),color:this.getDefaultDonutColor(),tooltip:this.getDefaultDonutTooltip()}},getDefaultSparklineArea:function(){return{zerobased:!0}},getDefaultSparklineSize:function(){return{height:60}},getDefaultSparklineAxis:function(){return{x:{show:!1},y:{show:!1}}},getDefaultSparklineColor:function(){return{pattern:["#0088ce","#00659c","#3f9c35","#ec7a08","#cc0000"]}},getDefaultSparklineLegend:function(){return{show:!1}},getDefaultSparklinePoint:function(){return{r:1,focus:{expand:{r:4}}}},getDefaultSparklineTooltip:function(){return{contents:function(d){return''+d[0].value+" "+d[0].name+""}}},getDefaultSparklineConfig:function(){return{area:this.getDefaultSparklineArea(),size:this.getDefaultSparklineSize(),axis:this.getDefaultSparklineAxis(),color:this.getDefaultSparklineColor(),legend:this.getDefaultSparklineLegend(),point:this.getDefaultSparklinePoint(),tooltip:this.getDefaultSparklineTooltip()}}})}(),function(){"use strict";angular.module("patternfly.charts").directive("pfC3Chart",["$timeout",function($timeout){return{restrict:"A",scope:{config:"="},template:'
    ',replace:!0,link:function(scope,element,attrs){scope.$watch("config",function(){$timeout(function(){var chartData=scope.config;chartData.bindto="#"+attrs.id,c3.generate(chartData)})},!0)}}}])}(),angular.module("patternfly.charts").directive("pfDonutPctChart",["c3ChartDefaults","$timeout",function(c3ChartDefaults,$timeout){"use strict";return{restrict:"A",scope:{config:"=",data:"=",centerLabel:"=?"},replace:!0,templateUrl:"charts/donut/donut-pct-chart.html",controller:["$scope",function($scope){var donutTooltip;$scope.donutChartId="donutChart",$scope.config.chartId&&($scope.donutChartId=$scope.config.chartId+$scope.donutChartId),$scope.updateAvailable=function(){$scope.data.available=$scope.data.total-$scope.data.used},void 0===$scope.data.available&&$scope.updateAvailable(),$scope.getStatusColor=function(used,thresholds){var color="#0088CE";return thresholds&&(color="#3f9c35",used>=thresholds.error?color="#CC0000":used>=thresholds.warning&&(color="#EC7A08")),color},$scope.statusDonutColor=function(scope){var color,percentUsed;return color={pattern:[]},percentUsed=scope.data.used/scope.data.total*100,color.pattern[0]=$scope.getStatusColor(percentUsed,scope.config.thresholds),color.pattern[1]="#D1D1D1",color},donutTooltip=function(scope){return{contents:function(d){var tooltipHtml;return tooltipHtml=scope.config.tooltipFn?''+scope.config.tooltipFn(d)+"":''+Math.round(100*d[0].ratio)+"% "+$scope.config.units+" "+d[0].name+""}}},$scope.getDonutData=function(scope){return{columns:[["Used",scope.data.used],["Available",scope.data.available]],type:"donut",donut:{label:{show:!1}},groups:[["used","available"]],order:null}},$scope.getCenterLabelText=function(){var centerLabelText;return centerLabelText={bigText:$scope.data.used,smText:$scope.config.units+" Used"},$scope.config.centerLabelFn?(centerLabelText.bigText=$scope.config.centerLabelFn(),centerLabelText.smText=""):"none"===$scope.centerLabel?(centerLabelText.bigText="",centerLabelText.smText=""):"available"===$scope.centerLabel?(centerLabelText.bigText=$scope.data.available,centerLabelText.smText=$scope.config.units+" Available"):"percent"===$scope.centerLabel&&(centerLabelText.bigText=Math.round($scope.data.used/$scope.data.total*100)+"%",centerLabelText.smText="of "+$scope.data.total+" "+$scope.config.units),centerLabelText},$scope.updateAll=function(scope){$scope.updateAvailable(),$scope.config.data=$scope.getDonutData($scope),$scope.config.color=$scope.statusDonutColor($scope),$scope.config.tooltip=donutTooltip(scope)},$scope.config=$.extend(!0,c3ChartDefaults.getDefaultDonutConfig(),$scope.config),$scope.updateAll($scope)}],link:function(scope,element){var setupDonutChartTitle=function(){$timeout(function(){var donutChartTitle,centerLabelText;donutChartTitle=element[0].querySelector("text.c3-chart-arcs-title"),donutChartTitle&&(centerLabelText=scope.getCenterLabelText(),centerLabelText.bigText&&!centerLabelText.smText?donutChartTitle.innerHTML=centerLabelText.bigText:donutChartTitle.innerHTML=''+centerLabelText.bigText+''+centerLabelText.smText+"")},300)};scope.$watch("config",function(){scope.updateAll(scope),setupDonutChartTitle()},!0),scope.$watch("data",function(){scope.updateAll(scope),setupDonutChartTitle()},!0),scope.$watch("centerLabel",function(){setupDonutChartTitle()})}}}]),angular.module("patternfly.charts").directive("pfSparklineChart",["c3ChartDefaults",function(c3ChartDefaults){"use strict";return{restrict:"A",scope:{config:"=",chartData:"=",chartHeight:"=?",showXAxis:"=?",showYAxis:"=?"},replace:!0,templateUrl:"charts/sparkline/sparkline-chart.html",controller:["$scope",function($scope){$scope.sparklineChartId="sparklineChart",$scope.config.chartId&&($scope.sparklineChartId=$scope.config.chartId+$scope.sparklineChartId),$scope.getSparklineData=function(chartData){return{x:chartData.xData[0],columns:[chartData.xData,chartData.yData],type:"area"}},$scope.getTooltipTableHTML=function(tipRows){return'
    '+tipRows+"
    "},$scope.sparklineTooltip=function(){return{contents:function(d){var tipRows,percentUsed;if($scope.config.tooltipFn)tipRows=$scope.config.tooltipFn(d);else switch($scope.config.tooltipType){case"usagePerDay":percentUsed=Math.round(d[0].value/$scope.chartData.total*100),tipRows=' '+d[0].x.toLocaleDateString()+' '+percentUsed+'%: '+d[0].value+" "+$scope.config.units+" "+d[0].name+"";break;case"valuePerDay":tipRows=' '+d[0].x.toLocaleDateString()+' '+d[0].value+" "+d[0].name+"";break;case"percentage":percentUsed=Math.round(d[0].value/$scope.chartData.total*100),tipRows=' '+percentUsed+"%";break;default:tipRows=c3ChartDefaults.getDefaultSparklineTooltip().contents(d)}return $scope.getTooltipTableHTML(tipRows)},position:function(data,width,height,element){var center,top,chartBox,graphOffsetX,x;try{return center=parseInt(element.getAttribute("x")),top=parseInt(element.getAttribute("y")),chartBox=document.querySelector("#"+$scope.sparklineChartId).getBoundingClientRect(),graphOffsetX=document.querySelector("#"+$scope.sparklineChartId+" g.c3-axis-y").getBoundingClientRect().right,x=Math.max(0,center+graphOffsetX-chartBox.left-Math.floor(width/2)),{top:top-height,left:Math.min(x,chartBox.width-width)}}catch(e){}}}},void 0===$scope.showXAxis&&($scope.showXAxis=void 0!==$scope.config.showAxis&&$scope.config.showAxis),void 0===$scope.showYAxis&&($scope.showYAxis=void 0!==$scope.config.showAxis&&$scope.config.showAxis),$scope.defaultConfig=c3ChartDefaults.getDefaultSparklineConfig(),$scope.defaultConfig.axis={x:{show:$scope.showXAxis===!0,type:"timeseries",tick:{format:function(){return""}}},y:{show:$scope.showYAxis===!0,tick:{format:function(){return""}}}},$scope.defaultConfig.tooltip=$scope.sparklineTooltip(),$scope.chartHeight&&($scope.defaultConfig.size.height=$scope.chartHeight),$scope.defaultConfig.units="",$scope.config=$.extend(!0,angular.copy($scope.defaultConfig),$scope.config),$scope.config.data=$scope.getSparklineData($scope.chartData)}],link:function(scope){scope.$watch("config",function(){scope.config=$.extend(!0,angular.copy(scope.defaultConfig),scope.config)},!0),scope.$watch("chartHeight",function(){scope.config.size.height=scope.chartHeight}),scope.$watch("showXAxis",function(){scope.config.axis.x.show=scope.showXAxis===!0}),scope.$watch("showYAxis",function(){scope.config.axis.y.show=scope.showYAxis===!0}),scope.$watch("chartData",function(){scope.config.data=scope.getSparklineData(scope.chartData)},!0)}}}]),angular.module("patternfly.charts").directive("pfTrendsChart",function(){"use strict";return{restrict:"A",scope:{config:"=",chartData:"=",chartHeight:"=?",showXAxis:"=?",showYAxis:"=?"},replace:!0,templateUrl:"charts/trends/trends-chart.html"}}),angular.module("patternfly.charts").directive("pfUtilizationChart",function(){"use strict";return{restrict:"A",scope:{chartData:"=",config:"=",centerLabel:"=?",donutConfig:"=",sparklineConfig:"=",sparklineChartHeight:"=?",showSparklineXAxis:"=?",showSparklineYAxis:"=?"},replace:!0,templateUrl:"charts/utilization/utilization-chart.html",controller:["$scope",function($scope){void 0===$scope.centerLabel&&($scope.centerLabel="used"),void 0===$scope.donutConfig.units&&($scope.donutConfig.units=$scope.config.units),void 0===$scope.chartData.available&&($scope.chartData.available=$scope.chartData.total-$scope.chartData.used),$scope.config.units=$scope.config.units||$scope.units}],link:function(scope,element){var setupCurrentValues=function(){"available"===scope.centerLabel?(scope.currentValue=scope.chartData.used,scope.currentText="Used"):(scope.currentValue=scope.chartData.total-scope.chartData.used,scope.currentText="Available")};scope.$watch("centerLabel",function(){setupCurrentValues()})}}}),angular.module("patternfly.filters").directive("pfSimpleFilter",["$document",function($document){"use strict";return{restrict:"A",scope:{config:"="},transclude:!1,templateUrl:"filters/simple-filter.html",controller:["$scope",function($scope){var defaultConfig={fields:[],resultsCount:0};$scope.setupConfig=function(){$scope.config=$.extend(!0,angular.copy(defaultConfig),$scope.config),$scope.currentField||($scope.currentField=$scope.config.fields[0],$scope.config.currentValue=null),void 0===$scope.config.currentValue&&($scope.config.currentValue=null),$scope.config.appliedFilters||($scope.config.appliedFilters=[])},$scope.selectField=function(item){$scope.currentField=item,$scope.config.currentValue=null},$scope.selectValue=function(filterValue){$scope.addFilter($scope.currentField,filterValue),$scope.config.currentValue=null},$scope.filterExists=function(filter){var found=!1;return $scope.config.appliedFilters.forEach(function(nextFilter){nextFilter.title===filter.title&&nextFilter.value===filter.value&&(found=!0)}),found},$scope.addFilter=function(field,value){var newFilter={id:field.id,title:field.title,value:value};$scope.filterExists(newFilter)||($scope.config.appliedFilters.push(newFilter),$scope.config.onFilterChange&&$scope.config.onFilterChange($scope.config.appliedFilters))},$scope.onValueKeyPress=function(keyEvent){13===keyEvent.which&&($scope.addFilter($scope.currentField,$scope.config.currentValue),$scope.config.currentValue=void 0)},$scope.clearFilter=function(item){var newFilters=[];$scope.config.appliedFilters.forEach(function(filter){(item.title!==filter.title||item.value!==filter.value)&&newFilters.push(filter)}),$scope.config.appliedFilters=newFilters,$scope.config.onFilterChange&&$scope.config.onFilterChange($scope.config.appliedFilters)},$scope.clearAllFilters=function(){$scope.config.appliedFilters=[],$scope.config.onFilterChange&&$scope.config.onFilterChange($scope.config.appliedFilters)}}],link:function(scope,element,attrs){scope.$watch("config",function(){scope.setupConfig()},!0)}}}]),angular.module("patternfly.form").directive("pfDatepicker",function(){"use strict";return{replace:!0,restrict:"A",require:"^form",templateUrl:"form/datepicker/datepicker.html",scope:{options:"=",date:"="},link:function($scope,element){element.datepicker($scope.options),element.datepicker("update",$scope.date),element.datepicker($scope.date).on("changeDate",function(elem){$scope.$apply(function(){$scope.date=elem.date})}),$scope.$watch("date",function(newValue,oldValue){oldValue!==newValue&&element.datepicker("update",newValue)})}}}),angular.module("patternfly.form").directive("pfFormButtons",function(){"use strict";return{replace:!0,require:"^form",templateUrl:"form/form-buttons/form-buttons.html",scope:{pfHandleCancel:"&pfOnCancel",pfHandleSave:"&pfOnSave",pfWorking:"=",pfButtonContainerClass:"@"},link:function(scope,iElement,iAttrs,controller){void 0===scope.pfWorking&&(scope.pfWorking=!1),scope.isInvalid=function(){var invalid=controller.$invalid;return angular.forEach(controller,function(value){value&&value.$error&&value.$error.server&&(invalid=!1)}),invalid}}}}),angular.module("patternfly.form").directive("pfFormGroup",function(){"use strict";function getInput(element){var input=element.find("table");return 0===input.length&&(input=element.find("input"),0===input.length&&(input=element.find("select"),0===input.length&&(input=element.find("textarea")))),input}return{transclude:!0,replace:!0,require:"^form",templateUrl:"form/form-group/form-group.html",scope:{pfLabel:"@",pfField:"@",pfLabelClass:"@",pfInputClass:"@"},link:function(scope,iElement,iAttrs,controller){var field,input=getInput(iElement),type=input.attr("type");iAttrs.pfLabelClass||(iAttrs.pfLabelClass="col-sm-2"),iAttrs.pfInputClass||(iAttrs.pfInputClass="col-sm-5"),scope.pfField||(scope.pfField=input.attr("id")),field=scope.pfField,-1===["checkbox","radio","time"].indexOf(type)&&input.addClass("form-control"),input.attr("required")&&iElement.addClass("required"),controller[field]&&(scope.error=controller[field].$error),scope.hasErrors=function(){return controller[field]&&controller[field].$invalid&&controller[field].$dirty}}}}),angular.module("patternfly.notification",[]).provider("Notifications",function(){"use strict";this.delay=5e3,this.verbose=!0,this.notifications={},this.persist={error:!0,httpError:!0},this.setDelay=function(delay){return this.delay=delay,this},this.setVerbose=function(verbose){return this.verbose=verbose,this},this.setPersist=function(persist){this.persist=persist},this.$get=["$rootScope","$timeout","$log",function($rootScope,$timeout,$log){function createNotifyMethod(mode){return function(message){notifications.message(modes[mode].type,modes[mode].header,message,persist[mode]),verbose&&$log[modes[mode].log](message)}}var delay=this.delay,notifications=this.notifications,verbose=this.verbose,persist=this.persist,scheduleMessagePop=function(){$timeout(function(){var i;for(i=0;i<$rootScope.notifications.data.length;i++)$rootScope.notifications.data[i].isPersistent||$rootScope.notifications.data.splice(i,1)},delay)},modes={info:{type:"info",header:"Info!",log:"info"},success:{type:"success",header:"Success!",log:"info"},error:{type:"danger",header:"Error!",log:"error"},warn:{type:"warning",header:"Warning!",log:"warn"}};return $rootScope.notifications={},$rootScope.notifications.data=[],$rootScope.notifications.remove=function(index){$rootScope.notifications.data.splice(index,1)},$rootScope.notifications||($rootScope.notifications.data=[]),notifications.message=function(type,header,message,isPersistent){$rootScope.notifications.data.push({type:type,header:header,message:message,isPersistent:isPersistent}),scheduleMessagePop()},angular.forEach(modes,function(mode,index){notifications[index]=createNotifyMethod(index)}),notifications.httpError=function(message,httpResponse){message+=" ("+(httpResponse.data.message||httpResponse.data.cause||httpResponse.data.cause||httpResponse.data.errorMessage)+")",notifications.message("danger","Error!",message,persist.httpError),verbose&&$log.error(message)},notifications}]}),angular.module("patternfly.notification").directive("pfNotification",function(){"use strict";return{scope:{pfNotificationType:"=",pfNotificationMessage:"=",pfNotificationHeader:"=",pfNotificationPersistent:"=",pfNotificationIndex:"="},restrict:"E",templateUrl:"notification/notification.html"}}),angular.module("patternfly.notification").directive("pfNotificationList",function(){"use strict";return{restrict:"E",templateUrl:"notification/notification-list.html"}}),angular.module("patternfly.select",[]).directive("pfSelect",["$timeout",function($timeout){"use strict";return{restrict:"A",require:"?ngModel",scope:{selectPickerOptions:"=pfSelect"},link:function(scope,element,attrs,ngModel){var optionCollectionList,optionCollection,$render=ngModel.$render;element.selectpicker(scope.selectPickerOptions),ngModel.$render=function(){$render.apply(this,arguments),$timeout(function(){element.selectpicker("refresh")},0,!1)},attrs.ngOptions&&(optionCollectionList=attrs.ngOptions.split("in "),optionCollection=optionCollectionList[optionCollectionList.length-1],scope.$watchCollection(optionCollection,function(){element.selectpicker("refresh")})),attrs.$observe("disabled",function(){element.selectpicker("refresh")})}}}]),angular.module("patternfly.utils").directive("pfTransclude",function(){"use strict";return{restrict:"A",link:function($scope,$element,$attrs,controller,$transclude){var iChildScope,iScopeType;if(!$transclude)throw new Error("pfTransclude - Illegal use of pfTransclude directive in the template! No parent directive that requires a transclusion found. Element: {0}");switch(iScopeType=$attrs.pfTransclude||"sibling"){case"sibling":$transclude(function(clone){$element.empty(),$element.append(clone)});break;case"parent":$transclude($scope,function(clone){$element.empty(),$element.append(clone)});break;case"child":iChildScope=$scope.$new(),$transclude(iChildScope,function(clone){$element.empty(),$element.append(clone),$element.on("$destroy",function(){iChildScope.$destroy()})})}}}}),angular.module("patternfly.validation",[]).directive("pfValidation",["$timeout",function($timeout){"use strict";return{restrict:"A",require:"ngModel",scope:{pfValidation:"&",pfValidationDisabled:"="},link:function(scope,element,attrs,ctrl){function validate(){var valid,val=scope.inputCtrl.$modelValue,valFunc=scope.pfValidation({input:val});attrs.pfValidation||(valFunc=!0),valid=!val||valFunc||""===val,toggleErrorClass(scope.valEnabled&&!valid?!0:!1)}function toggleErrorClass(add){var messageElement=element.next(),parentElement=element.parent(),hasErrorM=parentElement.hasClass("has-error"),wasHidden=messageElement.hasClass("ng-hide");scope.inputCtrl.$setValidity("pf-validation",!add),add&&(hasErrorM||parentElement.addClass("has-error"),wasHidden&&messageElement.removeClass("ng-hide")),add||(hasErrorM&&parentElement.removeClass("has-error"),wasHidden||messageElement.addClass("ng-hide"))}scope.inputCtrl=ctrl,scope.valEnabled=!attrs.pfValidationDisabled,scope.$watch("pfValidationDisabled",function(newVal){scope.valEnabled=!newVal,newVal?(scope.inputCtrl.$setValidity("pfValidation",!0),toggleErrorClass(!1)):validate()}),attrs.pfValidation?$timeout(function(){validate()},0):!scope.inputCtrl.$valid&&scope.inputCtrl.$dirty&&toggleErrorClass(!0),scope.$watch("inputCtrl.$valid",function(isValid){toggleErrorClass(isValid?!1:!0)}),scope.$watch("inputCtrl.$modelValue",function(){validate()})}}}]),angular.module("patternfly.views").directive("pfDataList",[function(){"use strict";return{restrict:"A",scope:{config:"=?",items:"=",eventId:"@id"},transclude:!0,templateUrl:"views/datalist/data-list.html",controller:["$scope",function($scope){if($scope.defaultConfig={selectItems:!1,multiSelect:!1,dblClick:!1,selectionMatchProp:"uuid",selectedItems:[],checkDisabled:!1,showSelectBox:!0,rowHeight:36,onSelect:null,onSelectionChange:null,onCheckBoxChange:null,onClick:null,onDblClick:null},$scope.config=$.extend(!0,angular.copy($scope.defaultConfig),$scope.config),$scope.config.selectItems&&$scope.config.showSelectBox)throw new Error("pfDataList - Illegal use of pfDataList directive! Cannot allow both select box and click selection in the same data list.")}],link:function(scope,element,attrs){attrs.$observe("config",function(){scope.config=$.extend(!0,angular.copy(scope.defaultConfig),scope.config),scope.config.selectItems||(scope.config.selectedItems=[]),!scope.config.multiSelect&&scope.config.selectedItems&&scope.config.selectedItems.length>0&&(scope.config.selectedItems=[scope.config.selectedItems[0]])}),scope.itemClick=function(e,item){var alreadySelected,selectionChanged=!1,continueEvent=!0;return scope.checkDisabled(item)?continueEvent:(scope.config&&scope.config.selectItems&&item&&(scope.config.multiSelect&&!scope.config.dblClick?(alreadySelected=_.find(scope.config.selectedItems,function(itemObj){return itemObj===item}),alreadySelected?scope.config.selectedItems=_.without(scope.config.selectedItems,item):(scope.config.selectedItems.push(item),selectionChanged=!0)):scope.config.selectedItems[0]===item?(scope.config.dblClick||(scope.config.selectedItems=[],selectionChanged=!0),continueEvent=!1):(scope.config.selectedItems=[item],selectionChanged=!0),selectionChanged&&scope.config.onSelect&&scope.config.onSelect(item,e),selectionChanged&&scope.config.onSelectionChange&&scope.config.onSelectionChange(scope.config.selectedItems,e)),scope.config.onClick&&scope.config.onClick(item,e),continueEvent)},scope.dblClick=function(e,item){scope.config.onDblClick&&scope.config.onDblClick(item,e)},scope.checkBoxChange=function(item){scope.config.onCheckBoxChange&&scope.config.onCheckBoxChange(item)},scope.isSelected=function(item){var matchProp=scope.config.selectionMatchProp,selected=!1;return scope.config.showSelectBox?selected=item.selected:scope.config.selectItems&&scope.config.selectedItems.length&&(selected=_.find(scope.config.selectedItems,function(itemObj){return itemObj[matchProp]===item[matchProp]})),selected},scope.checkDisabled=function(item){return scope.config.checkDisabled&&scope.config.checkDisabled(item)}}}}]),angular.module("patternfly.views").directive("pfDataTiles",[function(){"use strict";return{restrict:"A",scope:{config:"=?",items:"=",eventId:"@id"},transclude:!0,templateUrl:"views/datatiles/data-tiles.html",controller:["$scope",function($scope){if($scope.defaultConfig={selectItems:!1,multiSelect:!1,dblClick:!1,selectionMatchProp:"uuid",selectedItems:[],checkDisabled:!1,showSelectBox:!0,onSelect:null,onSelectionChange:null,onCheckBoxChange:null,onClick:null,onDblClick:null},$scope.config=$.extend(!0,angular.copy($scope.defaultConfig),$scope.config),$scope.config.selectItems&&$scope.config.showSelectBox)throw new Error("pfDataTiles - Illegal use of pfDataTiles directive! Cannot allow both select box and click selection in the same data tiles.")}],link:function(scope,element,attrs){attrs.$observe("config",function(){scope.config=$.extend(!0,angular.copy(scope.defaultConfig),scope.config),scope.config.selectItems||(scope.config.selectedItems=[]),!scope.config.multiSelect&&scope.config.selectedItems&&scope.config.selectedItems.length>0&&(scope.config.selectedItems=[scope.config.selectedItems[0]])}),scope.itemClick=function(e,item){var alreadySelected,selectionChanged=!1,continueEvent=!0;return scope.checkDisabled(item)?continueEvent:(scope.config&&scope.config.selectItems&&item&&(scope.config.multiSelect&&!scope.config.dblClick?(alreadySelected=_.find(scope.config.selectedItems,function(itemObj){return itemObj===item}),alreadySelected?scope.config.selectedItems=_.without(scope.config.selectedItems,item):(scope.config.selectedItems.push(item),selectionChanged=!0)):scope.config.selectedItems[0]===item?(scope.config.dblClick||(scope.config.selectedItems=[],selectionChanged=!0),continueEvent=!1):(scope.config.selectedItems=[item],selectionChanged=!0),selectionChanged&&scope.config.onSelect&&scope.config.onSelect(item,e),selectionChanged&&scope.config.onSelectionChange&&scope.config.onSelectionChange(scope.config.selectedItems,e)),scope.config.onClick&&scope.config.onClick(item,e),continueEvent)},scope.dblClick=function(e,item){scope.config.onDblClick&&scope.config.onDblClick(item,e)},scope.checkBoxChange=function(item){scope.config.onCheckBoxChange&&scope.config.onCheckBoxChange(item)},scope.isSelected=function(item){var matchProp=scope.config.selectionMatchProp,selected=!1;if(scope.config.showSelectBox)selected=item.selected;else if(scope.config.selectedItems.length)return _.find(scope.config.selectedItems,function(itemObj){return itemObj[matchProp]===item[matchProp]});return selected},scope.checkDisabled=function(item){return scope.config.checkDisabled&&scope.config.checkDisabled(item)}}}}]),angular.module("patternfly.views").directive("pfDataToolbar",function(){"use strict";return{restrict:"A",scope:{config:"="},replace:!0,transclude:!1,templateUrl:"views/toolbar/data-toolbar.html",controller:["$scope",function($scope){$scope.viewSelected=function(viewId){$scope.config.viewsConfig.currentView=viewId,$scope.config.viewsConfig.onViewSelect&&!$scope.checkViewDisabled(viewId)&&$scope.config.viewsConfig.onViewSelect(viewId)},$scope.isViewSelected=function(viewId){return $scope.config.viewsConfig&&$scope.config.viewsConfig.currentView===viewId},$scope.checkViewDisabled=function(view){return $scope.config.viewsConfig.checkViewDisabled&&$scope.config.viewsConfig.checkViewDisabled(view)}}],link:function(scope,element,attrs){scope.$watch("config",function(){scope.config&&scope.config.viewsConfig&&scope.config.viewsConfig.views&&(scope.config.viewsConfig.viewsList=angular.copy(scope.config.viewsConfig.views),scope.config.viewsConfig.currentView||(scope.config.viewsConfig.currentView=scope.config.viewsConfig.viewsList[0]))},!0)}}}),function(){"use strict";angular.module("patternfly.views").constant("pfViewUtils",{getDashboardView:function(title){return{id:"dashboardView",title:title||"Dashboard View",iconClass:"fa fa-dashboard"}},getTilesView:function(title){return{id:"tilesView",title:title||"Tiles View",iconClass:"fa fa-th"}},getListView:function(title){return{id:"listView",title:title||"List View",iconClass:"fa fa-th-list"}},getTableView:function(title){return{id:"tableView",title:title||"Table View",iconClass:"fa fa-table"}},getTopologyView:function(title){return{id:"topologyView",title:title||"Topology View",iconClass:"fa fa-sitemap"}}})}(),angular.module("patternfly.card").run(["$templateCache",function($templateCache){"use strict";$templateCache.put("card/aggregate-status/aggregate-status-card.html",'

    {{status.count}} {{status.title}} {{status.count}} {{status.title}}

    {{ notification.count }} {{ notification.count }}

    '),$templateCache.put("card/basic/card.html","

    {{headTitle}}

    {{subTitle}}
    ")}]),angular.module("patternfly.charts").run(["$templateCache",function($templateCache){"use strict";$templateCache.put("charts/donut/donut-pct-chart.html","
    "),$templateCache.put("charts/sparkline/sparkline-chart.html","
    "),$templateCache.put("charts/trends/trends-chart.html","
    {{config.title}} {{chartData.yData[chartData.yData.length-1]}} {{config.units}}
    {{config.timeFrame}}
    "),$templateCache.put("charts/utilization/utilization-chart.html",'

    {{config.title}}

    {{currentValue}}

    {{currentText}}
    of {{chartData.total}} {{config.units}}
    {{legendLeftText}} {{legendRightText}}
    ')}]),angular.module("patternfly.filters").run(["$templateCache",function($templateCache){"use strict";$templateCache.put("filters/simple-filter.html",'
    {{config.resultsCount}} Results

    Active filters:

    • {{filter.title}}: {{filter.value}}

    Clear All Filters

    '); +angular.module("patternfly.card",[]),angular.module("patternfly.charts",[]),angular.module("patternfly.filters",["patternfly.select"]),angular.module("patternfly.form",[]),angular.module("patternfly",["patternfly.autofocus","patternfly.card","patternfly.filters","patternfly.form","patternfly.notification","patternfly.select","patternfly.utils","patternfly.validation","patternfly.views"]),angular.module("patternfly.utils",[]),angular.module("patternfly.views",["patternfly.utils","patternfly.filters"]),angular.module("patternfly.autofocus",[]).directive("pfFocused",["$timeout",function($timeout){"use strict";return{restrict:"A",link:function(scope,element,attrs){scope.$watch(attrs.pfFocused,function(newValue){$timeout(function(){newValue&&(element[0].focus(),element[0].select&&element[0].select())})})}}}]),angular.module("patternfly.card").directive("pfAggregateStatusCard",function(){"use strict";return{restrict:"A",scope:{status:"=",showTopBorder:"@?",altLayout:"@?"},templateUrl:"card/aggregate-status/aggregate-status-card.html",link:function(scope){scope.shouldShowTopBorder="true"===scope.showTopBorder,scope.isAltLayout="true"===scope.altLayout}}}),angular.module("patternfly.card").directive("pfCard",function(){"use strict";return{restrict:"A",transclude:!0,templateUrl:"card/basic/card.html",scope:{headTitle:"@",subTitle:"@?",showTopBorder:"@?"}}}),function(){"use strict";angular.module("patternfly.charts").constant("c3ChartDefaults",{getDefaultDonut:function(title){return{title:title,label:{show:!1},width:12}},getDefaultDonutSize:function(){return{height:185}},getDefaultDonutColor:function(){return{pattern:["#0088CE","#D1D1D1"]}},getDefaultDonutTooltip:function(){return{show:!1}},getDefaultDonutLegend:function(){return{show:!1}},getDefaultDonutConfig:function(title){return{donut:this.getDefaultDonut(title),size:this.getDefaultDonutSize(),legend:this.getDefaultDonutLegend(),color:this.getDefaultDonutColor(),tooltip:this.getDefaultDonutTooltip()}},getDefaultSparklineArea:function(){return{zerobased:!0}},getDefaultSparklineSize:function(){return{height:60}},getDefaultSparklineAxis:function(){return{x:{show:!1},y:{show:!1}}},getDefaultSparklineColor:function(){return{pattern:["#0088ce","#00659c","#3f9c35","#ec7a08","#cc0000"]}},getDefaultSparklineLegend:function(){return{show:!1}},getDefaultSparklinePoint:function(){return{r:1,focus:{expand:{r:4}}}},getDefaultSparklineTooltip:function(){return{contents:function(d){return''+d[0].value+" "+d[0].name+""}}},getDefaultSparklineConfig:function(){return{area:this.getDefaultSparklineArea(),size:this.getDefaultSparklineSize(),axis:this.getDefaultSparklineAxis(),color:this.getDefaultSparklineColor(),legend:this.getDefaultSparklineLegend(),point:this.getDefaultSparklinePoint(),tooltip:this.getDefaultSparklineTooltip()}}})}(),function(){"use strict";angular.module("patternfly.charts").directive("pfC3Chart",["$timeout",function($timeout){return{restrict:"A",scope:{config:"="},template:'
    ',replace:!0,link:function(scope,element,attrs){scope.$watch("config",function(){$timeout(function(){var chartData=scope.config;chartData.bindto="#"+attrs.id,c3.generate(chartData)})},!0)}}}])}(),angular.module("patternfly.charts").directive("pfDonutPctChart",["c3ChartDefaults","$timeout",function(c3ChartDefaults,$timeout){"use strict";return{restrict:"A",scope:{config:"=",data:"=",lang:"=",centerLabel:"=?"},replace:!0,templateUrl:"charts/donut/donut-pct-chart.html",controller:["$scope",function($scope){var donutTooltip;$scope.donutChartId="donutChart",$scope.config.chartId&&($scope.donutChartId=$scope.config.chartId+$scope.donutChartId),$scope.updateAvailable=function(){$scope.data.available=$scope.data.total-$scope.data.used},void 0===$scope.data.available&&$scope.updateAvailable(),$scope.getStatusColor=function(used,thresholds){var color="#0088CE";return thresholds&&(color="#3f9c35",used>=thresholds.error?color="#CC0000":used>=thresholds.warning&&(color="#EC7A08")),color},$scope.statusDonutColor=function(scope){var color,percentUsed;return color={pattern:[]},percentUsed=scope.data.used/scope.data.total*100,color.pattern[0]=$scope.getStatusColor(percentUsed,scope.config.thresholds),color.pattern[1]="#D1D1D1",color},donutTooltip=function(scope){return{contents:function(d){var tooltipHtml;return tooltipHtml=scope.config.tooltipFn?''+scope.config.tooltipFn(d)+"":''+Math.round(100*d[0].ratio)+"% "+$scope.config.units+" "+d[0].name+""}}},$scope.getDonutData=function(scope){return{columns:[["Used",scope.data.used],["Available",scope.data.available]],type:"donut",donut:{label:{show:!1}},groups:[["used","available"]],order:null}},$scope.getCenterLabelText=function(){var centerLabelText;return centerLabelText={bigText:$scope.data.used,smText:$scope.config.units+" "+$scope.lang.used},$scope.config.centerLabelFn?(centerLabelText.bigText=$scope.config.centerLabelFn(),centerLabelText.smText=""):"none"===$scope.centerLabel?(centerLabelText.bigText="",centerLabelText.smText=""):"available"===$scope.centerLabel?(centerLabelText.bigText=$scope.data.available,centerLabelText.smText=$scope.config.units+" "+$scope.lang.available):"percent"===$scope.centerLabel&&(centerLabelText.bigText=Math.round($scope.data.used/$scope.data.total*100)+"%",centerLabelText.smText=$scope.lang.of+" "+$scope.data.total+" "+$scope.config.units),centerLabelText},$scope.updateAll=function(scope){$scope.updateAvailable(),$scope.config.data=$scope.getDonutData($scope),$scope.config.color=$scope.statusDonutColor($scope),$scope.config.tooltip=donutTooltip(scope)},$scope.config=$.extend(!0,c3ChartDefaults.getDefaultDonutConfig(),$scope.config),$scope.updateAll($scope)}],link:function(scope,element){var setupDonutChartTitle=function(){$timeout(function(){var donutChartTitle,centerLabelText;donutChartTitle=element[0].querySelector("text.c3-chart-arcs-title"),donutChartTitle&&(centerLabelText=scope.getCenterLabelText(),centerLabelText.bigText&&!centerLabelText.smText?donutChartTitle.innerHTML=centerLabelText.bigText:donutChartTitle.innerHTML=''+centerLabelText.bigText+''+centerLabelText.smText+"")},300)},langDefaults={available:"Available",used:"Used",of:"of"};scope.lang=angular.extend({},langDefaults,scope.lang),scope.$watch("config",function(){scope.updateAll(scope),setupDonutChartTitle()},!0),scope.$watch("data",function(){scope.updateAll(scope),setupDonutChartTitle()},!0),scope.$watch("centerLabel",function(){setupDonutChartTitle()})}}}]),angular.module("patternfly.charts").directive("pfSparklineChart",["c3ChartDefaults",function(c3ChartDefaults){"use strict";return{restrict:"A",scope:{config:"=",chartData:"=",chartHeight:"=?",showXAxis:"=?",showYAxis:"=?"},replace:!0,templateUrl:"charts/sparkline/sparkline-chart.html",controller:["$scope",function($scope){$scope.sparklineChartId="sparklineChart",$scope.config.chartId&&($scope.sparklineChartId=$scope.config.chartId+$scope.sparklineChartId),$scope.getSparklineData=function(chartData){return{x:chartData.xData[0],columns:[chartData.xData,chartData.yData],type:"area"}},$scope.getTooltipTableHTML=function(tipRows){return'
    '+tipRows+"
    "},$scope.sparklineTooltip=function(){return{contents:function(d){var tipRows,percentUsed;if($scope.config.tooltipFn)tipRows=$scope.config.tooltipFn(d);else switch($scope.config.tooltipType){case"usagePerDay":percentUsed=Math.round(d[0].value/$scope.chartData.total*100),tipRows=' '+d[0].x.toLocaleDateString()+' '+percentUsed+'%: '+d[0].value+" "+$scope.config.units+" "+d[0].name+"";break;case"valuePerDay":tipRows=' '+d[0].x.toLocaleDateString()+' '+d[0].value+" "+d[0].name+"";break;case"percentage":percentUsed=Math.round(d[0].value/$scope.chartData.total*100),tipRows=' '+percentUsed+"%";break;default:tipRows=c3ChartDefaults.getDefaultSparklineTooltip().contents(d)}return $scope.getTooltipTableHTML(tipRows)},position:function(data,width,height,element){var center,top,chartBox,graphOffsetX,x;try{return center=parseInt(element.getAttribute("x")),top=parseInt(element.getAttribute("y")),chartBox=document.querySelector("#"+$scope.sparklineChartId).getBoundingClientRect(),graphOffsetX=document.querySelector("#"+$scope.sparklineChartId+" g.c3-axis-y").getBoundingClientRect().right,x=Math.max(0,center+graphOffsetX-chartBox.left-Math.floor(width/2)),{top:top-height,left:Math.min(x,chartBox.width-width)}}catch(e){}}}},void 0===$scope.showXAxis&&($scope.showXAxis=void 0!==$scope.config.showAxis&&$scope.config.showAxis),void 0===$scope.showYAxis&&($scope.showYAxis=void 0!==$scope.config.showAxis&&$scope.config.showAxis),$scope.defaultConfig=c3ChartDefaults.getDefaultSparklineConfig(),$scope.defaultConfig.axis={x:{show:$scope.showXAxis===!0,type:"timeseries",tick:{format:function(){return""}}},y:{show:$scope.showYAxis===!0,tick:{format:function(){return""}}}},$scope.defaultConfig.tooltip=$scope.sparklineTooltip(),$scope.chartHeight&&($scope.defaultConfig.size.height=$scope.chartHeight),$scope.defaultConfig.units="",$scope.config=$.extend(!0,angular.copy($scope.defaultConfig),$scope.config),$scope.config.data=$scope.getSparklineData($scope.chartData)}],link:function(scope){scope.$watch("config",function(){scope.config=$.extend(!0,angular.copy(scope.defaultConfig),scope.config)},!0),scope.$watch("chartHeight",function(){scope.config.size.height=scope.chartHeight}),scope.$watch("showXAxis",function(){scope.config.axis.x.show=scope.showXAxis===!0}),scope.$watch("showYAxis",function(){scope.config.axis.y.show=scope.showYAxis===!0}),scope.$watch("chartData",function(){scope.config.data=scope.getSparklineData(scope.chartData)},!0)}}}]),angular.module("patternfly.charts").directive("pfTrendsChart",function(){"use strict";return{restrict:"A",scope:{config:"=",chartData:"=",chartHeight:"=?",showXAxis:"=?",showYAxis:"=?"},replace:!0,templateUrl:"charts/trends/trends-chart.html"}}),angular.module("patternfly.charts").directive("pfUtilizationChart",function(){"use strict";return{restrict:"A",scope:{chartData:"=",config:"=",centerLabel:"=?",donutConfig:"=",sparklineConfig:"=",sparklineChartHeight:"=?",showSparklineXAxis:"=?",showSparklineYAxis:"=?"},replace:!0,templateUrl:"charts/utilization/utilization-chart.html",controller:["$scope",function($scope){void 0===$scope.centerLabel&&($scope.centerLabel="used"),void 0===$scope.donutConfig.units&&($scope.donutConfig.units=$scope.config.units),void 0===$scope.chartData.available&&($scope.chartData.available=$scope.chartData.total-$scope.chartData.used),$scope.config.units=$scope.config.units||$scope.units}],link:function(scope,element){var setupCurrentValues=function(){"available"===scope.centerLabel?(scope.currentValue=scope.chartData.used,scope.currentText="Used"):(scope.currentValue=scope.chartData.total-scope.chartData.used,scope.currentText="Available")};scope.$watch("centerLabel",function(){setupCurrentValues()})}}}),angular.module("patternfly.filters").directive("pfSimpleFilter",["$document",function($document){"use strict";return{restrict:"A",scope:{config:"="},transclude:!1,templateUrl:"filters/simple-filter.html",controller:["$scope",function($scope){var defaultConfig={fields:[],resultsCount:0};$scope.setupConfig=function(){$scope.config=$.extend(!0,angular.copy(defaultConfig),$scope.config),$scope.currentField||($scope.currentField=$scope.config.fields[0],$scope.config.currentValue=null),void 0===$scope.config.currentValue&&($scope.config.currentValue=null),$scope.config.appliedFilters||($scope.config.appliedFilters=[])},$scope.selectField=function(item){$scope.currentField=item,$scope.config.currentValue=null},$scope.selectValue=function(filterValue){$scope.addFilter($scope.currentField,filterValue),$scope.config.currentValue=null},$scope.filterExists=function(filter){var found=!1;return $scope.config.appliedFilters.forEach(function(nextFilter){nextFilter.title===filter.title&&nextFilter.value===filter.value&&(found=!0)}),found},$scope.addFilter=function(field,value){var newFilter={id:field.id,title:field.title,value:value};$scope.filterExists(newFilter)||($scope.config.appliedFilters.push(newFilter),$scope.config.onFilterChange&&$scope.config.onFilterChange($scope.config.appliedFilters))},$scope.onValueKeyPress=function(keyEvent){13===keyEvent.which&&($scope.addFilter($scope.currentField,$scope.config.currentValue),$scope.config.currentValue=void 0)},$scope.clearFilter=function(item){var newFilters=[];$scope.config.appliedFilters.forEach(function(filter){(item.title!==filter.title||item.value!==filter.value)&&newFilters.push(filter)}),$scope.config.appliedFilters=newFilters,$scope.config.onFilterChange&&$scope.config.onFilterChange($scope.config.appliedFilters)},$scope.clearAllFilters=function(){$scope.config.appliedFilters=[],$scope.config.onFilterChange&&$scope.config.onFilterChange($scope.config.appliedFilters)}}],link:function(scope,element,attrs){scope.$watch("config",function(){scope.setupConfig()},!0)}}}]),angular.module("patternfly.form").directive("pfDatepicker",function(){"use strict";return{replace:!0,restrict:"A",require:"^form",templateUrl:"form/datepicker/datepicker.html",scope:{options:"=",date:"="},link:function($scope,element){element.datepicker($scope.options),element.datepicker("update",$scope.date),element.datepicker($scope.date).on("changeDate",function(elem){$scope.$apply(function(){$scope.date=elem.date})}),$scope.$watch("date",function(newValue,oldValue){oldValue!==newValue&&element.datepicker("update",newValue)})}}}),angular.module("patternfly.form").directive("pfFormButtons",function(){"use strict";return{replace:!0,require:"^form",templateUrl:"form/form-buttons/form-buttons.html",scope:{pfHandleCancel:"&pfOnCancel",pfHandleSave:"&pfOnSave",pfWorking:"=",pfButtonContainerClass:"@"},link:function(scope,iElement,iAttrs,controller){void 0===scope.pfWorking&&(scope.pfWorking=!1),scope.isInvalid=function(){var invalid=controller.$invalid;return angular.forEach(controller,function(value){value&&value.$error&&value.$error.server&&(invalid=!1)}),invalid}}}}),angular.module("patternfly.form").directive("pfFormGroup",function(){"use strict";function getInput(element){var input=element.find("table");return 0===input.length&&(input=element.find("input"),0===input.length&&(input=element.find("select"),0===input.length&&(input=element.find("textarea")))),input}return{transclude:!0,replace:!0,require:"^form",templateUrl:"form/form-group/form-group.html",scope:{pfLabel:"@",pfField:"@",pfLabelClass:"@",pfInputClass:"@"},link:function(scope,iElement,iAttrs,controller){var field,input=getInput(iElement),type=input.attr("type");iAttrs.pfLabelClass||(iAttrs.pfLabelClass="col-sm-2"),iAttrs.pfInputClass||(iAttrs.pfInputClass="col-sm-5"),scope.pfField||(scope.pfField=input.attr("id")),field=scope.pfField,-1===["checkbox","radio","time"].indexOf(type)&&input.addClass("form-control"),input.attr("required")&&iElement.addClass("required"),controller[field]&&(scope.error=controller[field].$error),scope.hasErrors=function(){return controller[field]&&controller[field].$invalid&&controller[field].$dirty}}}}),angular.module("patternfly.notification",[]).provider("Notifications",function(){"use strict";this.delay=5e3,this.verbose=!0,this.notifications={},this.persist={error:!0,httpError:!0},this.setDelay=function(delay){return this.delay=delay,this},this.setVerbose=function(verbose){return this.verbose=verbose,this},this.setPersist=function(persist){this.persist=persist},this.$get=["$rootScope","$timeout","$log",function($rootScope,$timeout,$log){function createNotifyMethod(mode){return function(message){notifications.message(modes[mode].type,modes[mode].header,message,persist[mode]),verbose&&$log[modes[mode].log](message)}}var delay=this.delay,notifications=this.notifications,verbose=this.verbose,persist=this.persist,scheduleMessagePop=function(){$timeout(function(){var i;for(i=0;i<$rootScope.notifications.data.length;i++)$rootScope.notifications.data[i].isPersistent||$rootScope.notifications.data.splice(i,1)},delay)},modes={info:{type:"info",header:"Info!",log:"info"},success:{type:"success",header:"Success!",log:"info"},error:{type:"danger",header:"Error!",log:"error"},warn:{type:"warning",header:"Warning!",log:"warn"}};return $rootScope.notifications={},$rootScope.notifications.data=[],$rootScope.notifications.remove=function(index){$rootScope.notifications.data.splice(index,1)},$rootScope.notifications||($rootScope.notifications.data=[]),notifications.message=function(type,header,message,isPersistent){$rootScope.notifications.data.push({type:type,header:header,message:message,isPersistent:isPersistent}),scheduleMessagePop()},angular.forEach(modes,function(mode,index){notifications[index]=createNotifyMethod(index)}),notifications.httpError=function(message,httpResponse){message+=" ("+(httpResponse.data.message||httpResponse.data.cause||httpResponse.data.cause||httpResponse.data.errorMessage)+")",notifications.message("danger","Error!",message,persist.httpError),verbose&&$log.error(message)},notifications}]}),angular.module("patternfly.notification").directive("pfNotification",function(){"use strict";return{scope:{pfNotificationType:"=",pfNotificationMessage:"=",pfNotificationHeader:"=",pfNotificationPersistent:"=",pfNotificationIndex:"="},restrict:"E",templateUrl:"notification/notification.html"}}),angular.module("patternfly.notification").directive("pfNotificationList",function(){"use strict";return{restrict:"E",templateUrl:"notification/notification-list.html"}}),angular.module("patternfly.select",[]).directive("pfSelect",["$timeout",function($timeout){"use strict";return{restrict:"A",require:"?ngModel",scope:{selectPickerOptions:"=pfSelect"},link:function(scope,element,attrs,ngModel){var optionCollectionList,optionCollection,$render=ngModel.$render;element.selectpicker(scope.selectPickerOptions),ngModel.$render=function(){$render.apply(this,arguments),$timeout(function(){element.selectpicker("refresh")},0,!1)},attrs.ngOptions&&(optionCollectionList=attrs.ngOptions.split("in "),optionCollection=optionCollectionList[optionCollectionList.length-1],scope.$watchCollection(optionCollection,function(){element.selectpicker("refresh")})),attrs.$observe("disabled",function(){element.selectpicker("refresh")})}}}]),angular.module("patternfly.utils").directive("pfTransclude",function(){"use strict";return{restrict:"A",link:function($scope,$element,$attrs,controller,$transclude){var iChildScope,iScopeType;if(!$transclude)throw new Error("pfTransclude - Illegal use of pfTransclude directive in the template! No parent directive that requires a transclusion found. Element: {0}");switch(iScopeType=$attrs.pfTransclude||"sibling"){case"sibling":$transclude(function(clone){$element.empty(),$element.append(clone)});break;case"parent":$transclude($scope,function(clone){$element.empty(),$element.append(clone)});break;case"child":iChildScope=$scope.$new(),$transclude(iChildScope,function(clone){$element.empty(),$element.append(clone),$element.on("$destroy",function(){iChildScope.$destroy()})})}}}}),angular.module("patternfly.validation",[]).directive("pfValidation",["$timeout",function($timeout){"use strict";return{restrict:"A",require:"ngModel",scope:{pfValidation:"&",pfValidationDisabled:"="},link:function(scope,element,attrs,ctrl){function validate(){var valid,val=scope.inputCtrl.$modelValue,valFunc=scope.pfValidation({input:val});attrs.pfValidation||(valFunc=!0),valid=!val||valFunc||""===val,toggleErrorClass(scope.valEnabled&&!valid?!0:!1)}function toggleErrorClass(add){var messageElement=element.next(),parentElement=element.parent(),hasErrorM=parentElement.hasClass("has-error"),wasHidden=messageElement.hasClass("ng-hide");scope.inputCtrl.$setValidity("pf-validation",!add),add&&(hasErrorM||parentElement.addClass("has-error"),wasHidden&&messageElement.removeClass("ng-hide")),add||(hasErrorM&&parentElement.removeClass("has-error"),wasHidden||messageElement.addClass("ng-hide"))}scope.inputCtrl=ctrl,scope.valEnabled=!attrs.pfValidationDisabled,scope.$watch("pfValidationDisabled",function(newVal){scope.valEnabled=!newVal,newVal?(scope.inputCtrl.$setValidity("pfValidation",!0),toggleErrorClass(!1)):validate()}),attrs.pfValidation?$timeout(function(){validate()},0):!scope.inputCtrl.$valid&&scope.inputCtrl.$dirty&&toggleErrorClass(!0),scope.$watch("inputCtrl.$valid",function(isValid){toggleErrorClass(isValid?!1:!0)}),scope.$watch("inputCtrl.$modelValue",function(){validate()})}}}]),angular.module("patternfly.views").directive("pfDataList",[function(){"use strict";return{restrict:"A",scope:{config:"=?",items:"=",eventId:"@id"},transclude:!0,templateUrl:"views/datalist/data-list.html",controller:["$scope",function($scope){if($scope.defaultConfig={selectItems:!1,multiSelect:!1,dblClick:!1,selectionMatchProp:"uuid",selectedItems:[],checkDisabled:!1,showSelectBox:!0,rowHeight:36,onSelect:null,onSelectionChange:null,onCheckBoxChange:null,onClick:null,onDblClick:null},$scope.config=$.extend(!0,angular.copy($scope.defaultConfig),$scope.config),$scope.config.selectItems&&$scope.config.showSelectBox)throw new Error("pfDataList - Illegal use of pfDataList directive! Cannot allow both select box and click selection in the same data list.")}],link:function(scope,element,attrs){attrs.$observe("config",function(){scope.config=$.extend(!0,angular.copy(scope.defaultConfig),scope.config),scope.config.selectItems||(scope.config.selectedItems=[]),!scope.config.multiSelect&&scope.config.selectedItems&&scope.config.selectedItems.length>0&&(scope.config.selectedItems=[scope.config.selectedItems[0]])}),scope.itemClick=function(e,item){var alreadySelected,selectionChanged=!1,continueEvent=!0;return scope.checkDisabled(item)?continueEvent:(scope.config&&scope.config.selectItems&&item&&(scope.config.multiSelect&&!scope.config.dblClick?(alreadySelected=_.find(scope.config.selectedItems,function(itemObj){return itemObj===item}),alreadySelected?scope.config.selectedItems=_.without(scope.config.selectedItems,item):(scope.config.selectedItems.push(item),selectionChanged=!0)):scope.config.selectedItems[0]===item?(scope.config.dblClick||(scope.config.selectedItems=[],selectionChanged=!0),continueEvent=!1):(scope.config.selectedItems=[item],selectionChanged=!0),selectionChanged&&scope.config.onSelect&&scope.config.onSelect(item,e),selectionChanged&&scope.config.onSelectionChange&&scope.config.onSelectionChange(scope.config.selectedItems,e)),scope.config.onClick&&scope.config.onClick(item,e),continueEvent)},scope.dblClick=function(e,item){scope.config.onDblClick&&scope.config.onDblClick(item,e)},scope.checkBoxChange=function(item){scope.config.onCheckBoxChange&&scope.config.onCheckBoxChange(item)},scope.isSelected=function(item){var matchProp=scope.config.selectionMatchProp,selected=!1;return scope.config.showSelectBox?selected=item.selected:scope.config.selectItems&&scope.config.selectedItems.length&&(selected=_.find(scope.config.selectedItems,function(itemObj){return itemObj[matchProp]===item[matchProp]})),selected},scope.checkDisabled=function(item){return scope.config.checkDisabled&&scope.config.checkDisabled(item)}}}}]),angular.module("patternfly.views").directive("pfDataTiles",[function(){"use strict";return{restrict:"A",scope:{config:"=?",items:"=",eventId:"@id"},transclude:!0,templateUrl:"views/datatiles/data-tiles.html",controller:["$scope",function($scope){if($scope.defaultConfig={selectItems:!1,multiSelect:!1,dblClick:!1,selectionMatchProp:"uuid",selectedItems:[],checkDisabled:!1,showSelectBox:!0,onSelect:null,onSelectionChange:null,onCheckBoxChange:null,onClick:null,onDblClick:null},$scope.config=$.extend(!0,angular.copy($scope.defaultConfig),$scope.config),$scope.config.selectItems&&$scope.config.showSelectBox)throw new Error("pfDataTiles - Illegal use of pfDataTiles directive! Cannot allow both select box and click selection in the same data tiles.")}],link:function(scope,element,attrs){attrs.$observe("config",function(){scope.config=$.extend(!0,angular.copy(scope.defaultConfig),scope.config),scope.config.selectItems||(scope.config.selectedItems=[]),!scope.config.multiSelect&&scope.config.selectedItems&&scope.config.selectedItems.length>0&&(scope.config.selectedItems=[scope.config.selectedItems[0]])}),scope.itemClick=function(e,item){var alreadySelected,selectionChanged=!1,continueEvent=!0;return scope.checkDisabled(item)?continueEvent:(scope.config&&scope.config.selectItems&&item&&(scope.config.multiSelect&&!scope.config.dblClick?(alreadySelected=_.find(scope.config.selectedItems,function(itemObj){return itemObj===item}),alreadySelected?scope.config.selectedItems=_.without(scope.config.selectedItems,item):(scope.config.selectedItems.push(item),selectionChanged=!0)):scope.config.selectedItems[0]===item?(scope.config.dblClick||(scope.config.selectedItems=[],selectionChanged=!0),continueEvent=!1):(scope.config.selectedItems=[item],selectionChanged=!0),selectionChanged&&scope.config.onSelect&&scope.config.onSelect(item,e),selectionChanged&&scope.config.onSelectionChange&&scope.config.onSelectionChange(scope.config.selectedItems,e)),scope.config.onClick&&scope.config.onClick(item,e),continueEvent)},scope.dblClick=function(e,item){scope.config.onDblClick&&scope.config.onDblClick(item,e)},scope.checkBoxChange=function(item){scope.config.onCheckBoxChange&&scope.config.onCheckBoxChange(item)},scope.isSelected=function(item){var matchProp=scope.config.selectionMatchProp,selected=!1;if(scope.config.showSelectBox)selected=item.selected;else if(scope.config.selectedItems.length)return _.find(scope.config.selectedItems,function(itemObj){return itemObj[matchProp]===item[matchProp]});return selected},scope.checkDisabled=function(item){return scope.config.checkDisabled&&scope.config.checkDisabled(item)}}}}]),angular.module("patternfly.views").directive("pfDataToolbar",function(){"use strict";return{restrict:"A",scope:{config:"="},replace:!0,transclude:!1,templateUrl:"views/toolbar/data-toolbar.html",controller:["$scope",function($scope){$scope.viewSelected=function(viewId){$scope.config.viewsConfig.currentView=viewId,$scope.config.viewsConfig.onViewSelect&&!$scope.checkViewDisabled(viewId)&&$scope.config.viewsConfig.onViewSelect(viewId)},$scope.isViewSelected=function(viewId){return $scope.config.viewsConfig&&$scope.config.viewsConfig.currentView===viewId},$scope.checkViewDisabled=function(view){return $scope.config.viewsConfig.checkViewDisabled&&$scope.config.viewsConfig.checkViewDisabled(view)}}],link:function(scope,element,attrs){scope.$watch("config",function(){scope.config&&scope.config.viewsConfig&&scope.config.viewsConfig.views&&(scope.config.viewsConfig.viewsList=angular.copy(scope.config.viewsConfig.views),scope.config.viewsConfig.currentView||(scope.config.viewsConfig.currentView=scope.config.viewsConfig.viewsList[0]))},!0)}}}),function(){"use strict";angular.module("patternfly.views").constant("pfViewUtils",{getDashboardView:function(title){return{id:"dashboardView",title:title||"Dashboard View",iconClass:"fa fa-dashboard"}},getTilesView:function(title){return{id:"tilesView",title:title||"Tiles View",iconClass:"fa fa-th"}},getListView:function(title){return{id:"listView",title:title||"List View",iconClass:"fa fa-th-list"}},getTableView:function(title){return{id:"tableView",title:title||"Table View",iconClass:"fa fa-table"}},getTopologyView:function(title){return{id:"topologyView",title:title||"Topology View",iconClass:"fa fa-sitemap"}}})}(),angular.module("patternfly.card").run(["$templateCache",function($templateCache){"use strict";$templateCache.put("card/aggregate-status/aggregate-status-card.html",'

    {{status.count}} {{status.title}} {{status.count}} {{status.title}}

    {{ notification.count }} {{ notification.count }}

    '),$templateCache.put("card/basic/card.html","

    {{headTitle}}

    {{subTitle}}
    ")}]),angular.module("patternfly.charts").run(["$templateCache",function($templateCache){"use strict";$templateCache.put("charts/donut/donut-pct-chart.html","
    "),$templateCache.put("charts/sparkline/sparkline-chart.html","
    "),$templateCache.put("charts/trends/trends-chart.html","
    {{config.title}} {{chartData.yData[chartData.yData.length-1]}} {{config.units}}
    {{config.timeFrame}}
    "),$templateCache.put("charts/utilization/utilization-chart.html",'

    {{config.title}}

    {{currentValue}}

    {{currentText}}
    of {{chartData.total}} {{config.units}}
    {{legendLeftText}} {{legendRightText}}
    ')}]),angular.module("patternfly.filters").run(["$templateCache",function($templateCache){"use strict";$templateCache.put("filters/simple-filter.html",'
    {{config.resultsCount}} Results

    Active filters:

    • {{filter.title}}: {{filter.value}}

    Clear All Filters

    '); }]),angular.module("patternfly.form").run(["$templateCache",function($templateCache){"use strict";$templateCache.put("form/datepicker/datepicker.html",'
    '),$templateCache.put("form/form-buttons/form-buttons.html",'
    '),$templateCache.put("form/form-group/form-group.html",'
    • {{ message }}
    ')}]),angular.module("patternfly.notification").run(["$templateCache",function($templateCache){"use strict";$templateCache.put("notification/notification-list.html",'
    '),$templateCache.put("notification/notification.html",'
    {{pfNotificationHeader}} {{pfNotificationMessage}}
    ')}]),angular.module("patternfly.views").run(["$templateCache",function($templateCache){"use strict";$templateCache.put("views/datalist/data-list.html",'
    '),$templateCache.put("views/datatiles/data-tiles.html",'
    '),$templateCache.put("views/toolbar/data-toolbar.html",'
    ')}]); \ No newline at end of file diff --git a/src/charts/donut/donut-pct-chart-directive.js b/src/charts/donut/donut-pct-chart-directive.js index 291f37b9c..921eb56a8 100644 --- a/src/charts/donut/donut-pct-chart-directive.js +++ b/src/charts/donut/donut-pct-chart-directive.js @@ -40,6 +40,14 @@ *
  • 'percent' - displays the Usage Percent of the Total amount in the center label *
  • 'none' - does not display the center label * + * + * @param {object} lang translated i18n strings
    + * + * @example @@ -101,15 +109,20 @@
    center-label =
    ' none' -
    -
    Custom Tooltip and Center Label
    +
    +
    +
    +
    + i18n String replacement for Available +
    +
    @@ -126,6 +139,10 @@ 'total': '1000' }; + $scope.lang = { + 'available': 'Free', + } + $scope.newUsed = $scope.data.used; $scope.$watch('newUsed', function (val) { @@ -151,6 +168,12 @@ 'thresholds':{'warning':'60','error':'90'} }; + $scope.availConfigLang = { + 'chartId': 'availChartLang', + 'units': 'GB', + 'thresholds':{'warning':'60','error':'90'} + }; + $scope.availData = { 'used': '350', 'total': '1000' @@ -207,6 +230,7 @@     */ + angular.module('patternfly.charts').directive('pfDonutPctChart', function (c3ChartDefaults, $timeout) { 'use strict'; @@ -215,6 +239,7 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', function (c3Cha scope: { config: '=', data: '=', + lang: '=', centerLabel: '=?' }, replace: true, @@ -305,7 +330,7 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', function (c3Cha // default to 'used' info. centerLabelText = { bigText: $scope.data.used, - smText: $scope.config.units + ' Used' }; + smText: $scope.config.units + ' ' + $scope.lang.used }; if ($scope.config.centerLabelFn) { centerLabelText.bigText = $scope.config.centerLabelFn(); @@ -315,10 +340,10 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', function (c3Cha centerLabelText.smText = ''; } else if ($scope.centerLabel === 'available') { centerLabelText.bigText = $scope.data.available; - centerLabelText.smText = $scope.config.units + ' Available'; + centerLabelText.smText = $scope.config.units + ' ' + $scope.lang.available; } else if ($scope.centerLabel === 'percent') { centerLabelText.bigText = Math.round($scope.data.used / $scope.data.total * 100.0) + '%'; - centerLabelText.smText = 'of ' + $scope.data.total + ' ' + $scope.config.units; + centerLabelText.smText = $scope.lang.of + ' ' + $scope.data.total + ' ' + $scope.config.units; } return centerLabelText; @@ -336,6 +361,7 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', function (c3Cha } ], link: function (scope, element) { + var setupDonutChartTitle = function () { $timeout(function () { var donutChartTitle, centerLabelText; @@ -361,6 +387,14 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', function (c3Cha }, 300); }; + var langDefaults = { + 'available': 'Available', + 'used': 'Used', + 'of': 'of' + }; + + scope.lang = angular.extend({}, langDefaults, scope.lang); + scope.$watch('config', function () { scope.updateAll(scope); setupDonutChartTitle(); diff --git a/test/charts/donut/donut-pct.spec.js b/test/charts/donut/donut-pct.spec.js index f27b7d0f2..5db4c33be 100644 --- a/test/charts/donut/donut-pct.spec.js +++ b/test/charts/donut/donut-pct.spec.js @@ -23,6 +23,11 @@ describe('Directive: pfDonutPctChart', function() { "total": 1000 }; + $scope.lang = { + "available": "Free", + "used": "Not available" + }; + }); var compileDonut = function (markup, scope) { @@ -78,6 +83,14 @@ describe('Directive: pfDonutPctChart', function() { expect(isoScope.getCenterLabelText(isoScope).smText).toContain('Available'); }); + it("should show 'free' center label - i18n", function() { + element = compileDonut('
    ', $scope); + + $scope.cntrLabel = 'available'; + $scope.$digest(); + expect(isoScope.getCenterLabelText(isoScope).smText).toContain('Free'); + }); + it("should show 'percent' center label", function() { element = compileDonut('
    ', $scope); @@ -103,6 +116,14 @@ describe('Directive: pfDonutPctChart', function() { expect(isoScope.getCenterLabelText(isoScope).smText).toContain('Used'); }); + it("should show 'not available' center label - i18n", function() { + element = compileDonut('
    ', $scope); + + $scope.cntrLabel = 'used'; + $scope.$digest(); + expect(isoScope.getCenterLabelText(isoScope).smText).toContain('Not available'); + }); + it("should use center label funtion", function() { element = compileDonut('
    ', $scope);