yellow status for uses and experiments with partially online devices

Author: timcowlishaw

app/assets/stylesheets/bootstrap_variables.scss

@@ -33,6 +33,8 @@ $green: #00E597;
 $teal: #2CB5AE;
 $yellow: #FFC100;
 
+$darker-yellow: #CC9900;
+
 $primary: $yellow;
 $info: $purple;
 

app/assets/stylesheets/global.scss

@@ -318,6 +318,16 @@ a.subtle-link {
     fill: $green;
   }
 
+  &.partially-online {
+    color: $yellow;
+    fill: $yellow;
+  }
+
+  .darker &.partially-online {
+    color: $darker-yellow;
+    fill: $darker-yellow;
+  }
+
   &.offline {
     color: $red;
     fill: $red;

app/helpers/application_helper.rb

@@ -14,6 +14,16 @@ def flash_class(level)
     end
   end
 
+  def device_collection_status_class(container)
+    if container.all_devices_online?
+      "online"
+    elsif container.all_devices_offline?
+      "offline"
+    else
+      "partially-online"
+    end
+  end
+
   def local_time_zone
     current_user&.time_zone || ActiveSupport::TimeZone["Etc/UTC"]
   end

app/models/experiment.rb

@@ -41,10 +41,14 @@ def components_for_measurement(measurement)
     }.uniq
   end
 
-  def all_online?
+  def all_devices_online?
     devices.all? { |d| d.online? }
   end
 
+  def all_devices_offline?
+    devices.all? { |d| !d.online? }
+  end
+
   def online_device_count
     devices.filter { |d| d.online? }.length
   end

app/models/user.rb

@@ -155,8 +155,12 @@ def time_zone
     preferred_time_zone && ActiveSupport::TimeZone[preferred_time_zone] || ActiveSupport::TimeZone["Etc/UTC"]
   end
 
-  def any_devices_online?
-    devices.any? { |d| d.online? }
+  def all_devices_online?
+    devices.all? { |d| d.online? }
+  end
+
+  def all_devices_offline?
+    devices.all? { |d| !d.online? }
   end
 
   def online_device_count

app/views/ui/devices/_device.html.erb

@@ -7,7 +7,7 @@
       <%= render partial: "ui/shared/map", locals: { points: [{lat: device.latitude, lng: device.longitude}] } %>
     <% end %>
   </div>
-  <div class="col-12 col-md-9 p-3 pb-4">
+  <div class="col-12 col-md-9 p-3 pb-4 darker">
     <h3 class="mb-1 text-break"><%= device.name %></h3>
     <%= render partial: "ui/devices/meta", locals: { device: device, hide_owner: local_assigns[:hide_owner] } %>
     <% if local_assigns[:with_actions] %>

app/views/ui/experiments/_experiment.html.erb

@@ -11,7 +11,7 @@
       }
     %>
   </div>
-  <div class="col-12 col-md-9 p-3 pb-4">
+  <div class="col-12 col-md-9 p-3 pb-4 darker">
     <h3 class="mb-1 text-break"><%= experiment.name %></h3>
     <%= render partial: "ui/experiments/meta", locals: { experiment: experiment, hide_owner: local_assigns[:hide_owner] } %>
     <% if local_assigns[:with_actions] %>

app/views/ui/experiments/_meta.html.erb

@@ -1,4 +1,4 @@
-<p class="mb-0 device-status <%= experiment.all_online? ? "online" : "offline" %>">
+<p class="mb-0 device-status <%= device_collection_status_class(experiment) %>">
   <span class="pe-1"><%= show_svg("status_icon.svg") %></span>
   <strong><%= pluralize(experiment.devices.length, t(:experiment_meta_device_noun)) %> (<%= experiment.online_device_count %> <%= t(:experiment_meta_online_adjective) %>)</strong>
 </p>

app/views/ui/users/_meta.html.erb

@@ -10,7 +10,7 @@
     <%= link_to(user.url, user.url, class: "link-white") %>
   </p>
 <% end %>
-  <p class="mb-0 device-status <%= user.any_devices_online? ? "online" : "offline" %>">
+  <p class="mb-0 device-status <%= device_collection_status_class(user) %>">
     <span class="pe-1"><%= show_svg("status_icon.svg") %></span>
     <strong>
       <%= pluralize(user.devices.length, t(:user_meta_device_noun)) %>