feat(app): add fleet and host metrics views
This commit is contained in:
dualfroz committed
1 parent
302d77e620
commit
c3fc019994
4 files changed
+175
No files matched your search
@@ -0,0 +1,77 @@
|
||||
<UserControl xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:vm="clr-namespace:Vantage.App.ViewModels"
|
||||
xmlns:conv="clr-namespace:Vantage.App.Converters"
|
||||
mc:Ignorable="d"
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
x:Class="Vantage.App.Views.FleetView"
|
||||
x:DataType="vm:MainWindowViewModel"
|
||||
x:CompileBindings="True">
|
||||
|
||||
<Grid RowDefinitions="Auto,*" Margin="4">
|
||||
|
||||
<Border Grid.Row="0" Classes="card" Margin="0,0,0,10" Padding="14,10">
|
||||
<StackPanel Orientation="Horizontal" Spacing="26">
|
||||
<StackPanel>
|
||||
<TextBlock Text="Hosts" Foreground="#8891A0" FontSize="11" />
|
||||
<TextBlock Text="{Binding Overview.TotalHosts}" FontSize="20" FontWeight="Bold" />
|
||||
</StackPanel>
|
||||
<StackPanel>
|
||||
<TextBlock Text="Online" Foreground="#8891A0" FontSize="11" />
|
||||
<TextBlock Text="{Binding Overview.OnlineHosts}" FontSize="20" FontWeight="Bold" Foreground="#4CAF50" />
|
||||
</StackPanel>
|
||||
<StackPanel>
|
||||
<TextBlock Text="Offline" Foreground="#8891A0" FontSize="11" />
|
||||
<TextBlock Text="{Binding Overview.OfflineHosts}" FontSize="20" FontWeight="Bold" Foreground="#EF5350" />
|
||||
</StackPanel>
|
||||
<StackPanel>
|
||||
<TextBlock Text="Avg CPU" Foreground="#8891A0" FontSize="11" />
|
||||
<TextBlock Text="{Binding Overview.AverageCpuPercent, StringFormat='{}{0:0.#}%'}" FontSize="20" FontWeight="Bold" />
|
||||
</StackPanel>
|
||||
<StackPanel>
|
||||
<TextBlock Text="Peak CPU host" Foreground="#8891A0" FontSize="11" />
|
||||
<TextBlock Text="{Binding Overview.PeakCpuHost}" FontSize="16" FontWeight="SemiBold" VerticalAlignment="Bottom" />
|
||||
</StackPanel>
|
||||
<StackPanel>
|
||||
<TextBlock Text="Firing alerts" Foreground="#8891A0" FontSize="11" />
|
||||
<TextBlock Text="{Binding FiringAlertCount}" FontSize="20" FontWeight="Bold" Foreground="#FFB300" />
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<ScrollViewer Grid.Row="1">
|
||||
<ItemsControl ItemsSource="{Binding Hosts}">
|
||||
<ItemsControl.ItemsPanel>
|
||||
<ItemsPanelTemplate>
|
||||
<WrapPanel />
|
||||
</ItemsPanelTemplate>
|
||||
</ItemsControl.ItemsPanel>
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate x:DataType="vm:HostViewModel">
|
||||
<Border Classes="card" Width="240" Margin="0,0,10,10" Padding="12">
|
||||
<StackPanel Spacing="6">
|
||||
<Grid ColumnDefinitions="Auto,*">
|
||||
<Ellipse Grid.Column="0" Width="10" Height="10" VerticalAlignment="Center" Margin="0,0,8,0"
|
||||
Fill="{Binding IsOnline, Converter={x:Static conv:StateBrushConverters.RunningBrush}}" />
|
||||
<TextBlock Grid.Column="1" Text="{Binding Name}" FontWeight="SemiBold"
|
||||
TextTrimming="CharacterEllipsis" />
|
||||
</Grid>
|
||||
<TextBlock Text="{Binding StatusText}" Foreground="#8891A0" FontSize="11" />
|
||||
<Grid ColumnDefinitions="Auto,*" RowDefinitions="Auto,Auto,Auto" Margin="0,4,0,0">
|
||||
<TextBlock Grid.Row="0" Grid.Column="0" Text="CPU" Foreground="#8891A0" FontSize="11" Margin="0,0,10,0" />
|
||||
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding CpuUsagePercent, StringFormat='{}{0:0.#}%'}" FontSize="12" />
|
||||
<TextBlock Grid.Row="1" Grid.Column="0" Text="RAM" Foreground="#8891A0" FontSize="11" Margin="0,0,10,0" />
|
||||
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding MemoryUsedPercent, StringFormat='{}{0:0.#}%'}" FontSize="12" />
|
||||
<TextBlock Grid.Row="2" Grid.Column="0" Text="Disk" Foreground="#8891A0" FontSize="11" Margin="0,0,10,0" />
|
||||
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding DiskUsedPercent, StringFormat='{}{0:0.#}%'}" FontSize="12" />
|
||||
</Grid>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
</ScrollViewer>
|
||||
|
||||
</Grid>
|
||||
</UserControl>
|
||||
@@ -0,0 +1,9 @@
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Markup.Xaml;
|
||||
|
||||
namespace Vantage.App.Views;
|
||||
|
||||
public partial class FleetView : UserControl
|
||||
{
|
||||
public FleetView() => AvaloniaXamlLoader.Load(this);
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
<UserControl xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:vm="clr-namespace:Vantage.App.ViewModels"
|
||||
xmlns:controls="clr-namespace:Vantage.App.Controls"
|
||||
mc:Ignorable="d"
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
x:Class="Vantage.App.Views.HostMetricsView"
|
||||
x:DataType="vm:HostViewModel"
|
||||
x:CompileBindings="True">
|
||||
|
||||
<Grid RowDefinitions="Auto,*" Margin="4">
|
||||
|
||||
<StackPanel Grid.Row="0" Orientation="Horizontal" Spacing="12" Margin="0,0,0,12">
|
||||
<TextBlock Text="{Binding Name}" FontSize="22" FontWeight="SemiBold" VerticalAlignment="Center" />
|
||||
<Border Background="{DynamicResource SurfaceAltBrush}" CornerRadius="10" Padding="8,2" VerticalAlignment="Center">
|
||||
<TextBlock Text="{Binding StatusText}" FontSize="12" />
|
||||
</Border>
|
||||
<TextBlock Text="{Binding Endpoint}" Foreground="#8891A0" VerticalAlignment="Center" />
|
||||
</StackPanel>
|
||||
|
||||
<Grid Grid.Row="1" RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="*,*" >
|
||||
|
||||
<Border Grid.Row="0" Grid.Column="0" Classes="card" Margin="0,0,6,12">
|
||||
<StackPanel Spacing="8">
|
||||
<DockPanel>
|
||||
<TextBlock Text="CPU" FontWeight="SemiBold" DockPanel.Dock="Left" />
|
||||
<TextBlock Text="{Binding CpuUsagePercent, StringFormat='{}{0:0.0} %'}" HorizontalAlignment="Right" Foreground="{DynamicResource AccentBrush}" />
|
||||
</DockPanel>
|
||||
<ProgressBar Maximum="100" Value="{Binding CpuUsagePercent}" Height="6" />
|
||||
<controls:SparklineControl Values="{Binding CpuPoints}" Maximum="100" Height="52"
|
||||
Stroke="{DynamicResource AccentBrush}" Fill="#1A4FC3F7" />
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<Border Grid.Row="0" Grid.Column="1" Classes="card" Margin="6,0,0,12">
|
||||
<StackPanel Spacing="8">
|
||||
<DockPanel>
|
||||
<TextBlock Text="Memory" FontWeight="SemiBold" DockPanel.Dock="Left" />
|
||||
<TextBlock Text="{Binding MemoryUsedPercent, StringFormat='{}{0:0.0} %'}" HorizontalAlignment="Right" Foreground="{DynamicResource AccentBrush}" />
|
||||
</DockPanel>
|
||||
<ProgressBar Maximum="100" Value="{Binding MemoryUsedPercent}" Height="6" />
|
||||
<controls:SparklineControl Values="{Binding MemoryPoints}" Maximum="100" Height="52"
|
||||
Stroke="#66BB6A" Fill="#1A66BB6A" />
|
||||
<TextBlock Text="{Binding MemoryText}" Foreground="#8891A0" FontSize="12" />
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<Border Grid.Row="1" Grid.Column="0" Classes="card" Margin="0,0,6,12">
|
||||
<StackPanel Spacing="8">
|
||||
<DockPanel>
|
||||
<TextBlock Text="Disk" FontWeight="SemiBold" DockPanel.Dock="Left" />
|
||||
<TextBlock Text="{Binding DiskUsedPercent, StringFormat='{}{0:0.0} %'}" HorizontalAlignment="Right" />
|
||||
</DockPanel>
|
||||
<ProgressBar Maximum="100" Value="{Binding DiskUsedPercent}" Height="6" />
|
||||
<TextBlock Text="{Binding DiskText}" Foreground="#8891A0" FontSize="12" />
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<Border Grid.Row="1" Grid.Column="1" Classes="card" Margin="6,0,0,12">
|
||||
<StackPanel Spacing="10">
|
||||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||||
<TextBlock Text="Load" FontWeight="SemiBold" Width="70" />
|
||||
<TextBlock Text="{Binding LoadText}" />
|
||||
</StackPanel>
|
||||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||||
<TextBlock Text="Uptime" FontWeight="SemiBold" Width="70" />
|
||||
<TextBlock Text="{Binding UptimeText}" />
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<Border Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Classes="card"
|
||||
IsVisible="{Binding LastError, Converter={x:Static StringConverters.IsNotNullOrEmpty}}">
|
||||
<TextBlock Text="{Binding LastError}" Foreground="{DynamicResource DownBrush}" TextWrapping="Wrap" />
|
||||
</Border>
|
||||
|
||||
</Grid>
|
||||
</Grid>
|
||||
</UserControl>
|
||||
@@ -0,0 +1,9 @@
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Markup.Xaml;
|
||||
|
||||
namespace Vantage.App.Views;
|
||||
|
||||
public partial class HostMetricsView : UserControl
|
||||
{
|
||||
public HostMetricsView() => AvaloniaXamlLoader.Load(this);
|
||||
}
|
||||
Reference in new issue
Block a user