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 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.
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
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
Loading

0 comments on commit 2904a85

Please sign in to comment.