Skip to content

Commit 04ae6c9

Browse files
mjabascal10mjabascal10
committed
feat: enhance agent console UI and improve password input handling
Signed-off-by: Manuel Abascal <mjabascal10@gmail.com>
1 parent 7b84898 commit 04ae6c9

5 files changed

Lines changed: 134 additions & 165 deletions

File tree

‎frontend/src/app/shared/components/utm/util/utm-agent-connect/utm-agent-connect.component.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,11 @@
3434
<span class="font-weight-semibold">Info! </span>
3535
<span>The agent is offline. Data shown is from the last successful sync.</span>
3636
</div>
37-
<app-utm-agent-console *ngIf="agent && connectToAgent" [websocketCommand]="websocketCommand"
37+
<app-utm-agent-console *ngIf="agent && connectToAgent"
38+
[template]="'default'"
39+
[websocketCommand]="websocketCommand"
3840
(close)="connectToAgent = false"
39-
[hostname]="agent.hostname"></app-utm-agent-console>
41+
[hostname]="agent.hostname">
42+
</app-utm-agent-console>
4043
</ng-container>
4144

‎frontend/src/app/shared/components/utm/util/utm-agent-console/utm-agent-console.component.html‎

Lines changed: 77 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -1,152 +1,93 @@
1-
<ng-container *ngIf="template === 'default'">
2-
<div class="utm-botton-container">
3-
<div (click)="closeConsole()" class="overlay-bottom"></div>
4-
<div class="utm-bottom-action">
5-
<div class="window-agent">
6-
<div class="command-header d-flex justify-content-between align-items-center ">
7-
<span *ngIf="agent"
8-
[ngClass]="agent.status === agentStatusEnum.ONLINE?'text-success-800':'text-warning-800'"
9-
class="span-small-icon d-flex justify-content-start align-items-center ml-3">
10-
<i
11-
[ngClass]="'icon-circle2'"
12-
class="mr-2"></i>
13-
{{ agent.hostname }} ({{ agent.os }})
14-
</span>
1+
<div [ngClass]="{'utm-botton-container': template === 'default',
2+
'top-zero': template === 'default'}">
3+
<div *ngIf="template === 'default'" (click)="closeConsole()" class="overlay-bottom"></div>
154

16-
<button (click)="closeConsole()" aria-label="Close"
17-
class="close button-close" type="button">
18-
<div class="close-icon"></div>
19-
</button>
20-
</div>
21-
22-
<ng-container *ngIf="!authorize">
23-
<div class="terminal f-flex flex-column">
24-
<div class="d-flex justify-content-start align-items-start" *ngIf="!commandInProgress">
25-
<span class="console-info">
26-
{{ 'Password: ' }}
27-
</span>
28-
<input type="password"
29-
[autofocus]="true"
30-
[(ngModel)]="pass"
31-
(keyup.enter)="checkPassword()" class="command ml-2"
32-
placeholder="Enter your Panel password">
33-
</div>
34-
</div>
35-
</ng-container>
36-
<ng-container *ngIf="authorize">
37-
<ng-container
38-
*ngIf="!connectionError && agent.status === agentStatusEnum.ONLINE;else missingAgent">
39-
<div class="terminal f-flex flex-column" #contentWrapper>
40-
<span class="font-size-lg mb-3">
41-
<i class="icon-keyboard"></i> Press <b>TAB</b> to use automation variables in the command
42-
</span>
43-
<ng-template #colContent>
44-
<app-incident-variable-select
45-
(variableSelected)="insertVariablePlaceholder($event)"></app-incident-variable-select>
46-
</ng-template>
5+
<div class="utm-bottom-action" [ngClass]="{'h-450px': template === 'on-demand'}">
6+
<div class="window-agent d-flex flex-column">
7+
<!-- Header -->
8+
<div class="command-header py-3 d-flex justify-content-between align-items-center">
9+
<span *ngIf="agent"
10+
[ngClass]="agent.status === agentStatusEnum.ONLINE ? 'text-success-800' : 'text-warning-800'"
11+
class="span-small-icon d-flex justify-content-start align-items-center ml-3">
12+
<i [ngClass]="'icon-circle2'" class="mr-2"></i>
13+
{{ agent.hostname }} ({{ agent.os }})
14+
</span>
4715

48-
<div class="output d-flex flex-grow-1 align-items-start justify-content-start flex-column">
49-
<span *ngFor="let message of messages" [innerHTML]="message | safe:'html'"
50-
[ngClass]="{'ml-3': !message.startsWith(consoleSignal)}"></span>
51-
</div>
52-
<div class="d-flex justify-content-start align-items-start" *ngIf="!commandInProgress">
53-
<span class="console-info"
54-
[ngbPopover]="colContent" [autoClose]="true" triggers="manual" #p=ngbPopover
55-
[popoverClass]="'popover'"
56-
container="body" placement="right">
57-
{{ consoleSignal }}
58-
</span>
59-
<input [(ngModel)]="command"
60-
#commandInput
61-
(keydown.tab)="p.open()"
62-
(keyup.enter)="sendCommand()" class="command ml-2"
63-
(keyup)="handleCommandHistory($event)" (keydown)="handleCommandHistory($event)"
64-
placeholder="Enter command here">
65-
</div>
66-
</div>
67-
</ng-container>
68-
<ng-template #missingAgent>
69-
<div class="terminal d-flex flex-column align-items-center justify-content-center">
70-
<i class="icon-alignment-unalign" [ngStyle]="{'font-size':'135px'}"></i>
71-
<h6>Agent is disconnected or missing</h6>
72-
</div>
73-
</ng-template>
74-
</ng-container>
16+
<button *ngIf="template === 'default'"
17+
(click)="closeConsole()"
18+
aria-label="Close"
19+
class="close button-close"
20+
type="button">
21+
<div class="close-icon"></div>
22+
</button>
7523
</div>
7624

77-
</div>
78-
</div>
79-
</ng-container>
80-
81-
<ng-container *ngIf="template === 'on-demand'">
82-
<div class="">
83-
<div class="utm-bottom-action">
84-
<div class="window-agent">
85-
<div class="command-header d-flex justify-content-between align-items-center ">
86-
<span *ngIf="agent"
87-
[ngClass]="agent.status === agentStatusEnum.ONLINE ? 'text-success-800':'text-warning-800'"
88-
class="span-small-icon d-flex justify-content-start align-items-center ml-3">
89-
<i [ngClass]="'icon-circle2'"
90-
class="mr-2"></i>
91-
{{ agent.hostname }} ({{ agent.os }})
92-
</span>
25+
<!-- Password Input -->
26+
<ng-container *ngIf="!authorize">
27+
<div class="terminal f-flex flex-column min-h-0 overflow-auto">
28+
<div class="d-flex justify-content-start align-items-start" *ngIf="!commandInProgress">
29+
<span class="console-info">{{ 'Password: ' }}</span>
30+
<input type="password"
31+
#passwordInput
32+
[(ngModel)]="pass"
33+
(keyup.enter)="checkPassword()"
34+
class="command ml-2"
35+
placeholder="Enter your Panel password">
36+
</div>
9337
</div>
38+
</ng-container>
9439

95-
<ng-container *ngIf="!authorize">
96-
<div class="terminal f-flex flex-column">
97-
<div class="d-flex justify-content-start align-items-start" *ngIf="!commandInProgress">
98-
<span class="console-info">
99-
{{ 'Password: ' }}
100-
</span>
101-
<input type="password"
102-
[(ngModel)]="pass"
103-
(keyup.enter)="checkPassword()" class="command ml-2"
104-
placeholder="Enter your Panel password">
105-
</div>
106-
</div>
107-
</ng-container>
108-
<ng-container *ngIf="authorize">
109-
<ng-container
110-
*ngIf="!connectionError && agent && agent.status === agentStatusEnum.ONLINE;else missingAgent">
111-
<div class="terminal f-flex flex-column" #contentWrapper>
40+
<!-- Console Content -->
41+
<ng-container *ngIf="authorize">
42+
<ng-container *ngIf="!connectionError && agent && agent.status === agentStatusEnum.ONLINE; else missingAgent">
43+
<div class="terminal d-flex flex-column m-h-0">
11244
<span class="font-size-lg mb-3">
11345
<i class="icon-keyboard"></i> Press <b>TAB</b> to use automation variables in the command
11446
</span>
115-
<ng-template #colContent>
116-
<app-incident-variable-select
117-
(variableSelected)="insertVariablePlaceholder($event)"></app-incident-variable-select>
118-
</ng-template>
11947

120-
<div class="output d-flex flex-grow-1 align-items-start justify-content-start flex-column">
121-
<span *ngFor="let message of messages" [innerHTML]="message | safe:'html'"
122-
[ngClass]="{'ml-3': !message.startsWith(consoleSignal)}"></span>
123-
</div>
124-
<div class="d-flex justify-content-start align-items-start" *ngIf="!commandInProgress">
125-
<span class="console-info"
126-
[ngbPopover]="colContent" [autoClose]="true" triggers="manual" #p=ngbPopover
127-
[popoverClass]="'popover'"
128-
container="body" placement="right">
129-
{{ consoleSignal }}
130-
</span>
131-
<input [(ngModel)]="command"
132-
#commandInput
133-
(keydown.tab)="p.open()"
134-
(keyup.enter)="sendCommand()" class="command ml-2"
135-
(keyup)="handleCommandHistory($event)" (keydown)="handleCommandHistory($event)"
136-
placeholder="Enter command here">
137-
</div>
48+
<ng-template #colContent>
49+
<app-incident-variable-select
50+
(variableSelected)="insertVariablePlaceholder($event)">
51+
</app-incident-variable-select>
52+
</ng-template>
53+
54+
<div #contentWrapper class="output d-flex m-h-0 flex-grow-1 align-items-start justify-content-start flex-column">
55+
<span *ngFor="let message of messages"
56+
[innerHTML]="message | safe:'html'"
57+
[ngClass]="{'ml-3': !message.startsWith(consoleSignal)}">
58+
</span>
13859
</div>
139-
</ng-container>
140-
<ng-template #missingAgent>
141-
<div class="terminal d-flex flex-column align-items-center justify-content-center">
142-
<i class="icon-alignment-unalign" [ngStyle]="{'font-size':'135px'}"></i>
143-
<h6>Agent is disconnected or missing</h6>
60+
61+
<div class="d-flex justify-content-start align-items-start" *ngIf="!commandInProgress">
62+
<span class="console-info"
63+
[ngbPopover]="colContent"
64+
[autoClose]="true"
65+
triggers="manual"
66+
#p="ngbPopover"
67+
[popoverClass]="'popover'"
68+
container="body"
69+
placement="right">
70+
{{ consoleSignal }}
71+
</span>
72+
<input [(ngModel)]="command"
73+
#commandInput
74+
(keydown.tab)="p.open()"
75+
(keyup.enter)="sendCommand()"
76+
class="command ml-2"
77+
(keyup)="handleCommandHistory($event)"
78+
(keydown)="handleCommandHistory($event)"
79+
placeholder="Enter command here">
14480
</div>
145-
</ng-template>
81+
</div>
14682
</ng-container>
147-
</div>
14883

84+
<ng-template #missingAgent>
85+
<div class="terminal d-flex flex-column align-items-center justify-content-center">
86+
<i class="icon-alignment-unalign" [ngStyle]="{'font-size':'135px'}"></i>
87+
<h6>Agent is disconnected or missing</h6>
88+
</div>
89+
</ng-template>
90+
</ng-container>
14991
</div>
15092
</div>
151-
</ng-container>
152-
93+
</div>

‎frontend/src/app/shared/components/utm/util/utm-agent-console/utm-agent-console.component.scss‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,16 +40,17 @@
4040
}
4141

4242
.output {
43+
flex-grow: 1;
44+
overflow-y: auto;
45+
max-height: 100%;
4346
}
4447

4548
.terminal {
46-
max-height: 400px;
47-
height: 400px;
48-
overflow-y: auto;
4949
padding: 10px;
5050
font-family: monospace;
5151
font-size: 16px;
5252
color: #22da26;
53+
overflow: hidden;
5354

5455
.console-info {
5556
font-size: 16px;
@@ -67,7 +68,13 @@
6768
}
6869

6970
.command-header {
70-
display: block;
71-
height: 28px;
7271
background: #C6C6C6;
7372
}
73+
74+
.h-450px {
75+
height: 450px;
76+
}
77+
78+
.top-zero {
79+
top: 0 !important;
80+
}

0 commit comments

Comments
 (0)