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 Aug 9, 2017
1 parent 9bf513a commit b5a2650
Show file tree
Hide file tree
Showing 3 changed files with 170 additions and 89 deletions.
46 changes: 16 additions & 30 deletions ...b/src/main/scala/com/normation/rudder/web/snippet/configuration/DirectiveManagement.scala
View file
Expand Up @@ -241,34 +241,18 @@ class DirectiveManagement extends DispatchSnippet with Loggable {
def initTechniqueDetails(workflowEnabled: Boolean) : MemoizeTransform = SHtml.memoize {
"#techniqueDetails *" #> ( currentTechnique match {
case None =>
"#info-title *" #> "Usage" &
".jumbotron-title *" #> "Directives" &
"#details *" #> {
<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>
}

case Some((fullActiveTechnique,version)) =>
Expand Down Expand Up @@ -315,13 +299,15 @@ 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 {
<li><b>Supported operating systems: </b>{comp.os.mkString(", ")}</li>
} } ++ {
if (comp.agents.isEmpty) {
} }
} &
"#compatibilityAgent" #> technique.compatible.map { comp =>
{ if (comp.agents.isEmpty) {
NodeSeq.Empty
} else {
<li><b>Supported agents: </b>{comp.agents.mkString(", ")}</li>
Expand Down
114 changes: 56 additions & 58 deletions rudder-web/src/main/webapp/secure/configurationManager/directiveManagement.html
View file
Expand Up @@ -4,16 +4,19 @@
<title>Rudder - Directives Management</title>
<style type="text/css">
#versionTable thead tr {
border: 1px solid #666 !important;
border: 1px solid #777 !important;
padding: 0px;
list-style: none inside none;
font-weight: bold;
background-color: #666;
background-color: #777;
color: #FFF;
font-size: 13px;
font-size: 14px;
}
#versionTable thead tr th{
padding: 6px 10px;
text-align: center;
}
#versionTable thead tr th {
padding: 3px;
#versionTable tbody tr td {
padding: 8px 10px;
text-align: center;
}
#versionTable tbody tr {
Expand All @@ -27,6 +30,9 @@
#versionTable tbody tr td {
text-align: center;
}
.rudder-col,body{
overflow:hidden;
}
</style>
<link media="screen" data-lift="with-cached-resource" href="/style/rudder/rudder-directives.css" rel="stylesheet" type="text/css">
<link media="screen" data-lift="with-cached-resource" href="/style/rudder/rudder-tags.css" rel="stylesheet" type="text/css">
Expand Down Expand Up @@ -143,74 +149,67 @@ <h3 class="box-title"><i class="fa fa-list" aria-hidden="true"></i>Directive lib
</div>
</div>
</div>

<div id="directiveDetails" class="col-xs-12 col-sm-70">
<div data-lift="configuration.DirectiveManagement.techniqueDetails">
<div id="techniqueDetails" ng-app="techniqueDetails">
<div class="box">
<div class="box-header with-border">
<h3 class="box-title"><i aria-hidden="true" class="fa fa-cog"></i><span id="info-title">Technique '<span id="techniqueName"></span>'</span></h3>
</div>
<div id="details" class="col-xs-12">
<div class="box-body">
<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>
<h4 style="margin-top:0;">Description</h4>
<span id="techniqueDescription">[technique.description]</span>
<h3><span id="techniqueName">[Technique name]</span></h3>
<div class="bloc-info">
<h4>Description</h4>
<div id="techniqueDescription">[technique.description]</div>
</div>
<div class="groupDiv">
<div class="bloc-info">
<h4>Characteristics</h4>
<ul>
<ol>
<li id="techniqueLongDescription">[technique.longDescription]</li>
<li id="isSingle">[Unique Technique]</p>
<li id="compatibility">[Supported operating systems : debian-5]</li>
</ul>
<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 id="techniqueVersion" ng-controller="techniqueVersion">
<h4>Available versions</h4>
<table id="versionTable">
<thead>
<tr>
<th>Version</th>
<th>Last updated on</th>
<lift:authz role="directive_write">
<th>Use this version</th>
</lift:authz>
</tr>
</thead>
<tbody>
<tr ng-repeat="technique in techniques" ng-hide="display(technique)">
<td>{{technique.version}}
<span ng-if="technique.isDeprecated" title="" tooltipid="version_{{$index}}" class="glyphicon glyphicon-info-sign text-danger deprecatedTechniqueIcon tooltipable"></span>
<div ng-if="technique.isDeprecated" class="tooltipContent" id="version_{{$index}}">
</div>
<div id="techniqueVersion" ng-controller="techniqueVersion" class="bloc-info">
<h4>Available versions</h4>
<table id="versionTable">
<thead>
<tr>
<th>Version</th>
<th>Last updated on</th>
<lift:authz role="directive_write">
<th>Use this version</th>
</lift:authz>
</tr>
</thead>
<tbody>
<tr ng-repeat="technique in techniques" ng-hide="display(technique)">
<td class="tw-bs">{{technique.version}}
<span ng-if="technique.isDeprecated" title="" tooltipid="version_{{$index}}" class="glyphicon glyphicon-info-sign text-danger deprecatedTechniqueIcon tooltipable"></span>
<div ng-if="technique.isDeprecated" class="tooltipContent" id="version_{{$index}}">
<div>Deprecated: {{technique.deprecationMessage}}</div>
</div>
</td>
<td>{{technique.acceptationDate}}</td>
<lift:authz role="directive_write">
<td> <input type="button" ng-click="technique.action()" value="Create Directive" class="btn btn-success btn-xs"/></td>
</lift:authz>
</tr>
</tbody>
</table>
<div class="checkbox-group">
<input id="displayDeprecation" type="checkbox" ng-model="displayDeprecated"/>
<label for="displayDeprecation">Display deprecated Technique versions</label>
</div>
<lift:authz role="directive_write">
<div class="space-top">
<input type="button" id="addButton" ng-click="techniques[techniques.length-1].action()" value="Create with latest version" class="btn btn-success"/>
</div>
</lift:authz>
</div>
</div>
</td>
<td class="tw-bs">{{technique.acceptationDate}}</td>
<lift:authz role="directive_write">
<td class="tw-bs"> <input type="button" ng-click="technique.action()" value="Create Directive" class="btn btn-success btn-xs"/></td>
</lift:authz>
</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-success"/>
</lift:authz>
</div>
</div>
</div>
</div>
</div>

<div class="directiveDetails">
<div data-lift="configuration.DirectiveManagement.showDirectiveDetails" ></div>
</div>
Expand All @@ -221,7 +220,6 @@ <h4>Available versions</h4>
This div gets the content of the createDirective injected within
</lift:ignore>
</div>

<div id="finishMigrationPopup" class="modal fade" data-keyboard="true" tabindex="-1">
<div class="modal-backdrop fade in" style="height: 100%;"></div>
<div class="modal-dialog">
Expand Down
99 changes: 98 additions & 1 deletion rudder-web/src/main/webapp/style/rudder/rudder-menu.css
View file
Expand Up @@ -194,6 +194,13 @@ pre.json-beautify.toggle:after, .tw-bs 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 @@ -1050,7 +1057,6 @@ table.tablewidth{
border:none;
}
#details{
background-color: #fff;
padding-left:0;
padding-right:0;
}
Expand Down Expand Up @@ -1098,6 +1104,97 @@ table > tbody > tr > td.action{
#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;
overflow-y:auto;
overflow-x:hidden;
}
.directiveTree {
padding-left: 10px;
padding-right: 10px;
Expand Down

0 comments on commit b5a2650

Please sign in to comment.