<!--
~  Licensed to the Apache Software Foundation (ASF) under one or more
~  contributor license agreements.  See the NOTICE file distributed with
~  this work for additional information regarding copyright ownership.
~  The ASF licenses this file to You under the Apache License, Version 2.0
~  (the "License"); you may not use this file except in compliance with
~  the License.  You may obtain a copy of the License at
~
~     http://www.apache.org/licenses/LICENSE-2.0
~
~  Unless required by applicable law or agreed to in writing, software
~  distributed under the License is distributed on an "AS IS" BASIS,
~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~  See the License for the specific language governing permissions and
~  limitations under the License.
-->

@if ((systemDiagnostics$ | async)?.aggregateSnapshot; as systemDiagnostics) {
    <h2 mat-dialog-title>System Diagnostics</h2>
    <error-banner></error-banner>
    <div class="system-diagnostics">
        <mat-tab-group>
            <mat-tab label="JVM">
                <mat-dialog-content>
                    <div class="dialog-tab-content w-full">
                        <div class="flex gap-y-4">
                            <div class="flex flex-col flex-1 gap-y-4">
                                <section>
                                    <div class="section-header font-bold">
                                        Heap ({{ systemDiagnostics.heapUtilization }})
                                    </div>
                                    <div class="flex flex-col gap-y-3">
                                        <div class="flex flex-col">
                                            <div>Max</div>
                                            <div class="accent-color font-medium">
                                                {{ systemDiagnostics.maxHeap }}
                                            </div>
                                        </div>
                                        <div class="flex flex-col">
                                            <div>Total</div>
                                            <div class="accent-color font-medium">
                                                {{ systemDiagnostics.totalHeap }}
                                            </div>
                                        </div>
                                        <div class="flex flex-col">
                                            <div>Used</div>
                                            <div class="accent-color font-medium">
                                                {{ systemDiagnostics.usedHeap }}
                                            </div>
                                        </div>
                                        <div class="flex flex-col">
                                            <div>Free</div>
                                            <div class="accent-color font-medium">
                                                {{ systemDiagnostics.freeHeap }}
                                            </div>
                                        </div>
                                    </div>
                                </section>
                                <section>
                                    <div class="section-header font-bold primary-color">Garbage Collection</div>
                                    @if (sortedGarbageCollections) {
                                        <div class="flex flex-col gap-y-3">
                                            @for (gc of sortedGarbageCollections; track gc) {
                                                <div class="flex flex-col">
                                                    <div>{{ gc.name }}</div>
                                                    <div class="accent-color font-medium">
                                                        {{ gc.collectionCount }} times ({{ gc.collectionTime }})
                                                    </div>
                                                </div>
                                            }
                                        </div>
                                    }
                                </section>
                            </div>
                            <div class="flex flex-col flex-1 gap-y-4">
                                <section>
                                    <div class="section-header font-bold">Non Heap</div>
                                    <div class="flex flex-col gap-y-3">
                                        <div class="flex flex-col">
                                            <div>Max</div>
                                            <div class="accent-color font-medium">
                                                {{ systemDiagnostics.maxNonHeap }}
                                            </div>
                                        </div>
                                        <div class="flex flex-col">
                                            <div>Total</div>
                                            <div class="accent-color font-medium">
                                                {{ systemDiagnostics.totalNonHeap }}
                                            </div>
                                        </div>
                                        <div class="flex flex-col">
                                            <div>Used</div>
                                            <div class="accent-color font-medium">
                                                {{ systemDiagnostics.usedNonHeap }}
                                            </div>
                                        </div>
                                        <div class="flex flex-col">
                                            <div>Free</div>
                                            <div class="accent-color font-medium">
                                                {{ systemDiagnostics.freeNonHeap }}
                                            </div>
                                        </div>
                                    </div>
                                </section>
                                <section>
                                    <div class="section-header font-bold">Runtime</div>
                                    <div class="flex flex-col gap-y-3">
                                        <div class="flex flex-col">
                                            <div>Uptime</div>
                                            <div class="accent-color font-medium">
                                                {{ systemDiagnostics.uptime }}
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>
                    </div>
                </mat-dialog-content>
            </mat-tab>
            <mat-tab label="System">
                <mat-dialog-content>
                    <div class="dialog-tab-content gap-y-6 w-full flex flex-col">
                        <div class="flex">
                            <div class="flex flex-col flex-1 gap-y-4">
                                <div class="flex flex-col gap-y-3">
                                    <div class="flex flex-col">
                                        <div>Available Cores</div>
                                        <div class="accent-color font-medium">
                                            {{ systemDiagnostics.availableProcessors }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="flex flex-col flex-1 gap-y-4">
                                <div class="flex flex-col gap-y-3">
                                    <div class="flex flex-col">
                                        <div class="flex gap-x-3 items-center">
                                            <div>Core Load Average</div>
                                            <i
                                                class="fa fa-info-circle"
                                                nifiTooltip
                                                [tooltipComponentType]="TextTip"
                                                tooltipInputData="Core load average for the last minute. Not available on all platforms."></i>
                                        </div>
                                        <div class="accent-color font-medium">
                                            {{ formatFloat(systemDiagnostics.processorLoadAverage) }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <section class="flex flex-col pr-4">
                            <div class="section-header font-bold">FlowFile Repository Usage</div>
                            <div>
                                <div class="capitalize">Usage:</div>
                                <mat-progress-bar
                                    mode="determinate"
                                    [value]="
                                        getRepositoryStorageUsagePercent(
                                            systemDiagnostics.flowFileRepositoryStorageUsage
                                        )
                                    ">
                                </mat-progress-bar>
                                <div class="accent-color font-medium">
                                    {{ systemDiagnostics.flowFileRepositoryStorageUsage.utilization }}
                                    ({{ systemDiagnostics.flowFileRepositoryStorageUsage.usedSpace }}
                                    of
                                    {{ systemDiagnostics.flowFileRepositoryStorageUsage.totalSpace }})
                                </div>
                            </div>
                        </section>
                        <section class="flex flex-col pr-4">
                            <div class="section-header font-bold">Content Repository Usage</div>
                            <div class="repository-storage-container flex flex-col gap-y-2">
                                @for (repo of systemDiagnostics.contentRepositoryStorageUsage; track repo) {
                                    <div>
                                        <div class="capitalize">Usage for {{ repo.identifier }}:</div>
                                        <mat-progress-bar
                                            mode="determinate"
                                            [value]="getRepositoryStorageUsagePercent(repo)">
                                        </mat-progress-bar>
                                        <div class="accent-color font-medium">
                                            {{ repo.utilization }} ({{ repo.usedSpace }} of {{ repo.totalSpace }})
                                        </div>
                                    </div>
                                }
                            </div>
                        </section>
                        <section class="flex flex-col pr-4">
                            <div class="section-header font-bold">Provenance Repository Usage</div>
                            <div class="repository-storage-container flex flex-col gap-y-2">
                                @for (repo of systemDiagnostics.provenanceRepositoryStorageUsage; track repo) {
                                    <div>
                                        <div class="capitalize">Usage for {{ repo.identifier }}:</div>
                                        <mat-progress-bar
                                            mode="determinate"
                                            [value]="getRepositoryStorageUsagePercent(repo)">
                                        </mat-progress-bar>
                                        <div class="accent-color font-medium">
                                            {{ repo.utilization }} ({{ repo.usedSpace }} of {{ repo.totalSpace }})
                                        </div>
                                    </div>
                                }
                            </div>
                        </section>
                    </div>
                </mat-dialog-content>
            </mat-tab>
            <mat-tab label="Version">
                <mat-dialog-content>
                    <div class="dialog-tab-content w-full">
                        <div class="flex flex-col gap-y-4">
                            <section>
                                <div class="section-header font-bold">NiFi</div>
                                <dl class="setting-attributes-list">
                                    <dt class="font-bold">NiFi Version</dt>
                                    <dd>{{ systemDiagnostics.versionInfo.niFiVersion }}</dd>
                                    <dt class="font-bold">Tag</dt>
                                    <dd>{{ systemDiagnostics.versionInfo.buildTag }}</dd>
                                    <dt class="font-bold">Build Date/Time</dt>
                                    <dd>{{ systemDiagnostics.versionInfo.buildTimestamp }}</dd>
                                    <dt class="font-bold">Branch</dt>
                                    <dd>{{ systemDiagnostics.versionInfo.buildBranch }}</dd>
                                    <dt class="font-bold">Revision</dt>
                                    <dd>{{ systemDiagnostics.versionInfo.buildRevision }}</dd>
                                </dl>
                            </section>
                            <section>
                                <div class="section-header font-bold">Java</div>
                                <dl class="setting-attributes-list">
                                    <dt class="font-bold">Version</dt>
                                    <dd>{{ systemDiagnostics.versionInfo.javaVersion }}</dd>
                                    <dt class="font-bold">Vendor</dt>
                                    <dd>{{ systemDiagnostics.versionInfo.javaVendor }}</dd>
                                </dl>
                            </section>
                            <section>
                                <div class="section-header font-bold">Operating System</div>
                                <dl class="setting-attributes-list">
                                    <dt class="font-bold">Name</dt>
                                    <dd>{{ systemDiagnostics.versionInfo.osName }}</dd>
                                    <dt class="font-bold">Version</dt>
                                    <dd>{{ systemDiagnostics.versionInfo.osVersion }}</dd>
                                    <dt class="font-bold">Architecture</dt>
                                    <dd>{{ systemDiagnostics.versionInfo.osArchitecture }}</dd>
                                </dl>
                            </section>
                        </div>
                    </div>
                </mat-dialog-content>
            </mat-tab>
        </mat-tab-group>
        <mat-dialog-actions>
            <div class="flex flex-1 justify-between">
                <div class="refresh-container flex items-center gap-x-2">
                    <button mat-icon-button color="primary" (click)="refreshSystemDiagnostics()">
                        <i class="fa fa-refresh" [class.fa-spin]="(status$ | async) === 'loading'"></i>
                    </button>
                    <div>Last updated:</div>
                    <div class="accent-color font-medium">{{ loadedTimestamp$ | async }}</div>
                </div>
                <div>
                    <button mat-button mat-dialog-close>Close</button>
                </div>
            </div>
        </mat-dialog-actions>
    </div>
}
