Moonlight/Moonlight.Frontend/UI/Admin/Views/Overview.razor

@page "/admin"
@using LucideBlazor
@using Moonlight.Shared.Http.Responses.Admin
@using ShadcnBlazor.Buttons
@using ShadcnBlazor.Cards
@using ShadcnBlazor.Spinners

@inject HttpClient HttpClient

<h1 class="text-xl font-semibold">Overview</h1>
<div class="text-muted-foreground">
    Here you can see a quick overview of your moonlight instance
</div>

<div class="mt-8 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-5">
    <Card ClassName="col-span-1">
        @if (IsInfoLoading || InfoResponse == null)
        {
            <CardContent ClassName="flex justify-center items-center">
                <Spinner ClassName="size-8"/>
            </CardContent>
        }
        else
        {
            <CardHeader>
                <CardDescription>CPU Usage</CardDescription>
                <CardTitle ClassName="text-lg">@Math.Round(InfoResponse.CpuUsage, 2)%</CardTitle>
                <CardAction>
                    <CpuIcon ClassName="size-6 text-muted-foreground" />
                </CardAction>
            </CardHeader>
        }
    </Card>
    
    <Card ClassName="col-span-1">
        @if (IsInfoLoading || InfoResponse == null)
        {
            <CardContent ClassName="flex justify-center items-center">
                <Spinner ClassName="size-8"/>
            </CardContent>
        }
        else
        {
            <CardHeader>
                <CardDescription>Memory Usage</CardDescription>
                <CardTitle ClassName="text-lg">@Formatter.FormatSize(InfoResponse.MemoryUsage)</CardTitle>
                <CardAction>
                    <MemoryStickIcon ClassName="size-6 text-muted-foreground" />
                </CardAction>
            </CardHeader>
        }
    </Card>
    
    <Card ClassName="col-span-1">
        @if (IsInfoLoading || InfoResponse == null)
        {
            <CardContent ClassName="flex justify-center items-center">
                <Spinner ClassName="size-8"/>
            </CardContent>
        }
        else
        {
            <CardHeader>
                <CardDescription>Operating System</CardDescription>
                <CardTitle ClassName="text-lg">@InfoResponse.OperatingSystem</CardTitle>
                <CardAction>
                    <ComputerIcon ClassName="size-6 text-muted-foreground" />
                </CardAction>
            </CardHeader>
        }
    </Card>
    
    <Card ClassName="col-span-1">
        @if (IsInfoLoading || InfoResponse == null)
        {
            <CardContent ClassName="flex justify-center items-center">
                <Spinner ClassName="size-8"/>
            </CardContent>
        }
        else
        {
            <CardHeader>
                <CardDescription>Uptime</CardDescription>
                <CardTitle ClassName="text-lg">@Formatter.FormatDuration(InfoResponse.Uptime)</CardTitle>
                <CardAction>
                    <ClockIcon ClassName="size-6 text-muted-foreground" />
                </CardAction>
            </CardHeader>
        }
    </Card>
    
    <Card ClassName="col-span-1">
        @if (IsInfoLoading || InfoResponse == null)
        {
            <CardContent ClassName="flex justify-center items-center">
                <Spinner ClassName="size-8"/>
            </CardContent>
        }
        else
        {
            <CardHeader>
                <CardDescription>Version</CardDescription>
                <CardTitle ClassName="text-lg">@InfoResponse.VersionName</CardTitle>
                <CardAction>
                    <RocketIcon ClassName="size-6 text-muted-foreground" />
                </CardAction>
            </CardHeader>
        }
    </Card>
    
    <Card ClassName="col-span-1">
        @if (IsInfoLoading || InfoResponse == null)
        {
            <CardContent ClassName="flex justify-center items-center">
                <Spinner ClassName="size-8"/>
            </CardContent>
        }
        else
        {
            <CardHeader>
                <CardDescription>Update Status</CardDescription>
                @if (InfoResponse.IsUpToDate)
                {
                    <CardTitle ClassName="text-lg text-green-500">Up-to-date</CardTitle>
                    <CardAction>
                        <RefreshCwIcon ClassName="size-6 text-muted-foreground" />
                    </CardAction>
                }
                else
                {
                    <CardTitle ClassName="text-lg text-primary">Update available</CardTitle>
                    <CardAction ClassName="self-center">
                        <Button>Update</Button>
                    </CardAction>
                }
            </CardHeader>
        }
    </Card>
</div>

@code
{
    private bool IsInfoLoading = true;
    private SystemInfoResponse? InfoResponse;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(!firstRender)
            return;

        InfoResponse = await HttpClient.GetFromJsonAsync<SystemInfoResponse>("api/admin/system/info", Constants.SerializerOptions);
        IsInfoLoading = false;

        await InvokeAsync(StateHasChanged);
    }
}