replacing nav menu, filtering, collumn picking and reordering

Overflow.CLI/Program.cs

@@ -10,6 +10,6 @@ var driver = new MongoClient("mongodb://localhost");
 var api = new SouthernWaterApi(new HttpClient());
 await api.LoadApiUrl();
 
-var runner = new SouthernWaterApiJobRunnerPersisting(api, NullLogger<SouthernWaterApiJobRunner>.Instance, driver.GetDatabase("overflow"));
+var runner = new SouthernWaterApiJobRunnerPersisting(api, NullLogger<SouthernWaterApiJobRunner>.Instance, driver.GetDatabase(Static.DatabaseName));
 
 await runner.LoadSpills(5);

Overflow.Web.Client/Components/SpillsTable.razor

@@ -1,4 +1,5 @@
-@using Overflow.SouthernWater
+@using System.Globalization
+@using Overflow.SouthernWater
 @rendermode RenderMode.InteractiveAuto
 
 @if (Job == null)
@@ -9,28 +10,32 @@
 }
 else
 {
-    <RadzenDataGrid Data="@Job.Spills" TItem="Spill"
+    <RadzenDataGrid @ref="spillsGrid" Data="@Job.Spills" TItem="Spill"
                     AllowFiltering="true"
+                    FilterMode="FilterMode.CheckBoxList"
                     AllowColumnResize="true"
                     AllowSorting="true"
                     PageSize="25"
                     AllowPaging="true"
                     ShowPagingSummary="true"
+                    AllowColumnPicking="true"
+                    AllowColumnReorder="true"
                     >
         <Columns>
-            @if (ShowIds)
+            <RadzenDataGridColumn Visible="false" TItem="Spill" Property="sw_id" Title="Id"/>
-            {
+            <RadzenDataGridColumn Visible="false" TItem="Spill" Property="eventId" Title="Event Id"/>
-                <RadzenDataGridColumn TItem="Spill" Property="sw_id" Title="Id"/>
+            <RadzenDataGridColumn Visible="false" TItem="Spill" Property="siteUnitNumber" Title="Site Unit Number"/>
-                <RadzenDataGridColumn TItem="Spill" Property="eventId" Title="Event Id"/>
+            <RadzenDataGridColumn Visible="false" TItem="Spill" Property="associatedSiteId" Title="Associated Site Id"/>
-                <RadzenDataGridColumn TItem="Spill" Property="siteUnitNumber" Title="Site Unit Number"/>
+            <RadzenDataGridColumn Visible="false" TItem="Spill" Property="overFlowSiteId" Title="OverFlow Site Id"/>
-                <RadzenDataGridColumn TItem="Spill" Property="associatedSiteId" Title="Associated Site Id"/>
-                <RadzenDataGridColumn TItem="Spill" Property="overFlowSiteId" Title="OverFlow Site Id"/>
-            }
             <RadzenDataGridColumn TItem="Spill" Property="bathingSite" Title="Bathing Site"/>
             <RadzenDataGridColumn TItem="Spill" Property="outfallName" Title="Outfall"/>
             <RadzenDataGridColumn TItem="Spill" Property="eventStart" Title="Event Start"/>
             <RadzenDataGridColumn TItem="Spill" Property="eventStop" Title="Event End"/>
-            <RadzenDataGridColumn TItem="Spill" Property="duration" Title="Duration"/>
+            <RadzenDataGridColumn TItem="Spill" Property="duration" Title="Duration">
+                <FooterTemplate>
+                    Total Duration: <b>@Job.Spills.Select(j => j.duration).Sum().ToString(CultureInfo.CurrentCulture)</b> min
+                </FooterTemplate>
+            </RadzenDataGridColumn>
             <RadzenDataGridColumn TItem="Spill" Property="status" Title="Status"/>
             <RadzenDataGridColumn TItem="Spill" Property="isImpacting" Title="Is Impacting"/>
         </Columns>
@@ -38,6 +43,6 @@ else
 }
 
 @code {
+    RadzenDataGrid<Spill> spillsGrid;
     [Parameter] public SouthernWaterApiJob? Job { get; set; }
-    [Parameter] public bool ShowIds { get; set; }
 }

Overflow.Web/Components/Layout/MainLayout.razor

@@ -1,15 +1,9 @@
 @inherits LayoutComponentBase
 
+<NavMenu/>
+
 <div class="page">
-    <div class="sidebar">
-        <NavMenu/>
-    </div>
-
     <main>
-        <div class="top-row px-4">
-            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
-        </div>
-
         <article class="content px-4">
             @Body
         </article>

Overflow.Web/Components/Layout/NavMenu.razor

@@ -1,29 +1,20 @@
-<div class="top-row ps-3 navbar navbar-dark">
+<RadzenMenu Click="OnParentClicked">
-    <div class="container-fluid">
+    <RadzenMenuItem Text="Home" Icon="home" Path="/">
-        <a class="navbar-brand" href="">Overflow</a>
+    </RadzenMenuItem>
-    </div>
+    <RadzenMenuItem Text="Southern Water" Icon="water_drop">
-</div>
+        <RadzenMenuItem Text="Spills Data" Path="/spills" Icon="table_view"></RadzenMenuItem>
+    </RadzenMenuItem>
+</RadzenMenu>
 
-<input type="checkbox" title="Navigation menu" class="navbar-toggler"/>
+@code {
 
-<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
+    void OnParentClicked(MenuItemEventArgs args)
-    <nav class="flex-column">
+    {
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
-            </NavLink>
-        </div>
 
-        <div class="nav-item px-3">
+    }
-            <NavLink class="nav-link" href="counter">
-                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
-            </NavLink>
-        </div>
 
-        <div class="nav-item px-3">
+    void OnChildClicked(MenuItemEventArgs args)
-            <NavLink class="nav-link" href="spills">
+    {
-                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Spills
+
-            </NavLink>
+    }
-        </div>
+}
-    </nav>
-</div>

Overflow.Web/Components/Layout/NavMenu.razor.css

@@ -1,105 +0,0 @@
-.navbar-toggler {
-    appearance: none;
-    cursor: pointer;
-    width: 3.5rem;
-    height: 2.5rem;
-    color: white;
-    position: absolute;
-    top: 0.5rem;
-    right: 1rem;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
-}
-
-.navbar-toggler:checked {
-    background-color: rgba(255, 255, 255, 0.5);
-}
-
-.top-row {
-    height: 3.5rem;
-    background-color: rgba(0,0,0,0.4);
-}
-
-.navbar-brand {
-    font-size: 1.1rem;
-}
-
-.bi {
-    display: inline-block;
-    position: relative;
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-right: 0.75rem;
-    top: -1px;
-    background-size: cover;
-}
-
-.bi-house-door-fill-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
-}
-
-.bi-plus-square-fill-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
-}
-
-.bi-list-nested-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
-}
-
-.nav-item {
-    font-size: 0.9rem;
-    padding-bottom: 0.5rem;
-}
-
-    .nav-item:first-of-type {
-        padding-top: 1rem;
-    }
-
-    .nav-item:last-of-type {
-        padding-bottom: 1rem;
-    }
-
-    .nav-item ::deep .nav-link {
-        color: #d7d7d7;
-        background: none;
-        border: none;
-        border-radius: 4px;
-        height: 3rem;
-        display: flex;
-        align-items: center;
-        line-height: 3rem;
-        width: 100%;
-    }
-
-.nav-item ::deep a.active {
-    background-color: rgba(255,255,255,0.37);
-    color: white;
-}
-
-.nav-item ::deep .nav-link:hover {
-    background-color: rgba(255,255,255,0.1);
-    color: white;
-}
-
-.nav-scrollable {
-    display: none;
-}
-
-.navbar-toggler:checked ~ .nav-scrollable {
-    display: block;
-}
-
-@media (min-width: 641px) {
-    .navbar-toggler {
-        display: none;
-    }
-
-    .nav-scrollable {
-        /* Never collapse the sidebar for wide screens */
-        display: block;
-
-        /* Allow sidebar to scroll for tall menus */
-        height: calc(100vh - 3.5rem);
-        overflow-y: auto;
-    }
-}

Overflow.Web/Components/Pages/Counter.razor

@@ -1,20 +0,0 @@
-@page "/counter"
-@rendermode InteractiveServer
-
-<PageTitle>Counter</PageTitle>
-
-<h1>Counter</h1>
-
-<p role="status">Current count: @currentCount</p>
-
-<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
-
-@code {
-    private int currentCount = 0;
-
-    private void IncrementCount()
-    {
-        currentCount++;
-    }
-
-}

Overflow.Web/Components/Pages/Spills.razor

@@ -7,21 +7,23 @@
 
 <h1>Spills</h1>
 
-<p>This component demonstrates showing data.</p>
+<p>This shows the data that you can see on the Southern Water Beachbuoy system</p>
 
 <RadzenCard class="my-4">
-    <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Start"  Wrap="FlexWrap.Wrap">
+    <RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Start" Wrap="FlexWrap.Wrap">
-        <RadzenCheckBox @bind-Value=@showIds Name="ShowIds" />
+        @if (job is not null)
-        <RadzenLabel Text="Show IDs" Component="ShowIds" Style="margin-left: 8px; vertical-align: middle;" />
+        {
+            <RadzenText TextStyle="TextStyle.Body1">Last updated at <b>@job.EndTime</b></RadzenText>
+        }
     </RadzenStack>
 </RadzenCard>
 
-<SpillsTable Job=@job ShowIds=@showIds />
+<SpillsTable Job=@job />
 
 @code {
     private SouthernWaterApiJob? job;
     [Inject] private IMongoDatabase database { get; set; }
-    private bool showIds;
+    // private bool showIds;
 
     protected override async Task OnInitializedAsync()
     {

Overflow.Web/Overflow.Web.csproj

@@ -9,6 +9,9 @@
     <ItemGroup>
       <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="8.0.6" />
       <PackageReference Include="MongoDB.Driver" Version="2.25.0" />
+      <PackageReference Include="NLog" Version="5.3.2" />
+      <PackageReference Include="NLog.Extensions.Logging" Version="5.3.11" />
+      <PackageReference Include="NLog.Web.AspNetCore" Version="5.3.11" />
       <PackageReference Include="Quartz" Version="3.9.0" />
       <PackageReference Include="Quartz.AspNetCore" Version="3.9.0" />
       <PackageReference Include="Quartz.Extensions.DependencyInjection" Version="3.9.0" />
@@ -28,4 +31,10 @@
       <_ContentIncludedByDefault Remove="wwwroot\favicon.png" />
     </ItemGroup>
     
+    <ItemGroup>
+        <None Update="nlog.config">
+            <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+        </None>
+    </ItemGroup>
+
 </Project>

Overflow.Web/Program.cs

@@ -3,6 +3,7 @@ using Overflow;
 
 
 using MongoDB.Driver;
+using NLog.Extensions.Logging;
 using Overflow.SouthernWater;
 using Quartz;
 using Quartz.AspNetCore;
@@ -14,9 +15,12 @@ builder.Services.AddRazorComponents()
     .AddInteractiveServerComponents()
     .AddInteractiveWebAssemblyComponents();
 
+builder.Logging.ClearProviders();
+builder.Logging.AddNLog(builder.Configuration);
+
 var driver = new MongoClient(builder.Configuration.GetConnectionString("Default"));
 builder.Services.AddSingleton(driver);
-builder.Services.AddScoped<IMongoDatabase>(s => s.GetRequiredService<MongoClient>().GetDatabase("overflow"));
+builder.Services.AddScoped<IMongoDatabase>(s => s.GetRequiredService<MongoClient>().GetDatabase(Static.DatabaseName));
 
 builder.Services.AddControllers();
 
@@ -33,6 +37,29 @@ builder.Services.Configure<QuartzOptions>(options =>
 builder.Services.AddQuartz(q =>
 {
     // base Quartz scheduler, job and trigger configuration
+
+    q.UseSimpleTypeLoader();
+    q.UseInMemoryStore();
+    q.UseDefaultThreadPool(tp =>
+    {
+        tp.MaxConcurrency = 5;
+    });
+
+    var swKey = new JobKey("southern-water-api", "southern-water");
+
+    q.AddJob<SouthernWaterJob>(j => j
+        .WithDescription("Pull spills data from Southern Water API")
+        .WithIdentity(swKey)
+        .UsingJobData("IsFull", false)
+    );
+
+    q.AddTrigger(t => t
+        .WithIdentity("southern-water-api-trigger")
+        .ForJob(swKey)
+        .StartNow()
+        .WithCronSchedule(builder.Configuration.GetSection("SouthernWater").GetValue<string>("Cron") ?? "0 0 8 * * ?")
+        .WithDescription("Periodic trigger for Southern Water API pulling")
+    );
 });
 
 // ASP.NET Core hosting
@@ -45,6 +72,7 @@ builder.Services.AddQuartzServer(options =>
 builder.Services.AddHttpClient();
 builder.Services.AddSingleton<SouthernWaterApi>();
 builder.Services.AddScoped<SouthernWaterApiJobRunner, SouthernWaterApiJobRunnerPersisting>();
+builder.Services.AddTransient<SouthernWaterJob>();
 
 var app = builder.Build();
 

Overflow.Web/appsettings.json

@@ -8,5 +8,8 @@
   "ConnectionStrings": {
     "Default": "mongodb://localhost"
   },
-  "AllowedHosts": "*"
+  "AllowedHosts": "*",
+  "SouthernWater": {
+    "Cron": "0 26 20 * * ?"
+  }
 }

Overflow.Web/nlog.config

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<!-- XSD manual extracted from package NLog.Schema: https://www.nuget.org/packages/NLog.Schema-->
+<nlog xmlns="http://www.nlog-project.org/schemas/NLog.xsd" xsi:schemaLocation="NLog NLog.xsd"
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      autoReload="true"
+      throwConfigExceptions="true"
+      internalLogFile="./log/overflow.nlog.log"
+      internalLogLevel="Info" >
+
+    <extensions>
+        <add assembly="NLog.Web.AspNetCore"/>
+    </extensions>
+
+    <variable name="scopeFormat"
+              value="${all-event-properties:format=[[key]\:[value]]:includeScopeProperties=true:separator= }"/>
+
+    <variable name="format"
+              value="${longdate}|${level:uppercase=true}|${callsite}:${callsite-linenumber}|${message}${onexception:inner=${newline}}${exception:format=tostring,data:exceptionDataSeparator=\r\n}${newline}    ${scopeFormat}"/>
+
+    <!-- the targets to write to -->
+    <targets>
+        <!-- write logs to file -->
+        <target xsi:type="File"
+                name="logfile"
+                fileName="./log/overflow-${shortdate}.log"
+                layout="${format}" />
+        <target xsi:type="File"
+                name="tracefile"
+                fileName="./log/overflow.trace-${shortdate}.log"
+                layout="${format}" />
+        <target xsi:type="ColoredConsole"
+                name="logconsole"
+                layout="${format}" />
+    </targets>
+
+    <!-- rules to map from logger name to target -->
+    <rules>
+        <!--<logger name="*" minlevel="Trace" writeTo="tracefile" />-->
+        <logger name="Overflow.*" minlevel="Debug" writeTo="logconsole" />
+
+        <!--Output hosting lifetime messages to console target for faster startup detection -->
+        <logger name="Microsoft.Hosting.Lifetime" minlevel="Info" writeTo="logconsole" final="true" />
+
+        <!--Skip non-critical Microsoft logs and so log only own logs (BlackHole) -->
+        <logger name="Microsoft.*" maxlevel="Info" final="true" />
+        <logger name="System.Net.Http.*" maxlevel="Info" final="true" />
+
+        <!--<logger name="*" minlevel="Debug" writeTo="logfile" />-->
+        <logger name="Overflow.*" minlevel="Info" writeTo="logfile" />
+        <logger name="Quartz.*" minlevel="Info" writeTo="logfile" />
+        <logger name="Microsoft.*" minlevel="Warning" writeTo="logfile" />
+    </rules>
+</nlog>

Overflow/Overflow.csproj

@@ -11,6 +11,7 @@
       <PackageReference Include="Microsoft.Extensions.Configuration.FileExtensions" Version="8.0.0" />
       <PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="8.0.0" />
       <PackageReference Include="MongoDB.Driver" Version="2.25.0" />
+      <PackageReference Include="Quartz" Version="3.9.0" />
     </ItemGroup>
 
     <ItemGroup>

Overflow/SouthernWater/SouthernWaterApi.cs

@@ -1,6 +1,7 @@
 using System.Net.Http.Json;
 using System.Text.Json;
 using System.Text.RegularExpressions;
+using Quartz.Util;
 
 namespace Overflow.SouthernWater;
 
@@ -64,9 +65,11 @@ public partial class SouthernWaterApi
 
     public async Task<PagedItems<Spill>?> GetSpills(int page = 1, JsonSerialiser? jsonSerialiser = null)
     {
+        if (baseUrl.IsNullOrWhiteSpace()) await LoadApiUrl();
+
         var request = new HttpRequestMessage()
         {
-            RequestUri = new Uri(baseUrl + spillsEndpoint),
+            RequestUri = new Uri(baseUrl + spillsEndpoint + "?page=" + page),
             Method = HttpMethod.Get,
             Headers =
             {
@@ -84,8 +87,6 @@ public partial class SouthernWaterApi
             }
         };
 
-        request.Options.TryAdd("page", page);
-
         var content = await _client.SendAsync(request);
 
         content.EnsureSuccessStatusCode();
@@ -106,11 +107,13 @@ public partial class SouthernWaterApi
 
     public async IAsyncEnumerable<PagedItems<Spill>?> GetAllSpills(TimeSpan interval, int? pageLimit = null, JsonSerialiser? jsonSerialiser = null)
     {
+        Random rnd = new Random();
+
         var firstPage = await GetSpills(page: 1, jsonSerialiser);
 
         yield return firstPage;
 
-        await Task.Delay(interval);
+        await Task.Delay(interval + TimeSpan.FromSeconds(rnd.Next(-Static.IntervalWiggleSeconds, Static.IntervalWiggleSeconds)));
 
         var pageCount = Math.Min(pageLimit ?? int.MaxValue, firstPage?.totalPages ?? 1);
 

Overflow/SouthernWater/SouthernWaterApiJobRunner.cs

@@ -10,7 +10,7 @@ public class SouthernWaterApiJobRunner(SouthernWaterApi client, ILogger<Southern
 
     public async Task<SouthernWaterApiJob> LoadSpills(int? pageLimit = null)
     {
-        var interval = TimeSpan.FromSeconds(30);
+        var interval = Static.Interval;
         var job = new SouthernWaterApiJob
         {
             StartTime = DateTime.UtcNow,

Overflow/SouthernWater/SouthernWaterJob.cs

@@ -0,0 +1,11 @@
+using Quartz;
+
+namespace Overflow.SouthernWater;
+
+public class SouthernWaterJob(SouthernWaterApiJobRunner jobRunner) : IJob
+{
+    public async Task Execute(IJobExecutionContext context)
+    {
+        await jobRunner.LoadSpills();
+    }
+}

Overflow/Static.cs

@@ -4,4 +4,7 @@ public static class Static
 {
     public static readonly string DatabaseName = "overflow";
     public static readonly string CollectionName = "southern_water_api_job";
+
+    public static readonly TimeSpan Interval = TimeSpan.FromSeconds(30);
+    public static readonly int IntervalWiggleSeconds = 10;
 }