Changeset 1814

Timestamp:

12/19/19 17:18:39 (4 years ago)

Author:

yushan

Message:

trunk : update on html rendering

Location:

XIOS/trunk/xios_test_suite/HTML

Files:

• generate_compile_table.js (modified) (5 diffs)
• generate_test_table.js (modified) (8 diffs)
• xios-style.css (modified) (11 diffs)
• xios_report.html (modified) (12 diffs)

XIOS/trunk/xios_test_suite/HTML/generate_compile_table.js

@@ -50 +50 @@
   // Generate select list for compile table
 
-  var sel = document.getElementById("compile_revision");
-  for (var i=0; i<revision_list.length; i++)
+  var sel = document.getElementById("revision");
+
+  var sel_options = sel.children
+  
+  var new_options=[]
+  for(var i=0; i<sel_options.length-1; i++)
+  {
+    new_options[i] = sel_options[i+1].value
+  }
+  
+  for(var i=0; i<revision_list.length; i++)
+  {
+    if (!new_options.includes(revision_list[i]))
+    {
+      new_options.push(revision_list[i])
+    }
+  }
+  
+  new_options.sort(function(a, b){return b-a})
+  
+  while (sel.lastChild && sel.children.length>1) {
+    sel.removeChild(sel.lastChild);
+  }
+
+  for(var i=0; i<new_options.length; i++)
   {
     var opt = document.createElement('option');
-    opt.appendChild( document.createTextNode(revision_list[i]) );
-    opt.value = revision_list[i]; 
-    sel.appendChild(opt); 
+    opt.appendChild( document.createTextNode(new_options[i]));
+    opt.value = new_options[i]; 
+    sel.appendChild(opt);
   }
   
@@ -81 +104 @@
   }
 
+  var emptyRow = document.createElement("tr")
+  emptyRow.setAttribute("id", "empty_compile_row")
+  emptyRow.style.display="none"
+  table.appendChild(emptyRow)
+  
+  var myCell = document.createElement("TD");
+  myCell.setAttribute("id", "empty_compile_row_revision")
+  myCell.style.fontWeight="bold"
+  emptyRow.appendChild(myCell)
+
+  for (var machine_index=0; machine_index<machine_list.length; machine_index++)
+  {
+    var myCell = document.createElement("TD");
+    myCell.innerHTML="No Compile Information"
+    myCell.style.color="white"
+    emptyRow.appendChild(myCell)
+  }
+
   for (var i=0; i<revision_list.length; i++)
   {
@@ -88 +129 @@
     myRow.setAttribute("id", "compile_table_"+revision);
     myRow.setAttribute("class", "compile_table_row");
+    table.appendChild(myRow)
     
     var myCell = document.createElement("TD");
@@ -101 +143 @@
       myRow.appendChild(myCell)
     }        
-    table.appendChild(myRow)
 
   }
@@ -152 +193 @@
 
     mySubTable = document.createElement("table")
+    mySubTable.setAttribute("class", "compile_sub_table")
     myTD.appendChild(mySubTable)
 

XIOS/trunk/xios_test_suite/HTML/generate_test_table.js

@@ -1 +1 @@
 var dict = {"-1": "❌", "0": "❎", "1": "✅"}
-
-// var bg_color = ["#84c5ff", "#96cdff", "#a1d3ff", "#b3dafd", "#c2e1fd"]
 
 function generateTestTable()
@@ -50 +48 @@
 
   revision_list.sort(function(a, b){return b-a});
-  
-  
-  // Generate select list for compile table
-
-  var sel = document.getElementById("test_revision");
-  for (var i=0; i<revision_list.length; i++)
+
+  // Generate select list for test table
+
+  var sel = document.getElementById("revision");
+
+  var sel_options = sel.children
+  
+  var new_options=[]
+  for(var i=0; i<sel_options.length-1; i++)
+  {
+    new_options[i] = sel_options[i+1].value
+  }
+  
+  for(var i=0; i<revision_list.length; i++)
+  {
+    if (!new_options.includes(revision_list[i]))
+    {
+      new_options.push(revision_list[i])
+    }
+  }
+  
+  new_options.sort(function(a, b){return b-a})
+  
+  while (sel.lastChild && sel.children.length>1) {
+    sel.removeChild(sel.lastChild);
+  }
+
+  for(var i=0; i<new_options.length; i++)
   {
     var opt = document.createElement('option');
-    opt.appendChild( document.createTextNode(revision_list[i]) );
-    opt.value = revision_list[i]; 
-    sel.appendChild(opt); 
-  }
-  
-  // Generate content of compile table
+    opt.appendChild( document.createTextNode(new_options[i]));
+    opt.value = new_options[i]; 
+    sel.appendChild(opt);
+  }
+  
+
+
+  
+  // Generate content of test table
   
   var table = document.getElementById("test_table")
@@ -85 +108 @@
   }
 
+  var emptyRow = document.createElement("tr")
+  emptyRow.setAttribute("id", "empty_test_row")
+  emptyRow.style.display="none"
+  table.appendChild(emptyRow)
+  
+  var myCell = document.createElement("TD");
+  myCell.setAttribute("id", "empty_test_row_revision")
+  myCell.style.fontWeight="bold"
+  emptyRow.appendChild(myCell)
+
+  for (var machine_index=0; machine_index<machine_list.length; machine_index++)
+  {
+    var myCell = document.createElement("TD");
+    myCell.innerHTML="No Test Information"
+    myCell.style.color="white"
+    emptyRow.appendChild(myCell)
+  }
+
+
   for (var i=0; i<revision_list.length; i++)
   {
@@ -92 +134 @@
     myRow.setAttribute("id", "test_table_"+revision);
     myRow.setAttribute("class", "test_table_row");
+    table.appendChild(myRow)
     
     var myCell = document.createElement("TD");
@@ -106 +149 @@
       myRow.appendChild(myCell)
     }        
-    table.appendChild(myRow)
   }
 
@@ -128 +170 @@
       if (!has_test_info)
       {
-        console.log("revision ",revision, "machine ",machine," has no test information")
         var myTD = document.getElementById("test_table_"+revision+"_"+machine);
         myTD.innerHTML = "No Test Information"
@@ -170 +211 @@
   myCell_3.setAttribute("id", "test_sub_table_"+revision+"_"+machine+"_"+build_dir+"_dropdown")
   myCell_4 = document.createElement("a")
-  myCell_4.innerHTML = ("show plein report")
-  myCell_4.onclick = function() {show_plein_report(machine, revision, build_dir)}
+  myCell_4.innerHTML = ("show plain report")
+  myCell_4.onclick = function() {show_plain_report(machine, revision, build_dir)}
   myCell_5 = document.createElement("a")
   myCell_5.innerHTML = ("show xios info")
@@ -428 +469 @@
 }
 
-// function build_level_toggle(classname)
-// {
-//   var myCells = document.getElementsByClassName(classname)
-//   for (var i=0; i<myCells.length; i++)
-//   {
-//     var mySubCells = document.getElementsByClassName(myCells[i].id)
-//     if (myCells[i].style.display=="table-row")
-//     {
-//       myCells[i].style.display="none" 
-//       for(var j=0; j<mySubCells.length; j++)
-//       {
-//         mySubCells[j].style.display="none"
-//         var mySubSubCells = document.getElementsByClassName(mySubCells[j].id)
-//         for(var k=0; k<mySubSubCells.length; k++)
-//         {
-//           mySubSubCells[k].style.display="none"
-//         }
-//       }
-//     }
-//     else
-//     {
-//       myCells[i].style.display="table-row"
-//     }
-//   }
-// }
-
-// function algo_level_toggle(classname)
-// {
-//   var myCells = document.getElementsByClassName(classname)
-//   for (var i=0; i<myCells.length; i++)
-//   {
-//     var mySubCells = document.getElementsByClassName(myCells[i].id)
-//     if (myCells[i].style.display=="table-row")
-//     {
-//       myCells[i].style.display="none" 
-//       for(var j=0; j<mySubCells.length; j++)
-//       {
-//         mySubCells[j].style.display="none"
-//       }
-//     }
-//     else
-//     {
-//       myCells[i].style.display="table-row"
-//     }
-//   }
-// }
-
-// function config_level_toggle(classname)
-// {
-//   var myCells = document.getElementsByClassName(classname)
-//   for (var i=0; i<myCells.length; i++)
-//   {
-//     if (myCells[i].style.display=="table-row")
-//     {
-//       myCells[i].style.display="none" 
-//     }
-//     else
-//     {
-//       myCells[i].style.display="table-row"
-//     }
-//   }
-// }

XIOS/trunk/xios_test_suite/HTML/xios-style.css

@@ -13 +13 @@
 {
     clear: both;
-    border:2px solid blue;
     margin-top:50px;
     vertical-align: top;
@@ -23 +22 @@
 }
 
-strong
+caption
 {
-    background-color:red;/* Fond rouge */
-    color:yellow;/* Texte de couleur jaune */
+    font-size: 1.4em;
+    font-weight: bold;
+    caption-side: top;
+    margin-bottom: 20px;
+    text-align: left;
 }
-
-
-em
-{
-    font-weight: bold;
-    font-size: 1.2em;
-    text-align: right;
-}
-
 
 
@@ -51 +44 @@
 
 
-td
-{
-    border: solid 1px white;
-}
-
 h1, h2
 {
-    text-align: center;
+    text-align: left;
 }
 
@@ -98 +86 @@
 }
 
-.showit 
-{
-    display: block;
-}
-  
 
 .compile_table
@@ -109 +92 @@
     margin-bottom: 30px;
     margin-top: 30px;
+    border-collapse: collapse;
 }
 
@@ -115 +99 @@
     margin-left: 20px;
     margin-bottom: 10px;
-    border: solid 1px white;
+    border: solid 2px white;
     min-width: 150px;
     text-align: center;
+}
+
+.compile_sub_table td
+{
+    border: solid 1px white;
+}
+
+.compile_sub_table
+{
+    border-collapse: collapse;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    margin-left: 10px;
+    margin-right: 10px;
+
 }
 
@@ -125 +124 @@
     margin-bottom: 30px;
     margin-top: 30px;
+    border-collapse: collapse;
 }
 
@@ -132 +132 @@
     margin-bottom: 10px;
     border: solid 2px white;
-    /* min-width: 150px; */
     text-align: center;
 }
 
+
 .test_sub_table
 {
-    /* margin-left: 10px; */
+    border-collapse: collapse;
     margin-bottom: 10px;
     margin-top: 10px;
+    margin-left: 10px;
+    margin-right: 10px;
 }
 
 .test_sub_table td
 {
-    /* margin-left: 20px;
-    margin-bottom: 10px; */
     border: solid 1px white;
-    /* min-width: 150px; */
     text-align: left;
 }
@@ -174 +173 @@
 
 
-.split 
-{
-    height: 100%;
-    width: 50%;
-    position: absolute;
-}
-  
-/* Control the left side */
-.left 
-{
-    left: 0;
-}
-  
-/* Control the right side */
-.right 
-{
-    right: 0;
-}
   
 .compile_table_row.hide
@@ -200 +181 @@
 .compile_table_row.show
 {
-    display: "";
+    display: "table-row";
 }
 
@@ -210 +191 @@
 .test_table_row.show
 {
-    display: "";
+    display: "table-row";
 }
-  
-.table_jz
-{
-    border: solid 0.2px black;
-    margin: 20px;
-}
-
-.table_jz.hide
-{
-    display: none;
-}
-
-.table_jz.show
-{
-    display: "";
-}
-  
-
-.table_jz td
-{
-    border: solid 0.1px white;
-}
-
-.table_irene
-{
-    border: solid 0.2px black;
-    margin: 20px;
-}
-  
-.table_irene.hide
-{
-    display: none;
-}
-
-.table_irene.show
-{
-    display: "";
-}
-
-.table_irene td
-{
-    border: solid 0.1px white;
-}

XIOS/trunk/xios_test_suite/HTML/xios_report.html

@@ -5 +5 @@
         <link rel="stylesheet" href="xios-style.css"/>
         <title>XIOS Unit Tests Report - Le Site Web</title>
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
         
         <script src="generate_compile_table.js" type="text/javascript"></script>
@@ -15 +14 @@
         <script src="https://forge.ipsl.jussieu.fr/ioserver/chrome/site/XIOS_TEST_SUITE/compile_jeanzay_info.js" type="text/javascript"></script>
         <script src="https://forge.ipsl.jussieu.fr/ioserver/chrome/site/XIOS_TEST_SUITE/test_jeanzay_info.js" type="text/javascript"></script>
+
     </head>
 
@@ -21 +21 @@
         <header>
             <h1>XIOS Unit Tests Report Web Page</h1>
-            <h2>(still under construction ... ...)</h2>
+            <!-- <h2>(still under construction ... ...)</h2> -->
         </header>
 
         <nav>
-            <div id="navborder">
-                <p id="xiosinfo">Some useful links:</p>
+            <div>
+                <!-- <p id="xiosinfo">Some useful links:</p> -->
                 <ul>
                     <li><a href="https://forge.ipsl.jussieu.fr/ioserver/wiki" target="_blank">XIOS wiki page</a></li>
-                    <li><a href="graph.html" target="_blank">Workflow Graph</a></li>
+                    <li><a href="graph.html" target="_blank">Workflow Graph Visualizer</a></li>
                 </ul> 
             </div>        
@@ -38 +38 @@
         <section>
 
-            <h2>Results of unit tests</h2>
+            <!-- <h2>Results of unit tests</h2> -->
 
             <form method="post" style="margin-left: 25px;">
 
-                <p><label for="Build revision">Choose a revision number to show compile information : </label>
-                    <select name="revision" id="compile_revision">
+                <p><label for="Build revision">Choose a revision number to show compile and test results : </label>
+                    <select name="revision" id="revision">
                         <option value="0" selected>All available revisions ...</option>
                     </select>
                 </p>
 
-                <p><label for="Test revision">Choose a revision number to show test results : </label>
-                    <select name="test_revision" id="test_revision">
-                        <option value="0" selected>All available revisions ...</option>
-                    </select>
-                </p>
-
-                
             </form>
 
@@ -66 +59 @@
 
             <div>
-                <table id="compile_table" style="margin: 50px; border:solid 0.2px; ">
+                <table id="compile_table" style="margin: 50px;">
+                    <caption>Table of XIOS Compile status</caption>
                     <tr style="font-weight: bold;" id="compile_table_row0"></tr>
                 </table>
@@ -72 +66 @@
 
 
-            <div>
-                <table id="test_table" style="margin: 50px; border:solid 0.2px; ">
+            <div style="margin-top: 100px;">
+                <table id="test_table" style="margin: 50px;">
+                    <caption>Table of XIOS unit tests results</caption>
                     <tr style="font-weight: bold;" id="test_table_row0"></tr>
                 </table>
             </div>
 
-
-            <!-- <div class="split left">
-                <div class="centered" id="div_table_jz">
-                </div>
-            </div>
-                  
-            <div class="split right">
-                <div class="centered" id="div_table_irene">
-                </div>
-            </div>  -->
 
         </section>
@@ -101 +86 @@
  
 <script>
-    // global variables for machine, def file location, and plein report prefix 
-    var machine_list=['Jean-Zay', 'Irene', 'Other'];
-    var location_list=["../Jean-Zay/", "../Irene/", "../Other"];
-    var plein_report_prefix_list=["jz_plein_report_", "irene_plein_report_", "other_plein_report_"];
 
     var params = "scrollbars=yes,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=600,height=300,left=100,top=100";
@@ -139 +120 @@
 
 
-    function show_plein_report(machine, revision, build_dir)
+    function show_plain_report(machine, revision, build_dir)
     {
         var info_list = eval("test_"+machine+"_"+revision+"_"+build_dir.replace("build_",""))
@@ -179 +160 @@
 <script>
 
-$("#compile_revision").change(function() {
-
-    if(this.value == 0)
-    {
-        var ans = document.getElementsByClassName('compile_table_row')
-        for (var i = 0; i < ans.length; i++)
-        {
-            cell = ans[i]
-            cell.classList.remove('hide')
-            cell.classList.add('show')
-        }
-    }
-    
-    else
-    {
-        var ans = document.getElementsByClassName('compile_table_row')
-        for (var i = 0; i < ans.length; i++)
-        {
-            cell = ans[i]
-            cell.classList.remove('show')
-            cell.classList.add('hide')
-        }
-
-        var ans = document.getElementById('compile_table_'+this.value)
-        if(ans)
-        {
-            ans.classList.remove('hide')
-            ans.classList.add('show')
-        }  
-    }
-});
- 
-</script>
-
-
-<script>
-
-    $("#test_revision").change(function() {
-    
+    document.getElementById("revision").addEventListener("change", myFunction);
+    
+    function myFunction() 
+    {
         if(this.value == 0)
         {
-            var ans = document.getElementsByClassName('test_table_row')
+            // compile part ...
+
+            var ans = document.getElementsByClassName('compile_table_row')
             for (var i = 0; i < ans.length; i++)
             {
@@ -227 +175 @@
                 cell.classList.add('show')
             }
+            document.getElementById("empty_compile_row").style.display="none"
+
+            // test part ...
+
+            var ans = document.getElementsByClassName('test_table_row')
+            for (var i = 0; i < ans.length; i++)
+            {
+                cell = ans[i]
+                cell.classList.remove('hide')
+                cell.classList.add('show')
+            }
+            document.getElementById("empty_test_row").style.display="none"
         }
         
         else
         {
-            var ans = document.getElementsByClassName('test_table_row')
+            // compile part ...
+
+            var ans = document.getElementsByClassName('compile_table_row')
             for (var i = 0; i < ans.length; i++)
             {
@@ -238 +200 @@
                 cell.classList.add('hide')
             }
-    
+            document.getElementById("empty_compile_row").style.display="none"
+
+            var ans = document.getElementById('compile_table_'+this.value)
+            if(ans)
+            {
+                ans.classList.remove('hide')
+                ans.classList.add('show')
+            } 
+            else
+            {
+                document.getElementById("empty_compile_row_revision").innerHTML=this.value
+                document.getElementById("empty_compile_row").style.display="table-row"
+            } 
+
+            
+            // test part ...
+            
+            var ans = document.getElementsByClassName('test_table_row')
+            for (var i = 0; i < ans.length; i++)
+            {
+                cell = ans[i]
+                cell.classList.remove('show')
+                cell.classList.add('hide')
+            }
+            document.getElementById("empty_test_row").style.display="none"
+            
             var ans = document.getElementById('test_table_'+this.value)
             if(ans)
@@ -244 +231 @@
                 ans.classList.remove('hide')
                 ans.classList.add('show')
-            }  
-        }
-    });
-     
-    </script>
+            } 
+            else
+            {
+                document.getElementById("empty_test_row_revision").innerHTML=this.value
+                document.getElementById("empty_test_row").style.display="table-row"
+            } 
+        }
+    }
+</script>
+
 
 <script>
+
     function level0_toggle(machine, my_revision) {
         var level1_ans = document.getElementsByClassName('table_'+machine+'_'+my_revision+"_build_level")