summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--lib/helpers.rb14
-rw-r--r--views/index.erb4
-rw-r--r--views/layout.erb127
-rw-r--r--views/notice.erb20
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 %>