cds-caching 1.2.0 → 1.3.0

package/app/dashboard/controller/SingleMetric.controller.ts

@@ -0,0 +1,335 @@
+import BaseController from "./BaseController";
+import JSONModel from "sap/ui/model/json/JSONModel";
+import ODataModel from "sap/ui/model/odata/v4/ODataModel";
+import { Route$PatternMatchedEvent } from "sap/ui/core/routing/Route";
+import MessageBox from "sap/m/MessageBox";
+
+/**
+ * @namespace cds.plugin.caching.dashboard.controller
+ */
+export default class SingleMetric extends BaseController {
+    private uiModel: JSONModel;
+
+    public onInit(): void {
+        super.onInit();
+
+        // Create a JSON model for UI data binding
+        this.uiModel = new JSONModel({
+            metricId: "",
+            // Performance metrics
+            hitRatio: 0,
+            cacheEfficiency: 0,
+            throughput: 0,
+            errorRate: 0,
+            // Latency metrics
+            avgLatency: 0,
+            avgHitLatency: 0,
+            avgMissLatency: 0,
+            // Operation counts
+            hits: 0,
+            misses: 0,
+            sets: 0,
+            deletes: 0,
+            errors: 0,
+            // Native function metrics
+            nativeSets: 0,
+            nativeGets: 0,
+            nativeDeletes: 0,
+            nativeClears: 0,
+            nativeDeleteByTags: 0,
+            nativeErrors: 0,
+            totalNativeOperations: 0,
+            nativeThroughput: 0,
+            nativeErrorRate: 0,
+            // System information
+            memoryUsage: 0,
+            itemCount: 0,
+            uniqueKeys: 0,
+            uptimeMs: 0,
+            // Chart data
+            latencyData: [],
+            cacheThroughData: [],
+            nativeData: []
+        });
+        this.getView().setModel(this.uiModel, "ui");
+
+        this.getRouter().getRoute("singleMetric").attachPatternMatched(this.onRouteMatched, this);
+    }
+
+    public onRouteMatched(event: Route$PatternMatchedEvent): void {
+        const { cache, metricId } = event.getParameter("arguments") as { cache: string; metricId: string };
+
+        this.uiModel.setProperty("/metricId", metricId);
+
+        // Set layout to three columns
+        (<JSONModel>this.getModel("app")).setProperty("/layout", "ThreeColumnsEndExpanded");
+
+        // Load the specific metric
+        this.loadMetric(cache, metricId);
+
+        this.formatChart();
+    }
+
+    /**
+     * Load specific metric data
+     */
+    private async loadMetric(cacheName: string, metricId: string): Promise<void> {
+        try {
+            const model = this.getModel() as ODataModel;
+
+            // Try to get the metric from the Metrics entity
+            const context = model.bindContext(`/Metrics(ID='${metricId}',cache='${cacheName}')`);
+            const metric = await context.requestObject();
+
+            if (metric) {
+                // Set all the metric values
+                this.uiModel.setProperty("/hitRatio", metric.hitRatio || 0);
+                this.uiModel.setProperty("/cacheEfficiency", metric.cacheEfficiency || 0);
+                this.uiModel.setProperty("/throughput", metric.throughput || 0);
+                this.uiModel.setProperty("/errorRate", metric.errorRate || 0);
+
+                // Latency metrics
+                this.uiModel.setProperty("/avgLatency", metric.avgLatency || 0);
+                this.uiModel.setProperty("/avgHitLatency", metric.avgHitLatency || 0);
+                this.uiModel.setProperty("/avgMissLatency", metric.avgMissLatency || 0);
+
+                // Operation counts
+                this.uiModel.setProperty("/hits", metric.hits || 0);
+                this.uiModel.setProperty("/misses", metric.misses || 0);
+                this.uiModel.setProperty("/sets", metric.sets || 0);
+                this.uiModel.setProperty("/deletes", metric.deletes || 0);
+                this.uiModel.setProperty("/errors", metric.errors || 0);
+
+                // Native function metrics
+                this.uiModel.setProperty("/nativeSets", metric.nativeSets || 0);
+                this.uiModel.setProperty("/nativeGets", metric.nativeGets || 0);
+                this.uiModel.setProperty("/nativeDeletes", metric.nativeDeletes || 0);
+                this.uiModel.setProperty("/nativeClears", metric.nativeClears || 0);
+                this.uiModel.setProperty("/nativeDeleteByTags", metric.nativeDeleteByTags || 0);
+                this.uiModel.setProperty("/nativeErrors", metric.nativeErrors || 0);
+                this.uiModel.setProperty("/totalNativeOperations", metric.totalNativeOperations || 0);
+                this.uiModel.setProperty("/nativeThroughput", metric.nativeThroughput || 0);
+                this.uiModel.setProperty("/nativeErrorRate", metric.nativeErrorRate || 0);
+
+                // System information
+                this.uiModel.setProperty("/memoryUsage", metric.memoryUsage || 0);
+                this.uiModel.setProperty("/itemCount", metric.itemCount || 0);
+                this.uiModel.setProperty("/uptimeMs", metric.uptimeMs || 0);
+
+                // Calculate unique keys (this might need to come from a different source)
+                this.uiModel.setProperty("/uniqueKeys", 0); // TODO: Get from key metrics data
+
+                // Generate chart data
+                this.generateLatencyChartData(metric);
+                this.generateCacheThroughChartData(metric);
+                this.generateNativeChartData(metric);
+
+            } else {
+                MessageBox.error("Metric not found");
+            }
+
+        } catch (error) {
+            console.error("Error loading metric:", error);
+            MessageBox.error("Failed to load metric details");
+        }
+    }
+
+    /**
+     * Generate latency data for the chart
+     */
+    private generateLatencyChartData(metric: any): void {
+        const latencyData = [
+            {
+                operation: "Average Hit Latency",
+                latency: metric.avgHitLatency || 0
+            },
+            {
+                operation: "Average Miss Latency",
+                latency: metric.avgMissLatency || 0
+            },
+            {
+                operation: "Average Read-Through Latency",
+                latency: metric.avgReadThroughLatency || 0
+            }
+        ];
+
+        this.uiModel.setProperty("/latencyData", latencyData);
+    }
+
+    /**
+     * Generate Read-Through operations data for pie chart
+     */
+    private generateCacheThroughChartData(metric: any): void {
+        const cacheThroughData = [
+            {
+                operation: "Hits",
+                count: metric.hits || 0
+            },
+            {
+                operation: "Misses",
+                count: metric.misses || 0
+            },
+            {
+                operation: "Errors",
+                count: metric.errors || 0
+            }
+        ];
+
+        this.uiModel.setProperty("/cacheThroughData", cacheThroughData);
+    }
+
+    /**
+     * Generate Native Function operations data for pie chart
+     */
+    private generateNativeChartData(metric: any): void {
+        const nativeData = [
+            {
+                operation: "Sets",
+                count: metric.nativeSets || 0
+            },
+            {
+                operation: "Gets",
+                count: metric.nativeGets || 0
+            },
+            {
+                operation: "Deletes",
+                count: metric.nativeDeletes || 0
+            },
+            {
+                operation: "Clears",
+                count: metric.nativeClears || 0
+            },
+            {
+                operation: "Delete By Tags",
+                count: metric.nativeDeleteByTags || 0
+            },
+            {
+                operation: "Errors",
+                count: metric.nativeErrors || 0
+            }
+        ];
+
+        this.uiModel.setProperty("/nativeData", nativeData);
+    }
+
+    public formatChart() {
+        // Format latency chart (bar chart)
+        const latencyChart = this.getView().byId("metricLatencyChart") as any;
+        if (latencyChart) {
+            latencyChart.setVizProperties({
+                legend: {
+                    visible: false
+                },
+                plotArea: {
+                    dataLabel: {
+                        visible: true,
+                        formatString: "#,## ms"
+                    },
+                    gridline: {
+                        visible: false
+                    }
+                },
+                valueAxis: {
+                    axisLine: {
+                        visible: false
+                    },
+                    axisTick: {
+                        visible: false
+                    },
+                    label: {
+                        visible: false
+                    },
+                    title: {
+                        visible: false
+                    }
+                },
+                categoryAxis: {
+                    title: {
+                        visible: false
+                    }
+                },
+                title: {
+                    visible: false,
+                    text: 'Latency by Operation'
+                }
+            });
+        }
+
+        // Format Read-Through pie chart
+        const cacheThroughChart = this.getView().byId("metricCacheThroughChart") as any;
+        if (cacheThroughChart) {
+            cacheThroughChart.setVizProperties({
+                legend: {
+                    visible: true
+                },
+                plotArea: {
+                    dataLabel: {
+                        visible: true
+                    }
+                },
+                title: {
+                    visible: false
+                }
+            });
+        }
+
+        // Format Native Function pie chart
+        const nativeChart = this.getView().byId("metricNativeChart") as any;
+        if (nativeChart) {
+            nativeChart.setVizProperties({
+                legend: {
+                    visible: true
+                },
+                plotArea: {
+                    dataLabel: {
+                        visible: true
+                    }
+                },
+                title: {
+                    visible: false
+                }
+            });
+        }
+    }
+
+    /**
+     * Handle refresh button press
+     */
+    public onRefresh(): void {
+        const cacheName = this.getModel("app").getProperty("/selectedCache");
+        const metricId = this.uiModel.getProperty("/metricId");
+
+        if (cacheName && metricId) {
+            this.loadMetric(cacheName, metricId);
+        }
+    }
+
+    /**
+     * Handle full screen mode
+     */
+    public handleFullScreen(): void {
+        (<JSONModel>this.getModel("app")).setProperty("/layout", "EndColumnFullScreen");
+    }
+
+    /**
+     * Handle exit full screen mode
+     */
+    public handleExitFullScreen(): void {
+        (<JSONModel>this.getModel("app")).setProperty("/layout", "ThreeColumnsEndExpanded");
+    }
+
+    /**
+     * Handle close end column
+     */
+    public handleClose(): void {
+        (<JSONModel>this.getModel("app")).setProperty("/layout", "TwoColumnsMidExpanded");
+        this.getRouter().navTo("cache", { cache: this.getModel("app").getProperty("/selectedCache") });
+    }
+
+    /**
+     * Handle grid columns change
+     */
+    public onColumnsChange(): void {
+        // Handle responsive grid column changes if needed
+    }
+} 

package/app/dashboard/i18n/i18n.properties

@@ -0,0 +1,61 @@
+appTitle=Cache Performance Dashboard
+appDescription=Comprehensive cache statistics and monitoring dashboard
+btnText=Say Hello
+
+# Main Dashboard
+mainTitle=Cache Performance Dashboard
+refreshButton=Refresh
+persistButton=Persist Statistics
+
+# Navigation
+keyAnalysis=Key Analysis
+
+# Metrics
+hitRatio=Hit Ratio
+avgLatency=Average Latency
+throughput=Throughput
+errorRate=Error Rate
+totalRequests=Total Requests
+memoryUsage=Memory Usage
+uniqueKeys=Unique Keys
+uptime=Uptime
+
+# Keys
+keysTitle=Key Analysis
+keysSubtitle=Cache Key Access Patterns
+topKeys=Top Accessed Keys
+coldKeys=Cold Keys
+keyStatistics=Key Statistics
+totalKeysTracked=Total Keys Tracked
+mostActiveKey=Most Active Key
+leastActiveKey=Least Active Key
+
+# Common
+loading=Loading...
+noData=No data available
+error=Error
+success=Success
+warning=Warning
+
+# Statistics Page
+statisticsTitle=Statistics
+statisticsSubtitle=Historical cache statistics
+statisticsFilters=Filters
+statisticsFiltersSubtitle=Select date range and period
+statisticsSummary=Summary
+statisticsSummarySubtitle=Statistics overview
+statisticsData=Statistics Data
+statisticsDataSubtitle=Detailed statistics records
+statisticsTrends=Trends
+statisticsTrendsSubtitle=Performance trends over time
+statisticsPeriod=Period
+statisticsFrom=From
+statisticsTo=To
+statisticsLoad=Load
+statisticsRefresh=Refresh
+statisticsExport=Export CSV
+statisticsTotalRecords=Total Records
+statisticsAvgHitRatio=Average Hit Ratio
+statisticsAvgLatency=Average Latency
+statisticsTotalRequests=Total Requests
+statisticsNoData=No statistics found for the selected criteria

package/app/dashboard/i18n/i18n_de.properties

@@ -0,0 +1,3 @@
+appTitle=cds.plugin.caching.dashboard
+appDescription=UI5 Application cds.plugin.caching.dashboard
+btnText=Sag Hallo

package/app/dashboard/i18n/i18n_en.properties

@@ -0,0 +1,3 @@
+appTitle=cds.plugin.caching.dashboard
+appDescription=UI5 Application cds.plugin.caching.dashboard
+btnText=Say Hello

package/app/dashboard/index-cdn.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+	<head>
+		<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate" />
+		<meta http-equiv="Pragma" content="no-cache" />
+		<meta http-equiv="expires" content="0" />
+
+		<meta charset="utf-8" />
+
+		<title>UI5 Application: cds.plugin.caching.dashboard</title>
+
+		<script
+			id="sap-ui-bootstrap"
+			src="https://ui5.sap.com/resources/sap-ui-core.js"
+			data-sap-ui-resource-roots='{
+				"cds.plugin.caching.dashboard": "./"
+			}'
+			data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"
+			data-sap-ui-compat-version="edge"
+			data-sap-ui-frame-options="trusted"
+			data-sap-ui-async="true"
+		></script>
+	</head>
+
+	<body class="sapUiBody">
+		<div data-sap-ui-component data-name="cds.plugin.caching.dashboard"></div>
+	</body>
+</html>

package/app/dashboard/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html><html><head>
+		<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
+		<meta http-equiv="Pragma" content="no-cache">
+		<meta http-equiv="expires" content="0">
+
+		<meta charset="utf-8">
+
+		<title>UI5 Application: cds.plugin.caching.dashboard</title>
+
+		<script id="sap-ui-bootstrap" src="resources/sap-ui-custom.js" data-sap-ui-resource-roots="{
+				&quot;cds.plugin.caching.dashboard&quot;: &quot;./&quot;
+			}" data-sap-ui-on-init="module:sap/ui/core/ComponentSupport" data-sap-ui-compat-version="edge" data-sap-ui-frame-options="trusted" data-sap-ui-async="true"></script>
+	</head>
+
+	<body class="sapUiBody">
+		<div data-sap-ui-component="" data-name="cds.plugin.caching.dashboard"></div>
+	
+
+</body></html>

package/app/dashboard/manifest.json

@@ -0,0 +1,145 @@
+{
+	"_version": "1.12.0",
+	"sap.app": {
+		"id": "cds.plugin.caching.dashboard",
+		"type": "application",
+		"i18n": "i18n/i18n.properties",
+		"title": "{{appTitle}}",
+		"description": "{{appDescription}}",
+		"applicationVersion": {
+			"version": "1.0.0"
+		},
+		"sourceTemplate": {
+			"id": "generator-ui5-ts-app",
+			"version": "1.1.0"
+		},
+		"dataSources": {
+			"caching": {
+				"uri": "/odata/v4/caching/",
+				"type": "OData",
+				"settings": {
+					"odataVersion": "4.0"
+				}
+			}
+		}
+	},
+	"sap.ui": {
+		"technology": "UI5",
+		"icons": {},
+		"deviceTypes": {
+			"desktop": true,
+			"tablet": true,
+			"phone": true
+		}
+	},
+	"sap.ui5": {
+		"rootView": {
+			"viewName": "cds.plugin.caching.dashboard.view.App",
+			"type": "XML",
+			"id": "app"
+		},
+		"dependencies": {
+			"minUI5Version": "1.136.1",
+			"libs": {
+				"sap.ui.core": {},
+				"sap.m": {},
+				"sap.ui.layout": {},
+				"sap.viz": {},
+				"sap.ui.table": {},
+				"sap.ui.unified": {},
+				"sap.f": {},
+				"sap.tnt": {}
+			}
+		},
+		"handleValidation": true,
+		"contentDensities": {
+			"compact": true,
+			"cozy": true
+		},
+		"models": {
+			"i18n": {
+				"type": "sap.ui.model.resource.ResourceModel",
+				"settings": {
+					"bundleName": "cds.plugin.caching.dashboard.i18n.i18n",
+					"supportedLocales": [
+						"en",
+						"de"
+					],
+					"fallbackLocale": "en",
+					"async": true
+				}
+			},
+			"formatter": {
+				"type": "sap.ui.model.json.JSONModel",
+				"settings": {}
+			},
+			"": {
+				"type": "sap.ui.model.odata.v4.ODataModel",
+				"settings": {
+					"serviceUrl": "/odata/v4/caching-api/",
+					"operationMode": "Server",
+					"autoExpandSelect": true,
+					"groupId": "$auto"
+				}
+			}
+		},
+		"routing": {
+			"config": {
+				"routerClass": "sap.f.routing.Router",
+				"viewType": "XML",
+				"viewPath": "cds.plugin.caching.dashboard.view",
+				"controlId": "fcl",
+				"controlAggregation": "pages"
+			},
+			"routes": [
+				{
+					"pattern": "",
+					"name": "main",
+					"target": "main",
+					"subroutes": [
+						{
+							"pattern": "cache/{cache}",
+							"name": "cache",
+							"target": "cache",
+							"subroutes": [
+								{
+									"pattern": "cache/{cache}/statistic/{metricId}",
+									"name": "singleMetric",
+									"target": "singleMetric"
+								},
+								{
+									"pattern": "cache/{cache}/key-metric/{keyMetricId}",
+									"name": "singleKeyMetric",
+									"target": "singleKeyMetric"
+								}
+							]
+						}
+					]
+				}
+			],
+			"targets": {
+				"main": {
+					"viewName": "Main",
+					"viewLevel": 1,
+					"controlAggregation": "beginColumnPages"
+				},
+				"cache": {
+					"viewName": "Cache",
+					"viewLevel": 2,
+					"controlAggregation": "midColumnPages"
+				},
+				"singleMetric": {
+					"viewName": "SingleMetric",
+					"viewLevel": 3,
+					"controlAggregation": "endColumnPages"
+				},
+				"singleKeyMetric": {
+					"viewName": "SingleKeyMetric",
+					"viewLevel": 3,
+					"controlAggregation": "endColumnPages"
+				}
+			}
+		},
+		"flexBundle": false
+	}
+}