Merge pull request #78 from franklupo/main

Fix DarkMode
Corsinvest · Aug 4, 2023 · 6c8cc7e · 6c8cc7e
2 parents 39aca99 + 2dfe832
commit 6c8cc7e
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 84 deletions.
diff --git a/src/Corsinvest.ProxmoxVE.Admin.ClusterUsage/Components/Costs.razor b/src/Corsinvest.ProxmoxVE.Admin.ClusterUsage/Components/Costs.razor
@@ -14,16 +14,16 @@
 else
 {
     <AHDataGrid T="DataVmEx"
-            Permissions="Module.Permissions.Costs.Data"
+                Permissions="Module.Permissions.Costs.Data"
                 FixedHeader
                 FixedFooter
-            DataGridManager="DataGridManager"
+                DataGridManager="DataGridManager"
                 Filterable
                 Groupable
-            ShowFilterIcons="false"
-            Height="@Height"
-            FilterCaseSensitivity="DataGridFilterCaseSensitivity.CaseInsensitive"
-            ShowColumnOptions="false"
+                ShowFilterIcons="false"
+                Height="@Height"
+                FilterCaseSensitivity="DataGridFilterCaseSensitivity.CaseInsensitive"
+                ShowColumnOptions="false"
                 MultiSelection>
     <ToolBarContent>
         <AHDataGridToolBarRead T="DataVmEx" DataGridManager="DataGridManager">
@@ -87,19 +87,19 @@ else
                     @if (series.Any())
                     {
                         <ApexChart TItem="DataVmStorage"
-                           XAxisType="XAxisType.Datetime"
-                           Options="ChartOptionsStorages"
-                           Height="@("300px")">
+                                   XAxisType="XAxisType.Datetime"
+                                   Options="ChartOptionsStorages"
+                                   Height="@("300px")">
 
                             @foreach (var item in series)
                             {
                                 <ApexPointSeries TItem="DataVmStorage"
-                                     Items="@item.ToList()"
-                                     Name="@($"{item.Key} (GB)")"
-                                     SeriesType="SeriesType.Area"
-                                     XValue="e => e.DataVm.Date"
-                                     YValue="a => Convert.ToDecimal(a.Size / 1024.0 / 1024 / 1024)"
-                                     OrderBy="a => a.X" />
+                                                 Items="@item.ToList()"
+                                                 Name="@($"{item.Key} (GB)")"
+                                                 SeriesType="SeriesType.Area"
+                                                 XValue="e => e.DataVm.Date"
+                                                 YValue="a => Convert.ToDecimal(a.Size / 1024.0 / 1024 / 1024)"
+                                                 OrderBy="a => a.X" />
                             }
                         </ApexChart>
                     }

diff --git a/src/Corsinvest.ProxmoxVE.Admin.ClusterUsage/Components/Costs.razor.cs b/src/Corsinvest.ProxmoxVE.Admin.ClusterUsage/Components/Costs.razor.cs
@@ -5,6 +5,7 @@
 using ApexCharts;
 using Corsinvest.AppHero.Core.BaseUI.DataManager;
 using Corsinvest.AppHero.Core.Domain.Repository;
+using Corsinvest.AppHero.Core.MudBlazorUI.Style;
 using Corsinvest.ProxmoxVE.Api;
 using Corsinvest.ProxmoxVE.Api.Extension;
 using Corsinvest.ProxmoxVE.Api.Shared.Models.Common;
@@ -22,12 +23,13 @@ public partial class Costs
     [Inject] private IDataGridManager<DataVmEx> DataGridManager { get; set; } = default!;
     [Inject] private IJobService JobService { get; set; } = default!;
     [Inject] private IOptionsSnapshot<Options> Options { get; set; } = default!;
+    [Inject] private LayoutService LayoutService { get; set; } = default!;
 
     private DateRange DateRange { get; set; } = new(DateTime.Now.AddDays(-7).Date, DateTime.Now.Date);
     private MudDateRangePicker? RefPicker { get; set; } = default!;
     private PveClient PveClient { get; set; } = default!;
 
-    private static ApexChartOptions<DataVmStorage> ChartOptionsStorages => new()
+    private ApexChartOptions<DataVmStorage> ChartOptionsStorages => new()
     {
         Chart = new()
         {
@@ -45,7 +47,8 @@ public partial class Costs
                 Title = new AxisTitle { Text = "Usage (GB)" },
                 DecimalsInFloat = 0,
             }
-        }
+        },
+        Theme = new() { Mode = LayoutService.IsDarkMode ? Mode.Dark : Mode.Light }
     };
 
     private class DataVmEx : DataVm

diff --git a/src/Corsinvest.ProxmoxVE.Admin.Core/ModuleCore.cs b/src/Corsinvest.ProxmoxVE.Admin.Core/ModuleCore.cs
@@ -2,6 +2,7 @@
  * SPDX-FileCopyrightText: Copyright Corsinvest Srl
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+using ApexCharts;
 using Blazored.LocalStorage;
 using Blazored.SessionStorage;
 using Corsinvest.AppHero.Core.Modularity;

diff --git a/src/Corsinvest.ProxmoxVE.Admin.Core/UI/ProxmoxVE/Cluster/Summary.razor b/src/Corsinvest.ProxmoxVE.Admin.Core/UI/ProxmoxVE/Cluster/Summary.razor
@@ -151,8 +151,7 @@
                     @foreach (var item in DataUsages)
                     {
                         <MudItem Class="align-content-center" md="4">
-                            <ApexCharts.ApexGauge Percentage="@Convert.ToDecimal(item.Usage)" Label="@item.Name"
-                                              Options="@GetOptions(item)" />
+                            <ApexCharts.ApexGauge Percentage="@Convert.ToDecimal(item.Usage)" Label="@item.Name" Options="@GetOptions(item)" />
                             <MudText Class="" Typo="Typo.body2" Style="text-align: center;">@item.Info</MudText>
                         </MudItem>
                     }

diff --git a/src/Corsinvest.ProxmoxVE.Admin.Core/UI/ProxmoxVE/Cluster/Summary.razor.cs b/src/Corsinvest.ProxmoxVE.Admin.Core/UI/ProxmoxVE/Cluster/Summary.razor.cs
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 using Corsinvest.AppHero.Core.Domain.Contracts;
+using Corsinvest.AppHero.Core.MudBlazorUI.Style;
 using Corsinvest.AppHero.Core.Security.Auth.Permissions;
 using Corsinvest.ProxmoxVE.Admin.Core.Models;
 using Corsinvest.ProxmoxVE.Api.Shared.Models.Cluster;
@@ -20,6 +21,7 @@ public partial class Summary : IRefreshable
     [EditorRequired][Parameter] public Func<Task<IEnumerable<ClusterResource>>> GetResources { get; set; } = default!;
     [EditorRequired][Parameter] public Func<Task<string?>> GetCephStatus { get; set; } = default!;
 
+    [Inject] private LayoutService LayoutService { get; set; } = default!;
     [Inject] private IDataGridManager<ClusterStatusEx> DataGridManager { get; set; } = default!;
 
     private ItemStatus CephStatus { get; set; } = default!;
@@ -77,14 +79,12 @@ protected override void OnInitialized()
         DataGridManager.QueryAsync = GetStatusInt;
     }
 
-    private static ApexCharts.ApexChartOptions<ApexCharts.GaugeValue> GetOptions(DataUsage item)
+    private ApexCharts.ApexChartOptions<ApexCharts.GaugeValue> GetOptions(DataUsage item)
         => new()
         {
             Colors = item.Colors,
-            Chart = new()
-            {
-                ForeColor = "var(--mud-palette-text-primary)"
-            },
+            Chart = new() { Background = "trasparent" },
+            Theme = new() { Mode = LayoutService.IsDarkMode ? ApexCharts.Mode.Dark : ApexCharts.Mode.Light }
         };
 
     private async Task<IEnumerable<ClusterStatusEx>> GetStatusInt()

diff --git a/src/Corsinvest.ProxmoxVE.Admin.Core/UI/ProxmoxVE/Nodes/StorageUsage.razor b/src/Corsinvest.ProxmoxVE.Admin.Core/UI/ProxmoxVE/Nodes/StorageUsage.razor
@@ -30,31 +30,33 @@ else
         </MudItem>
 
         <MudItem sm="12" md="3">
-            <ApexChart TItem="NodeStorageContent" XAxisType="XAxisType.Category" Title="@L["Content"]">
+            <ApexChart TItem="NodeStorageContent" XAxisType="XAxisType.Category" Title="@L["Content"]"
+                       Options="@ChartOption">
                 <ApexPointSeries TItem="NodeStorageContent"
-                             Items="Contents"
-                             Name="All"
-                             SeriesType="SeriesType.Donut"
-                                      ShowDataLabels
-                             XValue="@(a => a.Content)"
-                             YAggregate="@(a => a.Sum(a => a.Size / 1024m / 1024 / 1024))"
-                             OrderByDescending="a => a.Y" />
-                </ApexChart>
+                                 Items="Contents"
+                                 Name="All"
+                                 SeriesType="SeriesType.Donut"
+                                 ShowDataLabels="true"
+                                 XValue="@(a => a.Content)"
+                                 YAggregate="@(a => a.Sum(a => a.Size / 1024m / 1024 / 1024))"
+                                 OrderByDescending="a => a.Y" />
+            </ApexChart>
 
-                <ApexChart TItem="NodeStorageContent" XAxisType="XAxisType.Category" Title="@L[(IsGroupByStorage ? "Storage" : "Vm")]">
+            <ApexChart TItem="NodeStorageContent" XAxisType="XAxisType.Category" Title="@L[(IsGroupByStorage ? "Storage" : "Vm")]"
+                       Options="@ChartOption">
                 <ApexPointSeries TItem="NodeStorageContent"
-                             Items="Contents"
-                             Name="All"
-                             SeriesType="SeriesType.Donut"
-                                      ShowDataLabels
-                             XValue="@(a => IsGroupByStorage ? a.Storage : a.VmId)"
-                             YAggregate="@(a => a.Sum(a => a.Size / 1024m / 1024 / 1024))"
-                             OrderByDescending="a => a.Y" />
-                </ApexChart>
-                </MudItem>
+                                 Items="Contents"
+                                 Name="All"
+                                 SeriesType="SeriesType.Donut"
+                                 ShowDataLabels="true"
+                                 XValue="@(a => IsGroupByStorage ? a.Storage : a.VmId)"
+                                 YAggregate="@(a => a.Sum(a => a.Size / 1024m / 1024 / 1024))"
+                                 OrderByDescending="a => a.Y" />
+            </ApexChart>
+        </MudItem>
 
-                <MudItem sm="12" md="9">
-                <StorageContents GetItems="GetContents" PropertiesName="@PropertiesName" GroupBy="@GroupBy" />
-                </MudItem>
-                </MudGrid>
+        <MudItem sm="12" md="9">
+            <StorageContents GetItems="GetContents" PropertiesName="@PropertiesName" GroupBy="@GroupBy" />
+        </MudItem>
+    </MudGrid>
 }
diff --git a/src/Corsinvest.ProxmoxVE.Admin.Core/UI/ProxmoxVE/Nodes/StorageUsage.razor.cs b/src/Corsinvest.ProxmoxVE.Admin.Core/UI/ProxmoxVE/Nodes/StorageUsage.razor.cs
@@ -2,6 +2,7 @@
  * SPDX-FileCopyrightText: Copyright Corsinvest Srl
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+using Corsinvest.AppHero.Core.MudBlazorUI.Style;
 using Corsinvest.ProxmoxVE.Api.Shared.Models.Cluster;
 using Corsinvest.ProxmoxVE.Api.Shared.Models.Node;
 
@@ -26,10 +27,18 @@ public partial class StorageUsage
         nameof(NodeStorageContent.Encrypted),
     };
 
+    [Inject] private LayoutService LayoutService { get; set; } = default!;
+
     private IEnumerable<NodeStorageContent> Contents { get; set; } = default!;
     private IEnumerable<ClusterResource> Infos { get; set; } = default!;
     private bool IsGroupByStorage => GroupBy == nameof(NodeStorageContent.Storage);
 
+    private ApexCharts.ApexChartOptions<NodeStorageContent> ChartOption => new()
+    {
+        Chart = new() { Background = "trasparent" },
+        Theme = new() { Mode = LayoutService.IsDarkMode ? ApexCharts.Mode.Dark : ApexCharts.Mode.Light }
+    };
+
     protected override async Task OnInitializedAsync()
     {
         Contents = (await GetContents())

diff --git a/src/Corsinvest.ProxmoxVE.Admin.Core/UI/ProxmoxVE/Vm/ToolBarStatus.razor b/src/Corsinvest.ProxmoxVE.Admin.Core/UI/ProxmoxVE/Vm/ToolBarStatus.razor
@@ -1,7 +1,8 @@
 @*
  * SPDX-FileCopyrightText: Copyright Corsinvest Srl
  * SPDX-License-Identifier: AGPL-3.0-only
-*@
+ *@
+
 @inherits AHComponentBase
 
 <MudToolBar Style="@Style" Class="@Class">
@@ -13,19 +14,19 @@
             @if (Vm.IsPaused)
             {
                 <MudIconButton Title="@L["Resume"]" Icon="@Icons.Material.Filled.PlayArrow" Size="@Size" Color="Color.Success"
-                       OnClick="@(() => ChageStatus(VmStatus.Resume))" />
+                               OnClick="@(() => ChageStatus(VmStatus.Resume))" />
             }
             else if (!Vm.IsRunning)
             {
                 <MudIconButton Title="@L["Play"]" Icon="@Icons.Material.Filled.PlayArrow" Size="@Size" Color="Color.Success"
-                       OnClick="@(() => ChageStatus(VmStatus.Start))" />
+                               OnClick="@(() => ChageStatus(VmStatus.Start))" />
             }
         }
 
         @if (CanNoVnc)
         {
             <MudIconButton Title="@L["Console"]" Icon="@Icons.Material.Filled.DesktopWindows" Size="@Size"
-                       Color="Color.Primary" OnClick="@OnShowConsole" />
+                           Color="Color.Primary" OnClick="@OnShowConsole" />
         }
 
         @if (CanChangeStatus && Vm.IsRunning)

diff --git a/src/Corsinvest.ProxmoxVE.Admin.VzDumpTrend/Components/DataAnalysis.razor b/src/Corsinvest.ProxmoxVE.Admin.VzDumpTrend/Components/DataAnalysis.razor
@@ -64,21 +64,21 @@
 
     <br />
 
-    <ApexChart TItem="VzDumpDetail" 
-           XAxisType="XAxisType.Datetime"
-           Height="@("500px")"
-           Options="Options1"
-           @ref="RefChart1">
+    <ApexChart @ref="RefChart1"
+               TItem="VzDumpDetail"
+               XAxisType="XAxisType.Datetime"
+               Height="@("500px")"
+               Options="Options1">
 
         @foreach (var item in DataChart)
         {
             <ApexPointSeries TItem="VzDumpDetail"
-                     Items="@item"
-                     Name="@item.Key"
-                     SeriesType="SeriesType.Line"                      
-                     XValue="e => e.Start"
-                     YValue="a => Convert.ToDecimal(a.Size) / 1024 / 1024 / 1024"
-                     OrderBy="a => a.X" />
+                             Items="@item"
+                             Name="@item.Key"
+                             SeriesType="SeriesType.Line"
+                             XValue="e => e.Start"
+                             YValue="a => Convert.ToDecimal(a.Size) / 1024 / 1024 / 1024"
+                             OrderBy="a => a.X" />
         }
     </ApexChart>
 
@@ -90,21 +90,21 @@
 
     <br />
 
-    <ApexChart TItem="VzDumpDetail"
-           XAxisType="XAxisType.Datetime"
-           Height="@("500px")"
-           Options="Options2"
-           @ref="RefChart2">
+    <ApexChart @ref="RefChart2"
+               TItem="VzDumpDetail"
+               XAxisType="XAxisType.Datetime"
+               Height="@("500px")"
+               Options="Options2">
 
         @foreach (var item in DataChart)
         {
             <ApexPointSeries TItem="VzDumpDetail"
-                     Items="@item"
-                     Name="@item.Key"
-                     SeriesType="SeriesType.Line"
-                     XValue="e => e.Start"
-                     YValue="a => Convert.ToDecimal(a.TransferSpeed) / 1024 / 1024"
-                     OrderBy="a => a.X" />
+                             Items="@item"
+                             Name="@item.Key"
+                             SeriesType="SeriesType.Line"
+                             XValue="e => e.Start"
+                             YValue="a => Convert.ToDecimal(a.TransferSpeed) / 1024 / 1024"
+                             OrderBy="a => a.X" />
         }
     </ApexChart>
 
@@ -115,21 +115,21 @@
 
     <br />
 
-    <ApexChart TItem="VzDumpDetail"
-           XAxisType="XAxisType.Datetime"
-           Height="@("500px")"
-           Options="Options3"
-           @ref="RefChart3">
+    <ApexChart @ref="RefChart3"
+               TItem="VzDumpDetail"
+               XAxisType="XAxisType.Datetime"
+               Height="@("500px")"
+               Options="Options3">
 
         @foreach (var item in DataChart)
         {
             <ApexPointSeries TItem="VzDumpDetail"
-                     Items="@item"
-                     Name="@item.Key"
-                     SeriesType="SeriesType.Line"
-                     XValue="e => e.Start"
-                     YValue="a => Convert.ToDecimal(a.Duration / 60)"
-                     OrderBy="a => a.X" />
+                             Items="@item"
+                             Name="@item.Key"
+                             SeriesType="SeriesType.Line"
+                             XValue="e => e.Start"
+                             YValue="a => Convert.ToDecimal(a.Duration / 60)"
+                             OrderBy="a => a.X" />
         }
     </ApexChart>
 }

diff --git a/src/Corsinvest.ProxmoxVE.Admin.VzDumpTrend/Components/DataAnalysis.razor.cs b/src/Corsinvest.ProxmoxVE.Admin.VzDumpTrend/Components/DataAnalysis.razor.cs
@@ -9,6 +9,7 @@
 using Corsinvest.ProxmoxVE.Admin.Core.Services;
 using Corsinvest.ProxmoxVE.Admin.VzDumpTrend.Repository;
 using Corsinvest.ProxmoxVE.Api.Shared.Utils;
+using MudBlazor;
 using Nextended.Core.Extensions;
 
 namespace Corsinvest.ProxmoxVE.Admin.VzDumpTrend.Components;