ITC-3742 Add Proxmox to ImportModule

src/app/app.component.html

@@ -44,3 +44,4 @@
         <oitc-message-of-the-day-modal [messageOfTheDay]="messageOfTheDay"></oitc-message-of-the-day-modal>
     }
 </div>
+<oitc-confirm-modal></oitc-confirm-modal>

src/app/app.component.ts

@@ -38,6 +38,7 @@ import { SystemnameService } from './services/systemname.service';
 import { PermissionsService } from './permissions/permissions.service';
 import { TimezoneService } from './services/timezone.service';
 import { TranslocoDirective } from '@jsverse/transloco';
+import { ConfirmModalComponent } from './layouts/coreui/confirm-modal/confirm-modal.component';
 
 @Component({
     selector: 'oitc-root',
@@ -52,7 +53,8 @@ import { TranslocoDirective } from '@jsverse/transloco';
         AsyncPipe,
         NgClass,
         MessageOfTheDayModalComponent,
-        TranslocoDirective
+        TranslocoDirective,
+        ConfirmModalComponent
     ],
     templateUrl: './app.component.html',
     styleUrl: './app.component.css',

src/app/components/charts/area-echarts/area-echarts.component.html

@@ -0,0 +1,6 @@
+<div class="px-2">
+    <div echarts class="w-100"
+         [style.min-height.vh]="minChartHeight()"
+         [options]="chartOption"
+         (chartInit)="onChartInit($event)"></div>
+</div>

src/app/components/charts/area-echarts/area-echarts.component.ts

@@ -0,0 +1,203 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, effect, inject, input, OnDestroy } from '@angular/core';
+import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
+import * as echarts from 'echarts/core';
+import { EChartsCoreOption } from 'echarts/core';
+import { LineSeriesOption } from 'echarts';
+import { Subscription } from 'rxjs';
+import { LineChart } from 'echarts/charts';
+import { GridComponent, LegendComponent, TitleComponent, ToolboxComponent, TooltipComponent } from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import { LayoutService } from '../../../layouts/coreui/layout.service';
+import { PerformanceData } from '../../popover-graph/popover-graph.interface';
+
+echarts.use([LineChart, ToolboxComponent, GridComponent, LegendComponent, TitleComponent, TooltipComponent, CanvasRenderer]);
+
+@Component({
+    selector: 'oitc-area-echarts',
+    imports: [
+        NgxEchartsDirective
+    ],
+    providers: [
+        provideEchartsCore({echarts}),
+    ],
+    templateUrl: './area-echarts.component.html',
+    styleUrl: './area-echarts.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AreaEchartsComponent implements OnDestroy {
+
+    public dataInput = input<PerformanceData[]>([]);
+    public max = input<number | undefined>(undefined);
+    public minChartHeight = input<number | undefined>(15); // in vh
+
+    // Count this up, to trigger a resize / chart update
+    public triggerResize = input<number>(0);
+
+    public theme: string = '';
+    public chartOption: EChartsCoreOption = {};
+    private readonly LayoutService = inject(LayoutService);
+
+    private cdr = inject(ChangeDetectorRef);
+
+    public echartsInstance: any;
+
+    private readonly subscriptions: Subscription = new Subscription();
+    public triggerUpdate = input<number>(0);
+
+    public onChartInit(ec: any): void {
+        this.echartsInstance = ec;//.setTheme(this.theme);
+        this.cdr.markForCheck();
+    }
+
+    public ngOnDestroy(): void {
+        this.subscriptions.unsubscribe();
+    }
+
+    constructor() {
+        // Subscribe to the color mode changes (drop down menu in header)
+        this.subscriptions.add(this.LayoutService.theme$.subscribe((theme) => {
+            //console.log('Change in theme detected', theme);
+            this.theme = theme;
+            if (this.dataInput().length > 0) {
+                this.renderChart(this.dataInput());
+            }
+            this.cdr.markForCheck();
+        }));
+
+        effect(() => {
+            this.renderChart(this.dataInput());
+            this.cdr.markForCheck();
+        });
+    }
+
+    private renderChart(perfdata: PerformanceData[]) {
+        let data: any[] = [];
+
+        // Data format for eCharts
+        // https://stackoverflow.com/a/68461548
+        //   for (let isoTimestamp in gauge.data) {
+        //       data.push([isoTimestamp, gauge.data[isoTimestamp]]);
+        //   }
+
+        let series: LineSeriesOption[] = [];
+        let gradientStart = [
+            'rgba(59, 130, 246, 0.4)', 'rgba(245, 158, 11, 0.4)'
+        ];
+
+        let gradientLineColor = [
+            'rgba(59, 130, 246, 1)', 'rgba(245, 158, 11, 1)'
+        ];
+        let contrastColor = getComputedStyle(document.documentElement).getPropertyValue('--cui-medium-emphasis').trim();
+        let backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--cui-body-bg').trim();
+
+        if (this.theme === 'dark') {
+            gradientStart = [
+                'rgba(139, 92, 246, 0.4)', 'rgba(16, 185, 129, 0.4)'
+            ];
+            gradientLineColor = [
+                'rgba(139, 92, 246, 1)', 'rgba(16, 185, 129, 1)'
+            ];
+        }
+
+
+        perfdata.forEach((gauge, index) => {
+            data[index] = [];
+            for (let isoTimestamp in gauge.data) {
+                data[index].push([isoTimestamp, gauge.data[isoTimestamp]]);
+            }
+            series.push(
+                {
+                    data: data[index],
+                    type: 'line',
+                    name: gauge.datasource.name,
+                    symbolSize: 1,
+                    lineStyle: {
+                        width: 2
+                    },
+                    sampling: 'lttb',
+                    //smooth: false,
+                    itemStyle: {
+                        color: gradientLineColor[index]
+                    },
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            {
+                                offset: 0,
+                                color: gradientStart[index]
+                            },
+                            {
+                                offset: 1,
+                                color: 'transparent'
+                            }
+                        ])
+                    },
+                    emphasis: {
+                        focus: 'series'
+                    }
+                }
+            );
+        });
+
+
+        this.chartOption = {
+            grid: {
+                top: 10,
+                left: 0,   // Force align left edge
+                right: 0,  // Force align right edge
+                bottom: 0,
+                containLabel: false // MUST be false to reproduce the truncation issue
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'cross'
+                },
+                backgroundColor: backgroundColor,
+                textStyle: {
+                    color: contrastColor
+                },
+                formatter: (params: any) => {
+                    // params is an array when trigger: 'axis'
+                    let result = `${params[0].axisValueLabel}<br/>`; // The header (usually x-axis value)
+
+                    params.forEach((item: any) => {
+                        const value = (Math.round(item.value[1] * 100) / 100).toFixed(2);
+                        result += `${item.marker} ${item.seriesName}: <b>${value} ${perfdata[0].datasource.unit}</b><br/>`;
+                    });
+
+                    return result;
+                }
+            },
+
+            xAxis: {
+                type: 'time',
+                splitNumber: 5,
+                axisLabel: {
+                    fontSize: 9,
+                    color: contrastColor
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: contrastColor
+                    }
+                }
+            },
+            yAxis: {
+                type: 'value',
+                axisLabel: {
+                    fontSize: 9,
+                    color: contrastColor,
+                    formatter: (value: any) => {
+                        return `${value} ${perfdata[0].datasource.unit}`;
+                    }
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: contrastColor
+                    }
+                }
+            },
+            series: series
+        }
+    }
+}

src/app/components/charts/charts.interface.ts

@@ -19,3 +19,7 @@ export interface SparklineBarMetric {
         text: string
     }
 }
+
+export interface AreaChartMetric {
+    [key: string]: number
+}

src/app/layouts/coreui/confirm-modal/confirm-modal.component.html

@@ -0,0 +1,43 @@
+<ng-container *transloco="let t">
+    <c-modal
+        #modal='cModal'
+        [keyboard]="true"
+        id="confirmModal"
+        size="lg"
+    >
+        <c-modal-header class="bg-warning">
+            <h5 cModalTitle>
+                {{ t('Confirm') }}
+            </h5>
+            <button (click)="no()" cButtonClose></button>
+        </c-modal-header>
+        <c-modal-body>
+            <c-row>
+                @if (this.ConfirmModalService.state().message == '') {
+                    <c-col xs="12">
+                        <strong>{{ t('Do you really want to do this action?') }}</strong>
+                    </c-col>
+                }
+                @if (this.ConfirmModalService.state().message) {
+                    <c-col xs="12">
+                        <strong>{{ this.ConfirmModalService.state().message }}</strong>
+                    </c-col>
+                }
+                @if (this.ConfirmModalService.state().helpMessage) {
+                    <c-col class="help-block" xs="12">
+                        {{ this.ConfirmModalService.state().helpMessage }}
+                    </c-col>
+                }
+            </c-row>
+
+        </c-modal-body>
+        <c-modal-footer>
+            <button (click)="yes()" cButton class="ripple" color="primary">
+                {{ t('Yes') }}
+            </button>
+            <button (click)="no()" cButton class="ripple" color="default">
+                {{ t('Cancel') }}
+            </button>
+        </c-modal-footer>
+    </c-modal>
+</ng-container>

src/app/layouts/coreui/confirm-modal/confirm-modal.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfirmModalComponent } from './confirm-modal.component';
+
+describe('ConfirmModalComponent', () => {
+    let component: ConfirmModalComponent;
+    let fixture: ComponentFixture<ConfirmModalComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [ConfirmModalComponent],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(ConfirmModalComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

src/app/layouts/coreui/confirm-modal/confirm-modal.component.ts

@@ -0,0 +1,71 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, ViewChild } from '@angular/core';
+import {
+    ButtonCloseDirective,
+    ColComponent,
+    ModalBodyComponent,
+    ModalComponent,
+    ModalFooterComponent,
+    ModalHeaderComponent,
+    ModalService,
+    ModalTitleDirective,
+    RowComponent
+} from '@coreui/angular';
+import { TranslocoDirective } from '@jsverse/transloco';
+import { XsButtonDirective } from '../xsbutton-directive/xsbutton.directive';
+import { ConfirmModalService } from './confirm-modal.service';
+
+@Component({
+    selector: 'oitc-confirm-modal',
+    imports: [
+        ModalComponent,
+        TranslocoDirective,
+        ModalHeaderComponent,
+        ModalTitleDirective,
+        ButtonCloseDirective,
+        ModalBodyComponent,
+        XsButtonDirective,
+        ModalFooterComponent,
+        ColComponent,
+        RowComponent
+    ],
+    templateUrl: './confirm-modal.component.html',
+    styleUrl: './confirm-modal.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ConfirmModalComponent {
+
+    /*
+     Use the ConfirmModalService Service to trigger this modal! Like so
+        this.ConfirmModalService.ask(confirmModalMessage, confirmModalHelpMessage, data).subscribe(confirmation => {
+            console.log(confirmation)
+        });
+     */
+
+    public readonly ConfirmModalService = inject(ConfirmModalService);
+    private readonly modalService = inject(ModalService);
+    private cdr = inject(ChangeDetectorRef);
+    @ViewChild('modal') private modal!: ModalComponent;
+
+    public constructor() {
+    }
+
+    // Modal functions
+    public hideModal(): void {
+        this.cdr.markForCheck();
+        this.modalService.toggle({
+            show: false,
+            id: this.modal.id
+        });
+    }
+
+    public yes(): void {
+        this.ConfirmModalService.confirm(true);
+        this.hideModal();
+    }
+
+    public no(): void {
+        this.ConfirmModalService.confirm(false);
+        this.hideModal();
+    }
+
+}

src/app/layouts/coreui/confirm-modal/confirm-modal.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ConfirmModalService } from './confirm-modal.service';
+
+describe('ConfirmModalService', () => {
+    let service: ConfirmModalService;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({});
+        service = TestBed.inject(ConfirmModalService);
+    });
+
+    it('should be created', () => {
+        expect(service).toBeTruthy();
+    });
+});