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 Jun 15, 2023
1 parent 7cc7418 commit 989d905
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 152 deletions.
18 changes: 16 additions & 2 deletions ...rces/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayNode.scala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -864,13 +864,27 @@ object DisplayNode extends Loggable {
def tabProperties = ChooseTemplate(List("templates-hidden", "components", "ComponentNodeProperties"), "nodeproperties-tab")
val tabId = htmlId(jsId, "sd_props_")
val css: CssSel = "#tabPropsId [id]" #> tabId
css(tabProperties) ++ Script(OnLoad(JsRaw(s"""
css(tabProperties) ++ Script(OnLoad(JsRaw(
s"""
var main = document.getElementById("nodeproperties-app")
|var initValues = {
| contextPath : "${S.contextPath}"
| , hasWriteRights : hasWriteRights
| , nodeId : "${nodeId}"
| , objectType : 'node'
|};
|var app = Elm.Nodeproperties.init({node: main, flags: initValues});
|""".stripMargin
/*
s"""
angular.bootstrap('#nodeProp', ['nodeProperties']);
var scope = angular.element($$("#nodeProp")).scope();
scope.$$apply(function(){
scope.init("${nodeId}",${userHasRights},'node');
});
""")))
"""
*/
)))
}

private def displayTabProcess(jsId: JsNodeId, sm: FullInventory): NodeSeq = {
Expand Down
160 changes: 10 additions & 150 deletions ...udder/rudder-web/src/main/webapp/templates-hidden/components/ComponentNodeProperties.html
View file
Original file line number Diff line number Diff line change
@@ -1,154 +1,14 @@
<nodeproperties-tab>
<div id="tabPropsId">
<div id="nodeProp" ng-controller="nodePropertiesCtrl">
<div class="row">
<lift:authz role="node_write">
<div class="col-lg-7 col-md-8 col-xs-12 add-prop-form">
<label for="newPropName">Add a new property:</label>
<ng-form name="newPropForm">
<table id="addPropTable">
<tbody>
<tr>
<td class="form-group" ng-class="{'has-error': alreadyUsed || newPropForm.newPropName.$error.mandatory && newPropForm.newPropName.$dirty}">
<input placeholder="Name" class="form-control input-sm input-key ng-pristine ng-untouched ng-valid ng-empty" id="newPropName" name="newPropName" ng-model="newProperty.name" mandatory>
</td>
<td>
<span class="input-group-addon addon-json">=</span>
</td>
<td class="form-group" ng-class="{'has-error': (newPropForm.newPropValue.$error.mandatory && newPropForm.newPropValue.$dirty) || !isValid}">
<textarea placeholder="Value" msd-elastic name="newPropValue" class="form-control input-sm input-value" mandatory ng-model="newProperty.value"></textarea>
</td>
<td class="json-check-col">
<div>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">{{checkJson ? "JSON" : "String"}} <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a ng-click="checkJson = false">String</a></li>
<li><a ng-click="checkJson = true" > JSON </a></li>
</ul>
</div>
</td>
<td>
<button type="button" ng-click="addProperty()" class="btn btn-success btn-sm" ng-disabled="newPropForm.$invalid">
<span class="fa fa-plus"></span>
</button>
</td>
</tr>
</tbody>
</table>
</ng-form>
<div class="text-danger" ng-show="newPropForm.newPropName.$error.mandatory && newPropForm.newPropName.$dirty">Name is required</div>
<div class="text-danger" ng-show="alreadyUsed">This name is already used by another property</div>
<div class="text-danger" ng-show="!isValid">JSON check is enabled, but the value format is invalid.</div>
<div class="alert alert-danger errorSaving" ng-show="errorSaving">
<i class="fa fa-exclamation-triangle" style="margin-right:6px"></i>
An error occured while saving this new property : <b>{{errorSaving}}</b>
</div>
<div class="text-danger" ng-show="newPropForm.newPropValue.$error.mandatory && newPropForm.newPropValue.$dirty">Value is required</div>
</div>
</lift:authz>
<div class="col-xs-12" ng-if="properties">
<div class="alert alert-danger errorSaving" id="errorDeleting" ng-show="errorDeleting">
<i class="fa fa-exclamation-triangle" style="margin-right:6px"></i>
An error occured while deleting property '{{deletedProperty.name}}'</i>: <b>{{errorDeleting}}</b>
</div>
<table datatable="ng" dt-options="options" dt-column-defs="columns" class="table-striped table-hover table-bordered table" id="nodePropertiesTab">
<thead>
<tr class="head tablewidth">
<th> Name </th>
<th> Format </th>
<th> Value </th>
<th ng-if="$parent.hasEditRight"> Actions </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="property in properties track by $index">
<td ng-class="{'is-edited':isEdited(property.name)}">
<div ng-if="!isEdited(property.name)">
{{ property.name }}
<span ng-if="property.provider !== undefined && property.provider !== 'inherited' && property.provider !== 'overridden'" class='rudder-label label-provider label-sm' data-toggle='tooltip' data-placement='right' data-html='true' title="This property is managed by its provider <b>‘{{ property.provider }}</b>’, and can not be modified manually. Check Rudder’s settings to adjust this provider’s configuration." data-container="body" bs-tooltip>
{{ property.provider }}
</span>
<span ng-if="property.provider === 'inherited'" class='rudder-label label-provider label-sm' data-toggle='tooltip' data-placement='right' data-html='true' title="This property is inherited from these group(s) or global parameter: <div>{{ property.hierarchy }}</div>." data-container="body" bs-tooltip>
inherited
</span>
<span ng-if="property.provider === 'overridden'" class='rudder-label label-provider label-sm' data-toggle='tooltip' data-placement='right' data-html='true' title="This property is overridden on this object and was inherited from these group(s) or global parameter: <div>{{ property.hierarchy }}</div>." data-container="body" bs-tooltip>
overridden
</span>
</div>
<div ng-if="isEdited(property.name)">
<input type="text" class="form-control input-sm" ng-model="editedProperties[property.name].new.name">
<small class="text-danger" ng-if="editedProperties[property.name].new.alreadyUsed">This name is already used by another property</small>
</div>
</td>
<td ng-class="{'is-edited':isEdited(property.name)}">
<div ng-if="!isEdited(property.name)">
{{getFormat(property.value)}}
</div>
<div ng-if="isEdited(property.name)" class="format-container">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">{{editedProperties[property.name].new.checkJson ? "JSON" : "String"}} <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a ng-click="changeFormat(property.name, false)" > String </a></li>
<li><a ng-click="changeFormat(property.name, true)" > JSON </a></li>
</ul>
</div>
</td>
<td ng-class="{'property-value':!isEdited(property.name), 'is-edited':isEdited(property.name)}">
<div ng-if="!isEdited(property.name)">
<div class="{{'value-container container-' + $index}}" onclick="$(this).toggleClass('toggle')" ng-class="{'show-more':isTooLong(property)}">
<pre class="json-beautify">{{formatContent(property)}}</pre>
</div>
<span class="toggle-icon"></span>
<button class="btn btn-xs btn-default btn-clipboard" data-clipboard-text="{{formatContent(property)}}" data-toggle='tooltip' data-placement='left' data-container="html" title="Copy to clipboard"><i class="ion ion-clipboard"></i></button>
</div>
<div ng-if="isEdited(property.name)">
<textarea placeholder="Value" msd-elastic rows="1" class="form-control input-sm input-value" ng-model="editedProperties[property.name].new.value"></textarea>
<small class="text-danger" ng-if="!editedProperties[property.name].new.isValid">JSON check is enabled, but the value format is invalid</small>
</div>
</td>
<td ng-if="$parent.hasEditRight" class="text-center" ng-class="{'default-actions':!isEdited(property.name), 'edit-actions is-edited':isEdited(property.name)}">
<div ng-if="!isEdited(property.name) && property.rights !== 'read-only' && (property.provider === undefined || property.provider === 'overridden')">
<span class="action-icon fa fa-pencil" ng-click="editProperty(property)" title="Edit"></span>
<span class="action-icon fa fa-times text-danger" ng-click="popupDeletion(property.name, $index)" title="Delete"></span>
</div>
<div ng-if="isEdited(property.name) && property.rights !== 'read-only'">
<span class="action-icon glyphicon glyphicon-share-alt cancel-icon" ng-click="cancelEdit(property.name)" title="Cancel"></span>
<span class="action-icon fa fa-check text-success" ng-click="saveEdit(property.name, $index)" title="Save"></span>
</div>
</td>
</tr>

</tbody>
</table>
<div class="accountGrid_pagination, paginatescala" >
<div id="accountGrid_paginate_area"></div>
</div>
</div>
</div>


<div role="dialog" tabindex="-1" id="deletePropPopup" class="modal fade" style="display:none;">
<div style="height: 100%;" class="modal-backdrop fade"></div>
<div role="document" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div data-dismiss="modal" class="close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</div>
<h4 class="modal-title ng-binding">
Delete node property '{{deletedProperty.name}}'
</h4>
</div>
<div class="modal-body">
<h4 class="text-center">Are you sure that you want to delete this node property ?</h4>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
<button ng-click="deleteProperty()" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
</div>
<div id="nodeproperties-app" class="portlet-content"></div>
<script data-lift="with-cached-resource" src="/javascript/rudder/elm/rudder-nodeproperties.js"></script>
<script>
var hasWriteRights = false;
</script>
<lift:authz role="node_write">
<script>
hasWriteRights = true;
</script>
</lift:authz>
</div>
</nodeproperties-tab>

0 comments on commit 989d905

Please sign in to comment.