Skip to content

Commit

Permalink
Work in progress
Browse files Browse the repository at this point in the history
  • Loading branch information
@RaphaelGauthier
RaphaelGauthier committed Jan 23, 2017
1 parent 8c161d2 commit fffc720
Show file tree
Hide file tree
Showing 10 changed files with 510 additions and 397 deletions.
2 changes: 1 addition & 1 deletion rudder-web/src/main/scala/com/normation/rudder/web/components/RuleCompliance.scala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ class RuleCompliance (
Details of changes for each period are displayed below the graph. Click to change the selected period.
</div>
<div class="recentChange_refresh">
{SHtml.ajaxButton(<img src='/images/icRefresh.png'/>, () => refresh() , ("class","recentChangeGraph refreshButton") , ("title","Refresh"))}
{SHtml.ajaxButton(<img src='/images/icRefresh.png'/>, () => refresh() , ("class","recentChangeGraph refreshButton btn btn-default") , ("title","Refresh"))}
</div>
</div>

Expand Down
195 changes: 141 additions & 54 deletions rudder-web/src/main/scala/com/normation/rudder/web/components/RuleDisplayer.scala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,29 +134,37 @@ class RuleDisplayer (
, ("id","includeCheckbox")
)
}

def actionButtonCategory =
if (directive.isEmpty) {
SHtml.ajaxButton("New Category", () => showCategoryPopup(None), ("class" -> "new-icon btn btn-success btn-xs"))
} else {
NodeSeq.Empty
}

def displaySubcategories : NodeSeq = {
<ul class="form-group">
<li class="rudder-form">
<div class="input-group displaySub">
<label for="includeCheckbox" class="input-group-addon" id="includeSubCategory">
{includeSubCategory}
<label class="label-radio" for="includeCheckbox">
<span class="ion ion-checkmark-round"></span>
</label>
<span class="ion ion-checkmark-round check-icon"></span>
</label>
<label for="includeCheckbox" class="form-control">
Display Rules from subcategories
</label>
</div>
</li>
</ul>
}
def viewCategories(ruleCategoryTree : RuleCategoryTree) : NodeSeq = {

val actionButton =
if (directive.isEmpty) {
SHtml.ajaxButton("New Category", () => showCategoryPopup(None), ("class" -> "newRule btn btn-default"))
} else {
NodeSeq.Empty
}

<div>
<lift:authz role="rule_write">
<div class="tw-bs">
{actionButton}
</div>
</lift:authz>
<div id="includeSubCategory">{includeSubCategory}<span>Display Rules from subcategories</span></div>
<div id="treeParent" style="overflow:auto; margin-top:10px; max-height:443px;">
<div id="categoryTree" class="tw-bs">
{ruleCategoryTree.tree}
</div>
</div>
</div>
<div id="treeParent">
<div id="categoryTree">
{ruleCategoryTree.tree}
</div>
</div>
}

def check() = {
Expand All @@ -170,6 +178,14 @@ class RuleDisplayer (
}
}

def actionButtonRule = {
if (directive.isDefined) {
NodeSeq.Empty
} else {
SHtml.ajaxButton("New Rule", () => showRulePopup(None), ("class" -> "new-icon btn btn-success btn-xs"))
}
}

def viewRules : NodeSeq = {

val callbackLink = {
Expand All @@ -189,25 +205,10 @@ class RuleDisplayer (
)
}

def actionButton = {
if (directive.isDefined) {
NodeSeq.Empty
} else {
SHtml.ajaxButton("New Rule", () => showRulePopup(None), ("class" -> "newRule btn btn-default"),("style","float:left"))
}
}

<div>
<lift:authz role="rule_write">
<span class="tw-bs">
{actionButton}
</span>
</lift:authz>
<hr class="spacer"/>
{ ruleGrid.rulesGridWithUpdatedInfo(None, !directive.isDefined, true, false) ++
Script(OnLoad(ruleGrid.asyncDisplayAllRules(None, true, configService.display_changes_graph().openOr(true)).applied))
}

</div>

}
Expand All @@ -220,19 +221,107 @@ class RuleDisplayer (
ruleCategoryTree match {
case Full(ruleCategoryTree) =>
<div>
<div style="float:left; width: 20%; overflow:auto">
<div class="page-title">Categories</div>
<div class="inner-portlet-content" id="categoryTreeParent">
{viewCategories(ruleCategoryTree)}
</div>
</div>
<div style="float:left; width:78%;padding-left:2%;">
<div class="page-title" id="categoryDisplay">Rule</div>
<div class="inner-portlet-content" id={gridId}>
{viewRules}
</div>
</div>
</div> ++ Script(JsRaw(s"""
<div class="row col-small-padding">
<div class="col-xs-12 col-lg-3 col-md-4">
<div class="box">
<div class="box-header with-border">
<h3 class="box-title"><i class="fa fa-filter" aria-hidden="true"></i>Filters</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
</div>
</div><!-- /.box-header -->
<div class="box-body">
<div class="row">
<div class="col-xs-12">
<div id="showFiltersRules" ng-controller="filterTagRuleCtrl" class="filters tw-bs" ng-cloak="">
<div class="filters-container">
<form class="filterTag">
<div class="input-group search-addon">
<label for="searchStr" class="input-group-addon search-addon"><span class="ion ion-search"></span></label>
<input type="text" id="searchStr" class="input-sm form-control" placeholder="Filter" ng-model="strSearch" ng-keyup="filterGlobal(strSearch)"/>
</div>
<div class="form-group">
<label>Tags</label>
<div class="input-group">
<input placeholder="key" class="form-control input-sm input-key" type="text" ng-model="newTag.key"/>
<span class="input-group-addon addon-json">=</span>
<input placeholder="value" class="form-control input-sm input-value" type="text" ng-model="newTag.value"/>
<span class="input-group-btn">
<button type="button" ng-click="addTag()" class="btn btn-success btn-sm" ng-disabled=" (isEmptyOrBlank(newTag.key) && isEmptyOrBlank(newTag.value)); ">
<span class="fa fa-plus"></span>
</button>
</span>
</div>
</div>
<div class="only-tags">
<a href="" ng-click="onlyAll($event)" class="all" ng-class="{'active':getOnlyAllValue()}"> All </a>
<span class="separator">/</span>
<a href="" ng-click="onlyKey($event)" class="key" ng-class="{'active':only.key}"> Filter keys only </a>
<span class="separator">/</span>
<a href="" ng-click="onlyValue($event)" class="value" ng-class="{'active':only.value}"> Filter values only </a>
<button class="btn btn-default btn-xs pull-right" ng-click="clearAllTags()" ng-disabled="tags.length==0">
Clear all tags
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</div>
<div class="tags-container">
<span class="rudder-tag" ng-repeat="tag in tags" ng-class="{'onlyKey':only.key, 'onlyValue':only.value, 'already-exist':tag.alreadyExist}" ng-click="modifyTag($index,tag)">
<span class="tag-key"><span ng-show="tag.key!=''">{{{{tag.key}}}}</span><i class='fa fa-asterisk' aria-hidden='true' ng-show="tag.key==''"></i></span>
<span class="tag-separator">=</span>
<span class="tag-value"><span ng-show="tag.value!=''">{{{{tag.value}}}}</span><i class='fa fa-asterisk' aria-hidden='true' ng-show="tag.value==''"></i></span>
<span class="fa fa-times" ng-click="removeTag($index)"></span>
</span>
</div>
</form>
{displaySubcategories}
</div>
</div>
</div>
</div><!-- /.row -->
</div><!-- /.box-footer -->
</div><!-- /.box -->
<div class="box">
<div class="box-header with-border">
<h3 class="box-title"><i class="fa fa-list" aria-hidden="true"></i>Categories</h3>
<div class="box-tools pull-right">
<lift:authz role="rule_write">
{actionButtonCategory}
</lift:authz>
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
</div>
</div><!-- /.box-header -->
<div class="box-body">
<div class="row">
<div class="col-xs-12" id="categoryTreeParent">
{viewCategories(ruleCategoryTree)}
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-9 col-xs-12 col-md-8">
<div class="box">
<div class="box-header with-border">
<h3 class="box-title"><i class="fa fa-gears" aria-hidden="true"></i>Rules</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool toggleTabFilter updateTable btn-xs" id="updateRuleTable">Refresh<span class="fa fa-refresh"></span></button>
<lift:authz role="rule_write">
{actionButtonRule}
</lift:authz>
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
</div>
</div>
<div class="box-body">
<div class="row">
<div class="col-xs-12" id={gridId}>
{viewRules}
</div>
</div>
</div>
</div>
</div>
</div>
</div> ++ Script(JsRaw(s"""
var include = true;
var filter = "";
var column = ${columnToFilter};"""
Expand Down Expand Up @@ -268,7 +357,6 @@ class RuleDisplayer (
}

// Popup

private[this] def creationPopup(category : Option[RuleCategory], ruleCategoryTree : RuleCategoryTree) = {
val rootCategory = ruleCategoryTree.getRoot
new RuleCategoryPopup(
Expand Down Expand Up @@ -303,7 +391,7 @@ class RuleDisplayer (
JsRaw( s""" createPopup("${htmlId_popup}") """)
}

/**
/**
* Create the delete popup
*/
private[this] def showDeleteCategoryPopup(category : RuleCategory) : JsCmd = {
Expand All @@ -324,5 +412,4 @@ class RuleDisplayer (
SetHtml(htmlId_popup, popupHtml) &
JsRaw( s""" createPopup("${htmlId_popup}") """)
}

}
}
26 changes: 21 additions & 5 deletions rudder-web/src/main/scala/com/normation/rudder/web/components/RuleEditForm.scala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,11 +226,23 @@ class RuleEditForm(
Script(
OnLoad(JsRaw(s"""$$( "#editRuleZone" ).tabs({ active : ${tab} });""")) &
JsRaw(s"""
var target = $$( ".nav-tabs .active a" ).attr('href');
if(target=="#ruleComplianceTab"){
$$('#changeIconRule').addClass('fa-area-chart');
}else{
$$('#changeIconRule').removeClass('fa-area-chart');
}
$$("#editRuleZonePortlet").removeClass("nodisplay");
${Replace("details", new RuleCompliance(rule, rootRuleCategory).display).toJsCmd};
scrollToElement("${idToScroll}", ".rudder_col");
$$("#editRuleZone").bind( "tabsactivate", function(event, ui) {
if((ui.newPanel.attr('id')== 'ruleComplianceTab')&&(recentChart !== undefined)) {
scrollToElement("${idToScroll}", "body,html");
$$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $$(e.target).attr("href") // activated tab
if(target=="#ruleComplianceTab"){
$$('#changeIconRule').addClass('fa-area-chart');
}else{
$$('#changeIconRule').removeClass('fa-area-chart');
}
if((target=="#ruleComplianceTab")&&(recentChart !== undefined)){
recentChart.flush();
}
});
Expand Down Expand Up @@ -331,7 +343,9 @@ class RuleEditForm(
OnLoad(
// Initialize angular part of page and group tree
JsRaw(s"""
angular.bootstrap('#groupManagement', ['groupManagement']);
if(!angular.element('#groupManagement').scope()){
angular.bootstrap('#groupManagement', ['groupManagement']);
}
var scope = angular.element($$("#GroupCtrl")).scope();
scope.$$apply(function(){
scope.init(${ruleTarget.toString()},${maptarget});
Expand All @@ -340,7 +354,9 @@ class RuleEditForm(
) &
//function to update list of PIs before submiting form
JsRaw(s"""
angular.bootstrap('#ruleDirectives', ['ruleDirectives']);
if(!angular.element('#ruleDirectives').scope()){
angular.bootstrap('#ruleDirectives', ['ruleDirectives']);
}
var ruleDirectiveScope = angular.element($$("#DirectiveCtrl")).scope();
ruleDirectiveScope.$$apply(function(){
ruleDirectiveScope.init(${selectedDirectives});
Expand Down
80 changes: 3 additions & 77 deletions rudder-web/src/main/scala/com/normation/rudder/web/components/RuleGrid.scala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -275,89 +275,15 @@ class RuleGrid(
);
createTooltip();
createTooltiptr();
angular.bootstrap('#showFiltersRules', ['filters']);
if(!angular.element('#showFiltersRules').scope()){
angular.bootstrap('#showFiltersRules', ['filters']);
}
"""
<div id={htmlId_rulesGridZone}>
<span class="error" id="ruleTableError">{errorProperty.getOrElse("")}</span>
<div id={htmlId_modalReportsPopup} class="nodisplay">
<div id={htmlId_reportsPopup} ></div>
</div>
<div id="showFiltersRules" ng-controller="filterTagRuleCtrl" class="filters tw-bs" ng-cloak="">
<div class="filters-container">
<div class="filterTag form-inline">
<div class="space-top">
<ul class="nav nav-tabs nav-tabs-filter" role="tablist">
<li role="presentation">
<a href="" class="toggleTabFilter" role="tab" ng-click="toggleTagForm('search','#searchStr');">
Filter
<span class="fa fa-chevron-right" ng-class="{'fa-rotate-90':!hide.search}"></span>
</a>
</li>
<li role="presentation">
<a href="" class="toggleTabFilter" role="tab" ng-click="toggleTagForm('tag','.input-key')">
Filter by tag
<span class="fa fa-chevron-right" ng-class="{'fa-rotate-90':!hide.tag}"></span>
</a>
</li>
<li role="presentation">
<a href="" class="toggleTabFilter updateTable" id="updateRuleTable" role="tab">
<i class="fa fa-refresh"></i>
</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane tab-filter" id="form-search" ng-class="{'active':!hide.search}">
<div class="form-group">
<div class="input-group">
<label for="searchStr" class="input-group-addon"><span class="ion ion-search"></span></label>
<input type="text" id="searchStr" class="input-sm form-control" placeholder="Filter" ng-model="strSearch" ng-keyup="filterGlobal(strSearch)"/>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane tab-filter" id="form-tag" ng-class="{'active':!hide.tag}">
<div class="form-group">
<div class="input-group">
<input placeholder="key" class="form-control input-sm input-key " type="text" ng-model="newTag.key"/>
<span class="input-group-addon addon-json">=</span>
<input placeholder="value" class="form-control input-sm input-value" type="text" ng-model="newTag.value"/>
<span class="input-group-btn">
<button type="button" ng-click="addTag()" class="btn btn-success btn-sm" ng-disabled=" (isEmptyOrBlank(newTag.key) && isEmptyOrBlank(newTag.value)); ">
<span class="fa fa-plus"></span>
</button>
</span>
</div>
</div>
<div class="only-tags">
<a href="" ng-click="onlyAll($event)" class="all" ng-class="{'active':getOnlyAllValue()}"> All </a>
<span class="separator">/</span>
<a href="" ng-click="onlyKey($event)" class="key" ng-class="{'active':only.key}"> Filter keys only </a>
<span class="separator">/</span>
<a href="" ng-click="onlyValue($event)" class="value" ng-class="{'active':only.value}"> Filter values only </a>
<button class="btn btn-default btn-xs pull-right" ng-click="clearAllTags()" ng-disabled="tags.length==0">
Clear all tags
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</div>
</div>
<div role="tabpanel" class="tab-pane" ng-class="{'active':tags.length>0 || strSearch.length>0}">
<div class="tags-container">
<span class="rudder-tag tag-search" ng-if="strSearch.length>0">
<span class="tag-value" ng-bind="strSearch"></span>
<span class="fa fa-times" ng-click="clearSearch()"></span>
</span>
<span class="rudder-tag" ng-repeat="tag in tags" ng-class="{'onlyKey':only.key, 'onlyValue':only.value, 'already-exist':tag.alreadyExist}" ng-click="modifyTag($index,tag)">
<span class="tag-key"><span ng-show="tag.key!=''">{{{{tag.key}}}}</span><i class='fa fa-asterisk' aria-hidden='true' ng-show="tag.key==''"></i></span>
<span class="tag-separator">=</span>
<span class="tag-value"><span ng-show="tag.value!=''">{{{{tag.value}}}}</span><i class='fa fa-asterisk' aria-hidden='true' ng-show="tag.value==''"></i></span>
<span class="fa fa-times" ng-click="removeTag($index)"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<table id={htmlId_rulesGridId} class="display" cellspacing="0"> </table>
<div class={htmlId_rulesGridId +"_pagination, paginatescala"} >
<div id={htmlId_rulesGridId +"_paginate_area"}></div>
Expand Down
Loading

0 comments on commit fffc720

Please sign in to comment.