mirror of
https://github.com/MikroWizard/mikrofront.git
synced 2025-12-24 19:09: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.
239 lines
No EOL
11 KiB
HTML
239 lines
No EOL
11 KiB
HTML
<c-row>
|
|
<c-col xs>
|
|
<c-card class="mb-4">
|
|
<c-card-header>
|
|
<c-row>
|
|
<c-col xs [lg]="10">
|
|
Config synchronization and cloners
|
|
</c-col>
|
|
<c-col xs [lg]="2" style="text-align: right;">
|
|
<button cButton color="primary" (click)="editAddCloner({},'showadd')"><i
|
|
class="fa-solid fa-plus"></i></button>
|
|
</c-col>
|
|
</c-row>
|
|
</c-card-header>
|
|
<c-card-body>
|
|
<gui-grid [autoResizeWidth]="true" [source]="source" [columnMenu]="columnMenu" [sorting]="sorting"
|
|
[infoPanel]="infoPanel" [autoResizeWidth]=true>
|
|
<gui-grid-column header="Description" field="description">
|
|
<ng-template let-value="item.description" let-item="item" let-index="index">
|
|
{{value}}
|
|
</ng-template>
|
|
</gui-grid-column>
|
|
<gui-grid-column header="Members type" field="pair_type">
|
|
<ng-template let-value="item.pair_type" let-item="item" let-index="index">
|
|
{{value}}
|
|
</ng-template>
|
|
</gui-grid-column>
|
|
<gui-grid-column header="Runtime" field="desc_cron">
|
|
<ng-template let-value="item.desc_cron" let-item="item" let-index="index">
|
|
{{value}}
|
|
</ng-template>
|
|
</gui-grid-column>
|
|
<gui-grid-column header="Actions" width="120" field="action">
|
|
<ng-template let-value="item.id" let-item="item" let-index="index">
|
|
<button cButton color="warning" size="sm" (click)="editAddCloner(item,'edit');"><i
|
|
class="fa-regular fa-pen-to-square"></i></button>
|
|
<!-- <button cButton color="info" size="sm" (click)="confirm_run(item);" class="mx-1"><i
|
|
class="fa-solid fa-bolt"></i></button> -->
|
|
<button class=" mx-1" cButton color="danger" size="sm" (click)="confirm_delete(item);"><i
|
|
class="fa-regular fa-trash-can"></i></button>
|
|
</ng-template>
|
|
</gui-grid-column>
|
|
</gui-grid>
|
|
</c-card-body>
|
|
</c-card>
|
|
</c-col>
|
|
</c-row>
|
|
|
|
<c-modal #EditClonerModal backdrop="static" size="xl" [(visible)]="EditClonerModalVisible" id="EditClonerModal">
|
|
<c-modal-header>
|
|
<h5 *ngIf="SelectedCloner['action']=='edit'" cModalTitle>Editing Cloner {{SelectedCloner['name']}}</h5>
|
|
<h5 *ngIf="SelectedCloner['action']=='add'" cModalTitle>Adding new task</h5>
|
|
<button [cModalToggle]="EditClonerModal.id" cButtonClose></button>
|
|
</c-modal-header>
|
|
<c-modal-body>
|
|
<label cLabel >General data:</label>
|
|
<c-input-group class="mb-3">
|
|
<label cInputGroupText for="floatingInput">Name</label>
|
|
<input cFormControl id="floatingInput" placeholder="SelectedCloner['name']" [(ngModel)]="SelectedCloner['name']" />
|
|
<label cInputGroupText for="floatingInput">Description</label>
|
|
<input cFormControl id="floatingInput" placeholder="SelectedCloner['description']"
|
|
[(ngModel)]="SelectedCloner['description']" />
|
|
</c-input-group>
|
|
<label cLabel >Sync config and Oprating Modes:</label>
|
|
<c-input-group class="mb-3">
|
|
<label cInputGroupText for="Direction">
|
|
Direction
|
|
</label>
|
|
<select cSelect id="Direction" [(ngModel)]="SelectedCloner['direction']">
|
|
<option value="twoway">Two way</option>
|
|
<option value="oneway">Master mode</option>
|
|
</select>
|
|
<label cInputGroupText for="inputGroupSelect01">
|
|
Live Mode
|
|
</label>
|
|
<select cSelect id="inputGroupSelect01" [(ngModel)]="SelectedCloner['live_mode']">
|
|
<option [ngValue]="false">Deactive</option>
|
|
<option [ngValue]="true">Active</option>
|
|
</select>
|
|
<label *ngIf="SelectedCloner['direction']=='oneway'" cInputGroupText for="inputGroupSelect02">
|
|
Schedule
|
|
</label>
|
|
<select *ngIf="SelectedCloner['direction']=='oneway'" cSelect id="inputGroupSelect02" [(ngModel)]="SelectedCloner['schedule']">
|
|
<option [ngValue]="false">Deactive</option>
|
|
<option [ngValue]="true">Active</option>
|
|
</select>
|
|
<label cInputGroupText *ngIf="SelectedCloner['schedule'] && SelectedCloner['direction']=='oneway'" for="cron">cron</label>
|
|
<input cFormControl *ngIf="SelectedCloner['schedule'] && SelectedCloner['direction']=='oneway'" id="cron" placeholder="Cron" [(ngModel)]="SelectedCloner['cron']" />
|
|
</c-input-group>
|
|
<label cLabel >Peers Setting:</label>
|
|
<c-input-group class="mb-3">
|
|
<label cInputGroupText for="inputGroupSelect03">
|
|
Peers type
|
|
</label>
|
|
<select cSelect id="inputGroupSelect03" (change)="form_changed()" [(ngModel)]="SelectedCloner['pair_type']">
|
|
<option value="devices">Devices</option>
|
|
<option value="groups" *ngIf="SelectedCloner['direction']=='oneway'">Groups</option>
|
|
</select>
|
|
</c-input-group>
|
|
|
|
<c-col xs style="border: 1px solid #ddd; border-radius: 4px; padding: 0;">
|
|
<div class="nav nav-underline" style="background: #fff; border-bottom: 2px solid #2c3e50;">
|
|
<div class="nav-item" *ngFor="let tab of tabs; let i = index">
|
|
<a class="nav-link" [active]="i==0" [cTabContent]="tabContent" [tabPaneIdx]="i">{{ tab.name }}</a>
|
|
</div>
|
|
</div>
|
|
<c-tab-content class="command-sections" style="padding: 10px!important;min-height: 150px;" #tabContent="cTabContent">
|
|
<c-tab-pane *ngFor="let tab of tabs; let i = index">
|
|
<div class="section" *ngFor="let section of tab.sections">
|
|
<h5 class="cloner-sections">{{ section.title }}</h5>
|
|
<div class="row">
|
|
<div class="col-4" *ngFor="let command of section.commands">
|
|
<c-card style="margin-bottom: 5px;">
|
|
<c-card-body class="p-2">
|
|
<h6 class="card-title mb-1">{{ command }}</h6>
|
|
<div class="custom-switch">
|
|
<input type="checkbox" class="custom-control-input" [checked]="in_active_commands(command)" (click)="activate_command(command)" [id]="command.replace('/', '')">
|
|
<label class="custom-control-label" [for]="command.replace('/', '')"></label>
|
|
</div>
|
|
</c-card-body>
|
|
</c-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</c-tab-pane>
|
|
</c-tab-content>
|
|
</c-col>
|
|
|
|
<h5>Peers :</h5>
|
|
<gui-grid [autoResizeWidth]="true" [source]="SelectedMembers" [columnMenu]="columnMenu" [sorting]="sorting"
|
|
[rowSelection]="rowSelection" [autoResizeWidth]=true [paging]="paging">
|
|
<gui-grid-column header="Name" field="name">
|
|
<ng-template let-value="item.name" let-item="item" let-index="index">
|
|
<i class="fa-solid fa-m" style="color: #ff3300;" *ngIf="SelectedCloner['direction']=='oneway' && item.id==master"></i>
|
|
{{value}} </ng-template>
|
|
</gui-grid-column>
|
|
<gui-grid-column *ngIf="SelectedCloner['pair_type']=='devices'" header="MAC" field="mac">
|
|
<ng-template let-value="item.mac" let-item="item" let-index="index">
|
|
{{value}}
|
|
</ng-template>
|
|
</gui-grid-column>
|
|
<gui-grid-column header="Actions" width="120" field="action">
|
|
<ng-template let-value="item.id" let-item="item" let-index="index">
|
|
<button cButton color="danger" size="sm" [cTooltip]="'Delete Member'" (click)="remove_member(item)"><i
|
|
class="fa-regular fa-trash-can"></i></button>
|
|
<button *ngIf="SelectedCloner['direction']=='oneway'" cButton color="success" size="sm" style="margin-left: 5px;" [cTooltip]="'Set as Master'" (click)="set_master(item.id)"><i class="fa-regular fa-star"></i></button>
|
|
</ng-template>
|
|
</gui-grid-column>
|
|
</gui-grid>
|
|
<hr />
|
|
<button cButton color="primary" (click)="show_new_member_form()">+ Add new Members</button>
|
|
</c-modal-body>
|
|
<c-modal-footer>
|
|
<button *ngIf="SelectedCloner['action']=='add'" (click)="submit('add')" cButton color="primary">Add</button>
|
|
<button *ngIf="SelectedCloner['action']=='edit'" (click)="submit('edit')" cButton color="primary">save</button>
|
|
<button [cModalToggle]="EditClonerModal.id" cButton color="secondary">
|
|
Close
|
|
</button>
|
|
</c-modal-footer>
|
|
</c-modal>
|
|
|
|
|
|
<c-modal #NewMemberModal backdrop="static" size="lg" [(visible)]="NewMemberModalVisible" id="NewMemberModal">
|
|
<c-modal-header>
|
|
<h5 cModalTitle>Editing Group </h5>
|
|
<button (click)="NewMemberModalVisible=!NewMemberModalVisible" cButtonClose></button>
|
|
</c-modal-header>
|
|
<c-modal-body>
|
|
<c-input-group class="mb-3">
|
|
<h5>Group Members :</h5>
|
|
<gui-grid [autoResizeWidth]="true" *ngIf="NewMemberModalVisible" [searching]="searching"
|
|
[source]="availbleMembers" [columnMenu]="columnMenu" [sorting]="sorting" [infoPanel]="infoPanel"
|
|
[rowSelection]="rowSelection" (selectedRows)="onSelectedRowsNewMembers($event)" [autoResizeWidth]=true
|
|
[paging]="paging">
|
|
<gui-grid-column header="Member Name" field="name">
|
|
<ng-template let-value="item.name" let-item="item" let-index="index">
|
|
{{value}} </ng-template>
|
|
</gui-grid-column>
|
|
<gui-grid-column *ngIf="SelectedCloner['pair_type']=='devices'" header="IP Address" field="ip">
|
|
<ng-template let-value="item.ip" let-item="item" let-index="index">
|
|
{{value}}
|
|
</ng-template>
|
|
</gui-grid-column>
|
|
<gui-grid-column *ngIf="SelectedCloner['pair_type']=='devices'" header="MAC Address" field="mac">
|
|
<ng-template let-value="item.mac" let-item="item" let-index="index">
|
|
{{value}}
|
|
</ng-template>
|
|
</gui-grid-column>
|
|
</gui-grid>
|
|
<br />
|
|
</c-input-group>
|
|
<hr />
|
|
</c-modal-body>
|
|
|
|
<c-modal-footer>
|
|
<button *ngIf="NewMemberRows.length!= 0" (click)="add_new_members()" cButton color="primary">Add {{
|
|
NewMemberRows.length }}</button>
|
|
<button (click)="NewMemberModalVisible=!NewMemberModalVisible" cButton color="secondary">
|
|
Close
|
|
</button>
|
|
</c-modal-footer>
|
|
</c-modal>
|
|
|
|
|
|
<c-modal #DeleteConfirmModal backdrop="static" [(visible)]="DeleteConfirmModalVisible" id="DeleteConfirmModal">
|
|
<c-modal-header>
|
|
<h5 cModalTitle>Confirm delete {{ SelectedCloner['name'] }}</h5>
|
|
<button [cModalToggle]="DeleteConfirmModal.id" cButtonClose></button>
|
|
</c-modal-header>
|
|
<c-modal-body>
|
|
Are you sure that You want to delete following task ?
|
|
<br />
|
|
<br />
|
|
<table style="width: 100%;">
|
|
<tr>
|
|
<td><b>Taks name : </b></td>
|
|
<td>{{ SelectedCloner['name'] }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>Description : </b></td>
|
|
<td>{{ SelectedCloner['description'] }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>Cron exec : </b></td>
|
|
<td>{{ SelectedCloner['desc_cron'] }}</td>
|
|
</tr>
|
|
</table>
|
|
</c-modal-body>
|
|
<c-modal-footer>
|
|
<button (click)="confirm_delete('',true)" cButton color="danger">
|
|
Yes,Delete!
|
|
</button>
|
|
<button [cModalToggle]="DeleteConfirmModal.id" cButton color="info">
|
|
Close
|
|
</button>
|
|
</c-modal-footer>
|
|
</c-modal>
|
|
|
|
<c-toaster position="fixed" placement="top-end"></c-toaster> |