refs #2501. Panel logs integration
testing/ogGui-multibranch/pipeline/head There was a failure building this commit
Details
testing/ogGui-multibranch/pipeline/head There was a failure building this commit
Details
parent
48a2a7f061
commit
17a3bfb2c5
|
|
@ -0,0 +1,139 @@
|
|||
.client-logs-modal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.grafana-button {
|
||||
color: #666;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.grafana-button:hover {
|
||||
color: #2196f3;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 1.25rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
flex: 1;
|
||||
padding: 24px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.client-info {
|
||||
margin-bottom: 16px;
|
||||
padding: 12px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
border-left: 4px solid #2196f3;
|
||||
}
|
||||
|
||||
.client-info p {
|
||||
margin: 4px 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.client-info strong {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.iframe-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.logs-iframe {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.modal-actions button {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 1200px) {
|
||||
.logs-iframe {
|
||||
width: 100% !important;
|
||||
height: 600px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.logs-iframe {
|
||||
width: 100% !important;
|
||||
height: 400px !important;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-button {
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
padding: 12px 24px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<div class="client-logs-modal">
|
||||
<div class="modal-header">
|
||||
<h2 mat-dialog-title>
|
||||
<mat-icon>article</mat-icon>
|
||||
Logs de cliente - {{ data.client.name }}
|
||||
</h2>
|
||||
<div class="header-actions">
|
||||
<button mat-icon-button (click)="openGrafanaInNewTab()" matTooltip="Abrir en Grafana" class="grafana-button">
|
||||
<mat-icon>open_in_new</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-content">
|
||||
<div class="client-info">
|
||||
<p><strong>Cliente:</strong> {{ data.client.name }}</p>
|
||||
<p><strong>IP:</strong> {{ data.client.ip }}</p>
|
||||
<p><strong>MAC:</strong> {{ data.client.mac }}</p>
|
||||
</div>
|
||||
|
||||
<div class="iframe-container">
|
||||
<iframe
|
||||
[src]="iframeUrl | safe"
|
||||
width="1200"
|
||||
height="800"
|
||||
frameborder="0"
|
||||
class="logs-iframe">
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button class="action-button" (click)="closeModal()">
|
||||
Cerrar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import { Component, Inject } from '@angular/core';
|
||||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
||||
|
||||
@Component({
|
||||
selector: 'app-client-logs-modal',
|
||||
templateUrl: './client-logs-modal.component.html',
|
||||
styleUrls: ['./client-logs-modal.component.css']
|
||||
})
|
||||
export class ClientLogsModalComponent {
|
||||
iframeUrl: string;
|
||||
grafanaUrl: string;
|
||||
|
||||
constructor(
|
||||
public dialogRef: MatDialogRef<ClientLogsModalComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data: { client: any }
|
||||
) {
|
||||
const mac = this.data.client.mac || '';
|
||||
this.iframeUrl = `https://localhost:3030/d-solo/opengnsys-clients/filebeat-clients?orgId=1&timezone=browser&var-hostname=$__all&var-mac=${mac}&refresh=5s&panelId=1&__feature.dashboardSceneSolo`;
|
||||
this.grafanaUrl = `https://localhost:3030/d/opengnsys-clients/filebeat-clients?orgId=1&from=now-5m&to=now&timezone=browser&var-hostname=$__all&var-mac=${mac}&refresh=5s&viewPanel=panel-1`;
|
||||
}
|
||||
|
||||
closeModal(): void {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
|
||||
openGrafanaInNewTab(): void {
|
||||
window.open(this.grafanaUrl, '_blank');
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue