mirror of
https://github.com/MikroWizard/mikrofront.git
synced 2025-12-19 16:39:30 +00:00
10d4cff4a4
Now displays DHCP server details along with historical lease information(pro feature)). Added a ping status component for monitoring device connectivity. Device pages now include logs, accounting, and authorization data for improved tracking. New component in the device page to display active sessions with the ability to terminate them. Redesigned Device Detail Page Reload Buttons for device details page Tabs Device detail pages now refresh every 30 seconds. Restored the missing device logs action menu on the devices list page. Improved handling of duplicate serial numbers when the license serial is not set, with better registration status details on the dashboard. Various minor stability and performance improvements.
254 lines
No EOL
14 KiB
HTML
254 lines
No EOL
14 KiB
HTML
<c-row *ngIf="stats">
|
|
<c-col xs>
|
|
<c-card *ngIf="stats" class="mb-1">
|
|
<c-card-header>Past 24 Hour Statics</c-card-header>
|
|
<c-card-body>
|
|
<c-row>
|
|
<c-col md="12" xl="12" xs="12">
|
|
<c-row>
|
|
<c-col class="mb-sm-1 mb-0">
|
|
<c-widget-stat-f [title]="'Failed Logins'" class="mb-1" color="danger" padding
|
|
value="{{stats['FailedLogins']}}">
|
|
<ng-template cTemplateId="widgetIconTemplate">
|
|
<i style="font-size: 2em;" class="fa-solid fa-person-circle-exclamation"></i>
|
|
</ng-template>
|
|
</c-widget-stat-f>
|
|
</c-col>
|
|
<c-col class="mb-sm-1 mb-0">
|
|
<c-widget-stat-f [title]="'Success Logins'" class="mb-1" color="success" padding
|
|
value="{{stats['SuccessfulLogins']}}">
|
|
<ng-template cTemplateId="widgetIconTemplate">
|
|
<i style="font-size: 2em;" class="fa-solid fa-arrow-right-to-bracket"></i>
|
|
</ng-template>
|
|
</c-widget-stat-f>
|
|
</c-col>
|
|
<c-col class="mb-sm-1 mb-0">
|
|
<c-widget-stat-f [title]="'Critical Events'" class="mb-1" color="danger" padding
|
|
value="{{stats['Critical']}}">
|
|
<ng-template cTemplateId="widgetIconTemplate">
|
|
<i style="font-size: 2em;" class="fa-solid fa-skull-crossbones"></i>
|
|
</ng-template>
|
|
</c-widget-stat-f>
|
|
</c-col>
|
|
<c-col class="mb-sm-1 mb-0">
|
|
<c-widget-stat-f [title]="'Warning Events'" class="mb-1" color="warning" padding
|
|
value="{{stats['Warning']}}">
|
|
<ng-template cTemplateId="widgetIconTemplate">
|
|
<i style="font-size: 2em;" class="fa-solid fa-triangle-exclamation"></i>
|
|
</ng-template>
|
|
</c-widget-stat-f>
|
|
</c-col>
|
|
<c-col class="mb-sm-1 mb-0">
|
|
<c-widget-stat-f [title]="'Info Events'" class="mb-1" color="info" padding value="{{stats['Info']}}">
|
|
<ng-template cTemplateId="widgetIconTemplate">
|
|
<i style="font-size: 2em;" class="fa-solid fa-circle-info"></i>
|
|
</ng-template>
|
|
</c-widget-stat-f>
|
|
</c-col>
|
|
</c-row>
|
|
</c-col>
|
|
</c-row>
|
|
</c-card-body>
|
|
<c-card-footer class="pb-0">
|
|
<c-col xs>
|
|
<c-row>
|
|
<c-col md="12" xl="12" xs="12">
|
|
<c-row>
|
|
<c-col class="mb-0 pb-0">
|
|
<div class="border-start border-start-4 border-start-info pt-1 px-3 mb-1">
|
|
<div class="text-medium-emphasis small">Total users</div>
|
|
<div class="fs-6 fw-semibold">{{stats['Users']}}</div>
|
|
</div>
|
|
</c-col>
|
|
<c-col class="mb-0 pb-0">
|
|
<div class="border-start border-start-4 border-start-warning pt-1 px-3 mb-1">
|
|
<div class="text-medium-emphasis small">Total Devices</div>
|
|
<div class="fs-6 fw-semibold">{{stats['Devices']}}</div>
|
|
</div>
|
|
</c-col>
|
|
<c-col class="mb-0 pb-0">
|
|
<div class="border-start border-start-4 border-start-success pt-1 px-3 mb-1">
|
|
<div class="text-medium-emphasis small">Total Events</div>
|
|
<div class="fs-6 fw-semibold">{{stats['Events']}}</div>
|
|
</div>
|
|
</c-col>
|
|
<c-col class="mb-0 pb-0">
|
|
<div class="border-start border-start-4 border-start-success pt-1 px-3 mb-1">
|
|
<div class="text-medium-emphasis small">Total Auth Logs</div>
|
|
<div class="fs-6 fw-semibold">{{stats['Auth']}}</div>
|
|
</div>
|
|
</c-col>
|
|
<c-col class="mb-0 pb-0">
|
|
<div class="border-start border-start-4 border-start-success pt-1 px-3 mb-1">
|
|
<div class="text-medium-emphasis small">Total Acc Logs</div>
|
|
<div class="fs-6 fw-semibold">{{stats['Acc']}}</div>
|
|
</div>
|
|
</c-col>
|
|
</c-row>
|
|
</c-col>
|
|
</c-row>
|
|
</c-col>
|
|
</c-card-footer>
|
|
</c-card>
|
|
</c-col>
|
|
</c-row>
|
|
|
|
<c-card class="mb-1">
|
|
<c-card-body>
|
|
<c-row>
|
|
<c-col sm="5">
|
|
<h4 class="card-title mb-0" id="traffic">Total Devices Traffic</h4>
|
|
</c-col>
|
|
<c-col class="d-none d-md-block" sm="7">
|
|
<form [formGroup]="trafficRadioGroup">
|
|
<c-button-group class="float-end me-3" role="group">
|
|
<input class="btn-check" formControlName="trafficRadio" type="radio" value="5m" />
|
|
<label (click)="setTrafficPeriod('5m')" cButton cFormCheckLabel color="secondary" variant="outline">5
|
|
Minues</label>
|
|
|
|
<input class="btn-check" formControlName="trafficRadio" type="radio" value="1h" />
|
|
<label (click)="setTrafficPeriod('1h')" cButton cFormCheckLabel color="secondary"
|
|
variant="outline">Hourly</label>
|
|
|
|
<input class="btn-check" formControlName="trafficRadio" type="radio" value="daily" />
|
|
<label (click)="setTrafficPeriod('daily')" cButton cFormCheckLabel color="secondary"
|
|
variant="outline">Daily</label>
|
|
<input class="btn-check" formControlName="trafficRadio" type="radio" value="live" />
|
|
<label (click)="setTrafficPeriod('live')" cButton cFormCheckLabel color="secondary"
|
|
variant="outline">Live</label>
|
|
</c-button-group>
|
|
</form>
|
|
</c-col>
|
|
</c-row>
|
|
<c-chart [data]="chart_data" [options]="options" [height]="250" type="line">
|
|
</c-chart>
|
|
</c-card-body>
|
|
</c-card>
|
|
<c-row>
|
|
<c-col xl="6" *ngIf="stats" lg="12" class="h-100" style="min-height: 160px!important;display: grid">
|
|
<c-card class="mb-1 p-1 h-100" style="padding-left: 5px!important;">
|
|
<div class="my-1">
|
|
<h4 style="display: inline-block;">Version and Serial information</h4>
|
|
|
|
</div>
|
|
<div *ngIf="!stats['license']" class="my-1">
|
|
<div style="display: inline-block;margin-right: 5px;">
|
|
<code style="padding: 0!important;">Serial:</code> <small
|
|
style="background-color: #ccc;padding: 5px;border-radius: 5px;cursor: pointer;" (click)="copy_this()"
|
|
[cdkCopyToClipboard]="stats['serial']">{{ stats['serial'] }}</small>
|
|
<span *ngIf="copy_msg" style="color: #fff!important;" class="badge text-bg-success"><i
|
|
class="fa-solid fa-check"></i>Copy</span>
|
|
</div>
|
|
<c-badge *ngIf="stats['username']" color="danger">Not Registred</c-badge>
|
|
<c-badge *ngIf="!stats['username']" color="danger">License Validation failed</c-badge>
|
|
</div>
|
|
<div *ngIf="stats['license']=='connection_error'" class="my-1">
|
|
<div style="display: inline-block;margin-right: 5px;">
|
|
<code style="padding: 0!important;">Serial:</code> <small
|
|
style="background-color: #ccc;padding: 5px;border-radius: 5px;cursor: pointer;" (click)="copy_this()"
|
|
[cdkCopyToClipboard]="stats['serial']">{{ stats['serial'] }}</small>
|
|
<span *ngIf="copy_msg" style="color: #fff!important;" class="badge text-bg-success mx-1"><i
|
|
class="fa-solid fa-check"></i>Copy</span>
|
|
</div>
|
|
<c-badge class="mx-1" color="danger">Unable connect to server/Check server internet connection</c-badge>
|
|
</div>
|
|
<div *ngIf="stats['license']!='connection_error' && stats['license']" class="my-1">
|
|
<div style="display: inline-block;margin-right: 5px;">
|
|
<code style="padding: 0!important;">Serial:</code> <small
|
|
style="background-color: #ccc;padding: 5px;border-radius: 5px;cursor: pointer;" (click)="copy_this()"
|
|
[cdkCopyToClipboard]="stats['serial']">{{ stats['serial'] }}</small>
|
|
<span *ngIf="copy_msg" style="color: #fff!important;" class="badge text-bg-success mx-1"><i
|
|
class="fa-solid fa-check"></i>Copy</span>
|
|
</div>
|
|
<c-badge color="success">Registred</c-badge>
|
|
<c-badge class="mx-1" color="info">License Type : {{stats['license']}}</c-badge>
|
|
<c-badge *ngIf="stats['update_mode']!='auto'" color="info">Manual update</c-badge>
|
|
<c-badge *ngIf="stats['update_mode']=='auto'" color="info">Auto update</c-badge>
|
|
</div>
|
|
<div *ngIf="stats['license']!='connection_error'" class="my-1">
|
|
<span style="font-size: 0.9rem; display: inline-block;margin-right: 5px"><c-badge
|
|
[color]="stats['update_available'] ? 'success' : 'secondary'"
|
|
style="margin: 0!important;padding: 8px;height: 27px;">Your Mikroman version : {{stats['version']}}
|
|
</c-badge>
|
|
<i class="fa-solid fa-spinner fa-spin" *ngIf="stats['update_inprogress']"></i>
|
|
<button cButton color="warning"
|
|
*ngIf="stats['update_mode']!='auto' && stats['update_available'] && !stats['update_inprogress']" size="sm"
|
|
(click)="showConfirmModal('update_mikroman')"
|
|
style="font-size: 0.75em;position: relative;left: -4px;top: 1px;border-top-left-radius: 0;border-bottom-left-radius: 0;height: 27px;"><i
|
|
class="fa-regular fa-hand-pointer fa-beat-fade"></i> Update availble </button>
|
|
</span>
|
|
<span style="font-size: 0.9rem; display: inline-block;"><c-badge
|
|
[color]="stats['front_update_available'] ? 'success' : 'secondary'" style="padding: 8px;height: 27px;"
|
|
color="secondary">Your Mikrofront version : {{front_version}}
|
|
</c-badge>
|
|
<i class="fa-solid fa-spinner fa-spin" *ngIf="stats['front_update_inprogress']"></i>
|
|
<button cButton color="warning"
|
|
*ngIf="stats['update_mode']!='auto' && stats['front_update_available'] && !stats['front_update_inprogress']"
|
|
size="sm" (click)="showConfirmModal('update_mikrofront')"
|
|
style="font-size: 0.75em;position: relative;left: -4px;top: 1px;border-top-left-radius: 0;border-bottom-left-radius: 0;height: 27px;"><i
|
|
class="fa-regular fa-hand-pointer fa-beat-fade"></i> Update availble </button>
|
|
</span>
|
|
</div>
|
|
<p *ngIf="!stats['license'] && !stats['username']" style="color: rgb(0, 119, 255);"><strong>License User name is not set in settings <a style="color: rgb(0, 119, 255);" target="_blank" href="https://mikrowizard.com/docs/register-serial-number/" >read more!</a></strong></p>
|
|
<p *ngIf="!stats['license'] && stats['username']" style="color: rgb(0, 119, 255);"><strong>Serial number not submited<a style="color: rgb(0, 119, 255);" target="_blank" href="https://mikrowizard.com/docs/register-serial-number/" >read more!</a></strong> </p>
|
|
|
|
<!-- <div *ngIf="stats['update_mode']!='auto'" class="my-1">
|
|
<button cButton color="warning" *ngIf="stats['update_available']" size="sm" style="font-size: 1em;"><i class="fa-regular fa-hand-pointer fa-beat-fade"></i> Update <strong>Mikroman</strong> and reload server</button>
|
|
<button cButton color="warning" *ngIf="stats['front_update_available']" size="sm" style="font-size: 1em;margin-left: 5px;"><i class="fa-regular fa-hand-pointer fa-beat-fade"></i> Update <strong>MikroFront</strong> and reload Page</button>
|
|
</div> -->
|
|
</c-card>
|
|
</c-col>
|
|
<c-col xl="6" lg="12" class="h-100" style="min-height: 160px!important;display: grid;">
|
|
<c-card class="h-100" *ngIf="stats" style="padding: 0!important;margin: 0!important;">
|
|
<c-carousel [dark]="true" [animate]="false" [wrap]="false" [interval]="1000000">
|
|
<c-carousel-indicators></c-carousel-indicators>
|
|
<c-carousel-inner>
|
|
<c-carousel-item style="display: flex;" *ngFor="let slide of stats['blog']; index as i;">
|
|
<img [src]="slide.media_content" alt="{{slide.title}}" class="d-block" loading="lazy" style=" float: left;"
|
|
height="150px" />
|
|
<div style="padding: 20px;">
|
|
<h5>{{slide.title}}</h5>
|
|
<p style="max-width: 90%;" [innerHTML]="slide.summery"></p>
|
|
</div>
|
|
</c-carousel-item>
|
|
</c-carousel-inner>
|
|
<c-carousel-control [routerLink] caption="Previous" direction="prev"></c-carousel-control>
|
|
<c-carousel-control [routerLink] caption="Next" direction="next"></c-carousel-control>
|
|
</c-carousel>
|
|
</c-card>
|
|
</c-col>
|
|
</c-row>
|
|
|
|
<c-modal #ConfirmModal backdrop="static" size="lg" [(visible)]="ConfirmModalVisible" id="ConfirmModal">
|
|
<c-modal-header>
|
|
<h5 cModalTitle *ngIf="action=='update_mikroman'">Please Confirm Mikroman Update</h5>
|
|
<h5 cModalTitle *ngIf="action=='update_mikrofront'">Please Confirm MikroFront Update</h5>
|
|
<button [cModalToggle]="ConfirmModal.id" cButtonClose></button>
|
|
</c-modal-header>
|
|
<c-modal-body>
|
|
<div *ngIf="action=='update_mikroman'">
|
|
<p>Are you sure you want to apply latest Mikroman Update <code
|
|
style="padding: 0 !important;"><b> ver {{ stats['latest_version'] }}</b></code>?</p>
|
|
<p>By updating Mikroman the MikroFront update is also get checked and applyed</p>
|
|
<p>If you made any special changes to configuration files or python files it will be removed automaticlaly</p>
|
|
</div>
|
|
<div *ngIf="action=='update_mikroman'">
|
|
<code style="padding: 0!important;">Applying the update will cause reload of the server couple of times</code>
|
|
</div>
|
|
<div *ngIf="action=='update_mikrofront'">
|
|
<p>Are you sure you want to apply latest MikroFront Update <code
|
|
style="padding: 0 !important;"><b> ver {{ stats['front_latest_version'] }}</b></code>?</p>
|
|
</div>
|
|
<div *ngIf="action=='update_mikrofront'">
|
|
<code style="padding: 0!important;">Applying the update will cause reload of the page,<br>
|
|
Also please make sure you have the latest Mikroman before updating MikroFront.
|
|
Updating to latest MikroFront without getting latest Mikroman can cause problems</code>
|
|
</div>
|
|
</c-modal-body>
|
|
<c-modal-footer>
|
|
<button cButton (click)="ConfirmAction()" color="primary"> submit</button>
|
|
<button [cModalToggle]="ConfirmModal.id" cButton color="secondary">
|
|
Close
|
|
</button>
|
|
</c-modal-footer>
|
|
</c-modal> |