Prettify network/detail.html

salt_observer/templates/network/detail.html

@@ -7,11 +7,43 @@
         <h1>{{ network.ipv4 }}</h1>
     </div>
 
+    <div class="row">
+        <div class="col-md-12">
+
+            <ul class="nav nav-tabs" role="tablist">
+                <li role="presentation" class="active"><a href="#general" aria-controls="general" role="tab" data-toggle="tab">General</a></li>
+                <li role="presentation"><a href="#minions" aria-controls="minions" role="tab" data-toggle="tab">Connected minions</a></li>
+            </ul>
+
+            <!-- tab panes -->
+            <div class="tab-content">
+
+                <!-- general -->
+                <div role="tabpanel" class="tab-pane fade in active" id="general">
                     <div class="row">
                         <div class="col-md-8">
-            <h1>Im Netzwerk vorhandene Minions</h1>
+                            <i>Hier soll man in Zukunft eigenes Markdown hinterlegen können ...</i>
+                        </div>
+                        <div class="col-md-4">
+                            <table class="table datatable">
+                                <tbody>
+                                    <tr>
+                                        <td>Network</td>
+                                        <td>{{ network.ipv4 }}</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Subnetmask</td>
+                                        <td>{{ network.mask }}</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
 
-            <table class="table">
+                <!-- minions -->
+                <div role="tabpanel" class="tab-pane fade" id="minions">
+                    <table class="table sortable">
                         <thead>
                             <tr>
                                 <th>Minion Fqdn</th>
@@ -34,25 +66,8 @@
                         </tbody>
                     </table>
                 </div>
-        <div class="col-md-4">
-            <table class="table">
-                <thead>
-                    <tr>
-                        <th>Property</th>
-                        <th>Value</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>Netzwerk</td>
-                        <td>{{ network.ipv4 }}</td>
-                    </tr>
-                    <tr>
-                        <td>Subnet Mask</td>
-                        <td>{{ network.mask }}</td>
-                    </tr>
-                </tbody>
-            </table>
+
+            </div>
         </div>
     </div>