make config view in strongSwan manager look similar to ikesa view

6 files changed, 83 insertions, 30 deletions

diff --git a/src/manager/Makefile.am b/src/manager/Makefile.am
index 9409a9cf9..b0a1180f0 100644
--- a/src/manager/Makefile.am
+++ b/src/manager/Makefile.am
@@ -49,6 +49,7 @@ ipsec_templates_staticdir = ${ipsec_templatesdir}/static
 ipsec_templates_static_DATA = templates/static/style.css templates/static/script.js templates/static/jquery.js \
 templates/static/pipe.png templates/static/pipe-good.png templates/static/pipe-bad.png \
 templates/static/pipe-thin.png templates/static/pipe-thin-left.png templates/static/pipe-thin-right.png \
+templates/static/pipe-thin-green.png templates/static/pipe-thin-left-green.png templates/static/pipe-thin-right-green.png \
 templates/static/gateway-left.png templates/static/client-left.png templates/static/strongswan.png \
 templates/static/router.png templates/static/gateway-right.png templates/static/client-right.png \
 templates/static/close.png templates/static/initiate.png
diff --git a/src/manager/templates/config/list.cs b/src/manager/templates/config/list.cs
index 731c9c63c..e71830d4d 100644
--- a/src/manager/templates/config/list.cs
+++ b/src/manager/templates/config/list.cs
@@ -16,36 +16,88 @@
     </div>
     <div class="expander">
       <hr/>
-      <p><?cs var:peercfg.ikecfg.local ?> - <?cs var:peercfg.ikecfg.remote ?></p>
-      <?cs each:childcfg = peercfg.childcfgs ?>
-        <div class="expand">
-          <h1><?cs name:childcfg ?>:</h1>
-          <div class="controls">
+      <table class="drawing">
+        <tr>
+          <td class="left" colspan="3">
+            <?cs var:peercfg.local ?>
+          </td>
+          <td>
+          </td>
+          <td class="right" colspan="3">
+            <?cs var:peercfg.remote ?>
+          </td>
+        </tr>
+        <tr class="images">
+          <td>
+            <?cs if:peercfg.remote != "%any" ?>
+            <img title="Local host can be the initiator" src="<?cs var:base ?>/static/client-left.png"></img>
+            <?cs else ?>
+            <img title="Local host must be the responder" src="<?cs var:base ?>/static/gateway-left.png"></img>
+            <?cs /if ?>
+          </td>
+          <td style="background-image:url(<?cs var:base ?>/static/pipe.png)">
+            <font color="#e5bf5e">0123456789abdcef</font><br/><br/><br/>
+            <?cs var:peercfg.ikecfg.local ?>
+          </td>
+          <td>
+            <img src="<?cs var:base ?>/static/pipe.png"></img>
+          </td>
+          <td>
+            <img title="IKE connection is down" src="<?cs var:base ?>/static/pipe.png"></img>
+          </td>
+          <td>
+            <img src="<?cs var:base ?>/static/pipe.png"></img>
+          </td>
+          <td class="right" style="background-image:url(<?cs var:base ?>/static/pipe.png)">
+            <font color="#e5bf5e">0123456789abcdef</font><br/><br/><br/>
+            <?cs var:peercfg.ikecfg.remote ?>
+          </td>
+          <td>
+            <?cs if:peercfg.remote == "%any" ?>
+            <img title="Remote host must be the initiator" src="<?cs var:base ?>/static/client-right.png"></img>
+            <?cs else ?>
+            <img title="Remote host can be the responder" src="<?cs var:base ?>/static/gateway-right.png"></img>
+            <?cs /if ?>
+          </td>
+        </tr>
+        <?cs each:childcfg = peercfg.childcfgs ?>
+        <tr>
+          <td colspan="6" class="expand">
+            <h1><?cs name:childcfg ?>:</h1>
+          </td>
+          <td class="controls">
             <?cs if:peercfg.remote != "%any" ?>
               <a title="initiate SA" href="<?cs var:base ?>/control/initiatechild/<?cs name:childcfg ?>">
                 <img src="<?cs var:base ?>/static/initiate.png"/>
               </a>
             <?cs /if ?>
-          </div>
-          <div class="expander">
-            <table>
-              <tr class="images">
-                <td>
-                  <?cs each:net = childcfg.local.networks ?>
-      	            <p><?cs var:net ?></p>
-                  <?cs /each ?>
-      	        </td>
-      	        <td>&lt;-&gt;</td>
-      	        <td class="right">
-                  <?cs each:net = childcfg.remote.networks ?>
-      	            <p><?cs var:net ?></p>
-                  <?cs /each ?>
-      	        </td>
-              </tr>
-            </table>
-           </div>
-         </div>
-      <?cs /each ?>
+          </td>
+        </tr>
+        <tr>
+          <td colspan="7"><hr/></td>
+        </tr>
+        <tr class="images">
+          <td colspan="2">
+            <?cs each:net = childcfg.local.networks ?>
+      	      <p><?cs var:net ?></p>
+            <?cs /each ?>
+      	  </td>
+          <td style="background-image:url(<?cs var:base ?>/static/pipe-thin-left.png)">
+            <br/><br/><br/>
+          </td>
+          <td style="background-image:url(<?cs var:base ?>/static/pipe-thin.png)">
+          </td>
+          <td class="right" style="background-image:url(<?cs var:base ?>/static/pipe-thin-right.png)">
+            <br/><br/><br/>
+          </td>
+          <td class="right" colspan="2">
+            <?cs each:net = childcfg.remote.networks ?>
+              <p><?cs var:net ?></p>
+            <?cs /each ?>
+          </td>
+        </tr>
+        <?cs /each ?>
+      </table>
     </div>
   </div>
 <?cs /each ?>
diff --git a/src/manager/templates/ikesa/list.cs b/src/manager/templates/ikesa/list.cs
index 15fe4070e..f9a8e5c68 100644
--- a/src/manager/templates/ikesa/list.cs
+++ b/src/manager/templates/ikesa/list.cs
@@ -2,7 +2,7 @@
 <?cs each:ikesa = ikesas ?>
   <div class="expand" id="ikesa-<?cs name:ikesa ?>">
   <h1>
-  	IKE #<?cs name:ikesa ?> [<?cs var:ikesa.peerconfig ?>]:
+  	<?cs var:ikesa.peerconfig ?> [IKE #<?cs name:ikesa ?>]:
   	<span><?cs var:ikesa.local.identification ?></span> &lt;-&gt; 
   	<span><?cs var:ikesa.remote.identification ?></span>
   </h1>
@@ -72,7 +72,7 @@
       <?cs each:childsa = ikesa.childsas ?>
       <tr>
       	<td colspan="6" class="expand">
-      	  <h1>IPsec #<?cs name:childsa ?> [<?cs var:childsa.childconfig ?>]:</h1>
+      	  <h1><?cs var:childsa.childconfig ?> [IPsec #<?cs name:childsa ?>]:</h1>
         </td>
       	<td class="controls">
   		  <a title="close CHILD_SA" href="<?cs var:base ?>/control/terminatechild/<?cs name:childsa ?>">  
@@ -89,12 +89,12 @@
       	    <p><?cs var:net ?></p>
           <?cs /each ?>
       	</td>
-      	<td style="background-image:url(<?cs var:base ?>/static/pipe-thin-left.png)">
+      	<td style="background-image:url(<?cs var:base ?>/static/pipe-thin-left-green.png)">
           <?cs var:childsa.local.spi ?> &lt;-<br/><br/><br/>
       	</td>
-      	<td style="background-image:url(<?cs var:base ?>/static/pipe-thin.png)">
+      	<td style="background-image:url(<?cs var:base ?>/static/pipe-thin-green.png)">
       	</td>
-      	<td class="right" style="background-image:url(<?cs var:base ?>/static/pipe-thin-right.png)">
+      	<td class="right" style="background-image:url(<?cs var:base ?>/static/pipe-thin-right-green.png)">
           -&gt; <?cs var:childsa.remote.spi ?><br/><br/><br/>
       	</td>
       	<td class="right" colspan="2">
diff --git a/src/manager/templates/static/pipe-thin-green.png b/src/manager/templates/static/pipe-thin-green.png
new file mode 100644
index 000000000..df3026ec5
--- /dev/null
+++ b/src/manager/templates/static/pipe-thin-green.png
diff --git a/src/manager/templates/static/pipe-thin-left-green.png b/src/manager/templates/static/pipe-thin-left-green.png
new file mode 100644
index 000000000..b76432a94
--- /dev/null
+++ b/src/manager/templates/static/pipe-thin-left-green.png
diff --git a/src/manager/templates/static/pipe-thin-right-green.png b/src/manager/templates/static/pipe-thin-right-green.png
new file mode 100644
index 000000000..f193af9cc
--- /dev/null
+++ b/src/manager/templates/static/pipe-thin-right-green.png