Migrate to Tyrian v220200511T025318Z

Signed-off-by: Max Magorsch <arzano@gentoo.org>
author: Max Magorsch <arzano@gentoo.org> 2020-05-11 04:52:10 +0200
committer: Max Magorsch <arzano@gentoo.org> 2020-05-11 04:52:10 +0200
commit: e3eff68daf102b33fa9ebdfb6e036bce9e3feb60 (patch)
tree: 5f9d7880b9ed68ff84e370ca13c08b7c4efa2e39
parent: Use the latest version of tyrian v1 (diff)
download: infra-status-e3eff68daf102b33fa9ebdfb6e036bce9e3feb60.tar.gz
infra-status-e3eff68daf102b33fa9ebdfb6e036bce9e3feb60.tar.bz2
infra-status-e3eff68daf102b33fa9ebdfb6e036bce9e3feb60.zip
4 files changed, 83 insertions, 82 deletions
diff --git a/lib/helpers.rb b/lib/helpers.rb
index 55fffea..4430886 100644
--- a/lib/helpers.rb
+++ b/lib/helpers.rb
@@ -22,7 +22,7 @@ helpers do
     content = ''
 
     ServiceRegistry.instance.columns[id].each do |category|
-      content << "<h3>%s</h3>\n" % category
+      content << "<h3 class='mt-3'>%s</h3>\n" % category
       content << services_info(ServiceRegistry.instance.categories[category][:services])
     end
 
@@ -41,7 +41,7 @@ helpers do
       service_name = service_array.nil? ? 'UNKNOWN NAME' : service_array[:name]
       data_service_name = service_name.gsub('"', "'")
       content << "
-        <a class=\"list-group-item has-tooltip notice-link status-#{_service_status}\" href=\"#notices\" title=\"#{_status_text}\"
+        <a class=\"list-group-item list-group-item-action has-tooltip notice-link status-#{_service_status}\" href=\"#notices\" title=\"#{_status_text}\"
            data-toggle=\"tooltip\" data-placement=\"top\" data-container=\"body\"
            data-service=\"#{service}\" data-service-name=\"#{data_service_name}\">
 
@@ -83,13 +83,13 @@ helpers do
 
   def panel_class(notice)
     if notice['type'] == 'outage'
-      'panel-danger'
+      'border-danger'
     elsif notice['type'] == 'information'
-      'panel-info'
+      'border-info'
     elsif notice['type'] == 'maintenance'
-      'panel-warning'
+      'border-warning'
     else
-      'panel-default'
+      ''
     end
   end
 
@@ -128,7 +128,7 @@ helpers do
     when 'maintenance'
       return '<i class="fa fa-wrench"></i>'
     when 'outage'
-      return '<i class="glyphicon glyphicon-fire"></i>'
+      return '<i class="fa fa-fire" aria-hidden="true"></i>'
     when 'information'
       return '<i class="fa fa-info-circle"></i>'
     end
diff --git a/views/index.erb b/views/index.erb
index 568b5eb..2bafe24 100644
--- a/views/index.erb
+++ b/views/index.erb
@@ -2,7 +2,7 @@
 
 <p>This data is aggregated from our automated service monitoring system as well as the outage and maintenance notices posted below.</p>
 
-<h2>Service availability overview</h2>
+<h2 class="mb-4">Service availability overview</h2>
 
 <div class="row">
   <div class="col-lg-4">
@@ -16,6 +16,6 @@
   </div>
 </div>
 
-<h2 id="notices">Maintenance and outage notices <small id="notices-for"></small></h2>
+<h2 id="notices" class="mt-5">Maintenance and outage notices <small id="notices-for"></small></h2>
 
 <%= partial :notice, :collection => NoticeStore.instance.visible_notices %>
diff --git a/views/layout.erb b/views/layout.erb
index a2cb8be..64d0480 100644
--- a/views/layout.erb
+++ b/views/layout.erb
@@ -6,73 +6,77 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="theme-color" content="#54487a">
   <meta name="description" content="Gentoo infrastructure status provides information on the status of the services the Gentoo Linux distribution offers to its developers and users.">
-  <link href="https://assets.gentoo.org/tyrian/v1/bootstrap.min.css" rel="stylesheet" media="screen">
-  <link href="https://assets.gentoo.org/tyrian/v1/tyrian.min.css" rel="stylesheet" media="screen">
+  <link href="https://assets.gentoo.org/tyrian/v2/tyrian.min.css" rel="stylesheet" media="screen">
   <link href="/assets/css/infra-status.css" rel="stylesheet" media="screen">
   <link rel="icon" href="https://www.gentoo.org/favicon.ico" type="image/x-icon">
 </head>
 <body>
-  <header>
+
+    <header>
     <div class="site-title">
-      <div class="container">
-        <div class="row">
-          <div class="site-title-buttons">
+    <div class="container">
+      <div class="row justify-content-between">
+        <div class="logo">
+          <a href="/" title="Back to the homepage" class="site-logo">
+              <img src="https://assets.gentoo.org/tyrian/v2/site-logo.png" alt="Gentoo" srcset="https://assets.gentoo.org/tyrian/v2/site-logo.svg">
+          </a>
+          <span class="site-label">Infra status</span>
+        </div>
+        <div class="site-title-buttons">
+          <div class="btn-group btn-group-sm">
+            <a href="https://get.gentoo.org/" role="button" class="btn get-gentoo"><span class="fa fa-fw fa-download"></span>
+              <strong>Get Gentoo!</strong></a>
             <div class="btn-group btn-group-sm">
-              <a href="https://get.gentoo.org/" role="button" class="btn get-gentoo"><span class="fa fa-fw fa-download"></span> <strong>Get Gentoo!</strong></a>
-              <div class="btn-group btn-group-sm">
-                <a class="btn gentoo-org-sites dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
-                  <span class="fa fa-fw fa-map-o"></span> <span class="hidden-xs">gentoo.org sites</span> <span class="caret"></span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-right">
-                  <li><a href="https://www.gentoo.org/" title="Main Gentoo website"><span class="fa fa-home fa-fw"></span> gentoo.org</a></li>
-                  <li><a href="https://wiki.gentoo.org/" title="Find and contribute documentation"><span class="fa fa-file-text-o fa-fw"></span> Wiki</a></li>
-                  <li><a href="https://bugs.gentoo.org/" title="Report issues and find common issues"><span class="fa fa-bug fa-fw"></span> Bugs</a></li>
-                  <li><a href="https://forums.gentoo.org/" title="Discuss with the community"><span class="fa fa-comments-o fa-fw"></span> Forums</a></li>
-                  <li><a href="https://packages.gentoo.org/" title="Find software for your Gentoo"><span class="fa fa-hdd-o fa-fw"></span> Packages</a></li>
-                  <li class="divider"></li>
-                  <li><a href="https://planet.gentoo.org/" title="Find out what's going on in the developer community"><span class="fa fa-rss fa-fw"></span> Planet</a></li>
-                  <li><a href="https://archives.gentoo.org/" title="Read up on past discussions"><span class="fa fa-archive fa-fw"></span> Archives</a></li>
-                  <li><a href="https://sources.gentoo.org/" title="Browse our source code"><span class="fa fa-code fa-fw"></span> Sources</a></li>
-                  <li class="divider"></li>
-                  <li><a href="https://infra-status.gentoo.org/" title="Get updates on the services provided by Gentoo"><span class="fa fa-server fa-fw"></span> Infra status</a></li>
-                </ul>
+              <a class="btn gentoo-org-sites dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
+                <span class="fa fa-fw fa-map-o"></span> <span class="d-none d-sm-inline">gentoo.org sites</span>
+                <span class="caret"></span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right">
+                <a class="dropdown-item" href="https://www.gentoo.org/" title="Main Gentoo website"><span class="fa fa-home fa-fw"></span>
+                  gentoo.org</a>
+                <a class="dropdown-item" href="https://wiki.gentoo.org/" title="Find and contribute documentation"><span class="fa fa-file-text-o fa-fw"></span>
+                  Wiki</a>
+                <a class="dropdown-item" href="https://bugs.gentoo.org/" title="Report issues and find common issues"><span class="fa fa-bug fa-fw"></span>
+                  Bugs</a>
+                <a class="dropdown-item" href="https://forums.gentoo.org/" title="Discuss with the community"><span class="fa fa-comments-o fa-fw"></span>
+                  Forums</a>
+                <a class="dropdown-item" href="https://packages.gentoo.org/" title="Find software for your Gentoo"><span class="fa fa-hdd-o fa-fw"></span>
+                  Packages</a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="https://planet.gentoo.org/" title="Find out what's going on in the developer community"><span class="fa fa-rss fa-fw"></span>
+                  Planet</a>
+                <a class="dropdown-item" href="https://archives.gentoo.org/" title="Read up on past discussions"><span class="fa fa-archive fa-fw"></span>
+                  Archives</a>
+                <a class="dropdown-item" href="https://sources.gentoo.org/" title="Browse our source code"><span class="fa fa-code fa-fw"></span>
+                  Sources</a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="https://infra-status.gentoo.org/" title="Get updates on the services provided by Gentoo"><span class="fa fa-server fa-fw"></span>
+                  Infra Status</a>
               </div>
             </div>
           </div>
-          <div class="logo">
-            <a href="/" title="Back to the homepage" class="site-logo">
-              <object data="https://assets.gentoo.org/tyrian/v1/site-logo.svg" type="image/svg+xml">
-                <img src="https://assets.gentoo.org/tyrian/v1/site-logo.png" alt="Gentoo Linux Logo">
-              </object>
-            </a>
-            <span class="site-label">Infra status</span>
-          </div>
         </div>
       </div>
     </div>
-    <nav class="tyrian-navbar" role="navigation">
-      <div class="container">
-        <div class="row">
-          <div class="navbar-header">
-            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
-              <span class="sr-only">Toggle navigation</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
-          </div>
-          <div class="collapse navbar-collapse navbar-main-collapse">
-            <ul class="nav navbar-nav">
-              <li><a href="/">Home</a></li>
-              <li><a href="/feed.atom"><span class="fa fa-rss"></span> Atom feed</a></li>
-            </ul>
-          </div>
-        </div>
+    </div>
+    <nav class="tyrian-navbar navbar navbar-dark navbar-expand-lg bg-primary" role="navigation">
+    <div class="container">
+      <div class="navbar-header">
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-main-collapse" aria-controls="navbar-main-collapse" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
       </div>
+      <div class="collapse navbar-collapse navbar-main-collapse" id="navbar-main-collapse">
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
+          <li class="nav-item"><a class="nav-link" href="/feed.atom"><span class="fa fa-rss"></span> Atom feed</a></a></li>
+        </ul>
+      </div>
+    </div>
     </nav>
-  </header>
+    </header>
 
-  <div class="container">
+  <div class="container pb-4">
     <div class="row">
       <div class="col-lg-12">
         <%= yield %>
@@ -83,40 +87,40 @@
   <footer>
     <div class="container">
       <div class="row">
-        <div class="col-xs-12 col-md-offset-2 col-md-7">
+        <div class="col-12 offset-md-2 col-md-7">
           <h3 class="footerhead">Gentoo infrastructure status</h3>
           <div class="row">
-            <div class="col-xs-12 col-md-4">
+            <div class="col-12 col-md-4">
               <span class="group-header">Status data updated</span>
               <br>
               <%= date_format ServiceRegistry.instance.load_date %>
             </div>
-            <div class="col-xs-12 col-md-4">
+            <div class="col-12 col-md-4">
               <span class="group-header">Notices updated</span>
               <br>
               <%= date_format NoticeStore.instance.load_date %>
             </div>
-            <div class="col-xs-12 col-md-4">
+            <div class="col-12 col-md-4">
               <span class="group-header">Served by</span>
               <br>
               <%= Socket.gethostname %>
             </div>
           </div>
         </div>
-        <div class="col-xs-12 col-md-3">
+        <div class="col-12 col-md-3">
           <h3 class="footerhead">Questions or comments?</h3>
           Please feel free to <a href="mailto:infra@gentoo.org">contact us</a>.
         </div>
       </div>
       <div class="row">
-        <div class="col-xs-2 col-sm-3 col-md-2">
+        <div class="col-2 col-sm-3 col-md-2">
           <ul class="footerlinks three-icons">
             <li><a href="https://twitter.com/gentoo" title="@Gentoo on Twitter"><span class="fa fa-twitter fa-fw"></span></a></li>
             <li><a href="https://www.facebook.com/gentoo.org" title="Gentoo on Facebook"><span class="fa fa-facebook fa-fw"></span></a></li>
             <li></li>
           </ul>
         </div>
-        <div class="col-xs-10 col-sm-9 col-md-10">
+        <div class="col-10 col-sm-9 col-md-10">
           <strong>&copy; 2001&ndash;2020 Gentoo Foundation, Inc.</strong><br>
           <small>
             Gentoo is a trademark of the Gentoo Foundation, Inc.
@@ -129,8 +133,9 @@
     </div>
   </footer>
 
-  <script src="https://assets.gentoo.org/tyrian/v1/jquery.min.js"></script>
-  <script src="https://assets.gentoo.org/tyrian/v1/bootstrap.min.js"></script>
+    <script src="https://assets.gentoo.org/tyrian/v2/jquery-3.3.slim.js"></script>
+    <script src="https://assets.gentoo.org/tyrian/v2/popper.min.js"></script>
+    <script src="https://assets.gentoo.org/tyrian/v2/bootstrap.min.js"></script>
   <script src="/assets/js/infra-status.js"></script>
 </body>
 </html>
diff --git a/views/notice.erb b/views/notice.erb
index eb740f2..5959fac 100644
--- a/views/notice.erb
+++ b/views/notice.erb
@@ -1,15 +1,12 @@
-<div class="panel <%= panel_class(notice) %> notice" data-services="<%= notice['affects'].join ' ' %>" data-url="<%= notice.url %>">
-  <div class="panel-heading">
-    <h3 class="panel-title"><%= item_icon notice['type']%> <a href="/notice/<%= h notice['id'] %>"><%= h notice['title'] %></a></h3>
-  </div>
-  <div class="panel-body">
+<div class="card <%= panel_class(notice) %> notice" data-services="<%= notice['affects'].join ' ' %>" data-url="<%= notice.url %>">
+  <h3 class="card-header"><%= item_icon notice['type']%> <a class="text-dark" href="/notice/<%= h notice['id'] %>"><%= h notice['title'] %></a></h3>
+  <div class="card-body">
     <%= markdown notice.content %>
   </div>
-  <div class="panel-footer">
+  <div class="card-footer">
     <div class="row">
       <div class="col-sm-4 has-tooltip" data-toggle="tooltip" data-placement="top" title="Notice publication date">
-        <span class="glyphicon glyphicon-send pull-left" title="Notice publication date"></span>
-        <div style="margin-left: 1.25em"><em><%= date_format notice['created_at'] %></em></div>
+        <div><i class="fa fa-paper-plane mr-1" title="Notice publication date" aria-hidden="true"></i> <em><%= date_format notice['created_at'] %></em></div>
       </div>
       <% if notice.key? 'starts_at' %>
         <%- diff = ((DateTime.now - notice['starts_at']) * 24 * 60 * 60).to_i %>
@@ -19,15 +16,14 @@
         <% else %>
           title="Maintenance started <%= humanize(diff) %> ago"
         <% end %>>
-          <span class="glyphicon glyphicon-wrench pull-left" title="Maintenance start time"></span>
-          <div style="margin-left: 1.25em;"><em><%= date_format notice['starts_at'] %></em></div>
+          <div><i class="fa fa-wrench mr-1" title="Maintenance start time" aria-hidden="true"></i> <em><%= date_format notice['starts_at'] %></em></div>
         </div>
       <% else %>
         <div class="col-sm-4"></div>
       <% end %>
       <div class="col-sm-4 has-tooltip" data-toggle="tooltip" data-placement="top" title="Estimated time of service recovery">
-        <span class="glyphicon glyphicon-ok pull-left" title="Estimated time of service recovery"></span>
-        <div style="margin-left: 1.25em;">
+        <div>
+          <i class="fa fa-check mr-1" title="Estimated time of service recovery" aria-hidden="true"></i>
           <% if notice.key? 'eta' %>
             <em><%= date_format notice['eta'] %></em> (estimated)
           <% else %>
author	Max Magorsch <arzano@gentoo.org>	2020-05-11 04:52:10 +0200
committer	Max Magorsch <arzano@gentoo.org>	2020-05-11 04:52:10 +0200
commit	e3eff68daf102b33fa9ebdfb6e036bce9e3feb60 (patch)
tree	5f9d7880b9ed68ff84e370ca13c08b7c4efa2e39
parent	Use the latest version of tyrian v1 (diff)
download	infra-status-e3eff68daf102b33fa9ebdfb6e036bce9e3feb60.tar.gz infra-status-e3eff68daf102b33fa9ebdfb6e036bce9e3feb60.tar.bz2 infra-status-e3eff68daf102b33fa9ebdfb6e036bce9e3feb60.zip