Skip to content

Commit

Permalink
Fixes #9354: Add a jumbotron next to Directives list
Browse files Browse the repository at this point in the history
  • Loading branch information
@RaphaelGauthier
RaphaelGauthier committed Feb 3, 2017
1 parent dfd49fa commit c398bdf
Show file tree
Hide file tree
Showing 3 changed files with 139 additions and 64 deletions.
50 changes: 17 additions & 33 deletions ...b/src/main/scala/com/normation/rudder/web/snippet/configuration/DirectiveManagement.scala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,35 +236,17 @@ class DirectiveManagement extends DispatchSnippet with Loggable {
def initTechniqueDetails(workflowEnabled: Boolean) : MemoizeTransform = SHtml.memoize {
"#techniqueDetails *" #> ( currentTechnique match {
case None =>
".page-title *" #> "Usage" &
".jumbotron-title *" #> "Directives" &
"#details *" #> {
<div class="tw-bs">
<div class="col-lg-12">
<div class="col-lg-12 callout-fade callout-warning">
<div class="marker">
<span class="glyphicon glyphicon-info-sign"></span>
</div>
<p>
<em>Directives</em> are displayed in the tree of
<a href="/secure/administration/techniqueLibraryManagement">
<em>Active Techniques</em>
</a>, grouped by categories.
</p>
<ul>
<li>Fold/unfold category folders;</li>
<li>Click on the name of a <em>Technique</em> to see its description;</li>
<li>
Click on the name of a <em>Directive</em> to see its configuration items.
Details of the <em>Technique</em> it's based on will also be displayed.
</li>
</ul>
<p>Additional <em>Techniques</em> may be available through the
<a href="/secure/administration/techniqueLibraryManagement">
<em>Techniques</em> screen
</a>.
</p>
</div>
</div>
<div>
<p>A Directive is an instance of a Technique, which allows to set values for the parameters of the latter.</p>
<p>Each Directive can have a unique name, and should be completed with a short and a long description, and a collection of parameters for the variables defined by the Technique.</p>
<p>Techniques are often available in several versions, numbered X.Y, X being the major version number and Y the minor version number:</p>
<ol>
<li><b>Bugs</b> are fixed in all existing versions of Rudder techniques. Make sure you update your Rudder packages frequently.</li>
<li>A new <b>minor</b> technique version is created for any new features</li>
<li>A new <b>major</b> version is created for any <b>architectural change</b> (such as refactoring)</li>
</ol>
</div>
}

Expand Down Expand Up @@ -312,16 +294,18 @@ class DirectiveManagement extends DispatchSnippet with Loggable {
}
} &
"#techniqueName" #> technique.name &
"#compatibility" #> technique.compatible.map { comp =>
"#compatibilityOs" #> technique.compatible.map { comp =>
{ if(comp.os.isEmpty) {
NodeSeq.Empty
} else {
<p><b>Supported operating systems: </b>{comp.os.mkString(", ")}</p>
} } ++ {
if (comp.agents.isEmpty) {
<li><b>Supported operating systems: </b>{comp.os.mkString(", ")}</li>
} }
} &
"#compatibilityAgent" #> technique.compatible.map { comp =>
{ if (comp.agents.isEmpty) {
NodeSeq.Empty
} else {
<p><b>Supported agents: </b>{comp.agents.mkString(", ")}</p>
<li><b>Supported agents: </b>{comp.agents.mkString(", ")}</li>
} }
} &
"#techniqueDescription" #> technique.description &
Expand Down
60 changes: 29 additions & 31 deletions rudder-web/src/main/webapp/secure/configurationManager/directiveManagement.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,30 +133,31 @@ <h4 class="panel-title">
<div class="col col-xl" id="directiveDetails">

<div data-lift="configuration.DirectiveManagement.techniqueDetails">
<div id="techniqueDetails" ng-app="techniqueDetails" >
<div class="page-title">Technique information</div>
<div id="techniqueDetails" ng-app="techniqueDetails" class="tw-bs">
<div class="jumbotron rudder-jumbotron fade-background">
<h1 class="jumbotron-title">Technique information</h1>
<div id="details">
<div id="directiveIntro">
The Directive <b class="directive">[Directive]</b> is based on following Technique:
</div>
<div>
<h3><span id="techniqueName">[Technique name]</span></h3>
<div class="bloc-info">
<h4>Description</h4>
<div id="techniqueDescription">[technique.description]</div>
</div>
<br/>
<fieldset class="deca">
<legend>Description</legend>
<span id="techniqueDescription">[technique.description]</span>
</fieldset>
<div class="groupDiv">
<fieldset class="deca">
<legend>Characteristics</legend>
<p id="techniqueLongDescription">[technique.longDescription]</p>
<p id="isSingle">[Unique Technique]</p>
<p><span id="compatibility">[Supported operating systems : debian-5]</span></p>
</fieldset>
<div class="bloc-info">
<h4>Characteristics</h4>
<ol>
<li id="techniqueLongDescription">[technique.longDescription]</li>
<li id="isSingle">[Unique Technique]</li>
<li id="compatibilityOs">[Supported operating systems : debian-5]</li>
<li id="compatibilityAgent">[Supported operating systems : debian-5]</li>
</ol>
</div>
</div>
<fieldset class="deca" id="techniqueVersion" ng-controller="techniqueVersion">
<legend>Available versions</legend>
<div id="techniqueVersion" ng-controller="techniqueVersion" class="bloc-info">
<h4>Available versions</h4>
<table id="versionTable">
<thead>
<tr>
Expand All @@ -179,21 +180,18 @@ <h3><span id="techniqueName">[Technique name]</span></h3>
<lift:authz role="directive_write">
<td class="tw-bs"> <input type="button" ng-click="technique.action()" value="Create Directive" class="btn btn-default btn-xs"/></td>
</lift:authz>
</tr>
</tbody>
</table>
<input id="displayDeprecation" type="checkbox" ng-model="displayDeprecated" /> <label for="displayDeprecation">Display deprecated Technique versions</label>
<div style="text-align: center;">
<lift:authz role="directive_write">
<span class="tw-bs">
<input type="button" id="addButton" ng-click="techniques[techniques.length-1].action()" value="Create with latest version" class="btn btn-default"/>
</span>
</lift:authz>
</div>
</fieldset>
</div>
</div>
</div>
</tr>
</tbody>
</table>
<input id="displayDeprecation" type="checkbox" ng-model="displayDeprecated" /> <label for="displayDeprecation">Display deprecated Technique versions</label>
<lift:authz role="directive_write">
<input type="button" id="addButton" ng-click="techniques[techniques.length-1].action()" value="Create with latest version" class="btn btn-default"/>
</lift:authz>
</div>
</div>
</div>
</div>
</div>

<div class="directiveDetails">
<div data-lift="configuration.DirectiveManagement.showDirectiveDetails" ></div>
Expand Down
93 changes: 93 additions & 0 deletions rudder-web/src/main/webapp/style/rudder/rudder-menu.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,13 @@ pre.json-beautify.toggle:after{
background-color:transparent !important;
background:none !important;
}
.fade-background{
background-color:#ecf0f5;
}
.rudder-jumbotron.fade-background{
box-shadow: 0 0 0 15px #ecf0f5;
background-color:#ecf0f5;
}
.tw-bs a,
.tw-bs a:focus,
.tw-bs a:hover,
Expand Down Expand Up @@ -1057,6 +1064,92 @@ table.tablewidth{
#technicalDetails > .directiveTechnicalInfo:first-child{
margin-top:0;
}
.skin-yellow .jumbotron.rudder-jumbotron{
display:block;
padding: 40px 60px;
margin-bottom: 15px;
margin-top: 15px;
}
.skin-yellow .jumbotron.rudder-jumbotron p{
margin:0;
}
.skin-yellow .jumbotron.rudder-jumbotron h3{
margin: 0;
color: #555;
margin-bottom: 40px;
}
.skin-yellow .jumbotron.rudder-jumbotron legend{
margin: 8px 0;
float:left;
font-size: 22px;
}
.skin-yellow .jumbotron.rudder-jumbotron #details > fieldset:nth-child(2) > legend{
margin-top:0;
}
.skin-yellow .jumbotron.rudder-jumbotron h2{
margin-bottom: 15px;
padding-bottom:8px;
border-bottom: 1px solid #e5e5e5;
font-size: 25px;
}
.skin-yellow .jumbotron.rudder-jumbotron h2 > span{
padding: 0 50px 3px 0;
}
.skin-yellow .jumbotron.rudder-jumbotron ol{
list-style: disc !important;
font-size: 16px;
font-weight: 200;
padding-left: 40px;
padding-bottom:60px;
}
.skin-yellow .jumbotron.rudder-jumbotron #addButton{
display: block;
margin: 15px 0 0px 0;
}
.skin-yellow .jumbotron.rudder-jumbotron ol li{
list-style: disc !important;
color: #555;
margin-bottom: 2px;
}
.skin-yellow .jumbotron.rudder-jumbotron p{
color: #555;
margin-bottom: 10px;
}
.skin-yellow .jumbotron.rudder-jumbotron hr{
border-top: 1px solid #dcdcdc;
}
.skin-yellow .jumbotron.rudder-jumbotron ol>li a {
color: #333333;
font-weight: 400;
text-decoration:none !important;
font-style: italic;
}
.tw-bs .jumbotron #details h3 {
color:#f08004;
}
.tw-bs .jumbotron p{
font-size: 16px;
}
.tw-bs .jumbotron .bloc-info{
margin-bottom: 15px;
color: #555;
font-size: 16px;
}
.tw-bs .jumbotron .bloc-info h4{
color: #333;
border-bottom: 1px solid #ddd;
padding-bottom: 8px;
font-size: 20px;
margin-bottom: 6px;
}
.skin-yellow .jumbotron.rudder-jumbotron .bloc-info ol {
padding-left: 20px;
padding-bottom: 0;
}
.skin-yellow .jumbotron.rudder-jumbotron ol>li a:hover {
color: #f08004;
cursor:pointer;
}
#directiveDetails{
border-left: 15px solid #ECF0F5;
max-height:88vh;
Expand Down

0 comments on commit c398bdf

Please sign in to comment.