fboender · miladpav · Dec 13, 2021 · Dec 13, 2021 · Dec 13, 2021 · Dec 13, 2021
diff --git a/contents/images/Loading.gif b/contents/images/Loading.gif
diff --git a/contents/images/Simple-Loading.gif b/contents/images/Simple-Loading.gif
diff --git a/contents/images/details_close.png b/contents/images/details_close.png
diff --git a/contents/images/details_open.png b/contents/images/details_open.png
diff --git a/contents/images/sort_asc.png b/contents/images/sort_asc.png
diff --git a/contents/images/sort_both.png b/contents/images/sort_both.png
diff --git a/contents/images/sort_desc.png b/contents/images/sort_desc.png
diff --git a/contents/js/jquery-1.10.2.min.js b/contents/js/jquery-1.10.2.min.js
diff --git a/contents/js/jquery-3.6.0.min.js b/contents/js/jquery-3.6.0.min.js
diff --git a/contents/js/jquery.dataTables-1.11.3.js b/contents/js/jquery.dataTables-1.11.3.js
diff --git a/contents/js/jquery.dataTables.js b/contents/js/jquery.dataTables.js
diff --git a/contents/js/jquery.min.js b/contents/js/jquery.min.js
diff --git a/contents/js/modernizr.js b/contents/js/modernizr.js
diff --git a/contents/static/jquery.dataTables.css b/contents/static/jquery.dataTables.css
diff --git a/src/ansiblecmdb/data/tpl/html_fancy.tpl b/src/ansiblecmdb/data/tpl/html_fancy.tpl
@@ -1,5 +1,6 @@
 ## -*- coding: utf-8 -*-
 <%! from ansiblecmdb.util import to_bool %>
+<%! import os %>
 
 <%namespace name="defs" file="/html_fancy_defs.html" import="*" />
 
@@ -18,9 +19,13 @@ cols.extend(cust_cols)
 
 # Set the Javascript resource URL (local disk or CDN)
 if local_js is False:
-  res_url = "https://cdn.datatables.net/1.10.2/"
+  res_url = os.getenv('STATIC_ROOT_URL', ".")
+  jquery_res_uri = os.getenv('JQUERY_RES_URI', "js/jquery-1.10.2.min.js")
+  dataTable_res_uri = os.getenv('DATATABLE_RES_URI', "js/jquery.dataTables.js")
 else:
-  res_url = "file://" + data_dir + "/static/"
+  res_url = "."
+  jquery_res_uri = "js/jquery-1.10.2.min.js"
+  dataTable_res_uri = "js/jquery.dataTables.js"
 
 # Set the link type for the host overview table's 'host' column (the link that
 # takes you to the host details).
@@ -29,7 +34,7 @@ if host_details is False:
   link_type = "none"
 %>
 
-<% html_header("Ansible Overview", local_js, res_url) %>
+<% html_header("Ansible Overview", local_js, res_url, jquery_res_uri, dataTable_res_uri) %>
 <% html_header_bar("Host overview") %>
 <% html_col_toggles(cols) %>
 <% html_host_overview(cols, hosts, skip_empty=skip_empty, link_type=link_type) %>

diff --git a/src/ansiblecmdb/data/tpl/html_fancy_defs.html b/src/ansiblecmdb/data/tpl/html_fancy_defs.html
@@ -4,6 +4,7 @@
 <%! import datetime %>
 <%! import socket %>
 <%! import getpass %>
+<%! import os %>
 <%! from ansiblecmdb.util import to_bool %>
 <%! from mako.template import Template %>
 
@@ -116,7 +117,7 @@
 ##
 ## HTML fragments
 ##
-<%def name="html_header(title, local_js, res_url)">
+<%def name="html_header(title, local_js, res_url, jquery_res_uri, dataTable_res_uri)">
   <html>
   <head>
     <meta charset="UTF-8">
@@ -218,21 +219,44 @@
       #hosts table.net_overview td, #hosts table.net_overview th { text-align: left; padding: 0px 0px 8px 16px; margin: 0px; }
       #hosts table.net_overview { margin: 16px 0px 16px 0px; }
       #hosts .error { color: #FF0000; }
+
+      /* my Custom CSS */
+      /* Paste this css to your style sheet file or under head tag */
+      /* This only works with JavaScript,
+      if it's not present, don't show loader */
+      .no-js #loader { display: none;  }
+      .js #loader { display: block; position: absolute; left: 100px; top: 0; }
+      .se-pre-con {
+        position: fixed;
+        left: 0px;
+        top: 0px;
+        width: 100%;
+        height: 100%;
+        z-index: 9999;
+        background: url(${res_url}/images/Loading.gif) center no-repeat #fff;
+      }
+
+      td { line-height: 1.4; }
+
+      <link rel="stylesheet" href="${res_url}/js/jquery.dataTables.css">
+
     </style>
     <!-- DataTables assets -->
     % if local_js is False:
-      <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+      <script type="text/javascript" charset="utf8" src="${res_url}/${jquery_res_uri}"></script>
     % else:
-      <script type="text/javascript" charset="utf8" src="${res_url}/js/jquery-1.10.2.min.js"></script>
+      <script type="text/javascript" charset="utf8" src="${res_url}/${jquery_res_uri}"></script>
     % endif
-    <script type="text/javascript" charset="utf8" src="${res_url}/js/jquery.dataTables.js"></script>
+    <script type="text/javascript" charset="utf8" src="${res_url}/${dataTable_res_uri}"></script>
+    <script type="text/javascript" charset="utf8" src="${res_url}/js/modernizr.js"></script>
   </head>
   <body>
+    <div class="se-pre-con"></div>
 </%def>
 
 <%def name="html_header_bar(title)">
   <header>
-    <h1>${title}</h1>
+    <h1><a href="/">${title}</a></h1>
     <span id="top"><a href="#">Back to top</a></span>
     <span id="clear_settings"><a href="javascript:window.localStorage.clear('columnVisibility'); location.reload();" title="If things are acting weird, press this button">Clear settings</a></span> 
     <span id="generated">Generated on <span class="detail">${datetime.datetime.now().strftime('%c')}</span> by <span class="detail">${getpass.getuser()}</span> @ <span class="detail">${socket.getfqdn()}</span></span>
@@ -241,7 +265,8 @@ <h1>${title}</h1>
 
 <%def name="html_footer_bar(version)">
   <footer>
-    <p>Generated by <a href="https://github.com/fboender/ansible-cmdb">ansible-cmdb</a> v${version} &dash; &copy; Ferry Boender 2017</p>
+    <p>Edited by <a href="https://github.com/miladpav/ansible-cmdb">ansible-cmdb</a> v${version} &dash; &copy; Milad PourAllahverdi 2021</p>
+    <p>Main Project <a href="https://github.com/fboender/ansible-cmdb">ansible-cmdb</a>&dash; &copy; Ferry Boender 2017</p>
   </footer>
 </%def>
 
@@ -270,6 +295,8 @@ <h2>Shown columns</h2>
   <div id="host_overview">
     <h2>Host overview</h2>
     <div id="host_overview_tbl_wrapper">
+      <!-- export to csv Added  -->
+      <button type="button" onclick="exportTableToCSV('servers.csv')">Download CSV</button>
       <table id="host_overview_tbl" class="demo display dataTable compact">
       <thead>
         <tr>
@@ -282,14 +309,14 @@ <h2>Host overview</h2>
         % for hostname, host in sorted(hosts.items()):
           <% log.debug(u"Rendering host overview for {0}".format(hostname)) %>
           % if skip_empty is False or 'ansible_facts' in host:
-            <tr>\
+            <tr>
               % for col in cols:
                 % if "func" in col:
-                  <td>${col["func"](host, **kwargs)}</td>\
+                  <td>${col["func"](host, **kwargs)}</td>
                 % elif "jsonxs" in col:
-                  <td>${col__cust_jsonxs(host, col=col, **kwargs)}</td>\
+                  <td>${col__cust_jsonxs(host, col=col, **kwargs)}</td>
                 % elif "tpl" in col:
-                  <td>${col__cust_tpl(host, col=col, **kwargs)}</td>\
+                  <td>${col__cust_tpl(host, col=col, **kwargs)}</td>
                 % endif
               % endfor
             </tr>
@@ -479,6 +506,49 @@ <h3 class="toggle-collapse ${collapsed_host_class}" id="${host['name']}" data-ho
   });
 </%def>
 
+
+// export csv button on click
+<%def name="js_export_to_csv()">
+  function downloadCSV(csv, filename) {
+    var csvFile;
+    var downloadLink;
+    csvFile = new Blob([csv], {type: "text/csv"});
+    downloadLink = document.createElement("a");
+    downloadLink.download = filename;
+    downloadLink.href = window.URL.createObjectURL(csvFile);
+    downloadLink.style.display = "none";
+    document.body.appendChild(downloadLink);
+    downloadLink.click();
+  }
+
+  function exportTableToCSV(filename) {
+    var csv = [];
+    var rows = document.querySelectorAll("table tr");
+    for (var i = 0; i < rows.length; i++) {
+        var row = [], cols = rows[i].querySelectorAll("td, th");
+        for (var j = 0; j < cols.length; j++) {
+            var concatenate_lines = '';
+            var lines = cols[j].querySelectorAll("ul li");
+            if(lines.length > 1){
+                for (var k = 0; k < lines.length; k++)
+                    concatenate_lines += ' ' + lines[k].innerText + ';';
+            } else{
+                concatenate_lines += ' ' + cols[j].innerText;
+            }
+            row.push(concatenate_lines);
+        }
+        csv.push(row.join(","));        
+    }
+    downloadCSV(csv.join("\n"), filename);
+  }
+
+</%def>
+
+
+
+
+
+
 ##
 ## Column functions
 ##
@@ -504,16 +574,16 @@ <h3 class="toggle-collapse ${collapsed_host_class}" id="${host['name']}" data-ho
     elem_class = "error"
   %>
   % if link_type == "anchor":
-    <a href="#${jsonxs(host, 'name')}" class="${elem_class}">${jsonxs(host, "name")}</a>
+    <span><a href="#${jsonxs(host, 'name')}" class="${elem_class}">${jsonxs(host, "name")}</a></span>
   % elif link_type == "external":
-    <a href="${jsonxs(host, 'name')}.html" class="${elem_class}">${jsonxs(host, 'name')}</a>
+    <span><a href="/cmdb/${jsonxs(host, 'name')}.html" class="${elem_class}">${jsonxs(host, 'name')}</a></span>
   % else:
     ${jsonxs(host, "name")}
   % endif
 </%def>
 
 <%def name="col_dtap(host, **kwargs)">
-  ${jsonxs(host, 'hostvars.dtap', default='')}
+  <span>${jsonxs(host, 'hostvars.dtap', default='')}</span>
 </%def>
 
 <%def name="col_groups(host, **kwargs)">
@@ -538,7 +608,7 @@ <h3 class="toggle-collapse ${collapsed_host_class}" id="${host['name']}" data-ho
     else:
       default_ipv4 = jsonxs(host, 'ansible_facts.ansible_default_ipv4.address', default='')
   %>
-  ${default_ipv4}
+  <span>${default_ipv4.strip()}</span>
 </%def>
 
 <%def name="col_all_ip4(host, **kwargs)">
@@ -548,7 +618,11 @@ <h3 class="toggle-collapse ${collapsed_host_class}" id="${host['name']}" data-ho
     else:
       ipv4_addresses = jsonxs(host, 'ansible_facts.ansible_all_ipv4_addresses', default=[])
   %>
-  ${'<br>'.join(ipv4_addresses)}
+  <ul>
+  % for address in ipv4_addresses:
+    <li>${address}</li>
+  % endfor
+  </ul>
 </%def>
 
 <%def name="col_all_ip6(host, **kwargs)">
@@ -578,7 +652,7 @@ <h3 class="toggle-collapse ${collapsed_host_class}" id="${host['name']}" data-ho
 <%def name="col_cpu_type(host, **kwargs)">
   <% cpu_type = jsonxs(host, 'ansible_facts.ansible_processor', default=0)%>
   % if isinstance(cpu_type, list) and len(cpu_type) > 0:
-    <a href="http://www.cpubenchmark.net/cpu.php?cpu=${ cpu_type[-1] }">${ cpu_type[-1] }</a>
+    <span>${ cpu_type[-1] }</span>
   % endif
 </%def>
 
@@ -639,6 +713,7 @@ <h3 class="toggle-collapse ${collapsed_host_class}" id="${host['name']}" data-ho
 </%def>
 
 <%def name="col_disk_usage(host, **kwargs)">
+  <ul>
   % for i in jsonxs(host, 'ansible_facts.ansible_mounts', default=[]):
     % try:
       <%
@@ -654,26 +729,31 @@ <h3 class="toggle-collapse ${collapsed_host_class}" id="${host['name']}" data-ho
           detail_total = 0
       %>
       ## hidden sort helper
-      <span style="display:none">${sort_used}</span>
-      <div class="bar">
-        <span class="prog_bar_full" style="width:100px">
-          <span class="prog_bar_used" style="width:${used}px"></span>
-        </span> ${i['mount']} <span class="usage_detail">(${detail_used} / ${detail_total} GiB)</span>
-      </div>
+      <li>
+        <span style="display:none">${sort_used}</span>
+        <div class="bar">
+          <span class="prog_bar_full" style="width:100px">
+            <span class="prog_bar_used" style="width:${used}px"></span>
+          </span> ${i['mount']} <span class="usage_detail">(${detail_used} / ${detail_total} GiB)</span>
+        </div>
+      </li>
     % except:
       n/a
       <%
       break  ## Stop listing disks, since there was an error.
       %>
     % endtry
   % endfor
+  </ul>
 </%def>
 
 <%def name="col_physdisk_sizes(host, **kwargs)">
   % try:
+    <ul>
     % for physdisk_name, physdisk_info in jsonxs(host, 'ansible_facts.ansible_devices', default={}).items():
-      ${physdisk_name}: ${jsonxs(physdisk_info, 'size', default='')}<br />
+      <li>${physdisk_name}: ${jsonxs(physdisk_info, 'size', default='')}</li>
     % endfor
+    </ul>
   % except AttributeError:
   % endtry
 </%def>
@@ -812,7 +892,7 @@ <h4 class="toggle-collapse ${collapsed_class}">Hardware</h4>
     <tr><th>Virtualization role</th><td>${jsonxs(host, 'ansible_facts.ansible_virtualization_role',  default='')}</td></tr>
     <tr><th>Virtualization type</th><td>${jsonxs(host, 'ansible_facts.ansible_virtualization_type',  default='')}</td></tr>
     <tr><th>Machine</th><td>${jsonxs(host, 'ansible_facts.ansible_machine',  default='')}</td></tr>
-    <tr><th>Processor type</th><td><a href="http://www.cpubenchmark.net/cpu.php?cpu=${jsonxs(host, 'ansible_facts.ansible_processor[-1]',  default='')}">${jsonxs(host, 'ansible_facts.ansible_processor[-1]',  default='')}</a></td></tr>
+    <tr><th>Processor type</th><td>${jsonxs(host, 'ansible_facts.ansible_processor[-1]',  default='')}</td></tr>
     <tr><th>Processor count</th><td>${jsonxs(host, 'ansible_facts.ansible_processor_count',  default='')}</td></tr>
     <tr><th>Processor cores</th><td>${jsonxs(host, 'ansible_facts.ansible_processor_cores',  default='')}</td></tr>
     <tr><th>Processor threads per core</th><td>${jsonxs(host, 'ansible_facts.ansible_processor_threads_per_core',  default='')}</td></tr>

diff --git a/src/ansiblecmdb/data/tpl/html_fancy_split_detail.tpl b/src/ansiblecmdb/data/tpl/html_fancy_split_detail.tpl
@@ -1,5 +1,6 @@
 ## -*- coding: utf-8 -*-
 <%! from ansiblecmdb.util import to_bool %>
+<%! import os %>
 
 <%namespace name="defs" file="/html_fancy_defs.html" import="*" />
 
@@ -10,12 +11,16 @@ collapsed = to_bool(context.get('collapsed', '0'))
 
 # Set the Javascript resource URL (local disk or CDN)
 if local_js is False:
-  res_url = "https://cdn.datatables.net/1.10.2/"
+  res_url = os.getenv('STATIC_ROOT_URL', ".")
+  jquery_res_uri = os.getenv('JQUERY_RES_URI', "js/jquery-1.10.2.min.js")
+  dataTable_res_uri = os.getenv('DATATABLE_RES_URI', "js/jquery.dataTables.js")
 else:
-  res_url = "file://" + data_dir + "/static/"
+  res_url = "."
+  jquery_res_uri = "js/jquery-1.10.2.min.js"
+  dataTable_res_uri = "js/jquery.dataTables.js"
 %>
 
-<% html_header(host['name'], local_js, res_url) %>
+<% html_header(host['name'], local_js, res_url, jquery_res_uri, dataTable_res_uri) %>
 <% html_header_bar(host['name']) %>
 <div id="hosts">
   <% html_host_detail(host, collapsed=collapsed, skip_empty=skip_empty, is_split=True) %>
@@ -26,6 +31,14 @@ else:
 $(document).ready( function () {
   <% js_ev_collapse() %>
 });
+
+  //paste this code under the head tag or in a separate js file.
+  // Wait for window load
+  $(window).load(function() {
+    // Animate loader off screen
+    $(".se-pre-con").fadeOut("slow");;
+  });
+
 </script>
 
 <% html_footer() %>
diff --git a/src/ansiblecmdb/data/tpl/html_fancy_split_overview.tpl b/src/ansiblecmdb/data/tpl/html_fancy_split_overview.tpl
@@ -1,5 +1,6 @@
 ## -*- coding: utf-8 -*-
 <%! from ansiblecmdb.util import to_bool %>
+<%! import os %>
 
 <%namespace name="defs" file="/html_fancy_defs.html" import="*" />
 
@@ -18,9 +19,13 @@ cols.extend(cust_cols)
 
 # Set the Javascript resource URL (local disk or CDN)
 if local_js is False:
-  res_url = "https://cdn.datatables.net/1.10.2/"
+  res_url = os.getenv('STATIC_ROOT_URL', ".")
+  jquery_res_uri = os.getenv('JQUERY_RES_URI', "js/jquery-1.10.2.min.js")
+  dataTable_res_uri = os.getenv('DATATABLE_RES_URI', "js/jquery.dataTables.js")
 else:
-  res_url = "file://" + data_dir + "/static/"
+  res_url = "."
+  jquery_res_uri = "js/jquery-1.10.2.min.js"
+  dataTable_res_uri = "js/jquery.dataTables.js"
 
 # Set the link type for the host overview table's 'host' column (the link that
 # takes you to the host details).
@@ -29,7 +34,7 @@ if host_details is False:
   link_type = "none"
 %>
 
-<% html_header("Ansible Overview", local_js, res_url) %>
+<% html_header("Ansible Overview", local_js, res_url, jquery_res_uri, dataTable_res_uri) %>
 <% html_header_bar("Host overview") %>
 <% html_col_toggles(cols) %>
 <% html_host_overview(cols, hosts, skip_empty=skip_empty, link_type=link_type) %>
@@ -38,5 +43,12 @@ $(document).ready( function () {
   <% js_init_host_overview(cols) %>
   <% js_ev_collapse() %>
 });
+<% js_export_to_csv() %>
+  //paste this code under the head tag or in a separate js file.
+  // Wait for window load
+  $(window).load(function() {
+    // Animate loader off screen
+    $(".se-pre-con").fadeOut("slow");;
+  });
 </script>
 <% html_footer() %>