Disk info and misc improvements

assets/css/app.css

@@ -4,13 +4,27 @@
 
 /* This file is for your main application CSS */
 
-#cpus, #mems {
+h1 {
+  font-size: 2rem;
+}
+
+h2 {
+  font-size: 1.5rem;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}
+
+h2:first-child {
+  margin-top: 0;
+}
+
+#cpus, #mems, #disks {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 10px;
 }
 
-#cpus h2, #mems h2 {
+#cpus h2, #mems h2, #disks h2 {
   grid-column: 1 / 3;
 }
 
@@ -25,11 +39,14 @@
 .progress-current {
   grid-area: current;
   text-align: right;
+  white-space: nowrap;
 }
 
 .progress label {
   grid-area: label;
   margin-right: 10px;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
 }
 
 .progress-current, .progress label {

lib/tietopaketti/sysdata.ex

@@ -1,6 +1,15 @@
 defmodule Tietopaketti.Sysdata do
   import Tietopaketti.TypedStruct
 
+  defmodule Disk do
+    deftypedstruct(%{
+      id: non_neg_integer(),
+      name: String.t(),
+      total: non_neg_integer(),
+      used_percent: non_neg_integer()
+    })
+  end
+
   defmodule Mem do
     deftypedstruct(%{
       total_ram: non_neg_integer(),
@@ -12,6 +21,7 @@ defmodule Tietopaketti.Sysdata do
 
   deftypedstruct(%{
     cpu: [Float.t()],
-    mem: Mem.t()
+    mem: Mem.t(),
+    disk: [Disk.t()]
   })
 end

lib/tietopaketti/sysmon.ex

@@ -51,16 +51,34 @@ defmodule Tietopaketti.Sysmon do
 
     mem_data = :memsup.get_system_memory_data()
 
+    disk_data =
+      :disksup.get_disk_data()
+      |> Enum.with_index()
+      |> Enum.map(fn {{name, total, used}, i} ->
+        %Sysdata.Disk{id: i, name: name, total: total, used_percent: used}
+      end)
+
+    free_memory =
+      case Keyword.get(mem_data, :available_memory, :unavailable) do
+        :unavailable ->
+          Keyword.get(mem_data, :free_memory, 0.0) + Keyword.get(mem_data, :buffered_memory, 0.0) +
+            Keyword.get(mem_data, :cached_memory, 0.0)
+
+        value ->
+          value
+      end
+
     mem = %Sysdata.Mem{
       total_ram: Keyword.get(mem_data, :system_total_memory, 0.0),
-      free_ram: Keyword.get(mem_data, :free_memory, 0.0),
+      free_ram: free_memory,
       total_swap: Keyword.get(mem_data, :total_swap, 0.0),
       free_swap: Keyword.get(mem_data, :free_swap, 0.0)
     }
 
     data = %Sysdata{
       cpu: cpu,
-      mem: mem
+      mem: mem,
+      disk: disk_data
     }
 
     Phoenix.PubSub.broadcast(state.pubsub_name, pubsub_topic(), {Tietopaketti.Sysdata, data})

lib/tietopaketti_web/components/layouts/app.html.heex

@@ -2,7 +2,7 @@
   <div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
     <div class="flex items-center gap-4">
       <a href="/">
-        <.icon name="hero-chart-bar" label={"Index page"} />
+        <.icon name="hero-chart-bar" label="Index page" />
       </a>
       <p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
         v<%= Application.spec(:tietopaketti, :vsn) %>
@@ -18,7 +18,7 @@
     </div>
   </div>
 </header>
-<main class="px-4 py-20 sm:px-6 lg:px-8">
+<main class="px-4 py-5 sm:px-6 lg:px-8">
   <div class="mx-auto max-w-2xl">
     <.flash_group flash={@flash} />
     <%= @inner_content %>

lib/tietopaketti_web/live/dash_live/index.ex

@@ -23,14 +23,32 @@ defmodule TietopakettiWeb.DashLive.Index do
   end
 
   def humanize_size(bytes, add_unit) do
+    bytes = bytes + 0.0
+
     {size, unit} =
       cond do
         bytes >= 1024 ** 3 -> {bytes / 1024 ** 3, "GiB"}
         bytes >= 1024 ** 2 -> {bytes / 1024 ** 2, "MiB"}
+        bytes >= 1024 -> {bytes / 1024, "KiB"}
         bytes -> {bytes, "B"}
       end
 
     "#{Float.round(size, 2)}" <>
-      if add_unit, do: " #{unit}", else: ""
+      if add_unit, do: " #{unit}", else: ""
+  end
+
+  def humanize_size_si(bytes, add_unit) do
+    bytes = bytes + 0.0
+
+    {size, unit} =
+      cond do
+        bytes >= 1000 ** 3 -> {bytes / 1000 ** 3, "GB"}
+        bytes >= 1000 ** 2 -> {bytes / 1000 ** 2, "MB"}
+        bytes >= 1000 -> {bytes / 1000, "kB"}
+        bytes -> {bytes, "B"}
+      end
+
+    "#{Float.round(size, 2)}" <>
+      if add_unit, do: " #{unit}", else: ""
   end
 end

lib/tietopaketti_web/live/dash_live/index.html.heex

@@ -1,8 +1,6 @@
 <%= if @sysdata == nil do %>
   <h1>Loading…</h1>
 <% else %>
-  <h1><%= @instance.name %></h1>
-
   <div id="cpus">
     <h2>CPU</h2>
     <%= for {cpu, i} <- Enum.with_index(@sysdata.cpu) do %>
@@ -28,7 +26,7 @@
         label="RAM"
         value={@sysdata.mem.total_ram - @sysdata.mem.free_ram}
         max={@sysdata.mem.total_ram}
-        value-display={"#{humanize_size(@sysdata.mem.total_ram - @sysdata.mem.free_ram, false)} / #{humanize_size(
+        value-display={"#{humanize_size(@sysdata.mem.total_ram - @sysdata.mem.free_ram, true)} / #{humanize_size(
             @sysdata.mem.total_ram,
             true
           )}"}
@@ -41,11 +39,30 @@
         label="Swap"
         value={@sysdata.mem.total_swap - @sysdata.mem.free_swap}
         max={@sysdata.mem.total_swap}
-        value-display={"#{humanize_size(@sysdata.mem.total_swap - @sysdata.mem.free_swap, false)} / #{humanize_size(
+        value-display={"#{humanize_size(@sysdata.mem.total_swap - @sysdata.mem.free_swap, true)} / #{humanize_size(
             @sysdata.mem.total_swap,
             true
           )}"}
       />
     </div>
   </div>
+  
+  <div id="disks">
+    <h2>Disks</h2>
+    <%= for disk <- @sysdata.disk do %>
+      <div class="disk">
+        <.live_component
+          module={TietopakettiWeb.Progress}
+          id={"disk-progress-#{disk.id}"}
+          label={disk.name}
+          value={disk.used_percent}
+          max={100}
+          value-display={"#{disk.used_percent} % of #{humanize_size_si(
+              disk.total,
+              true
+            )}"}
+        />
+      </div>
+    <% end %>
+  </div>
 <% end %>