Skip to content

Commit

Permalink
Fixes #16473: Update UI for group page to new template
Browse files Browse the repository at this point in the history
  • Loading branch information
@RaphaelGauthier
RaphaelGauthier committed Jan 16, 2020
1 parent 51a911d commit 2904a85
Show file tree
Hide file tree
Showing 18 changed files with 499 additions and 431 deletions.
145 changes: 84 additions & 61 deletions ...rudder-web/src/main/scala/com/normation/rudder/web/components/NodeGroupCategoryForm.scala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,42 +100,59 @@ class NodeGroupCategoryForm(

def showForm() : NodeSeq = {
val html = SHtml.ajaxForm(
<div class="inner-portlet groupCategoryUpdateComponent">
<div>
<div class="page-title">Category details</div>
<div id="GroupTabs" class="main-container">
<div class="main-header">
<div class="header-title">
<h1>
<i class="title-icon fa fa-folder"></i>
<category-name></category-name>
</h1>
<lift:authz role="group_edit">
<div class="header-buttons">
<lift:authz role="node_write">
<directive-delete></directive-delete>
<directive-save></directive-save>
</lift:authz>
</div>
</lift:authz>
</div>
</div>
<div class="main-navbar">
<ul id="groupTabMenu" class="ui-tabs-nav ui-widget-header">
<li class="ui-tabs-tab ui-tab ui-tabs-active ui-state-active">
<a href="#categoryParametersTab">Parameters</a>
</li>
</ul>
</div>
<div class="main-details">
<div id="categoryParametersTab" class="main-form">
<directive-notifications></directive-notifications>
<directive-name></directive-name>
<directive-description></directive-description>
<directive-container></directive-container>
<div class="form-group row">
<label class="wbBaseFieldLabel">RUDDER ID</label>
<input readonly="" class="form-control" value={nodeGroupCategory.id.value}/>
</div>
</div>
</div>
<directive-notifications></directive-notifications>
<hr class="spacer"/>
<directive-name></directive-name>
<hr class="spacer"/>
<directive-description></directive-description>
<hr class="spacer"/>
<directive-container></directive-container>
<hr class="spacer"/>
<div class="wbBaseField">
<span class="threeCol textright"><b>Rudder ID:</b></span>
<div class="twoCol"><span>{_nodeGroupCategory.id.value}</span></div>
</div>
<hr class="spacer"/>
<lift:authz role="node_write">
<div class="margins space-top"><directive-save></directive-save> <directive-delete></directive-delete></div>
</lift:authz>
</div>
)

(
"directive-name" #> name.toForm_!
"category-name" #> name
& "directive-name" #> name.toForm_!
& "directive-description" #> description.toForm_!
& "directive-container" #> container.toForm_!
& "directive-notifications" #> updateAndDisplayNotifications()
& (if (_nodeGroupCategory.isSystem) (
"input [disabled]" #> "true"
& "textarea [disabled]" #> "true"
& "directive-save" #> SHtml.ajaxSubmit("Update", onSubmit _ , ("class","btn btn-success pull-right"))
& "directive-save" #> SHtml.ajaxSubmit("Update", onSubmit _ , ("class","btn btn-success"))
& "directive-delete" #> deleteButton
) else (
"directive-save" #> (
if (CurrentUser.checkRights(AuthorizationType.Group.Edit)) SHtml.ajaxSubmit("Update", onSubmit _ , ("class","btn btn-default"))
if (CurrentUser.checkRights(AuthorizationType.Group.Edit)) SHtml.ajaxSubmit("Update", onSubmit _ , ("class","btn btn-success"))
else NodeSeq.Empty
)
& "directive-delete" #> (
Expand All @@ -155,38 +172,35 @@ class NodeGroupCategoryForm(
private[this] def deleteButton : NodeSeq = {

if(parentCategory.isDefined && _nodeGroupCategory.children.isEmpty && _nodeGroupCategory.items.isEmpty) {
(
<button id="removeButton" class="btn btn-danger">Delete</button>
<div>
<div id="removeActionDialog" class="modal fade" data-keyboard="true" tabindex="-1">
<div class="modal-backdrop fade in" style="height: 100%;"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="close" data-dismiss="modal">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</div>
<h4 class="modal-title text-left">
Delete a group category
</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<h4 class="text-center">
Are you sure that you want to completely delete this category ?
</h4>
</div>
</div>
</div>
<div class="modal-footer" style="text-align:center">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
{SHtml.ajaxButton("Delete", onDelete _ ,("class", "btn btn-danger"))}
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
( <button id="removeButton" class="btn btn-danger">Delete</button>
<div id="removeActionDialog" class="modal fade" data-keyboard="true" data-container="body" tabindex="-1">
<div class="modal-backdrop fade in" style="height: 100%;"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="close" data-dismiss="modal">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</div>
<h4 class="modal-title text-left">
Delete a group category
</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<h4 class="text-center">
Are you sure that you want to completely delete this category ?
</h4>
</div>
</div>
</div>
<div class="modal-footer" style="text-align:center">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
{SHtml.ajaxButton("Delete", onDelete _ ,("class", "btn btn-danger"))}
</div>
</div>
</div>
</div>
) ++
Script(JsRaw("""
Expand All @@ -196,8 +210,8 @@ class NodeGroupCategoryForm(
});
"""))
} else {
<button disabled="disabled" class="btn btn-danger">Delete</button><br/>
<div class="note"><b>Note: </b>Only empty and non root categories can be deleted.</div>
( <span class="btn btn-danger btn-tooltip disabled" data-toggle="tooltip" data-placement="bottom" data-html="true" data-original-title={"<div><i class='fa fa-exclamation-triangle text-warning'></i>Only empty and non root categories can be deleted.</div>"}>Delete</span>
) ++ Script(JsRaw("""$('.btn-tooltip').bsTooltip();"""))
}
}

Expand All @@ -218,13 +232,18 @@ class NodeGroupCategoryForm(
///////////// fields for category settings ///////////////////
private[this] val name = new WBTextField("Category name", _nodeGroupCategory.name) {
override def setFilter = notNull _ :: trim _ :: Nil
override def className = "form-control"
override def labelClassName = ""
override def subContainerClassName = ""
override def validations =
valMinLen(1, "Name must not be empty") _ :: Nil
}

private[this] val description = new WBTextAreaField("Category description", _nodeGroupCategory.description.toString) {
override def setFilter = notNull _ :: trim _ :: Nil
override def inputField = super.inputField % ("style" -> "height:10em")
override def className = "form-control"
override def labelClassName = ""
override def subContainerClassName = ""
override def validations = Nil
override def errorClassName = "field_errors paddscala"
}
Expand All @@ -239,7 +258,9 @@ class NodeGroupCategoryForm(
_nodeGroupCategory.id .value,
Seq("disabled" -> "true")
) {
override def className = "rudderBaseFieldSelectClassName"
override def className = "form-control"
override def labelClassName = ""
override def subContainerClassName = ""
override def validations =
valMinLen(1, "Please select a category") _ :: Nil
}
Expand All @@ -249,7 +270,9 @@ class NodeGroupCategoryForm(
, categoryHierarchyDisplayer.getCategoriesHierarchy(rootCategory, exclude = Some( _.id == _nodeGroupCategory.id)).
map { case (id, name) => (id.value -> name)}
, parentCategoryId) {
override def className = "rudderBaseFieldSelectClassName"
override def className = "form-control"
override def labelClassName = ""
override def subContainerClassName = ""
override def validations =
valMinLen(1, "Please select a category") _ :: Nil
}
Expand All @@ -263,7 +286,7 @@ class NodeGroupCategoryForm(
SetHtml(htmlIdCategory, showForm())
}

private[this] def error(msg:String) = <span class="col-lg-12 errors-container">{msg}</span>
private[this] def error(msg:String) = <span class="col-xs-12 errors-container">{msg}</span>

private[this] def onSuccess : JsCmd = {

Expand All @@ -273,7 +296,7 @@ class NodeGroupCategoryForm(

private[this] def onFailure : JsCmd = {
formTracker.addFormError(error("There was problem with your request."))
updateFormClientSide & JsRaw("""scrollToElement("notifications","#groupDetails");""")
updateFormClientSide & JsRaw("""scrollToElement("notifications","#ajaxItemContainer");""")
}

private[this] def onSubmit() : JsCmd = {
Expand Down
105 changes: 54 additions & 51 deletions .../rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/NodeGroupForm.scala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ class NodeGroupForm(
def mainDispatch = Map(
"showForm" -> { _:NodeSeq => showForm() },
"showGroup" -> { _:NodeSeq => searchNodeComponent.get match {
case Full(component) => component.buildQuery
case Full(component) => component.buildQuery(true)
case _ => <div>The component is not set</div>
} }
)
Expand Down Expand Up @@ -180,85 +180,88 @@ class NodeGroupForm(
val rules = dependencyService.targetDependencies(target).map( _.rules.toSet.filter(!_.isSystem).map(_.id)).toOption
RuleGrid.staticInit ++ ruleGrid.rulesGridWithUpdatedInfo(None, false, false) ++ Script(OnLoad(ruleGrid.asyncDisplayAllRules(rules).applied))
}

private[this] val groupNameString = nodeGroup.fold(
t => rootCategory.allTargets.get(t).map(_.name).getOrElse(t.target)
, _.name
)
private[this] def showFormNodeGroup(nodeGroup: NodeGroup): CssSel = {
val nodesSel = "#gridResult" #> NodeSeq.Empty
val nodes = nodesSel(searchNodeComponent.get match {
case Full(req) => req.buildQuery(true)
case eb:EmptyBox => <span class="error">Error when retrieving the request, please try again</span>
})
(
"group-pendingchangerequest" #> PendingChangeRequestDisplayer.checkByGroup(pendingChangeRequestXml,nodeGroup.id)
"#group-name" #> groupNameString
& "group-pendingchangerequest" #> PendingChangeRequestDisplayer.checkByGroup(pendingChangeRequestXml,nodeGroup.id)
& "group-name" #> groupName.toForm_!
& "group-rudderid" #> <div class="form-group row">
<label class="wbBaseFieldLabel">Rudder ID</label>
<input readonly="" class="form-control" value={nodeGroup.id.value}/>
</div>
& "group-cfeclasses" #> <div class="form-group row">
<a href="#" onclick={s"$$('#cfe-${nodeGroup.id.value}').toggle(300);$$(this).toggleClass('open');return false;"} class="toggle-caret">
<label class="wbBaseFieldLabel">Display agent conditions</label>
<span class="caret"></span>
</a>
<div class="well row" style="display: none" id={s"cfe-${nodeGroup.id.value}"}>
{RuleTarget.toCFEngineClassName(nodeGroup.id.value)}<br/>
{RuleTarget.toCFEngineClassName(nodeGroup.name)}
<label class="wbBaseFieldLabel">Agent conditions</label>
<div class="well" id={s"cfe-${nodeGroup.id.value}"}>
{RuleTarget.toCFEngineClassName(nodeGroup.id.value)}<br/>
{RuleTarget.toCFEngineClassName(nodeGroup.name)}
</div>
</div>
</div>
& "#longDescriptionField *" #> (groupDescription.toForm_! ++ Script(OnLoad(JsRaw(s"""setupMarkdown(${Str(nodeGroup.description).toJsCmd}, "longDescriptionField")"""))))
& "group-container" #> groupContainer.toForm_!
& "group-static" #> groupStatic.toForm_!
& "group-showgroup" #> (searchNodeComponent.get match {
case Full(req) => req.buildQuery
case eb:EmptyBox => <span class="error">Error when retrieving the request, please try again</span>
})
& "group-showgroup" #> nodes
& "group-clone" #> { if (CurrentUser.checkRights(AuthorizationType.Group.Write))
SHtml.ajaxButton("Clone", () => showCloneGroupPopup()) % ("id" -> "groupCloneButtonId") % ("class" -> " btn btn-default")
else NodeSeq.Empty
}
& "group-save" #> { if (CurrentUser.checkRights(AuthorizationType.Group.Edit))
<div tooltipid="saveButtonToolTip" class="tooltipable" title=""> {
<span tooltipid="saveButtonToolTip" class="tooltipable" title=""> {
SHtml.ajaxSubmit("Save", onSubmit _) % ("id" -> saveButtonId) % ("class" -> " btn btn-success")
} </div>
} </span>
else NodeSeq.Empty
}
& "group-delete" #> SHtml.ajaxButton("Delete", () => onSubmitDelete(), ("class" -> " btn btn-danger"))
& "group-notifications" #> updateAndDisplayNotifications()
& "#groupRuleTabsContent" #> showRulesForTarget(GroupTarget(nodeGroup.id))
& "#group-shownodestable *" #> (searchNodeComponent.get match {
case Full(req) => req.displayNodesTable
case eb:EmptyBox => <span class="error">Error when retrieving the request, please try again</span>
})
)
}

private[this] def showFormTarget(target: SimpleTarget): CssSel = {
// we want to remove the query part which doesn't mean anything for
// system group
val nodesSel = "#SearchForm" #> NodeSeq.Empty
val nodes = nodesSel(searchNodeComponent.get match {
case Full(req) => req.buildQuery
case eb:EmptyBox => <span class="error">Error when retrieving the request, please try again</span>
})

(
"group-pendingchangerequest" #> NodeSeq.Empty
& "group-name" #> groupName.readOnlyValue
& "group-rudderid" #> <div class="form-group row">
<label class="wbBaseFieldLabel">Rudder ID</label>
<input readonly="" class="form-control" value={target.target}/>
</div>
& "group-cfeclasses" #> NodeSeq.Empty
& "#longDescriptionField" #> (groupDescription.toForm_! ++ Script(JsRaw(s"""setupMarkdown("", "longDescriptionField")""")))
& "group-container" #> groupContainer.readOnlyValue
& "group-static" #> NodeSeq.Empty
& "group-showgroup" #> nodes
& "group-clone" #> NodeSeq.Empty
& "group-save" #> NodeSeq.Empty
& "group-delete" #> NodeSeq.Empty
& "group-notifications" #> NodeSeq.Empty
& "#groupRuleTabsContent" #> showRulesForTarget(target)
( "group-pendingchangerequest" #> NodeSeq.Empty
& "#group-name" #> <span>{groupNameString}<span class="group-system"></span></span>
& "group-name" #> groupName.readOnlyValue
& "#groupTabMenu" #> <ul id="groupTabMenu">
<li><a href="#groupParametersTab">Parameters</a></li>
<li><a href="#groupRulesTab">Related Rules</a></li>
</ul>
& "group-rudderid" #> <div class="form-group row">
<label class="wbBaseFieldLabel">RUDDER ID</label>
<input readonly="" class="form-control" value={target.target}/>
</div>
& "group-cfeclasses" #> NodeSeq.Empty
& "#longDescriptionField" #> (groupDescription.toForm_! ++ Script(JsRaw(s"""setupMarkdown("", "longDescriptionField")""")))
& "group-container" #> groupContainer.readOnlyValue
& "group-static" #> NodeSeq.Empty
& "group-showgroup" #> NodeSeq.Empty
& "group-clone" #> NodeSeq.Empty
& "group-save" #> NodeSeq.Empty
& "group-delete" #> NodeSeq.Empty
& "group-notifications" #> NodeSeq.Empty
& "#groupRuleTabsContent" #> showRulesForTarget(target)
& "#group-shownodestable *" #> (searchNodeComponent.get match {
case Full(req) => req.displayNodesTable
case eb:EmptyBox => <span class="error">Error when retrieving the request, please try again</span>
})
)

}

///////////// fields for category settings ///////////////////

private[this] val groupName = {
val name = nodeGroup.fold(
t => rootCategory.allTargets.get(t).map(_.name).getOrElse(t.target)
, _.name
)
new WBTextField("Group name", name) {
new WBTextField("Group name", groupNameString) {
override def setFilter = notNull _ :: trim _ :: Nil
override def className = "form-control"
override def labelClassName = ""
Expand Down Expand Up @@ -309,13 +312,13 @@ class NodeGroupForm(
}
) {
override def setFilter = notNull _ :: trim _ :: Nil
override def className = ""
override def className = "switch"
override def labelClassName = ""
override def subContainerClassName = ""
}
}

private[this] val groupContainer = new WBSelectField("Group container",
private[this] val groupContainer = new WBSelectField("Category",
(categoryHierarchyDisplayer.getCategoriesHierarchy(rootCategory, None).map { case (id, name) => (id.value -> name)}),
parentCategoryId.value) {
override def className = "form-control"
Expand All @@ -333,7 +336,7 @@ class NodeGroupForm(

private[this] def onFailure : JsCmd = {
formTracker.addFormError(error("There was problem with your request."))
updateFormClientSide() & JsRaw("""scrollToElement("errorNotification","#groupDetails");""")
updateFormClientSide() & JsRaw("""scrollToElement("errorNotification","#ajaxItemContainer");""")
}

private[this] def onSubmit() : JsCmd = {
Expand Down

0 comments on commit 2904a85

Please sign in to comment.