Lightly integrate xtermjs

This commit is contained in:
Pat Hartl 2023-04-13 17:57:51 -05:00
parent 74c1930ede
commit e8456de2cb
3 changed files with 12 additions and 9 deletions

View file

@ -41,6 +41,7 @@
<PackageReference Include="swashbuckle" Version="5.6.0" /> <PackageReference Include="swashbuckle" Version="5.6.0" />
<PackageReference Include="Swashbuckle.AspNetCore" Version="6.5.0" /> <PackageReference Include="Swashbuckle.AspNetCore" Version="6.5.0" />
<PackageReference Include="System.Diagnostics.PerformanceCounter" Version="7.0.0" /> <PackageReference Include="System.Diagnostics.PerformanceCounter" Version="7.0.0" />
<PackageReference Include="XtermBlazor" Version="1.8.1" />
<PackageReference Include="YamlDotNet" Version="12.3.1" /> <PackageReference Include="YamlDotNet" Version="12.3.1" />
</ItemGroup> </ItemGroup>

View file

@ -1,23 +1,24 @@
@page "/Servers/{id:guid}/Logs" @page "/Servers/{id:guid}/Logs"
@using Microsoft.AspNetCore.SignalR.Client @using Microsoft.AspNetCore.SignalR.Client
@using XtermBlazor
@attribute [Authorize] @attribute [Authorize]
@inject ServerService ServerService @inject ServerService ServerService
@inject ServerProcessService ServerProcessService @inject ServerProcessService ServerProcessService
@inject NavigationManager NavigationManager @inject NavigationManager NavigationManager
@implements IAsyncDisposable @implements IAsyncDisposable
<pre> <Xterm @ref="Terminal" Options="TerminalOptions" />
@foreach (var message in Messages)
{
@message <br />
}
</pre>
@code { @code {
[Parameter] public Guid Id { get; set; } [Parameter] public Guid Id { get; set; }
Xterm? Terminal;
HubConnection? HubConnection; HubConnection? HubConnection;
List<string> Messages = new List<string>(); TerminalOptions TerminalOptions = new TerminalOptions
{
CursorBlink = true,
CursorStyle = CursorStyle.Underline
};
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync()
{ {
@ -27,8 +28,7 @@
HubConnection.On<string>("Log", (message) => HubConnection.On<string>("Log", (message) =>
{ {
Messages.Add(message); Terminal.WriteLine(message);
InvokeAsync(StateHasChanged);
}); });
await HubConnection.StartAsync(); await HubConnection.StartAsync();

View file

@ -10,6 +10,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" /> <base href="~/" />
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" /> <link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
<link href="_content/XtermBlazor/XtermBlazor.css" rel="stylesheet" />
<link href="~/css/site.css" rel="stylesheet" /> <link href="~/css/site.css" rel="stylesheet" />
</head> </head>
<body> <body>
@ -26,6 +27,7 @@
<script src="~/_content/BlazorMonaco/jsInterop.js"></script> <script src="~/_content/BlazorMonaco/jsInterop.js"></script>
<script src="~/_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script> <script src="~/_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
<script src="~/_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script> <script src="~/_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
<script src="~/_content/XtermBlazor/XtermBlazor.min.js"></script>
<script src="~/js/site.js"></script> <script src="~/js/site.js"></script>
<script src="~/js/Upload.js"></script> <script src="~/js/Upload.js"></script>
<script>window.Uploader = new Uploader();</script> <script>window.Uploader = new Uploader();</script>