[tools 2/2] testbot/web: Use ValueFormatter for the Activity page.

[Francois Gouget]

Update ValueFormatter and datetime.js to add support for showing the
time with the date as a tooltip.

Signed-off-by: Francois Gouget 
---
 testbot/lib/ObjectModel/CGI/ValueFormatter.pm | 48 ++++++++++++++++++-
 testbot/web/Activity.pl                       | 34 +++----------
 testbot/web/WineTestBot.css                   |  1 +
 testbot/web/js/datetime.js                    | 13 +++++
 4 files changed, 67 insertions(+), 29 deletions(-)

diff --git a/testbot/lib/ObjectModel/CGI/ValueFormatter.pm b/testbot/lib/ObjectModel/CGI/ValueFormatter.pm
index 47236c748..62c1499ab 100644
--- a/testbot/lib/ObjectModel/CGI/ValueFormatter.pm
+++ b/testbot/lib/ObjectModel/CGI/ValueFormatter.pm
@@ -22,7 +22,8 @@ use strict;
 package ObjectModel::CGI::ValueFormatter;

use Exporter 'import';
-our @EXPORT = qw(GetDateTimeJSFile GenerateDateTime GenerateValueHTML);
+our @EXPORT = qw(GetDateTimeJSFile GenerateDateTime
+                 GenerateTimeTipDate GenerateValueHTML);

use POSIX qw(strftime);

@@ -102,6 +103,51 @@ sub GenerateDateTime($;$$)
   }
 }

+=pod
+=over 12
+
+=item C<GenerateTimeTipDate()>
+
+Show the timestamp's time with the date as a tooltip.
+
+The timestamp is shown in the user's timezone if JavaScript is available and
+in the server's timezone otherwise.
+
+The default for TagAttrs is 'a' and it should always be a tag that shows the
+content of the title attribute as a tooltip.
+
+See GenerateDateTime() for more details.
+
+=back
+=cut
+
+sub GenerateTimeTipDate($;$$)
+{
+  my ($Sec1970, $Class, $TagAttrs) = @_;
+
+  if (defined $Sec1970)
+  {
+    my $Tag;
+    if ($TagAttrs)
+    {
+      $Tag = $TagAttrs;
+      $Tag =~ s/ .*$//;
+    }
+    else
+    {
+      $TagAttrs = $Tag = "a";
+    }
+    $Class = "$Class " if ($Class);
+    print "<$TagAttrs class='${Class}timetipdate' timestamp='$Sec1970' ",
+          strftime("title='%Y-%m-%d'>%H:%M:%S", localtime($Sec1970)),
+          "</$Tag>";
+  }
+  else
+  {
+    print "&nbsp;";
+  }
+}
+

#
 # Property value formatting
diff --git a/testbot/web/Activity.pl b/testbot/web/Activity.pl
index a92435805..ffdf0fef6 100644
--- a/testbot/web/Activity.pl
+++ b/testbot/web/Activity.pl
@@ -24,9 +24,9 @@ package ActivityPage;
 use ObjectModel::CGI::FreeFormPage;
 our @ISA = qw(ObjectModel::CGI::FreeFormPage);

-use POSIX qw(strftime);
-
 use ObjectModel::BasicPropertyDescriptor;
+use ObjectModel::CGI::ValueFormatter;
+
 use WineTestBot::Config;
 use WineTestBot::Activity;
 use WineTestBot::Log; # For Elapsed()
@@ -75,16 +75,6 @@ sub GeneratePage($)
   $self->SUPER::GeneratePage();
 }

-sub _GetHtmlTime($)
-{
-  my ($Timestamp) = @_;
-  return "<noscript><div>",
-      strftime("<a class='title' title='%d'>%H:%M:%S</a>", localtime($Timestamp)), "</div></noscript>\n" .
-      "<script type='text/javascript'><!--\n" .
-      "ShowDateTime($Timestamp);\n" .
-      "//--></script>";
-}
-
 sub _GetHtmlDuration($)
 {
   my ($Secs) = @_;
@@ -110,25 +100,11 @@ sub GenerateBody($)
   $self->GenerateFormStart();
   print "<div class='ItemProperty'><label>Analyze the activity of the past <div class='ItemValue'><input type='text' name='Hours' maxlength='3' size='3' value='", $self->GetParam("Hours"), "'/></div> hours.</label></div>\n";
   $self->GenerateFormEnd();
+  $self->GenerateImportJS(GetDateTimeJSFile());

print "<h1>${ProjectName} Test Bot activity</h1>\n";
   print "<div class='Content'>\n";

-  print <<"EOF";
-<script type='text/javascript'><!--\
-function Pad2(n)
-{
-    return n < 10 ? '0' + n : n;
-}
-function ShowDateTime(Sec1970)
-{
-  var Dt = new Date(Sec1970 * 1000);
-  document.write('<a class="title" title="' + Pad2(Dt.getDate()) + '">' + Pad2(Dt.getHours()) + ':' +
-                 Pad2(Dt.getMinutes()) + ':' + Pad2(Dt.getSeconds()) + "</a>");
-}
-//--></script>
-EOF
-
   ### Get the sorted VMs list

my $VMs = CreateVMs();
@@ -162,7 +138,9 @@ EOF
     next if (!$Group->{statusvms});

my $GroupId = $Group->{id};
-    print "<tr><td id='g$GroupId'>", _GetHtmlTime($Group->{start}), "</td>";
+    print "<tr><td id='g$GroupId'>";
+    GenerateTimeTipDate($Group->{start});
+    print "</td>";
     if ($Group->{engine})
     {
       print "<td class='Record RecordEngine'>$Group->{engine}</td>\n";
diff --git a/testbot/web/WineTestBot.css b/testbot/web/WineTestBot.css
index a50125f8e..0955f58cf 100644
--- a/testbot/web/WineTestBot.css
+++ b/testbot/web/WineTestBot.css
@@ -408,6 +408,7 @@ pre
 .log-fullnew { color: red; font-weight: bold; }

a.title { color:inherit; text-decoration: none; }
+a.timetipdate { color:inherit; text-decoration: none; }

th.Record { text-align: center; }
 td.Record { text-align: center; }
diff --git a/testbot/web/js/datetime.js b/testbot/web/js/datetime.js
index 8f56719ca..47b0feb0f 100644
--- a/testbot/web/js/datetime.js
+++ b/testbot/web/js/datetime.js
@@ -32,11 +32,24 @@ function ShowDateTime(dom)
                     Pad2(dt.getMinutes()) +':'+ Pad2(dt.getSeconds())
 }

+function ShowTimeTipDate(dom)
+{
+    const sec1970 = dom.getAttribute("timestamp");
+    const dt = new Date(sec1970 * 1000);
+    dom.setAttribute('title', dt.getFullYear() +'-'+ Pad2(dt.getMonth() + 1)
+                              +'-'+ Pad2(dt.getDate()));
+    dom.innerHTML = Pad2(dt.getHours()) +':'+ Pad2(dt.getMinutes()) +':'+
+                    Pad2(dt.getSeconds());
+}
+
 function init()
 {
     document.querySelectorAll(".datetime").forEach(dom => {
         ShowDateTime(dom);
     });
+    document.querySelectorAll(".timetipdate").forEach(dom => {
+        ShowTimeTipDate(dom);
+    });
 }

window.addEventListener('load', init);