Remotely/Server/Components/Devices/DeviceCard.razor

276 lines
11 KiB
Plaintext

@attribute [Authorize]
@inherits AuthComponentBase
<div @ref="_card" class="card border-secondary my-3 me-3 device-card @_theme @GetCardStateClass()"
@onclick="ExpandCard"
@onclick:stopPropagation
@oncontextmenu="ContextMenuOpening"
@oncontextmenu:preventDefault="_state == DeviceCardState.Normal"
@oncontextmenu:stopPropagation="_state == DeviceCardState.Normal">
<div class="card-header" @onclick="HandleHeaderClick"
@onclick:stopPropagation="_state == DeviceCardState.Expanded"
@onclick:preventDefault="_state == DeviceCardState.Expanded">
<div>
@if (Device.IsOnline)
{
if (IsOutdated)
{
<i class="oi oi-power-standby text-warning" title="Agent Outdated"></i>
}
else
{
<i class="oi oi-power-standby text-success" title="Online"></i>
}
}
else
{
<i class="oi oi-power-standby text-danger" title="Offline"></i>
}
</div>
<div class="overflow-hidden ms-2">
<div class="d-inline-block">
<div>@Device.DeviceName</div>
<div class="small text-muted" style="height: 1rem">@Device.Alias</div>
</div>
</div>
<div class="text-end">
@if (IsExpanded)
{
<button class="btn btn-sm me-2" title="Open in New Tab"
@onclick:stopPropagation
@onclick="OpenDeviceDetails">
<i class="oi oi-external-link" style="font-size: 1.3em"></i>
</button>
}
<input type="checkbox"
class="align-middle"
checked="@IsSelected"
@onchange="ToggleIsSelected"
@onclick:stopPropagation />
</div>
</div>
<div class="card-body">
@if (_fileUploadProgressLookup.Any())
{
foreach (var kvp in _fileUploadProgressLookup)
{
<div class="alert alert-info">
@(GetProgressMessage(kvp.Key))
</div>
}
}
<div>
<div class="font-weight-bold text-info">
<label>User</label>
</div>
<div>
@Device.CurrentUser
</div>
<div style="grid-row: span 2" class="expanded-visible"></div>
<div style="grid-row: span 2" class="expanded-visible">
<DropdownButton DropDownMenuClass="dropdown-menu-end mb-2" ButtonClass="btn-primary">
<ButtonContent>
<i class="oi oi-bolt"></i>
<span class="ms-2">Actions</span>
</ButtonContent>
<ChildListItems>
<li>
<button class="dropdown-item" @onclick="StartChat">
<i class="oi oi-chat" title="Chat"></i>
<span class="ms-2">Chat</span>
</button>
</li>
<li>
<button class="dropdown-item" @onclick="() => StartRemoteControl(false)">
<i class="oi oi-laptop" title="Remote Control"></i>
<span class="ms-2">Remote Control</span>
</button>
</li>
<li>
<button class="dropdown-item" @onclick="() => StartRemoteControl(true)">
<i class="oi oi-eye" title="View Only"></i>
<span class="ms-2">View Only</span>
</button>
</li>
<li>
<button class="dropdown-item" @onclick="() => WakeDevice()">
<i class="oi oi-power-standby" title="Wake Device"></i>
<span class="ms-2">Wake</span>
</button>
</li>
<li>
<FileInputButton ClassNames="dropdown-item btn btn-primary"
OnChanged="OnFileInputChanged">
<ButtonContent>
<i class="oi oi-data-transfer-upload" title="Upload File"></i>
<span class="ms-2">Upload File</span>
</ButtonContent>
</FileInputButton>
</li>
<li>
<button class="dropdown-item bg-danger" @onclick="UninstallAgent">
<i class="oi oi-delete" title="Uninstall"></i>
<span class="ms-2">Uninstall</span>
</button>
</li>
</ChildListItems>
</DropdownButton>
</div>
<div class="font-weight-bold text-info">
<label>Platform</label>
</div>
<div>
@Device.Platform
</div>
<div class="font-weight-bold text-info">
<label>Disk</label>
<button class="btn btn-link p-0 m-0 expanded-visible"
style="font-size: 50%"
@onclick="ShowAllDisks"
@onclick:stopPropagation>
(View All)
</button>
</div>
<div>
@(MathHelper.GetFormattedPercent(Device.UsedStoragePercent))
</div>
<div class="font-weight-bold text-info expanded-visible">
Total Storage
</div>
<div class="expanded-visible">
@(Device.TotalStorage) GB
</div>
<div class="font-weight-bold text-info">
<label>Memory</label>
</div>
<div>
@(MathHelper.GetFormattedPercent(Device.UsedMemoryPercent))
</div>
<div class="font-weight-bold text-info expanded-visible">
Total Memory
</div>
<div class="expanded-visible">
@(Device.TotalMemory) GB
</div>
@if (IsExpanded)
{
<div class="font-weight-bold text-info">
<label>CPU</label>
</div>
<div>
@MathHelper.GetFormattedPercent(Device.CpuUtilization)
</div>
}
</div>
<div>
<div class="mt-2" style="grid-column: span 4">
@if (IsExpanded)
{
<div class="font-weight-bold text-info mt-2">
Device ID
</div>
<div>
<input class="form-control" readonly value="@Device.ID" />
</div>
<div class="font-weight-bold text-info mt-2">
Agent Version
</div>
<div>
<input class="form-control" readonly value="@Device.AgentVersion" />
</div>
<div class="font-weight-bold text-info mt-2">
Last Online
</div>
<div>
<input class="form-control" readonly value="@Device.LastOnline" />
</div>
<div class="font-weight-bold text-info mt-2">
Public IP
</div>
<div>
<input class="form-control" readonly value="@Device.PublicIP" />
</div>
<div class="font-weight-bold text-info mt-2">
MAC Addresses
</div>
<div>
<input
class="form-control"
readonly
value="@(string.Join(", ", Device.MacAddresses ?? Array.Empty<string>()))" />
</div>
<EditForm Model="Device" OnValidSubmit="HandleValidSubmit">
<DataAnnotationsValidator />
<div class="font-weight-bold text-info mt-2">
Device Alias
</div>
<div>
<InputText class="form-control" @bind-Value="@Device.Alias" />
<ValidationMessage For="() => Device.Alias" />
</div>
<div class="font-weight-bold text-info mt-2">
Device Group
</div>
<div>
<InputSelect @bind-Value="Device.DeviceGroupID" class="form-control">
<option value="">None</option>
@foreach (var group in _deviceGroups)
{
<option @key="group.ID" value="@group.ID">@group.Name</option>
}
</InputSelect>
<ValidationMessage For="() => Device.DeviceGroupID" />
</div>
<div class="font-weight-bold text-info mt-2">
Tags
</div>
<div>
<InputText @bind-Value="Device.Tags" class="form-control" />
<ValidationMessage For="() => Device.Tags" />
</div>
<div class="font-weight-bold text-info mt-2">
Notes
</div>
<div>
<InputTextArea @bind-Value="Device.Notes" style="width:100%; height: 10em;"></InputTextArea>
<ValidationMessage For="() => Device.Notes" />
</div>
<div>
<ValidationSummary />
</div>
<div class="text-end mt-2">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</EditForm>
}
</div>
</div>
</div>
</div>