Work in progress

RaphaelGauthier · Dec 5, 2019 · bb91f2c · bb91f2c
1 parent f2b8b30
commit bb91f2c
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 26 deletions.
diff --git a/...rces/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayNode.scala b/...rces/rudder/rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayNode.scala
@@ -434,32 +434,29 @@ object DisplayNode extends Loggable {
               val nodeId      = sm.node.main.id
               val publicKeyId = s"publicKey-${nodeId.value}"
               val cfKeyHash   = nodeInfoService.getNodeInfo(nodeId) match {
-                case Full(Some(nodeInfo)) if(nodeInfo.securityTokenHash.nonEmpty) => <label>Key hash:</label><span>{nodeInfo.securityTokenHash}</span>
+                case Full(Some(nodeInfo)) if(nodeInfo.securityTokenHash.nonEmpty) => <div><label>Key hash:</label> <samp>{nodeInfo.securityTokenHash}</samp></div>
                 case _                                                            => NodeSeq.Empty
               }
 
               val tokenKind = agent.securityToken match {
                 case _ : PublicKey   => "Public key"
                 case _ : Certificate => "Certificate"
               }
-              <div>
-                <div><label>Security information:</label> {tokenKind} {checked} (<a href="#" onclick={s"$$('#${publicKeyId}').toggle(300); return false;"}>details</a>)</div>{
-                agent.securityToken match {
+              <div class="security-info">
+                {cfKeyHash}
+                {agent.securityToken match {
                   case _ : PublicKey   => NodeSeq.Empty
                   case c : Certificate =>
                     c.cert.either.runNow match {
                       case Left(e)     => <span title={e.fullMsg}>Error while reading certificate information</span>
-                      case Right(cert) =>
-                        <ul style="margin-left:5px">
-                          <li>SHA1 Fingerprint: {SHA1.hash(cert.getEncoded).grouped(2).mkString(":")}</li>
-                          <li>Expiration date: {new DateTime(cert.getNotAfter).toString(ISODateTimeFormat.dateTimeNoMillis())}</li>
-                        </ul>
+                      case Right(cert) => (
+                        <div><label>SHA1 Fingerprint: </label> <samp>{SHA1.hash(cert.getEncoded).grouped(2).mkString(":")}</samp></div>
+                        <div><label>Expiration date: </label> {new DateTime(cert.getNotAfter).toString(ISODateTimeFormat.dateTimeNoMillis())}</div>
+                      )
                     }
-                }
-                }
-                <div style="width=100%; overflow:auto;">
-                  <pre id={publicKeyId} class="display-keys" style="display:none;"><label>{tokenKind}:</label>{agent.securityToken.key}{cfKeyHash}</pre>
-                </div>{Script(OnLoad(JsRaw(s"""createTooltip();""")))}
+                }}
+                <div><button type="button" class="toggle-security-info btn btn-default" onclick={s"$$('#${publicKeyId}').toggle(300); $$(this).toggleClass('opened'); return false;"}> <b>{tokenKind}</b> {checked}</button></div>
+                <pre id={publicKeyId} class="display-keys" style="display:none;"><div>{agent.securityToken.key}</div></pre>{Script(OnLoad(JsRaw(s"""createTooltip();""")))}
               </div>
             case None => NodeSeq.Empty
           }}

diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-menu.css b/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-menu.css
@@ -1274,17 +1274,6 @@ ul.graph-legend > li.legend:hover{
   font-weight: normal;
   font-size: 13.2px;
 }
-pre.display-keys{
-  padding: 6px 8px;
-}
-pre.display-keys > label:first-child{
-  margin-top:0;
-}
-pre.display-keys > label{
-  display:block;
-  margin-top:12px;
-  font-weight:bold;
-}
 /* --- DIRECTIVE PAGE --- */
 .editTech{
   margin-top:4px;

diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-node.css b/webapp/sources/rudder/rudder-web/src/main/webapp/style/rudder/rudder-node.css
@@ -177,7 +177,8 @@ div#query-search-content {
 }
 .rudder-info   > div,
 .status-info   > div,
-.accounts-info > div{
+.accounts-info > div,
+.security-info > div{
   margin-bottom: 8px;
 }
 .rudder-info   > div label,
@@ -267,4 +268,36 @@ div#query-search-content {
 .callout-fade.callout-info p .glyphicon{
   margin-right: 5px;
   color: #1b809e;
+}
+.btn.toggle-security-info{
+  min-width: 155px;
+  margin-top: 8px;
+  margin-bottom: -1px;
+  transition-duration .2;
+}
+.btn.toggle-security-info:before{
+  content: "Show ";
+}
+.btn.toggle-security-info.opened:before{
+  content: "Hide ";
+}
+.btn.toggle-security-info.opened{
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.security-info{
+  width: 100%;
+  overflow: auto;
+}
+pre.display-keys{
+  padding: 12px;
+  border-top-left-radius: 0;
+}
+pre.display-keys > label:first-child{
+  margin-top:0;
+}
+pre.display-keys > label{
+  display:block;
+  margin-top:12px;
+  font-weight:bold;
 }