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 2, 2017
1 parent dfd49fa commit 49aa668
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 50 deletions.
40 changes: 11 additions & 29 deletions ...b/src/main/scala/com/normation/rudder/web/snippet/configuration/DirectiveManagement.scala
View file
Expand Up @@ -236,36 +236,18 @@ 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>
<h2>Usage</h2>
<ol>
<li>Directives are displayed in the tree of <a href="/secure/administration/techniqueLibraryManagement">Active Techniques</a> , grouped by categories.</li>
<li>Fold/unfold category folders;</li>
<li>Click on the name of a Technique to see its description;</li>
<li>Click on the name of a Directive to see its configuration items. Details of the Technique it's based on will also be displayed.</li>
<li>Additional Techniques may be available through the <a href="/secure/administration/techniqueLibraryManagement">Techniques screen</a> .</li>
</ol>
}

case Some((fullActiveTechnique,version)) =>
Expand Down
39 changes: 18 additions & 21 deletions rudder-web/src/main/webapp/secure/configurationManager/directiveManagement.html
View file
Expand Up @@ -133,29 +133,29 @@ <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>
<br/>
<fieldset class="deca">
<fieldset>
<legend>Description</legend>
<span id="techniqueDescription">[technique.description]</span>
</fieldset>
<div class="groupDiv">
<fieldset class="deca">
<fieldset>
<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>
<fieldset class="deca" id="techniqueVersion" ng-controller="techniqueVersion">
<fieldset id="techniqueVersion" ng-controller="techniqueVersion">
<legend>Available versions</legend>
<table id="versionTable">
<thead>
Expand All @@ -179,21 +179,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>
</fieldset>
</div>
</div>
</div>
</div>

<div class="directiveDetails">
<div data-lift="configuration.DirectiveManagement.showDirectiveDetails" ></div>
Expand Down
72 changes: 72 additions & 0 deletions rudder-web/src/main/webapp/style/rudder/rudder-menu.css
View file
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,71 @@ 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: 20px;
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;
}
.skin-yellow .jumbotron.rudder-jumbotron p{
color: #555;
}
.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;
}
.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 49aa668

Please sign in to comment.