@esfaenza/admin-module 20.3.16 → 20.3.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1141,7 +1141,8 @@ var TopActivityMaximumThreads;
|
|
|
1141
1141
|
|
|
1142
1142
|
class TopActivityV2Filter {
|
|
1143
1143
|
}
|
|
1144
|
-
// Richiesta della Top Activity v2: date in ISO UTC (…Z), campi non valorizzati = default del backend
|
|
1144
|
+
// Richiesta della Top Activity v2: date in ISO UTC (…Z), campi non valorizzati = default del backend.
|
|
1145
|
+
// Il backend-for-frontend legge i nomi senza badare a maiuscole e minuscole
|
|
1145
1146
|
class TopActivityV2Request {
|
|
1146
1147
|
}
|
|
1147
1148
|
|
|
@@ -1152,15 +1153,19 @@ class AdmTopActivityV2Loc extends LocalizationService {
|
|
|
1152
1153
|
super.set("it->en", "CPU", ["CPUs"]);
|
|
1153
1154
|
super.set("it->en", "Da", ["From"]);
|
|
1154
1155
|
super.set("it->en", "A", ["To"]);
|
|
1156
|
+
super.set("it->en", "Cerca", ["Search"]);
|
|
1155
1157
|
super.set("it->en", "Istanza", ["Instance"]);
|
|
1156
1158
|
super.set("it->en", "Istanza corrente", ["Current instance"]);
|
|
1157
1159
|
super.set("it->en", "Tutte le istanze", ["All instances"]);
|
|
1158
1160
|
super.set("it->en", "Origine dati", ["Data source"]);
|
|
1159
1161
|
super.set("it->en", "Memoria e storico", ["Memory and history"]);
|
|
1160
1162
|
super.set("it->en", "Solo memoria", ["Memory only"]);
|
|
1161
|
-
super.set("it->en", "Aggiornamento
|
|
1163
|
+
super.set("it->en", "Aggiornamento", ["Refresh"]);
|
|
1162
1164
|
super.set("it->en", "Spento", ["Off"]);
|
|
1163
|
-
super.set("it->en", "
|
|
1165
|
+
super.set("it->en", "Ogni 15 s", ["Every 15 s"]);
|
|
1166
|
+
super.set("it->en", "Ogni 30 s", ["Every 30 s"]);
|
|
1167
|
+
super.set("it->en", "Ogni 60 s", ["Every 60 s"]);
|
|
1168
|
+
super.set("it->en", "Dividi per", ["Split by"]);
|
|
1164
1169
|
super.set("it->en", "Risoluzione", ["Resolution"]);
|
|
1165
1170
|
super.set("it->en", "Bassa", ["Low"]);
|
|
1166
1171
|
super.set("it->en", "Media", ["Medium"]);
|
|
@@ -1171,16 +1176,20 @@ class AdmTopActivityV2Loc extends LocalizationService {
|
|
|
1171
1176
|
super.set("it->en", "Worker thread", ["Worker threads"]);
|
|
1172
1177
|
super.set("it->en", "CPU Massime", ["Maximum CPUs"]);
|
|
1173
1178
|
super.set("it->en", "Thread Massimi", ["Maximum Threads"]);
|
|
1179
|
+
super.set("it->en", "Sessioni attive medie per", ["Average active sessions by"]);
|
|
1180
|
+
super.set("it->en", "Picco", ["Peak"]);
|
|
1181
|
+
super.set("it->en", "un punto ogni", ["one point every"]);
|
|
1174
1182
|
super.set("it->en", "Filtri", ["Filters"]);
|
|
1175
|
-
super.set("it->en", "Filtra", ["Filter"]);
|
|
1176
1183
|
super.set("it->en", "Rimuovi", ["Remove"]);
|
|
1184
|
+
super.set("it->en", "Clic per filtrare", ["Click to filter"]);
|
|
1177
1185
|
super.set("it->en", "Prima di questo istante i dati vengono dallo storico (un campione ogni 10 secondi)", ["Before this instant data comes from history (one sample every 10 seconds)"]);
|
|
1178
|
-
super.set("it->en", "Sessioni attive medie", ["Average active sessions"]);
|
|
1179
1186
|
super.set("it->en", "sessioni", ["sessions"]);
|
|
1180
1187
|
super.set("it->en", "Carico i Dati", ["Loading Data"]);
|
|
1181
1188
|
super.set("it->en", "Nessun dato nella finestra", ["No data in the window"]);
|
|
1182
|
-
super.set("it->en", "
|
|
1183
|
-
super.set("it->en", "
|
|
1189
|
+
super.set("it->en", "Finestra tabelle", ["Tables window"]);
|
|
1190
|
+
super.set("it->en", "Ultimi 5 minuti", ["Last 5 minutes"]);
|
|
1191
|
+
super.set("it->en", "Finestra fissa", ["Fixed window"]);
|
|
1192
|
+
super.set("it->en", "Prime righe per", ["Top rows by"]);
|
|
1184
1193
|
super.set("it->en", "Attività", ["Activity"]);
|
|
1185
1194
|
super.set("it->en", "Altri", ["Others"]);
|
|
1186
1195
|
super.set("it->en", "(non attribuito)", ["(not attributed)"]);
|
|
@@ -1319,12 +1328,13 @@ const INSTANCE_CURRENT = "@current";
|
|
|
1319
1328
|
const INSTANCE_ALL = "@all";
|
|
1320
1329
|
// WaitClass ed EventType hanno valori fissi: colori fissi, così il grafico si legge sempre allo stesso modo
|
|
1321
1330
|
const FIXED_COLORS = {
|
|
1322
|
-
Cpu: "#43a047", Database: "#1e88e5", Script: "#8e24aa", Network: "#8d6e63", IO: "#
|
|
1331
|
+
Cpu: "#43a047", Database: "#1e88e5", Script: "#8e24aa", Network: "#8d6e63", IO: "#00acc1", Sleep: "#b0bec5", Throttle: "#fb8c00", Wait: "#fdd835",
|
|
1323
1332
|
Latch: "#e53935", Semaphore: "#f06292", Enqueue: "#c62828", ReadWriteLock: "#ad1457", Fence: "#6d4c41", ConditionVariable: "#00897b", Scheduler: "#5e35b1"
|
|
1324
1333
|
};
|
|
1325
1334
|
const PALETTE = ["#1e88e5", "#43a047", "#fb8c00", "#8e24aa", "#e53935", "#00897b", "#fdd835", "#6d4c41", "#3949ab", "#c0ca33"];
|
|
1326
1335
|
const OTHER_COLOR = "#9e9e9e";
|
|
1327
|
-
const TOTAL_COLOR = "#
|
|
1336
|
+
const TOTAL_COLOR = "#263238";
|
|
1337
|
+
const LIMIT_COLOR = "#e53935";
|
|
1328
1338
|
class TopActivityV2LegendItem {
|
|
1329
1339
|
}
|
|
1330
1340
|
class TopActivityV2FilterChip {
|
|
@@ -1342,6 +1352,8 @@ class AdmTopActivityV2Component {
|
|
|
1342
1352
|
this.adms = adms;
|
|
1343
1353
|
this.zone = zone;
|
|
1344
1354
|
this.Dim = TopActivityDimension;
|
|
1355
|
+
this.TotalColor = TOTAL_COLOR;
|
|
1356
|
+
this.LimitColor = LIMIT_COLOR;
|
|
1345
1357
|
// Filtri
|
|
1346
1358
|
this.filterfrom = "";
|
|
1347
1359
|
this.filterto = "";
|
|
@@ -1416,39 +1428,39 @@ class AdmTopActivityV2Component {
|
|
|
1416
1428
|
let to = this.toDate(this.filterto) ?? new Date();
|
|
1417
1429
|
let from = this.toDate(this.filterfrom) ?? new Date(to.getTime() - 3600 * 1000);
|
|
1418
1430
|
let req = new TopActivityV2Request();
|
|
1419
|
-
req.
|
|
1420
|
-
req.
|
|
1421
|
-
req.
|
|
1431
|
+
req.from = from.toISOString();
|
|
1432
|
+
req.to = to.toISOString();
|
|
1433
|
+
req.global = this.instance != INSTANCE_CURRENT;
|
|
1422
1434
|
if (this.instance != INSTANCE_CURRENT && this.instance != INSTANCE_ALL)
|
|
1423
|
-
req.
|
|
1424
|
-
req.
|
|
1425
|
-
req.
|
|
1435
|
+
req.instanceId = this.instance;
|
|
1436
|
+
req.dataSource = +this.dataSource;
|
|
1437
|
+
req.dimension = +this.dimension;
|
|
1426
1438
|
if (this.filters.length > 0)
|
|
1427
|
-
req.
|
|
1428
|
-
req.
|
|
1429
|
-
req.
|
|
1430
|
-
req.
|
|
1431
|
-
req.
|
|
1432
|
-
req.
|
|
1439
|
+
req.filters = this.filters.map(t => t.filter);
|
|
1440
|
+
req.totalActivity = this.totalActivity;
|
|
1441
|
+
req.maximumThreads = this.maxCpu ? +this.maxThreadsKind : TopActivityMaximumThreads.None;
|
|
1442
|
+
req.resolution = +this.resolution;
|
|
1443
|
+
req.tables = this.tableDims.map(t => +t);
|
|
1444
|
+
req.topCount = 10;
|
|
1433
1445
|
// Lo slider agganciato a destra segue la fine del grafico; spostato resta fermo finché cade dentro la finestra
|
|
1434
1446
|
let outside = this.sliderValue <= from.getTime() || this.sliderValue > to.getTime();
|
|
1435
1447
|
if (this.sliderAnchored || outside) {
|
|
1436
1448
|
this.sliderAnchored = true;
|
|
1437
1449
|
this.sliderValue = to.getTime();
|
|
1438
1450
|
}
|
|
1439
|
-
req.
|
|
1440
|
-
req.
|
|
1451
|
+
req.tablesTo = new Date(this.sliderValue).toISOString();
|
|
1452
|
+
req.tablesFrom = new Date(Math.max(from.getTime(), this.sliderValue - TABLES_WINDOW_MS)).toISOString();
|
|
1441
1453
|
return req;
|
|
1442
1454
|
}
|
|
1443
1455
|
applyResult(req, res) {
|
|
1444
1456
|
this.result = res;
|
|
1445
|
-
this.tables = res?.
|
|
1446
|
-
this.chartFrom = new Date(req.
|
|
1447
|
-
this.chartTo = new Date(req.
|
|
1448
|
-
this.sliderStep = Math.max(1, res?.
|
|
1457
|
+
this.tables = res?.tables ?? [];
|
|
1458
|
+
this.chartFrom = new Date(req.from).getTime();
|
|
1459
|
+
this.chartTo = new Date(req.to).getTime();
|
|
1460
|
+
this.sliderStep = Math.max(1, res?.bucketSeconds || 1) * 1000;
|
|
1449
1461
|
this.sliderMin = Math.min(this.chartTo, this.chartFrom + TABLES_WINDOW_MS);
|
|
1450
1462
|
this.sliderMax = this.chartTo;
|
|
1451
|
-
this.sliderValue = new Date(req.
|
|
1463
|
+
this.sliderValue = new Date(req.tablesTo).getTime();
|
|
1452
1464
|
this.updateTablesWindowLabel();
|
|
1453
1465
|
if (!res) {
|
|
1454
1466
|
this.chartData = null;
|
|
@@ -1456,37 +1468,39 @@ class AdmTopActivityV2Component {
|
|
|
1456
1468
|
this.lastChartKey = null;
|
|
1457
1469
|
return;
|
|
1458
1470
|
}
|
|
1459
|
-
let memoryFrom = res.
|
|
1471
|
+
let memoryFrom = res.memoryFrom ? this.parseUtc(res.memoryFrom) : null;
|
|
1460
1472
|
this.memoryFrom = memoryFrom && memoryFrom.getTime() > this.chartFrom ? this.fmt(memoryFrom) : null;
|
|
1473
|
+
this.limitLabel = this.lc.loc(+this.maxThreadsKind == TopActivityMaximumThreads.Cores ? "CPU Massime" : "Thread Massimi");
|
|
1461
1474
|
// Se è cambiata solo la finestra delle tabelle il grafico resta quello di prima: ridisegnarlo lo farebbe lampeggiare
|
|
1462
|
-
let chartKey = JSON.stringify({ ...req,
|
|
1475
|
+
let chartKey = JSON.stringify({ ...req, tablesFrom: null, tablesTo: null, tables: null, topCount: null });
|
|
1463
1476
|
if (chartKey == this.lastChartKey && this.chartData) {
|
|
1464
1477
|
this.drawTablesWindow();
|
|
1465
1478
|
return;
|
|
1466
1479
|
}
|
|
1467
1480
|
this.lastChartKey = chartKey;
|
|
1468
|
-
let times = (res.
|
|
1469
|
-
let fixed = res.
|
|
1481
|
+
let times = (res.times ?? []).map(t => this.parseUtc(t));
|
|
1482
|
+
let fixed = res.dimension == TopActivityDimension.WaitClass || res.dimension == TopActivityDimension.EventType;
|
|
1470
1483
|
let uom = this.lc.loc("sessioni");
|
|
1471
1484
|
let series = [];
|
|
1472
1485
|
this.colors = {};
|
|
1473
|
-
this.legend = (res.
|
|
1474
|
-
let color = c.
|
|
1475
|
-
if (c.
|
|
1476
|
-
this.colors[c.
|
|
1477
|
-
let label = this.valueLabel(c.
|
|
1478
|
-
series.push(new LineSerie(label, times.map((t, j) => new DateValue(t, c.
|
|
1479
|
-
return { key: c.
|
|
1486
|
+
this.legend = (res.components ?? []).map((c, i) => {
|
|
1487
|
+
let color = c.other ? OTHER_COLOR : (fixed && FIXED_COLORS[c.key]) || PALETTE[i % PALETTE.length];
|
|
1488
|
+
if (c.key != null)
|
|
1489
|
+
this.colors[c.key] = color;
|
|
1490
|
+
let label = this.valueLabel(c.label, c.other, res.dimension);
|
|
1491
|
+
series.push(new LineSerie(label, times.map((t, j) => new DateValue(t, c.values?.[j] ?? 0)), null, color, uom));
|
|
1492
|
+
return { key: c.key, label: label, color: color, other: c.other, activity: c.activity, percentage: c.percentage };
|
|
1480
1493
|
});
|
|
1481
1494
|
// L'attività totale è una linea scura sopra le aree impilate, non impilata a sua volta
|
|
1482
|
-
if (res.
|
|
1483
|
-
series.push(new LineSerie(this.lc.loc("Attività totale"), times.map((t, j) => new DateValue(t, res.
|
|
1495
|
+
if (res.totalActivity)
|
|
1496
|
+
series.push(new LineSerie(this.lc.loc("Attività totale"), times.map((t, j) => new DateValue(t, res.totalActivity[j] ?? 0)), null, TOTAL_COLOR, uom, false, false));
|
|
1484
1497
|
let limit = null;
|
|
1485
|
-
if (res.
|
|
1486
|
-
limit = new Limit(res.
|
|
1487
|
-
// L'asse Y non si allarga da solo per le linee limite
|
|
1488
|
-
|
|
1489
|
-
|
|
1498
|
+
if (res.maximumThreads != null)
|
|
1499
|
+
limit = new Limit(res.maximumThreads, this.limitLabel, LIMIT_COLOR);
|
|
1500
|
+
// L'asse Y non si allarga da solo per le linee limite: lo allargo solo se l'attività arriva ad almeno un quarto del limite,
|
|
1501
|
+
// altrimenti con il sistema scarico il grafico diventerebbe una riga piatta sul fondo (il valore del limite resta in legenda)
|
|
1502
|
+
let peak = Math.max(res.peakActiveSessions ?? 0, ...(res.totalActivity ?? [0]));
|
|
1503
|
+
this.chartMax = limit && peak >= res.maximumThreads / 4 ? Math.max(peak, res.maximumThreads) * 1.1 : undefined;
|
|
1490
1504
|
this.chartData = series.length > 0 ? new LineChartData(series, limit) : null;
|
|
1491
1505
|
}
|
|
1492
1506
|
// #endregion
|
|
@@ -1508,7 +1522,7 @@ class AdmTopActivityV2Component {
|
|
|
1508
1522
|
this.windowAxis = dateAxis;
|
|
1509
1523
|
this.windowRange = dateAxis.makeDataItem({ value: start, endValue: end });
|
|
1510
1524
|
dateAxis.createAxisRange(this.windowRange);
|
|
1511
|
-
this.windowRange.get("axisFill")?.setAll({ fill: am5.color(
|
|
1525
|
+
this.windowRange.get("axisFill")?.setAll({ fill: am5.color(0x6366f1), fillOpacity: 0.12, visible: true });
|
|
1512
1526
|
this.windowRange.get("grid")?.set("forceHidden", true);
|
|
1513
1527
|
this.windowRange.get("label")?.set("forceHidden", true);
|
|
1514
1528
|
}
|
|
@@ -1521,11 +1535,11 @@ class AdmTopActivityV2Component {
|
|
|
1521
1535
|
if (item.other || !this.result)
|
|
1522
1536
|
return;
|
|
1523
1537
|
let filter = new TopActivityV2Filter();
|
|
1524
|
-
filter.
|
|
1525
|
-
filter.
|
|
1526
|
-
if (this.filters.some(t => t.filter.
|
|
1538
|
+
filter.dimension = this.result.dimension;
|
|
1539
|
+
filter.value = item.key ?? "";
|
|
1540
|
+
if (this.filters.some(t => t.filter.dimension == filter.dimension && t.filter.value == filter.value))
|
|
1527
1541
|
return;
|
|
1528
|
-
this.filters.push({ filter: filter, label: `${this.dimensionLabel(filter.
|
|
1542
|
+
this.filters.push({ filter: filter, label: `${this.dimensionLabel(filter.dimension)} = ${item.label}` });
|
|
1529
1543
|
this.totalActivity = true;
|
|
1530
1544
|
this.search();
|
|
1531
1545
|
}
|
|
@@ -1553,24 +1567,24 @@ class AdmTopActivityV2Component {
|
|
|
1553
1567
|
this.tablesWindowLabel = `${this.fmt(new Date(start))} - ${this.fmt(new Date(this.sliderValue))}`;
|
|
1554
1568
|
}
|
|
1555
1569
|
isClickable(item) {
|
|
1556
|
-
return !item.
|
|
1570
|
+
return !item.other && (!!item.session || !!item.event?.eventId);
|
|
1557
1571
|
}
|
|
1558
1572
|
openItem(item) {
|
|
1559
1573
|
if (!this.isClickable(item))
|
|
1560
1574
|
return;
|
|
1561
|
-
if (item.
|
|
1562
|
-
this.loadSessionDetails(item.
|
|
1575
|
+
if (item.session)
|
|
1576
|
+
this.loadSessionDetails(item.session);
|
|
1563
1577
|
else
|
|
1564
|
-
this.loadNodeDetails(item.
|
|
1578
|
+
this.loadNodeDetails(item.event.eventId);
|
|
1565
1579
|
}
|
|
1566
1580
|
breakdownWidth(item, part) {
|
|
1567
|
-
return item.
|
|
1581
|
+
return item.activity ? part.activity / item.activity * 100 : 0;
|
|
1568
1582
|
}
|
|
1569
1583
|
breakdownColor(part) {
|
|
1570
|
-
return part.
|
|
1584
|
+
return part.other || part.key == null ? OTHER_COLOR : this.colors[part.key] ?? OTHER_COLOR;
|
|
1571
1585
|
}
|
|
1572
1586
|
itemLabel(item, table) {
|
|
1573
|
-
return this.valueLabel(item.
|
|
1587
|
+
return this.valueLabel(item.label, item.other, table.dimension);
|
|
1574
1588
|
}
|
|
1575
1589
|
loadNodeDetails(nodeId) {
|
|
1576
1590
|
this.NodeDetails = null;
|
|
@@ -1583,7 +1597,7 @@ class AdmTopActivityV2Component {
|
|
|
1583
1597
|
this.SessionDetails = null;
|
|
1584
1598
|
this.dlgSessionDetails.show();
|
|
1585
1599
|
requestAnimationFrame(async () => {
|
|
1586
|
-
this.SessionDetails = await this.adms.getSessionStats(this.be, session.
|
|
1600
|
+
this.SessionDetails = await this.adms.getSessionStats(this.be, session.sessionId?.toString(), session.serialNo?.toString(), session.instanceId);
|
|
1587
1601
|
});
|
|
1588
1602
|
}
|
|
1589
1603
|
// #endregion
|
|
@@ -1626,9 +1640,9 @@ class AdmTopActivityV2Component {
|
|
|
1626
1640
|
];
|
|
1627
1641
|
this.RefreshOptions = [
|
|
1628
1642
|
new KeyValue("0", this.lc.loc("Spento")),
|
|
1629
|
-
new KeyValue("15", "15 s"),
|
|
1630
|
-
new KeyValue("30", "30 s"),
|
|
1631
|
-
new KeyValue("60", "60 s")
|
|
1643
|
+
new KeyValue("15", this.lc.loc("Ogni 15 s")),
|
|
1644
|
+
new KeyValue("30", this.lc.loc("Ogni 30 s")),
|
|
1645
|
+
new KeyValue("60", this.lc.loc("Ogni 60 s"))
|
|
1632
1646
|
];
|
|
1633
1647
|
this.Instances = [
|
|
1634
1648
|
new KeyValue(INSTANCE_CURRENT, this.lc.loc("Istanza corrente")),
|
|
@@ -1683,7 +1697,8 @@ class AdmTopActivityV2Component {
|
|
|
1683
1697
|
this.maxCpu = saved.maxCpu ?? this.maxCpu;
|
|
1684
1698
|
this.maxThreadsKind = saved.maxThreadsKind ?? this.maxThreadsKind;
|
|
1685
1699
|
this.tableDims = saved.tableDims?.length == 2 ? saved.tableDims : this.tableDims;
|
|
1686
|
-
|
|
1700
|
+
// Filtri salvati con i nomi delle prime versioni (PascalCase) non sono più validi
|
|
1701
|
+
this.filters = (saved.filters ?? []).filter(t => t?.filter?.dimension != null);
|
|
1687
1702
|
}
|
|
1688
1703
|
saveSettings() {
|
|
1689
1704
|
let settings = {
|
|
@@ -1716,11 +1731,11 @@ class AdmTopActivityV2Component {
|
|
|
1716
1731
|
return m ? new Date(Date.UTC(+m[3], +m[2] - 1, +m[1], +m[4], +m[5], +m[6])) : new Date(value);
|
|
1717
1732
|
}
|
|
1718
1733
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: AdmTopActivityV2Component, deps: [{ token: i1$1.DateService }, { token: i1.LocalizationService }, { token: i3.PreferencesService }, { token: i1$1.InterComService }, { token: i4.ActivatedRoute }, { token: AdminModuleBaseService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1719
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.34", type: AdmTopActivityV2Component, isStandalone: false, selector: "topact_v2", providers: [{ provide: LocalizationService, useClass: AdmTopActivityV2Loc }], viewQueries: [{ propertyName: "dlgNodeDetails", first: true, predicate: ["dlgNodeDetails"], descendants: true }, { propertyName: "dlgSessionDetails", first: true, predicate: ["dlgSessionDetails"], descendants: true }], ngImport: i0, template: "<div class=\"row\">\r\n <div class=\"col-12\">\r\n <div class=\"card app-overflow-visible\" widget>\r\n <div class=\"card-header\">\r\n <span class=\"text-uppercase\">\r\n {{'Attivit\u00E0 Principali' | localize: lc}}\r\n @if (DirInfos) {\r\n <span> - \r\n {{'' + DirInfos.cpus + ' ' + ('CPU' | localize: lc) + (DirInfos.rssplan ? ' - ' + DirInfos.rssplan : '')}} \r\n Load average: {{ DirInfos.lavg1 | number : '1.1-2' : 'it'}} {{ DirInfos.lavg5 | number : '1.1-2' : 'it'}} {{ DirInfos.lavg15 | number : '1.1-2' : 'it'}}\r\n </span>\r\n }\r\n </span>\r\n </div>\r\n <div class=\"card-body widget-body\">\r\n <form role=\"form\">\r\n <div class=\"row app-first-filter-line\">\r\n <div class=\"col-xl-2 col-lg-2 col-md-6 app-filter-wrapper\">\r\n <form-datetime [readonly]=\"refreshSeconds != '0'\" [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"filterfrom\" name=\"filterfrom\" [Placeholder]=\"'Da' | localize: lc\"></form-datetime>\r\n </div>\r\n <div class=\"col-xl-2 col-lg-2 col-md-6 app-filter-wrapper\">\r\n <form-datetime [readonly]=\"refreshSeconds != '0'\" [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"filterto\" name=\"filterto\" [Placeholder]=\"'A' | localize: lc\"></form-datetime>\r\n </div>\r\n <div class=\"col-xl-2 col-lg-2 col-md-6 app-filter-wrapper\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"instance\" name=\"instance\" [Source]=\"Instances\" [Placeholder]=\"'Istanza' | localize: lc\" (inputChange)=\"search()\"></form-select>\r\n </div>\r\n <div class=\"col-xl-2 col-lg-2 col-md-6 app-filter-wrapper\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"dataSource\" name=\"dataSource\" [Source]=\"DataSources\" [Placeholder]=\"'Origine dati' | localize: lc\" (inputChange)=\"search()\"></form-select>\r\n </div>\r\n <div class=\"col-xl-1 col-lg-1 col-md-2\">\r\n <button [disabled]=\"loading || refreshSeconds != '0'\" class=\"input-group-addon btn app-btn-search app-margin-top-20\" (click)=\"searchClicked()\" type=\"submit\"><i class=\"fa\" [class.fa-search]=\"!loading\" [class.fa-spinner]=\"loading\" [class.fa-spin]=\"loading\"></i></button>\r\n </div>\r\n <div class=\"col-xl-2 col-lg-2 col-md-4 app-filter-wrapper\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"refreshSeconds\" name=\"refreshSeconds\" [Source]=\"RefreshOptions\" [Placeholder]=\"'Aggiornamento automatico' | localize: lc\" (inputChange)=\"refreshChanged()\"></form-select>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-xl-2 col-lg-2 col-md-6 app-filter-wrapper\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"dimension\" name=\"dimension\" [Source]=\"Dimensions\" [Placeholder]=\"'Dimensione' | localize: lc\" (inputChange)=\"search()\"></form-select>\r\n </div>\r\n <div class=\"col-xl-2 col-lg-2 col-md-6 app-filter-wrapper\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"resolution\" name=\"resolution\" [Source]=\"Resolutions\" [Placeholder]=\"'Risoluzione' | localize: lc\" (inputChange)=\"search()\"></form-select>\r\n </div>\r\n <div class=\"col-xl-2 col-lg-2 col-md-6 app-filter-wrapper\" style=\"display: flex; height: 38px;\">\r\n <form-checkbox [FormLayout]=\"false\" [SliderMode]=\"true\" [Validation]=\"false\" [(ngModel)]=\"totalActivity\" name=\"totalActivity\" (inputChange)=\"search()\"></form-checkbox> \r\n <span class=\"app-padding-top-5 app-padding-left-5\">{{'Attivit\u00E0 totale' | localize: lc}}</span>\r\n </div>\r\n <div class=\"col-xl-2 col-lg-2 col-md-6 app-filter-wrapper\" style=\"display: flex; height: 38px;\">\r\n <form-checkbox [FormLayout]=\"false\" [SliderMode]=\"true\" [Validation]=\"false\" [(ngModel)]=\"maxCpu\" name=\"maxCpu\" (inputChange)=\"search()\"></form-checkbox> \r\n <span class=\"app-padding-top-5 app-padding-left-5\">{{'Limite' | localize: lc}}</span>\r\n </div>\r\n <div class=\"col-xl-2 col-lg-2 col-md-6 app-filter-wrapper\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [disabled]=\"!maxCpu\" [(ngModel)]=\"maxThreadsKind\" name=\"maxThreadsKind\" [Source]=\"ThreadKinds\" (inputChange)=\"search()\"></form-select>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n @if (filters.length > 0) {\r\n <div class=\"app-margin-top-5\">\r\n <strong>{{'Filtri' | localize: lc}}:</strong> \r\n @for (chip of filters; track $index) {\r\n <span style=\"display: inline-block; border: 1px solid #bbb; border-radius: 12px; padding: 1px 8px; margin: 0 5px 3px 0;\">\r\n {{chip.label}} <a class=\"app-pointer\" [title]=\"'Rimuovi' | localize: lc\" (click)=\"removeFilter($index)\">×</a>\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n @if (memoryFrom) {\r\n <div class=\"app-margin-top-5\"><small><em>{{'Prima di questo istante i dati vengono dallo storico (un campione ogni 10 secondi)' | localize: lc}}: {{memoryFrom}}</em></small></div>\r\n }\r\n\r\n <div class=\"row\">\r\n <div class=\"col-md-12 app-margin-top-5\">\r\n <div style=\"width: 100%; height: 300px\">\r\n @if (chartData) {\r\n <es-line-chart [MinGridDistance]=\"65\"\r\n [Timeline]=\"false\"\r\n [FinalInstants]=\"false\"\r\n [Stacked]=\"true\"\r\n [Step]=\"true\"\r\n [Fill]=\"true\"\r\n [MergeDatasets]=\"true\"\r\n [Data]=\"chartData\"\r\n [Max]=\"chartMax\"\r\n [Legend]=\"false\"\r\n [YTitle]=\"'Sessioni attive medie' | localize: lc\"\r\n name=\"topactv2\"\r\n [DataGroupingThreshold]=\"99999999\"\r\n (chartLoaded)=\"onChartLoaded($event)\"></es-line-chart>\r\n } @else {\r\n <p><em>{{(loading ? 'Carico i Dati' : 'Nessun dato nella finestra') | localize: lc}}</em></p>\r\n }\r\n </div>\r\n\r\n <!-- Legenda: un clic su una voce la aggiunge ai filtri (\"altri\" non \u00E8 filtrabile) -->\r\n <div class=\"app-margin-top-5\">\r\n @for (item of legend; track $index) {\r\n <span [class.app-pointer]=\"!item.other\" [title]=\"item.other ? '' : ('Filtra' | localize: lc)\" (click)=\"addFilter(item)\" style=\"display: inline-block; margin: 0 12px 3px 0; white-space: nowrap;\">\r\n <span [style.background]=\"item.color\" style=\"display: inline-block; width: 10px; height: 10px; margin-right: 4px;\"></span>{{item.label}} <small>{{item.percentage | number : '1.0-1' : 'it'}}%</small>\r\n </span>\r\n }\r\n @if (result?.TotalActivity) {\r\n <span style=\"display: inline-block; margin: 0 12px 3px 0; white-space: nowrap;\">\r\n <span style=\"display: inline-block; width: 14px; height: 2px; background: #212121; margin: 0 4px 3px 0;\"></span>{{'Attivit\u00E0 totale' | localize: lc}}\r\n </span>\r\n }\r\n </div>\r\n\r\n @if (sliderMax > sliderMin) {\r\n <div style=\"display: flex; align-items: center; gap: 10px;\" class=\"app-margin-top-5\">\r\n <span class=\"app-nowrap\"><strong>{{'Tabelle' | localize: lc}}</strong>: {{tablesWindowLabel}}</span>\r\n <input type=\"range\" style=\"flex-grow: 1;\" [min]=\"sliderMin\" [max]=\"sliderMax\" [step]=\"sliderStep\" [ngModel]=\"sliderValue\" (ngModelChange)=\"sliderValue = $event; sliderMoving()\" (change)=\"sliderChanged()\" />\r\n @if (sliderAnchored) {\r\n <small class=\"app-nowrap\"><em>{{'agganciato alla fine' | localize: lc}}</em></small>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"row app-margin-top-5\">\r\n @for (table of tables; track $index; let i = $index) {\r\n <div class=\"col-md-6\">\r\n <div style=\"display: flex; align-items: center; gap: 8px;\">\r\n <div style=\"width: 220px;\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"tableDims[i]\" name=\"tabledim{{i}}\" [Source]=\"Dimensions\" (inputChange)=\"search()\"></form-select>\r\n </div>\r\n <small>{{'Attivit\u00E0' | localize: lc}}: {{table.Activity | number : '1.1-3' : 'it'}}</small>\r\n </div>\r\n <es-table [(ngModel)]=\"table.Items\" [HidePaging]=\"true\">\r\n <ng-template #header>\r\n <th>{{dimensionLabel(table.Dimension)}}</th>\r\n <th class=\"app-col-min\">{{'Attivit\u00E0' | localize: lc}}</th>\r\n <th class=\"app-col-min\">%</th>\r\n @if (table.Dimension == Dim.UserSession) {\r\n <th>{{'Utente' | localize: lc}}</th>\r\n <th>{{'Tenant' | localize: lc}}</th>\r\n <th>{{'Tipo' | localize: lc}}</th>\r\n <th>{{'Processo' | localize: lc}}</th>\r\n <th>{{'Gruppo di consumo' | localize: lc}}</th>\r\n }\r\n @if (table.Dimension == Dim.WaitEvent) {\r\n <th>{{'Tipo evento' | localize: lc}}</th>\r\n <th>{{'Classe di attesa' | localize: lc}}</th>\r\n }\r\n </ng-template>\r\n <ng-template #body let-item>\r\n <td>\r\n @if (isClickable(item)) {\r\n <span class=\"app-link\" [title]=\"item.Key\" (click)=\"openItem(item)\">{{itemLabel(item, table)}}</span>\r\n } @else {\r\n <span>{{itemLabel(item, table)}}</span>\r\n }\r\n </td>\r\n <td class=\"app-nowrap\">\r\n <div style=\"display: flex; align-items: center; gap: 6px;\">\r\n <div style=\"display: flex; width: 90px; height: 10px; background: #eee;\">\r\n @for (part of item.Breakdown; track $index) {\r\n <div [style.width.%]=\"breakdownWidth(item, part)\" [style.background]=\"breakdownColor(part)\"></div>\r\n }\r\n </div>\r\n {{item.Activity | number : '1.2-2' : 'it'}}\r\n </div>\r\n </td>\r\n <td class=\"app-nowrap\">{{item.Percentage | number : '1.1-2' : 'it'}} %</td>\r\n @if (table.Dimension == Dim.UserSession) {\r\n <td>{{item.Session?.UserName}}</td>\r\n <td>{{item.Session?.TenantId}}</td>\r\n <td>{{item.Session?.SessionType}}</td>\r\n <td>{{item.Session?.BgProcessName || item.Session?.JobName}}</td>\r\n <td>{{item.Session?.ConsumerGroup}}</td>\r\n }\r\n @if (table.Dimension == Dim.WaitEvent) {\r\n <td>{{item.Event?.EventType}}</td>\r\n <td>{{item.Event?.WaitClass}}</td>\r\n }\r\n </ng-template>\r\n </es-table>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div bsModal #dlgNodeDetails=\"bs-modal\" class=\"modal fade\" role=\"dialog\" aria-hidden=\"true\">\r\n @if (NodeDetails) {\r\n <node-detail [NodeDetails]=\"NodeDetails\" (onClose)=\"dlgNodeDetails.hide()\"></node-detail>\r\n }\r\n</div>\r\n\r\n<div bsModal #dlgSessionDetails=\"bs-modal\" class=\"modal fade\" role=\"dialog\" aria-hidden=\"true\">\r\n @if (SessionDetails) {\r\n <session-detail [SessionDetails]=\"SessionDetails\" (onClose)=\"dlgSessionDetails.hide()\" (onNodeSelected)=\"loadNodeDetails($event)\"></session-detail>\r\n }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8$1.ModalDirective, selector: "[bsModal]", inputs: ["config", "closeInterceptor"], outputs: ["onShow", "onShown", "onHide", "onHidden"], exportAs: ["bs-modal"] }, { kind: "component", type: i8.EsTableComponent, selector: "es-table", inputs: ["globalCheck", "autoUpdate", "seconds", "researchInProgress", "globalColVisCheck", "EsThTdProvider", "CornerMenuOptions", "ColumnsResizable", "ColumnsPinnable", "AutoUpdate", "Height", "EmptySpaceBackgroundColor", "EsTableHandledSearch", "MaxHeight", "ContainerClass", "XLSXExport", "CSVExport", "AllSearch", "HighCellDensity", "Selection", "ShowLoadingOnBootstrap", "Removal", "RemovalCondition", "Export", "ShiftClick", "CountLabel", "HidePaging", "HidePagingCount", "HidePagingButtons", "ContextMenu", "ExportFileName", "TableClass", "ExportFunction", "ExportOnlyVisibleColumns", "HasHeaderGroup", "HasSecondaryHeaderGroup", "HeaderHidden", "BodyHidden", "SelectionDisabled", "SingleSelection", "RowClassAssigner", "OrderByColumn", "MultipleOrderingDirectives", "HiddenColumns", "ColumnsOrdering", "SearchView", "SelectAll", "UseArrayModePaging", "DynamicRowColumnsDefinition", "DynamicOperations", "Hierarchy", "ParentKey", "OwnKey", "AutoSortHierarchy", "StartsExpanded", "SavePreferences", "DefaultAlignment", "PagingStyle", "RowGroupingPagingStyle", "ItemSourceProperty", "UseSelectionCache", "ShowItemGroupsColumns", "Editable", "RangeSelection", "SearchThrottle", "ArraymodeItemsPerPage"], outputs: ["globalCheckChange", "autoUpdateChange", "secondsChange", "researchInProgressChange", "globalColVisCheckChange", "onOrderChanged", "onSearchRequest", "onSelectionChanged", "onRemoval", "onAbortRemoval", "onModelChange", "onOpenContextMenu", "onCornerAction", "onDynamicOperation"] }, { kind: "component", type: i9.EsFormSelectComponent, selector: "form-select", inputs: ["OptionsTemplate"] }, { kind: "component", type: i9.EsFormDateTimeComponent, selector: "form-datetime" }, { kind: "component", type: i9.EsFormCheckboxComponent, selector: "form-checkbox", inputs: ["SliderMode"] }, { kind: "component", type: i2.EsLineChartComponent, selector: "es-line-chart", inputs: ["Data", "DataArray", "Step", "DataGroupBucketSize", "DataGroupingThreshold", "StrokeSize", "AllowGaps", "MergeDatasets", "FinalInstants", "Min", "Max", "Fill", "Stacked"] }, { kind: "directive", type: i10.Widget, selector: "[widget]" }, { kind: "component", type: SessionDetailComponent, selector: "session-detail", inputs: ["SessionDetails"], outputs: ["onClose", "onNodeSelected"] }, { kind: "component", type: NodeDetailComponent, selector: "node-detail", inputs: ["NodeDetails"], outputs: ["onClose"] }, { kind: "pipe", type: i5.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.LocalizePipe, name: "localize" }] }); }
|
|
1734
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.34", type: AdmTopActivityV2Component, isStandalone: false, selector: "topact_v2", providers: [{ provide: LocalizationService, useClass: AdmTopActivityV2Loc }], viewQueries: [{ propertyName: "dlgNodeDetails", first: true, predicate: ["dlgNodeDetails"], descendants: true }, { propertyName: "dlgSessionDetails", first: true, predicate: ["dlgSessionDetails"], descendants: true }], ngImport: i0, template: "<div class=\"row\">\r\n <div class=\"col-12\">\r\n <div class=\"card app-overflow-visible\" widget>\r\n <div class=\"card-header\">\r\n <span class=\"text-uppercase\">\r\n {{'Attivit\u00E0 Principali' | localize: lc}}\r\n @if (DirInfos) {\r\n <span> - \r\n {{'' + DirInfos.cpus + ' ' + ('CPU' | localize: lc) + (DirInfos.rssplan ? ' - ' + DirInfos.rssplan : '')}} \r\n Load average: {{ DirInfos.lavg1 | number : '1.1-2' : 'it'}} {{ DirInfos.lavg5 | number : '1.1-2' : 'it'}} {{ DirInfos.lavg15 | number : '1.1-2' : 'it'}}\r\n </span>\r\n }\r\n </span>\r\n </div>\r\n <div class=\"card-body widget-body\">\r\n <form role=\"form\">\r\n <!-- Finestra e origine dei dati -->\r\n <div class=\"tav2-toolbar\">\r\n <div class=\"tav2-field\">\r\n <form-datetime [readonly]=\"refreshSeconds != '0'\" [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"filterfrom\" name=\"filterfrom\" [Placeholder]=\"'Da' | localize: lc\"></form-datetime>\r\n </div>\r\n <div class=\"tav2-field\">\r\n <form-datetime [readonly]=\"refreshSeconds != '0'\" [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"filterto\" name=\"filterto\" [Placeholder]=\"'A' | localize: lc\"></form-datetime>\r\n </div>\r\n <div class=\"tav2-field tav2-field-wide\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"instance\" name=\"instance\" [Source]=\"Instances\" [Placeholder]=\"'Istanza' | localize: lc\" (inputChange)=\"search()\"></form-select>\r\n </div>\r\n <div class=\"tav2-field\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"dataSource\" name=\"dataSource\" [Source]=\"DataSources\" [Placeholder]=\"'Origine dati' | localize: lc\" (inputChange)=\"search()\"></form-select>\r\n </div>\r\n <div class=\"tav2-spacer\"></div>\r\n <div class=\"tav2-field tav2-field-narrow\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"refreshSeconds\" name=\"refreshSeconds\" [Source]=\"RefreshOptions\" [Placeholder]=\"'Aggiornamento' | localize: lc\" (inputChange)=\"refreshChanged()\"></form-select>\r\n </div>\r\n <button [disabled]=\"loading || refreshSeconds != '0'\" class=\"btn app-btn-search\" (click)=\"searchClicked()\" type=\"submit\" [title]=\"'Cerca' | localize: lc\">\r\n <i class=\"fa\" [class.fa-search]=\"!loading\" [class.fa-spinner]=\"loading\" [class.fa-spin]=\"loading\"></i>\r\n </button>\r\n </div>\r\n\r\n <!-- Come dividere e cosa disegnare -->\r\n <div class=\"tav2-toolbar\">\r\n <div class=\"tav2-field tav2-field-wide\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"dimension\" name=\"dimension\" [Source]=\"Dimensions\" [Placeholder]=\"'Dividi per' | localize: lc\" (inputChange)=\"search()\"></form-select>\r\n </div>\r\n <div class=\"tav2-field tav2-field-narrow\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"resolution\" name=\"resolution\" [Source]=\"Resolutions\" [Placeholder]=\"'Risoluzione' | localize: lc\" (inputChange)=\"search()\"></form-select>\r\n </div>\r\n <div class=\"tav2-toggle\">\r\n <form-checkbox [FormLayout]=\"false\" [SliderMode]=\"true\" [Validation]=\"false\" [(ngModel)]=\"totalActivity\" name=\"totalActivity\" (inputChange)=\"search()\"></form-checkbox>\r\n <span>{{'Attivit\u00E0 totale' | localize: lc}}</span>\r\n </div>\r\n <div class=\"tav2-toggle\">\r\n <form-checkbox [FormLayout]=\"false\" [SliderMode]=\"true\" [Validation]=\"false\" [(ngModel)]=\"maxCpu\" name=\"maxCpu\" (inputChange)=\"search()\"></form-checkbox>\r\n <span>{{'Limite' | localize: lc}}</span>\r\n </div>\r\n @if (maxCpu) {\r\n <div class=\"tav2-field tav2-field-narrow\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"maxThreadsKind\" name=\"maxThreadsKind\" [Source]=\"ThreadKinds\" (inputChange)=\"search()\"></form-select>\r\n </div>\r\n }\r\n </div>\r\n </form>\r\n\r\n <!-- Grafico -->\r\n <div class=\"tav2-panel\">\r\n <div class=\"tav2-panel-header\">\r\n <span class=\"tav2-title\">{{'Sessioni attive medie per' | localize: lc}} {{dimensionLabel(result?.dimension ?? +dimension) | lowercase}}</span>\r\n @if (result) {\r\n <span class=\"tav2-muted\">\r\n {{'Media' | localize: lc}} <strong>{{result.averageActiveSessions | number : '1.2-3' : 'it'}}</strong>\r\n · {{'Picco' | localize: lc}} <strong>{{result.peakActiveSessions | number : '1.2-3' : 'it'}}</strong>\r\n · {{'un punto ogni' | localize: lc}} {{result.bucketSeconds}} s\r\n </span>\r\n }\r\n @if (loading) {\r\n <span class=\"tav2-muted\"><i class=\"fa fa-spinner fa-spin\"></i></span>\r\n }\r\n </div>\r\n\r\n @if (filters.length > 0) {\r\n <div class=\"tav2-chips\">\r\n <span class=\"tav2-muted\">{{'Filtri' | localize: lc}}</span>\r\n @for (chip of filters; track $index) {\r\n <span class=\"tav2-chip\">\r\n {{chip.label}}\r\n <button type=\"button\" [title]=\"'Rimuovi' | localize: lc\" (click)=\"removeFilter($index)\">×</button>\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"tav2-chart\">\r\n @if (chartData) {\r\n <es-line-chart [MinGridDistance]=\"65\"\r\n [Timeline]=\"false\"\r\n [FinalInstants]=\"false\"\r\n [Stacked]=\"true\"\r\n [Step]=\"true\"\r\n [Fill]=\"true\"\r\n [MergeDatasets]=\"true\"\r\n [Data]=\"chartData\"\r\n [Max]=\"chartMax\"\r\n [Legend]=\"false\"\r\n name=\"topactv2\"\r\n [DataGroupingThreshold]=\"99999999\"\r\n (chartLoaded)=\"onChartLoaded($event)\"></es-line-chart>\r\n } @else {\r\n <div class=\"tav2-empty\">{{(loading ? 'Carico i Dati' : 'Nessun dato nella finestra') | localize: lc}}</div>\r\n }\r\n </div>\r\n\r\n <!-- Legenda: un clic su una voce la aggiunge ai filtri (\"altri\" non \u00E8 filtrabile) -->\r\n @if (legend.length > 0) {\r\n <div class=\"tav2-legend\">\r\n @for (item of legend; track $index) {\r\n <span class=\"tav2-legend-item\" [class.tav2-clickable]=\"!item.other\" [title]=\"item.other ? '' : ('Clic per filtrare' | localize: lc)\" (click)=\"addFilter(item)\">\r\n <span class=\"tav2-swatch\" [style.background]=\"item.color\"></span>\r\n {{item.label}}\r\n <span class=\"tav2-muted\">{{item.percentage | number : '1.0-1' : 'it'}}%</span>\r\n </span>\r\n }\r\n @if (result?.totalActivity) {\r\n <span class=\"tav2-legend-item\">\r\n <span class=\"tav2-line\" [style.border-color]=\"TotalColor\"></span>\r\n {{'Attivit\u00E0 totale' | localize: lc}}\r\n </span>\r\n }\r\n @if (result?.maximumThreads != null) {\r\n <span class=\"tav2-legend-item\">\r\n <span class=\"tav2-line\" [style.border-color]=\"LimitColor\"></span>\r\n {{limitLabel}} <strong>{{result.maximumThreads}}</strong>\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n @if (memoryFrom) {\r\n <div class=\"tav2-note\">\r\n <i class=\"fa fa-info-circle\"></i>\r\n {{'Prima di questo istante i dati vengono dallo storico (un campione ogni 10 secondi)' | localize: lc}}: {{memoryFrom}}\r\n </div>\r\n }\r\n\r\n <!-- Time slider: finestra di 5 minuti per le tabelle -->\r\n @if (sliderMax > sliderMin) {\r\n <div class=\"tav2-slider\">\r\n <span class=\"tav2-slider-label\">\r\n <span class=\"tav2-muted\">{{'Finestra tabelle' | localize: lc}}</span>\r\n <strong>{{tablesWindowLabel}}</strong>\r\n </span>\r\n <input type=\"range\" [min]=\"sliderMin\" [max]=\"sliderMax\" [step]=\"sliderStep\" [ngModel]=\"sliderValue\" (ngModelChange)=\"sliderValue = $event; sliderMoving()\" (change)=\"sliderChanged()\" />\r\n <span class=\"tav2-badge\" [class.tav2-badge-off]=\"!sliderAnchored\">{{(sliderAnchored ? 'Ultimi 5 minuti' : 'Finestra fissa') | localize: lc}}</span>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Tabelle -->\r\n <div class=\"tav2-tables\">\r\n @for (table of tables; track $index; let i = $index) {\r\n <div class=\"tav2-panel\">\r\n <div class=\"tav2-panel-header\">\r\n <span class=\"tav2-title\">{{'Prime righe per' | localize: lc}}</span>\r\n <div class=\"tav2-field tav2-field-wide\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"tableDims[i]\" name=\"tabledim{{i}}\" [Source]=\"Dimensions\" (inputChange)=\"search()\"></form-select>\r\n </div>\r\n <span class=\"tav2-muted\">{{'Attivit\u00E0' | localize: lc}} <strong>{{table.activity | number : '1.2-3' : 'it'}}</strong></span>\r\n </div>\r\n <es-table [(ngModel)]=\"table.items\" [HidePaging]=\"true\">\r\n <ng-template #header>\r\n <th>{{dimensionLabel(table.dimension)}}</th>\r\n <th class=\"app-col-min\">{{'Attivit\u00E0' | localize: lc}}</th>\r\n <th class=\"app-col-min tav2-right\">%</th>\r\n @if (table.dimension == Dim.UserSession) {\r\n <th>{{'Utente' | localize: lc}}</th>\r\n <th>{{'Tenant' | localize: lc}}</th>\r\n <th>{{'Tipo' | localize: lc}}</th>\r\n <th>{{'Processo' | localize: lc}}</th>\r\n }\r\n @if (table.dimension == Dim.WaitEvent) {\r\n <th class=\"app-col-min app-nowrap\">{{'Tipo evento' | localize: lc}}</th>\r\n <th class=\"app-col-min app-nowrap\">{{'Classe di attesa' | localize: lc}}</th>\r\n }\r\n </ng-template>\r\n <ng-template #body let-item>\r\n <td>\r\n @if (isClickable(item)) {\r\n <span class=\"app-link tav2-ellipsis\" [title]=\"item.label || item.key\" (click)=\"openItem(item)\">{{itemLabel(item, table)}}</span>\r\n } @else {\r\n <span class=\"tav2-ellipsis\" [class.tav2-muted]=\"item.other || !item.label\">{{itemLabel(item, table)}}</span>\r\n }\r\n </td>\r\n <td class=\"app-nowrap\">\r\n <div class=\"tav2-bar-cell\">\r\n <div class=\"tav2-bar\">\r\n @for (part of item.breakdown; track $index) {\r\n <div [style.width.%]=\"breakdownWidth(item, part)\" [style.background]=\"breakdownColor(part)\" [title]=\"part.key\"></div>\r\n }\r\n </div>\r\n <span>{{item.activity | number : '1.2-3' : 'it'}}</span>\r\n </div>\r\n </td>\r\n <td class=\"app-nowrap tav2-right\">{{item.percentage | number : '1.1-1' : 'it'}}</td>\r\n @if (table.dimension == Dim.UserSession) {\r\n <td>{{item.session?.userName}}</td>\r\n <td>{{item.session?.tenantId}}</td>\r\n <td>{{item.session?.sessionType}}</td>\r\n <td><span class=\"tav2-ellipsis\" [title]=\"item.session?.bgProcessName || item.session?.jobName || ''\">{{item.session?.bgProcessName || item.session?.jobName}}</span></td>\r\n }\r\n @if (table.dimension == Dim.WaitEvent) {\r\n <td>{{item.event?.eventType}}</td>\r\n <td>{{item.event?.waitClass}}</td>\r\n }\r\n </ng-template>\r\n </es-table>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div bsModal #dlgNodeDetails=\"bs-modal\" class=\"modal fade\" role=\"dialog\" aria-hidden=\"true\">\r\n @if (NodeDetails) {\r\n <node-detail [NodeDetails]=\"NodeDetails\" (onClose)=\"dlgNodeDetails.hide()\"></node-detail>\r\n }\r\n</div>\r\n\r\n<div bsModal #dlgSessionDetails=\"bs-modal\" class=\"modal fade\" role=\"dialog\" aria-hidden=\"true\">\r\n @if (SessionDetails) {\r\n <session-detail [SessionDetails]=\"SessionDetails\" (onClose)=\"dlgSessionDetails.hide()\" (onNodeSelected)=\"loadNodeDetails($event)\"></session-detail>\r\n }\r\n</div>\r\n", styles: [":host{display:block}.tav2-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}.tav2-toolbar+.tav2-toolbar{margin-top:8px}.tav2-field{width:175px}.tav2-field-wide{width:220px}.tav2-field-narrow{width:150px}.tav2-spacer{flex:1 1 auto}.tav2-toggle{display:flex;align-items:center;gap:8px;height:38px;padding:0 6px;white-space:nowrap}.tav2-panel{margin-top:14px;padding:10px 12px 12px;border:1px solid var(--p-content-border-color, #e2e8f0);border-radius:var(--p-form-field-border-radius, 6px);background:#fff;min-width:0}.tav2-panel-header{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-height:32px;margin-bottom:6px}.tav2-title{font-size:12px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:#344154}.tav2-muted{color:var(--p-text-muted-color, #64748b);font-size:12px}.tav2-right{text-align:right}.tav2-ellipsis{display:inline-block;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.tav2-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px}.tav2-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 10px;border-radius:12px;background:#eef2ff;color:#3730a3;font-size:12px}.tav2-chip button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:15px;line-height:1;padding:0 4px}.tav2-chart{position:relative;height:300px}.tav2-empty{display:flex;align-items:center;justify-content:center;height:100%;border:1px dashed var(--p-content-border-color, #e2e8f0);border-radius:var(--p-form-field-border-radius, 6px);color:var(--p-text-muted-color, #64748b)}.tav2-legend{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:6px}.tav2-legend-item{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border:1px solid transparent;border-radius:4px;font-size:12px;white-space:nowrap}.tav2-legend-item.tav2-clickable{cursor:pointer}.tav2-legend-item.tav2-clickable:hover{border-color:var(--p-content-border-color, #e2e8f0);background:#f8fafc}.tav2-swatch{flex:none;width:10px;height:10px;border-radius:2px}.tav2-line{flex:none;width:16px;height:0;border-top:2px solid}.tav2-note{margin-top:6px;color:var(--p-text-muted-color, #64748b);font-size:12px}.tav2-slider{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:10px;padding-top:10px;border-top:1px solid var(--p-content-border-color, #e2e8f0)}.tav2-slider input[type=range]{flex:1 1 260px;min-width:200px;accent-color:var(--p-primary-color, #6366f1);cursor:pointer}.tav2-slider-label{display:inline-flex;flex-direction:column;line-height:1.2;font-size:12px}.tav2-badge{padding:2px 8px;border-radius:10px;background:#eef2ff;color:#3730a3;font-size:11px;white-space:nowrap}.tav2-badge.tav2-badge-off{background:#f1f5f9;color:var(--p-text-muted-color, #64748b)}.tav2-tables{display:grid;grid-template-columns:repeat(auto-fit,minmax(460px,1fr));gap:0 14px}.tav2-bar-cell{display:flex;align-items:center;gap:8px}.tav2-bar{display:flex;flex:none;width:90px;height:8px;border-radius:2px;overflow:hidden;background:#edf2f7}\n"], dependencies: [{ kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8$1.ModalDirective, selector: "[bsModal]", inputs: ["config", "closeInterceptor"], outputs: ["onShow", "onShown", "onHide", "onHidden"], exportAs: ["bs-modal"] }, { kind: "component", type: i8.EsTableComponent, selector: "es-table", inputs: ["globalCheck", "autoUpdate", "seconds", "researchInProgress", "globalColVisCheck", "EsThTdProvider", "CornerMenuOptions", "ColumnsResizable", "ColumnsPinnable", "AutoUpdate", "Height", "EmptySpaceBackgroundColor", "EsTableHandledSearch", "MaxHeight", "ContainerClass", "XLSXExport", "CSVExport", "AllSearch", "HighCellDensity", "Selection", "ShowLoadingOnBootstrap", "Removal", "RemovalCondition", "Export", "ShiftClick", "CountLabel", "HidePaging", "HidePagingCount", "HidePagingButtons", "ContextMenu", "ExportFileName", "TableClass", "ExportFunction", "ExportOnlyVisibleColumns", "HasHeaderGroup", "HasSecondaryHeaderGroup", "HeaderHidden", "BodyHidden", "SelectionDisabled", "SingleSelection", "RowClassAssigner", "OrderByColumn", "MultipleOrderingDirectives", "HiddenColumns", "ColumnsOrdering", "SearchView", "SelectAll", "UseArrayModePaging", "DynamicRowColumnsDefinition", "DynamicOperations", "Hierarchy", "ParentKey", "OwnKey", "AutoSortHierarchy", "StartsExpanded", "SavePreferences", "DefaultAlignment", "PagingStyle", "RowGroupingPagingStyle", "ItemSourceProperty", "UseSelectionCache", "ShowItemGroupsColumns", "Editable", "RangeSelection", "SearchThrottle", "ArraymodeItemsPerPage"], outputs: ["globalCheckChange", "autoUpdateChange", "secondsChange", "researchInProgressChange", "globalColVisCheckChange", "onOrderChanged", "onSearchRequest", "onSelectionChanged", "onRemoval", "onAbortRemoval", "onModelChange", "onOpenContextMenu", "onCornerAction", "onDynamicOperation"] }, { kind: "component", type: i9.EsFormSelectComponent, selector: "form-select", inputs: ["OptionsTemplate"] }, { kind: "component", type: i9.EsFormDateTimeComponent, selector: "form-datetime" }, { kind: "component", type: i9.EsFormCheckboxComponent, selector: "form-checkbox", inputs: ["SliderMode"] }, { kind: "component", type: i2.EsLineChartComponent, selector: "es-line-chart", inputs: ["Data", "DataArray", "Step", "DataGroupBucketSize", "DataGroupingThreshold", "StrokeSize", "AllowGaps", "MergeDatasets", "FinalInstants", "Min", "Max", "Fill", "Stacked"] }, { kind: "directive", type: i10.Widget, selector: "[widget]" }, { kind: "component", type: SessionDetailComponent, selector: "session-detail", inputs: ["SessionDetails"], outputs: ["onClose", "onNodeSelected"] }, { kind: "component", type: NodeDetailComponent, selector: "node-detail", inputs: ["NodeDetails"], outputs: ["onClose"] }, { kind: "pipe", type: i5.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i5.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.LocalizePipe, name: "localize" }] }); }
|
|
1720
1735
|
}
|
|
1721
1736
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: AdmTopActivityV2Component, decorators: [{
|
|
1722
1737
|
type: Component,
|
|
1723
|
-
args: [{ selector: "topact_v2", providers: [{ provide: LocalizationService, useClass: AdmTopActivityV2Loc }], standalone: false, template: "<div class=\"row\">\r\n <div class=\"col-12\">\r\n <div class=\"card app-overflow-visible\" widget>\r\n <div class=\"card-header\">\r\n <span class=\"text-uppercase\">\r\n {{'Attivit\u00E0 Principali' | localize: lc}}\r\n @if (DirInfos) {\r\n <span> - \r\n {{'' + DirInfos.cpus + ' ' + ('CPU' | localize: lc) + (DirInfos.rssplan ? ' - ' + DirInfos.rssplan : '')}} \r\n Load average: {{ DirInfos.lavg1 | number : '1.1-2' : 'it'}} {{ DirInfos.lavg5 | number : '1.1-2' : 'it'}} {{ DirInfos.lavg15 | number : '1.1-2' : 'it'}}\r\n </span>\r\n }\r\n </span>\r\n </div>\r\n <div class=\"card-body widget-body\">\r\n <form role=\"form\">\r\n <div class=\"row app-first-filter-line\">\r\n <div class=\"col-xl-2 col-lg-2 col-md-6 app-filter-wrapper\">\r\n <form-datetime [readonly]=\"refreshSeconds != '0'\" [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"filterfrom\" name=\"filterfrom\" [Placeholder]=\"'Da' | localize: lc\"></form-datetime>\r\n </div>\r\n <div class=\"col-xl-2 col-lg-2 col-md-6 app-filter-wrapper\">\r\n <form-datetime [readonly]=\"refreshSeconds != '0'\" [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"filterto\" name=\"filterto\" [Placeholder]=\"'A' | localize: lc\"></form-datetime>\r\n </div>\r\n <div class=\"col-xl-2 col-lg-2 col-md-6 app-filter-wrapper\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"instance\" name=\"instance\" [Source]=\"Instances\" [Placeholder]=\"'Istanza' | localize: lc\" (inputChange)=\"search()\"></form-select>\r\n </div>\r\n <div class=\"col-xl-2 col-lg-2 col-md-6 app-filter-wrapper\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"dataSource\" name=\"dataSource\" [Source]=\"DataSources\" [Placeholder]=\"'Origine dati' | localize: lc\" (inputChange)=\"search()\"></form-select>\r\n </div>\r\n <div class=\"col-xl-1 col-lg-1 col-md-2\">\r\n <button [disabled]=\"loading || refreshSeconds != '0'\" class=\"input-group-addon btn app-btn-search app-margin-top-20\" (click)=\"searchClicked()\" type=\"submit\"><i class=\"fa\" [class.fa-search]=\"!loading\" [class.fa-spinner]=\"loading\" [class.fa-spin]=\"loading\"></i></button>\r\n </div>\r\n <div class=\"col-xl-2 col-lg-2 col-md-4 app-filter-wrapper\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"refreshSeconds\" name=\"refreshSeconds\" [Source]=\"RefreshOptions\" [Placeholder]=\"'Aggiornamento automatico' | localize: lc\" (inputChange)=\"refreshChanged()\"></form-select>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-xl-2 col-lg-2 col-md-6 app-filter-wrapper\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"dimension\" name=\"dimension\" [Source]=\"Dimensions\" [Placeholder]=\"'Dimensione' | localize: lc\" (inputChange)=\"search()\"></form-select>\r\n </div>\r\n <div class=\"col-xl-2 col-lg-2 col-md-6 app-filter-wrapper\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"resolution\" name=\"resolution\" [Source]=\"Resolutions\" [Placeholder]=\"'Risoluzione' | localize: lc\" (inputChange)=\"search()\"></form-select>\r\n </div>\r\n <div class=\"col-xl-2 col-lg-2 col-md-6 app-filter-wrapper\" style=\"display: flex; height: 38px;\">\r\n <form-checkbox [FormLayout]=\"false\" [SliderMode]=\"true\" [Validation]=\"false\" [(ngModel)]=\"totalActivity\" name=\"totalActivity\" (inputChange)=\"search()\"></form-checkbox> \r\n <span class=\"app-padding-top-5 app-padding-left-5\">{{'Attivit\u00E0 totale' | localize: lc}}</span>\r\n </div>\r\n <div class=\"col-xl-2 col-lg-2 col-md-6 app-filter-wrapper\" style=\"display: flex; height: 38px;\">\r\n <form-checkbox [FormLayout]=\"false\" [SliderMode]=\"true\" [Validation]=\"false\" [(ngModel)]=\"maxCpu\" name=\"maxCpu\" (inputChange)=\"search()\"></form-checkbox> \r\n <span class=\"app-padding-top-5 app-padding-left-5\">{{'Limite' | localize: lc}}</span>\r\n </div>\r\n <div class=\"col-xl-2 col-lg-2 col-md-6 app-filter-wrapper\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [disabled]=\"!maxCpu\" [(ngModel)]=\"maxThreadsKind\" name=\"maxThreadsKind\" [Source]=\"ThreadKinds\" (inputChange)=\"search()\"></form-select>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n @if (filters.length > 0) {\r\n <div class=\"app-margin-top-5\">\r\n <strong>{{'Filtri' | localize: lc}}:</strong> \r\n @for (chip of filters; track $index) {\r\n <span style=\"display: inline-block; border: 1px solid #bbb; border-radius: 12px; padding: 1px 8px; margin: 0 5px 3px 0;\">\r\n {{chip.label}} <a class=\"app-pointer\" [title]=\"'Rimuovi' | localize: lc\" (click)=\"removeFilter($index)\">×</a>\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n @if (memoryFrom) {\r\n <div class=\"app-margin-top-5\"><small><em>{{'Prima di questo istante i dati vengono dallo storico (un campione ogni 10 secondi)' | localize: lc}}: {{memoryFrom}}</em></small></div>\r\n }\r\n\r\n <div class=\"row\">\r\n <div class=\"col-md-12 app-margin-top-5\">\r\n <div style=\"width: 100%; height: 300px\">\r\n @if (chartData) {\r\n <es-line-chart [MinGridDistance]=\"65\"\r\n [Timeline]=\"false\"\r\n [FinalInstants]=\"false\"\r\n [Stacked]=\"true\"\r\n [Step]=\"true\"\r\n [Fill]=\"true\"\r\n [MergeDatasets]=\"true\"\r\n [Data]=\"chartData\"\r\n [Max]=\"chartMax\"\r\n [Legend]=\"false\"\r\n [YTitle]=\"'Sessioni attive medie' | localize: lc\"\r\n name=\"topactv2\"\r\n [DataGroupingThreshold]=\"99999999\"\r\n (chartLoaded)=\"onChartLoaded($event)\"></es-line-chart>\r\n } @else {\r\n <p><em>{{(loading ? 'Carico i Dati' : 'Nessun dato nella finestra') | localize: lc}}</em></p>\r\n }\r\n </div>\r\n\r\n <!-- Legenda: un clic su una voce la aggiunge ai filtri (\"altri\" non \u00E8 filtrabile) -->\r\n <div class=\"app-margin-top-5\">\r\n @for (item of legend; track $index) {\r\n <span [class.app-pointer]=\"!item.other\" [title]=\"item.other ? '' : ('Filtra' | localize: lc)\" (click)=\"addFilter(item)\" style=\"display: inline-block; margin: 0 12px 3px 0; white-space: nowrap;\">\r\n <span [style.background]=\"item.color\" style=\"display: inline-block; width: 10px; height: 10px; margin-right: 4px;\"></span>{{item.label}} <small>{{item.percentage | number : '1.0-1' : 'it'}}%</small>\r\n </span>\r\n }\r\n @if (result?.TotalActivity) {\r\n <span style=\"display: inline-block; margin: 0 12px 3px 0; white-space: nowrap;\">\r\n <span style=\"display: inline-block; width: 14px; height: 2px; background: #212121; margin: 0 4px 3px 0;\"></span>{{'Attivit\u00E0 totale' | localize: lc}}\r\n </span>\r\n }\r\n </div>\r\n\r\n @if (sliderMax > sliderMin) {\r\n <div style=\"display: flex; align-items: center; gap: 10px;\" class=\"app-margin-top-5\">\r\n <span class=\"app-nowrap\"><strong>{{'Tabelle' | localize: lc}}</strong>: {{tablesWindowLabel}}</span>\r\n <input type=\"range\" style=\"flex-grow: 1;\" [min]=\"sliderMin\" [max]=\"sliderMax\" [step]=\"sliderStep\" [ngModel]=\"sliderValue\" (ngModelChange)=\"sliderValue = $event; sliderMoving()\" (change)=\"sliderChanged()\" />\r\n @if (sliderAnchored) {\r\n <small class=\"app-nowrap\"><em>{{'agganciato alla fine' | localize: lc}}</em></small>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"row app-margin-top-5\">\r\n @for (table of tables; track $index; let i = $index) {\r\n <div class=\"col-md-6\">\r\n <div style=\"display: flex; align-items: center; gap: 8px;\">\r\n <div style=\"width: 220px;\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"tableDims[i]\" name=\"tabledim{{i}}\" [Source]=\"Dimensions\" (inputChange)=\"search()\"></form-select>\r\n </div>\r\n <small>{{'Attivit\u00E0' | localize: lc}}: {{table.Activity | number : '1.1-3' : 'it'}}</small>\r\n </div>\r\n <es-table [(ngModel)]=\"table.Items\" [HidePaging]=\"true\">\r\n <ng-template #header>\r\n <th>{{dimensionLabel(table.Dimension)}}</th>\r\n <th class=\"app-col-min\">{{'Attivit\u00E0' | localize: lc}}</th>\r\n <th class=\"app-col-min\">%</th>\r\n @if (table.Dimension == Dim.UserSession) {\r\n <th>{{'Utente' | localize: lc}}</th>\r\n <th>{{'Tenant' | localize: lc}}</th>\r\n <th>{{'Tipo' | localize: lc}}</th>\r\n <th>{{'Processo' | localize: lc}}</th>\r\n <th>{{'Gruppo di consumo' | localize: lc}}</th>\r\n }\r\n @if (table.Dimension == Dim.WaitEvent) {\r\n <th>{{'Tipo evento' | localize: lc}}</th>\r\n <th>{{'Classe di attesa' | localize: lc}}</th>\r\n }\r\n </ng-template>\r\n <ng-template #body let-item>\r\n <td>\r\n @if (isClickable(item)) {\r\n <span class=\"app-link\" [title]=\"item.Key\" (click)=\"openItem(item)\">{{itemLabel(item, table)}}</span>\r\n } @else {\r\n <span>{{itemLabel(item, table)}}</span>\r\n }\r\n </td>\r\n <td class=\"app-nowrap\">\r\n <div style=\"display: flex; align-items: center; gap: 6px;\">\r\n <div style=\"display: flex; width: 90px; height: 10px; background: #eee;\">\r\n @for (part of item.Breakdown; track $index) {\r\n <div [style.width.%]=\"breakdownWidth(item, part)\" [style.background]=\"breakdownColor(part)\"></div>\r\n }\r\n </div>\r\n {{item.Activity | number : '1.2-2' : 'it'}}\r\n </div>\r\n </td>\r\n <td class=\"app-nowrap\">{{item.Percentage | number : '1.1-2' : 'it'}} %</td>\r\n @if (table.Dimension == Dim.UserSession) {\r\n <td>{{item.Session?.UserName}}</td>\r\n <td>{{item.Session?.TenantId}}</td>\r\n <td>{{item.Session?.SessionType}}</td>\r\n <td>{{item.Session?.BgProcessName || item.Session?.JobName}}</td>\r\n <td>{{item.Session?.ConsumerGroup}}</td>\r\n }\r\n @if (table.Dimension == Dim.WaitEvent) {\r\n <td>{{item.Event?.EventType}}</td>\r\n <td>{{item.Event?.WaitClass}}</td>\r\n }\r\n </ng-template>\r\n </es-table>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div bsModal #dlgNodeDetails=\"bs-modal\" class=\"modal fade\" role=\"dialog\" aria-hidden=\"true\">\r\n @if (NodeDetails) {\r\n <node-detail [NodeDetails]=\"NodeDetails\" (onClose)=\"dlgNodeDetails.hide()\"></node-detail>\r\n }\r\n</div>\r\n\r\n<div bsModal #dlgSessionDetails=\"bs-modal\" class=\"modal fade\" role=\"dialog\" aria-hidden=\"true\">\r\n @if (SessionDetails) {\r\n <session-detail [SessionDetails]=\"SessionDetails\" (onClose)=\"dlgSessionDetails.hide()\" (onNodeSelected)=\"loadNodeDetails($event)\"></session-detail>\r\n }\r\n</div>\r\n" }]
|
|
1738
|
+
args: [{ selector: "topact_v2", providers: [{ provide: LocalizationService, useClass: AdmTopActivityV2Loc }], standalone: false, template: "<div class=\"row\">\r\n <div class=\"col-12\">\r\n <div class=\"card app-overflow-visible\" widget>\r\n <div class=\"card-header\">\r\n <span class=\"text-uppercase\">\r\n {{'Attivit\u00E0 Principali' | localize: lc}}\r\n @if (DirInfos) {\r\n <span> - \r\n {{'' + DirInfos.cpus + ' ' + ('CPU' | localize: lc) + (DirInfos.rssplan ? ' - ' + DirInfos.rssplan : '')}} \r\n Load average: {{ DirInfos.lavg1 | number : '1.1-2' : 'it'}} {{ DirInfos.lavg5 | number : '1.1-2' : 'it'}} {{ DirInfos.lavg15 | number : '1.1-2' : 'it'}}\r\n </span>\r\n }\r\n </span>\r\n </div>\r\n <div class=\"card-body widget-body\">\r\n <form role=\"form\">\r\n <!-- Finestra e origine dei dati -->\r\n <div class=\"tav2-toolbar\">\r\n <div class=\"tav2-field\">\r\n <form-datetime [readonly]=\"refreshSeconds != '0'\" [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"filterfrom\" name=\"filterfrom\" [Placeholder]=\"'Da' | localize: lc\"></form-datetime>\r\n </div>\r\n <div class=\"tav2-field\">\r\n <form-datetime [readonly]=\"refreshSeconds != '0'\" [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"filterto\" name=\"filterto\" [Placeholder]=\"'A' | localize: lc\"></form-datetime>\r\n </div>\r\n <div class=\"tav2-field tav2-field-wide\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"instance\" name=\"instance\" [Source]=\"Instances\" [Placeholder]=\"'Istanza' | localize: lc\" (inputChange)=\"search()\"></form-select>\r\n </div>\r\n <div class=\"tav2-field\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"dataSource\" name=\"dataSource\" [Source]=\"DataSources\" [Placeholder]=\"'Origine dati' | localize: lc\" (inputChange)=\"search()\"></form-select>\r\n </div>\r\n <div class=\"tav2-spacer\"></div>\r\n <div class=\"tav2-field tav2-field-narrow\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"refreshSeconds\" name=\"refreshSeconds\" [Source]=\"RefreshOptions\" [Placeholder]=\"'Aggiornamento' | localize: lc\" (inputChange)=\"refreshChanged()\"></form-select>\r\n </div>\r\n <button [disabled]=\"loading || refreshSeconds != '0'\" class=\"btn app-btn-search\" (click)=\"searchClicked()\" type=\"submit\" [title]=\"'Cerca' | localize: lc\">\r\n <i class=\"fa\" [class.fa-search]=\"!loading\" [class.fa-spinner]=\"loading\" [class.fa-spin]=\"loading\"></i>\r\n </button>\r\n </div>\r\n\r\n <!-- Come dividere e cosa disegnare -->\r\n <div class=\"tav2-toolbar\">\r\n <div class=\"tav2-field tav2-field-wide\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"dimension\" name=\"dimension\" [Source]=\"Dimensions\" [Placeholder]=\"'Dividi per' | localize: lc\" (inputChange)=\"search()\"></form-select>\r\n </div>\r\n <div class=\"tav2-field tav2-field-narrow\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"resolution\" name=\"resolution\" [Source]=\"Resolutions\" [Placeholder]=\"'Risoluzione' | localize: lc\" (inputChange)=\"search()\"></form-select>\r\n </div>\r\n <div class=\"tav2-toggle\">\r\n <form-checkbox [FormLayout]=\"false\" [SliderMode]=\"true\" [Validation]=\"false\" [(ngModel)]=\"totalActivity\" name=\"totalActivity\" (inputChange)=\"search()\"></form-checkbox>\r\n <span>{{'Attivit\u00E0 totale' | localize: lc}}</span>\r\n </div>\r\n <div class=\"tav2-toggle\">\r\n <form-checkbox [FormLayout]=\"false\" [SliderMode]=\"true\" [Validation]=\"false\" [(ngModel)]=\"maxCpu\" name=\"maxCpu\" (inputChange)=\"search()\"></form-checkbox>\r\n <span>{{'Limite' | localize: lc}}</span>\r\n </div>\r\n @if (maxCpu) {\r\n <div class=\"tav2-field tav2-field-narrow\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"maxThreadsKind\" name=\"maxThreadsKind\" [Source]=\"ThreadKinds\" (inputChange)=\"search()\"></form-select>\r\n </div>\r\n }\r\n </div>\r\n </form>\r\n\r\n <!-- Grafico -->\r\n <div class=\"tav2-panel\">\r\n <div class=\"tav2-panel-header\">\r\n <span class=\"tav2-title\">{{'Sessioni attive medie per' | localize: lc}} {{dimensionLabel(result?.dimension ?? +dimension) | lowercase}}</span>\r\n @if (result) {\r\n <span class=\"tav2-muted\">\r\n {{'Media' | localize: lc}} <strong>{{result.averageActiveSessions | number : '1.2-3' : 'it'}}</strong>\r\n · {{'Picco' | localize: lc}} <strong>{{result.peakActiveSessions | number : '1.2-3' : 'it'}}</strong>\r\n · {{'un punto ogni' | localize: lc}} {{result.bucketSeconds}} s\r\n </span>\r\n }\r\n @if (loading) {\r\n <span class=\"tav2-muted\"><i class=\"fa fa-spinner fa-spin\"></i></span>\r\n }\r\n </div>\r\n\r\n @if (filters.length > 0) {\r\n <div class=\"tav2-chips\">\r\n <span class=\"tav2-muted\">{{'Filtri' | localize: lc}}</span>\r\n @for (chip of filters; track $index) {\r\n <span class=\"tav2-chip\">\r\n {{chip.label}}\r\n <button type=\"button\" [title]=\"'Rimuovi' | localize: lc\" (click)=\"removeFilter($index)\">×</button>\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"tav2-chart\">\r\n @if (chartData) {\r\n <es-line-chart [MinGridDistance]=\"65\"\r\n [Timeline]=\"false\"\r\n [FinalInstants]=\"false\"\r\n [Stacked]=\"true\"\r\n [Step]=\"true\"\r\n [Fill]=\"true\"\r\n [MergeDatasets]=\"true\"\r\n [Data]=\"chartData\"\r\n [Max]=\"chartMax\"\r\n [Legend]=\"false\"\r\n name=\"topactv2\"\r\n [DataGroupingThreshold]=\"99999999\"\r\n (chartLoaded)=\"onChartLoaded($event)\"></es-line-chart>\r\n } @else {\r\n <div class=\"tav2-empty\">{{(loading ? 'Carico i Dati' : 'Nessun dato nella finestra') | localize: lc}}</div>\r\n }\r\n </div>\r\n\r\n <!-- Legenda: un clic su una voce la aggiunge ai filtri (\"altri\" non \u00E8 filtrabile) -->\r\n @if (legend.length > 0) {\r\n <div class=\"tav2-legend\">\r\n @for (item of legend; track $index) {\r\n <span class=\"tav2-legend-item\" [class.tav2-clickable]=\"!item.other\" [title]=\"item.other ? '' : ('Clic per filtrare' | localize: lc)\" (click)=\"addFilter(item)\">\r\n <span class=\"tav2-swatch\" [style.background]=\"item.color\"></span>\r\n {{item.label}}\r\n <span class=\"tav2-muted\">{{item.percentage | number : '1.0-1' : 'it'}}%</span>\r\n </span>\r\n }\r\n @if (result?.totalActivity) {\r\n <span class=\"tav2-legend-item\">\r\n <span class=\"tav2-line\" [style.border-color]=\"TotalColor\"></span>\r\n {{'Attivit\u00E0 totale' | localize: lc}}\r\n </span>\r\n }\r\n @if (result?.maximumThreads != null) {\r\n <span class=\"tav2-legend-item\">\r\n <span class=\"tav2-line\" [style.border-color]=\"LimitColor\"></span>\r\n {{limitLabel}} <strong>{{result.maximumThreads}}</strong>\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n @if (memoryFrom) {\r\n <div class=\"tav2-note\">\r\n <i class=\"fa fa-info-circle\"></i>\r\n {{'Prima di questo istante i dati vengono dallo storico (un campione ogni 10 secondi)' | localize: lc}}: {{memoryFrom}}\r\n </div>\r\n }\r\n\r\n <!-- Time slider: finestra di 5 minuti per le tabelle -->\r\n @if (sliderMax > sliderMin) {\r\n <div class=\"tav2-slider\">\r\n <span class=\"tav2-slider-label\">\r\n <span class=\"tav2-muted\">{{'Finestra tabelle' | localize: lc}}</span>\r\n <strong>{{tablesWindowLabel}}</strong>\r\n </span>\r\n <input type=\"range\" [min]=\"sliderMin\" [max]=\"sliderMax\" [step]=\"sliderStep\" [ngModel]=\"sliderValue\" (ngModelChange)=\"sliderValue = $event; sliderMoving()\" (change)=\"sliderChanged()\" />\r\n <span class=\"tav2-badge\" [class.tav2-badge-off]=\"!sliderAnchored\">{{(sliderAnchored ? 'Ultimi 5 minuti' : 'Finestra fissa') | localize: lc}}</span>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Tabelle -->\r\n <div class=\"tav2-tables\">\r\n @for (table of tables; track $index; let i = $index) {\r\n <div class=\"tav2-panel\">\r\n <div class=\"tav2-panel-header\">\r\n <span class=\"tav2-title\">{{'Prime righe per' | localize: lc}}</span>\r\n <div class=\"tav2-field tav2-field-wide\">\r\n <form-select [FormLayout]=\"false\" [Validation]=\"false\" [(ngModel)]=\"tableDims[i]\" name=\"tabledim{{i}}\" [Source]=\"Dimensions\" (inputChange)=\"search()\"></form-select>\r\n </div>\r\n <span class=\"tav2-muted\">{{'Attivit\u00E0' | localize: lc}} <strong>{{table.activity | number : '1.2-3' : 'it'}}</strong></span>\r\n </div>\r\n <es-table [(ngModel)]=\"table.items\" [HidePaging]=\"true\">\r\n <ng-template #header>\r\n <th>{{dimensionLabel(table.dimension)}}</th>\r\n <th class=\"app-col-min\">{{'Attivit\u00E0' | localize: lc}}</th>\r\n <th class=\"app-col-min tav2-right\">%</th>\r\n @if (table.dimension == Dim.UserSession) {\r\n <th>{{'Utente' | localize: lc}}</th>\r\n <th>{{'Tenant' | localize: lc}}</th>\r\n <th>{{'Tipo' | localize: lc}}</th>\r\n <th>{{'Processo' | localize: lc}}</th>\r\n }\r\n @if (table.dimension == Dim.WaitEvent) {\r\n <th class=\"app-col-min app-nowrap\">{{'Tipo evento' | localize: lc}}</th>\r\n <th class=\"app-col-min app-nowrap\">{{'Classe di attesa' | localize: lc}}</th>\r\n }\r\n </ng-template>\r\n <ng-template #body let-item>\r\n <td>\r\n @if (isClickable(item)) {\r\n <span class=\"app-link tav2-ellipsis\" [title]=\"item.label || item.key\" (click)=\"openItem(item)\">{{itemLabel(item, table)}}</span>\r\n } @else {\r\n <span class=\"tav2-ellipsis\" [class.tav2-muted]=\"item.other || !item.label\">{{itemLabel(item, table)}}</span>\r\n }\r\n </td>\r\n <td class=\"app-nowrap\">\r\n <div class=\"tav2-bar-cell\">\r\n <div class=\"tav2-bar\">\r\n @for (part of item.breakdown; track $index) {\r\n <div [style.width.%]=\"breakdownWidth(item, part)\" [style.background]=\"breakdownColor(part)\" [title]=\"part.key\"></div>\r\n }\r\n </div>\r\n <span>{{item.activity | number : '1.2-3' : 'it'}}</span>\r\n </div>\r\n </td>\r\n <td class=\"app-nowrap tav2-right\">{{item.percentage | number : '1.1-1' : 'it'}}</td>\r\n @if (table.dimension == Dim.UserSession) {\r\n <td>{{item.session?.userName}}</td>\r\n <td>{{item.session?.tenantId}}</td>\r\n <td>{{item.session?.sessionType}}</td>\r\n <td><span class=\"tav2-ellipsis\" [title]=\"item.session?.bgProcessName || item.session?.jobName || ''\">{{item.session?.bgProcessName || item.session?.jobName}}</span></td>\r\n }\r\n @if (table.dimension == Dim.WaitEvent) {\r\n <td>{{item.event?.eventType}}</td>\r\n <td>{{item.event?.waitClass}}</td>\r\n }\r\n </ng-template>\r\n </es-table>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div bsModal #dlgNodeDetails=\"bs-modal\" class=\"modal fade\" role=\"dialog\" aria-hidden=\"true\">\r\n @if (NodeDetails) {\r\n <node-detail [NodeDetails]=\"NodeDetails\" (onClose)=\"dlgNodeDetails.hide()\"></node-detail>\r\n }\r\n</div>\r\n\r\n<div bsModal #dlgSessionDetails=\"bs-modal\" class=\"modal fade\" role=\"dialog\" aria-hidden=\"true\">\r\n @if (SessionDetails) {\r\n <session-detail [SessionDetails]=\"SessionDetails\" (onClose)=\"dlgSessionDetails.hide()\" (onNodeSelected)=\"loadNodeDetails($event)\"></session-detail>\r\n }\r\n</div>\r\n", styles: [":host{display:block}.tav2-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}.tav2-toolbar+.tav2-toolbar{margin-top:8px}.tav2-field{width:175px}.tav2-field-wide{width:220px}.tav2-field-narrow{width:150px}.tav2-spacer{flex:1 1 auto}.tav2-toggle{display:flex;align-items:center;gap:8px;height:38px;padding:0 6px;white-space:nowrap}.tav2-panel{margin-top:14px;padding:10px 12px 12px;border:1px solid var(--p-content-border-color, #e2e8f0);border-radius:var(--p-form-field-border-radius, 6px);background:#fff;min-width:0}.tav2-panel-header{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-height:32px;margin-bottom:6px}.tav2-title{font-size:12px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:#344154}.tav2-muted{color:var(--p-text-muted-color, #64748b);font-size:12px}.tav2-right{text-align:right}.tav2-ellipsis{display:inline-block;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.tav2-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px}.tav2-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 10px;border-radius:12px;background:#eef2ff;color:#3730a3;font-size:12px}.tav2-chip button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:15px;line-height:1;padding:0 4px}.tav2-chart{position:relative;height:300px}.tav2-empty{display:flex;align-items:center;justify-content:center;height:100%;border:1px dashed var(--p-content-border-color, #e2e8f0);border-radius:var(--p-form-field-border-radius, 6px);color:var(--p-text-muted-color, #64748b)}.tav2-legend{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:6px}.tav2-legend-item{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border:1px solid transparent;border-radius:4px;font-size:12px;white-space:nowrap}.tav2-legend-item.tav2-clickable{cursor:pointer}.tav2-legend-item.tav2-clickable:hover{border-color:var(--p-content-border-color, #e2e8f0);background:#f8fafc}.tav2-swatch{flex:none;width:10px;height:10px;border-radius:2px}.tav2-line{flex:none;width:16px;height:0;border-top:2px solid}.tav2-note{margin-top:6px;color:var(--p-text-muted-color, #64748b);font-size:12px}.tav2-slider{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:10px;padding-top:10px;border-top:1px solid var(--p-content-border-color, #e2e8f0)}.tav2-slider input[type=range]{flex:1 1 260px;min-width:200px;accent-color:var(--p-primary-color, #6366f1);cursor:pointer}.tav2-slider-label{display:inline-flex;flex-direction:column;line-height:1.2;font-size:12px}.tav2-badge{padding:2px 8px;border-radius:10px;background:#eef2ff;color:#3730a3;font-size:11px;white-space:nowrap}.tav2-badge.tav2-badge-off{background:#f1f5f9;color:var(--p-text-muted-color, #64748b)}.tav2-tables{display:grid;grid-template-columns:repeat(auto-fit,minmax(460px,1fr));gap:0 14px}.tav2-bar-cell{display:flex;align-items:center;gap:8px}.tav2-bar{display:flex;flex:none;width:90px;height:8px;border-radius:2px;overflow:hidden;background:#edf2f7}\n"] }]
|
|
1724
1739
|
}], ctorParameters: () => [{ type: i1$1.DateService }, { type: i1.LocalizationService }, { type: i3.PreferencesService }, { type: i1$1.InterComService }, { type: i4.ActivatedRoute }, { type: AdminModuleBaseService }, { type: i0.NgZone }], propDecorators: { dlgNodeDetails: [{
|
|
1725
1740
|
type: ViewChild,
|
|
1726
1741
|
args: ["dlgNodeDetails"]
|