You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@isis.apache.org by jo...@apache.org on 2022/03/13 17:17:44 UTC
[isis] 01/03: ISIS-2957 clicking bubble opens EventLogDetail
This is an automated email from the ASF dual-hosted git repository.
joergrade pushed a commit to branch ISIS-2957
in repository https://gitbox.apache.org/repos/asf/isis.git
commit 0e192b03df325e6a52062d2758284e86355a2271
Author: Jörg Rade <jo...@kuehne-nagel.com>
AuthorDate: Sat Mar 5 19:28:01 2022 +0100
ISIS-2957 clicking bubble opens EventLogDetail
---
incubator/clients/kroviz/build.gradle.kts | 2 +-
.../kroviz/gradle/wrapper/gradle-wrapper.jar | Bin 55190 -> 59536 bytes
.../gradle/wrapper/gradle-wrapper.properties | 2 +-
incubator/clients/kroviz/gradlew.bat | 25 ++---
.../client/kroviz/ui/panel/EventBubbleChart.kt | 119 +++++++++++++--------
.../isis/client/kroviz/ui/panel/EventChart.kt | 81 --------------
6 files changed, 84 insertions(+), 145 deletions(-)
diff --git a/incubator/clients/kroviz/build.gradle.kts b/incubator/clients/kroviz/build.gradle.kts
index e163691..e1c41c9 100644
--- a/incubator/clients/kroviz/build.gradle.kts
+++ b/incubator/clients/kroviz/build.gradle.kts
@@ -64,6 +64,7 @@ kotlin {
}
webpackTask {
outputFileName = "main.bundle.js"
+ output.libraryTarget = "plain"
}
testTask {
useKarma {
@@ -100,7 +101,6 @@ kotlin {
implementation("io.kvision:kvision-rest:$kvisionVersion")
implementation("io.kvision:kvision-moment:$kvisionVersion")
implementation("io.kvision:kvision-maps:$kvisionVersion")
- implementation(npm("chartjs-plugin-datalabels", "2.0.0", false))
implementation(npm("xmltojson", "1.3.5", false))
implementation(npm("flatted", "3.2.2", false))
implementation(npm("diff", "5.0.0", false))
diff --git a/incubator/clients/kroviz/gradle/wrapper/gradle-wrapper.jar b/incubator/clients/kroviz/gradle/wrapper/gradle-wrapper.jar
index 87b738c..7454180 100644
Binary files a/incubator/clients/kroviz/gradle/wrapper/gradle-wrapper.jar and b/incubator/clients/kroviz/gradle/wrapper/gradle-wrapper.jar differ
diff --git a/incubator/clients/kroviz/gradle/wrapper/gradle-wrapper.properties b/incubator/clients/kroviz/gradle/wrapper/gradle-wrapper.properties
index be52383..69a9715 100644
--- a/incubator/clients/kroviz/gradle/wrapper/gradle-wrapper.properties
+++ b/incubator/clients/kroviz/gradle/wrapper/gradle-wrapper.properties
@@ -1,5 +1,5 @@
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.1-bin.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
diff --git a/incubator/clients/kroviz/gradlew.bat b/incubator/clients/kroviz/gradlew.bat
index 9618d8d..107acd3 100644
--- a/incubator/clients/kroviz/gradlew.bat
+++ b/incubator/clients/kroviz/gradlew.bat
@@ -29,6 +29,9 @@ if "%DIRNAME%" == "" set DIRNAME=.
set APP_BASE_NAME=%~n0
set APP_HOME=%DIRNAME%
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
@@ -37,7 +40,7 @@ if defined JAVA_HOME goto findJavaFromJavaHome
set JAVA_EXE=java.exe
%JAVA_EXE% -version >NUL 2>&1
-if "%ERRORLEVEL%" == "0" goto init
+if "%ERRORLEVEL%" == "0" goto execute
echo.
echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
@@ -51,7 +54,7 @@ goto fail
set JAVA_HOME=%JAVA_HOME:"=%
set JAVA_EXE=%JAVA_HOME%/bin/java.exe
-if exist "%JAVA_EXE%" goto init
+if exist "%JAVA_EXE%" goto execute
echo.
echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
@@ -61,28 +64,14 @@ echo location of your Java installation.
goto fail
-:init
-@rem Get command-line arguments, handling Windows variants
-
-if not "%OS%" == "Windows_NT" goto win9xME_args
-
-:win9xME_args
-@rem Slurp the command line arguments.
-set CMD_LINE_ARGS=
-set _SKIP=2
-
-:win9xME_args_slurp
-if "x%~1" == "x" goto execute
-
-set CMD_LINE_ARGS=%*
-
:execute
@rem Setup the command line
set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
@rem Execute Gradle
-"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
:end
@rem End local scope for the variables with windows NT shell
diff --git a/incubator/clients/kroviz/src/main/kotlin/org/apache/isis/client/kroviz/ui/panel/EventBubbleChart.kt b/incubator/clients/kroviz/src/main/kotlin/org/apache/isis/client/kroviz/ui/panel/EventBubbleChart.kt
index 77f2d75..47805cf 100644
--- a/incubator/clients/kroviz/src/main/kotlin/org/apache/isis/client/kroviz/ui/panel/EventBubbleChart.kt
+++ b/incubator/clients/kroviz/src/main/kotlin/org/apache/isis/client/kroviz/ui/panel/EventBubbleChart.kt
@@ -26,16 +26,32 @@ import io.kvision.core.UNIT
import io.kvision.panel.SimplePanel
import io.kvision.utils.obj
import org.apache.isis.client.kroviz.core.event.LogEntry
+import org.apache.isis.client.kroviz.ui.dialog.EventLogDetail
import org.apache.isis.client.kroviz.ui.core.SessionManager
import kotlin.math.pow
+@OptIn(kotlin.js.ExperimentalJsExport::class)
+@JsExport
+fun openLogEntry(i: Int) {
+ console.log("[EBC.openLogEntry]")
+ console.log(i)
+ val logEntry = SessionManager.getEventStore().log[i]
+ console.log(logEntry)
+ EventLogDetail(logEntry).open()
+}
+
+@OptIn(kotlin.js.ExperimentalJsExport::class)
+@JsExport
+fun foo() = "Hello"
+
class EventBubbleChart() : SimplePanel() {
private val model = SessionManager.getEventStore()
private val logStart = model.getLogStartMilliSeconds()
+ private var chart: Chart
init {
width = CssSize(90, UNIT.vw)
- buildChart()
+ chart = buildChart()
}
private fun buildChart(): Chart {
@@ -57,13 +73,33 @@ class EventBubbleChart() : SimplePanel() {
// https://stackoverflow.com/questions/45249779/chart-js-bubble-chart-changing-dataset-labels
private fun buildChartOptions(dataSetsList: List<DataSets>): ChartOptions {
val chartOptions = ChartOptions(
- plugins = PluginsOptions(tooltip = TooltipOptions(callbacks = toolTipCallback())),
- hover = InteractionOptions(),
+ plugins = PluginsOptions(
+ title = TitleOptions(
+ text = listOf<String>("Request Duration over Time by Request Density and Response Size"),
+ display = true
+ ),
+ tooltip = TooltipOptions(callbacks = toolTipCallback())
+ ),
+ onClick = js(
+ "function(e) {"
+ + "var element = e.chart.getElementsAtEventForMode(e, 'nearest', {intersect: true}, true);"
+ + "if (element.length > 0) {"
+ + "var i = element[0].index;"
+ + "console.log(i);"
+ + "kroviz.org.apache.isis.client.kroviz.ui.panel.openLogEntry(i);"
+ + "alert(kroviz.org.apache.isis.client.kroviz.ui.panel.hello());"
+ + "}"
+ + "}"
+ ),
showLine = true,
scales = mapOf(
- "x" to ChartScales(title = ScaleTitleOptions(text = "Time since Connect (ms)", display = true)),
+ "x" to ChartScales(
+ title = ScaleTitleOptions(
+ text = "Time since Connect(ms)", display = true
+ )
+ ),
"y" to ChartScales(
- title = ScaleTitleOptions(text = "duration (ms)", display = true),
+ title = ScaleTitleOptions(text = "duration in ms (log)", display = true),
type = ScalesType.LOGARITHMIC
)
)
@@ -76,24 +112,30 @@ class EventBubbleChart() : SimplePanel() {
// I would have appreciated a real API.
private fun toolTipCallback(): TooltipCallback {
return TooltipCallback(
- title = js(
- "function(context) {" +
- "var ctx = context[0];" +
- "var chart = ctx.chart;" +
- "var ccc = chart.config._config;" +
- "var data = ccc.data;" +
- "var i = ctx.dataIndex;" +
- "var label = data.labels[i];" +
- "return label;" +
- "}"
+ footer = js(
+ "function(context) {"
+ + "var ctx = context[0];"
+ + "var chart = ctx.chart;"
+ + "var ccc = chart.config._config;"
+ + "var data = ccc.data;"
+ + "var i = ctx.dataIndex;"
+ + "return data.labels[i];"
+ + "}"
)
)
}
+ private fun LogEntry.toLabel(index: Int): String {
+ return this.title +
+ "\nseq.no.: $index" +
+ "\nparallel runs: ${this.runningAtStart}" +
+ "\nrsp.len.: ${this.responseLength}" +
+ "\ntype: ${this.type}"
+ }
+
private fun buildDataSets(): DataSets {
return DataSets(
backgroundColor = buildBgColorList(),
- label = "Prefix", //data is only prefixed with label - not replaced
data = buildData()
)
}
@@ -131,23 +173,15 @@ class EventBubbleChart() : SimplePanel() {
}
private fun LogEntry.calculateBubbleColor(): Color {
- val violet = Color.rgba(0x80, 0x64, 0xA2, 0x80)
- val redViolet = Color.rgba(0xA0, 0x5A, 0x78, 0x80)
- val red = Color.rgba(0xC0, 0x50, 0x4D, 0x80)
- val yellow = Color.rgba(0xF7, 0x96, 0x46, 0x80)
- val green = Color.rgba(0x9B, 0xBB, 0x59, 0x80)
- val lightBlue = Color.rgba(0x4B, 0xAC, 0xC6, 0x80)
- val darkBlue = Color.rgba(0x4F, 0x81, 0xBD, 0x80)
-
val i = runningAtStart
return when {
- (i >= 0) && (i <= 4) -> lightBlue
- (i > 4) && (i <= 8) -> darkBlue
- (i > 8) && (i <= 16) -> green
- (i > 16) && (i <= 32) -> yellow
- (i > 32) && (i <= 64) -> red
- (i > 64) && (i <= 128) -> redViolet
- else -> violet
+ (i >= 0) && (i <= 4) -> EventBubbleChart.LIGHT_BLUE
+ (i > 4) && (i <= 8) -> EventBubbleChart.DARK_BLUE
+ (i > 8) && (i <= 16) -> EventBubbleChart.GREEN
+ (i > 16) && (i <= 32) -> EventBubbleChart.YELLOW
+ (i > 32) && (i <= 64) -> EventBubbleChart.RED
+ (i > 64) && (i <= 128) -> EventBubbleChart.RED_VIOLET
+ else -> EventBubbleChart.VIOLET
}
}
@@ -162,22 +196,9 @@ class EventBubbleChart() : SimplePanel() {
val l = it.toLabel(i)
labelList.add(l)
}
- console.log("[EBC.buildLabels]")
- console.log(labelList)
return labelList
}
- private fun LogEntry.toLabel(index: Int): String {
- val relativeStartTime = ((this.createdAt.getTime() - logStart) / 1000).toString()
- val sec_1 = relativeStartTime.substring(0, relativeStartTime.length - 2)
- return index.toString() + "\n" +
- sec_1 + "\n" +
- this.title + "\n" +
- "start: " + this.createdAt.toISOString() + "\n" +
- "rsp.len: " + this.responseLength + "\n" +
- "parallel runs: " + this.runningAtStart
- }
-
private fun buildLegendLabelOptions(): LegendLabelOptions {
val legend = LegendLabelOptions()
legend.generateLabels?.invoke() {
@@ -190,4 +211,14 @@ class EventBubbleChart() : SimplePanel() {
return mutableListOf<LegendItem>()
}
+ companion object {
+ val VIOLET = Color.rgba(0x80, 0x64, 0xA2, 0x80)
+ val RED_VIOLET = Color.rgba(0xA0, 0x5A, 0x78, 0x80)
+ val RED = Color.rgba(0xC0, 0x50, 0x4D, 0x80)
+ val YELLOW = Color.rgba(0xF7, 0x96, 0x46, 0x80)
+ val GREEN = Color.rgba(0x9B, 0xBB, 0x59, 0x80)
+ val LIGHT_BLUE = Color.rgba(0x4B, 0xAC, 0xC6, 0x80)
+ val DARK_BLUE = Color.rgba(0x4F, 0x81, 0xBD, 0x80)
+ }
+
}
diff --git a/incubator/clients/kroviz/src/main/kotlin/org/apache/isis/client/kroviz/ui/panel/EventChart.kt b/incubator/clients/kroviz/src/main/kotlin/org/apache/isis/client/kroviz/ui/panel/EventChart.kt
deleted file mode 100644
index bb05948..0000000
--- a/incubator/clients/kroviz/src/main/kotlin/org/apache/isis/client/kroviz/ui/panel/EventChart.kt
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-package org.apache.isis.client.kroviz.ui.panel
-
-import io.kvision.chart.*
-import io.kvision.panel.SimplePanel
-import io.kvision.utils.obj
-import io.kvision.utils.px
-import io.kvision.utils.pc
-import org.apache.isis.client.kroviz.ui.chart.ChartModel
-
-//IMPROVE https://github.com/datavisyn/chartjs-chart-box-and-violin-plot
-class EventChart(model: ChartModel) : SimplePanel() {
-
- private val font = "'Open Sans Bold', sans-serif"
-
- private val yAxes = listOf(obj {
- scaleLabel = { ScaleTitleOptions(display = true, labelString = "duration (ms)", fontFamily = font) }
- gridLines = { GridLineOptions(visible = true) }
- ticks = obj {
- fontFamily = font
- fontSize = 11.px
- }
- })
-
- val tickFormatter:String = "function(tick) {return tick.split('\\n')[1]}"
-
- private val xAxes = listOf(obj {
- scaleLabel = { ScaleTitleOptions(display = true, labelString = "start offset (sec)", fontFamily = font) }
- gridLines = { GridLineOptions(visible = true) }
- ticks = obj {
- beginAtZero = false
- fontFamily = font
- fontSize = 11.px
- //WHAT A HACK
-// callback = js(tickFormatter)
- }
- })
-/*
- private val options = ChartOptions(
- tooltips = TooltipOptions(enabled = true),
- hover = HoverOptions(animationDuration = 0),
- legend = LegendOptions(display = true),
- scales = ChartScales(
- yAxes = yAxes,
- xAxes = xAxes),
- showLines = true,
- title = TitleOptions(display = true))
-*/
- init {
- this.marginTop = 10.px
- this.width = 100.pc
- chart(
- configuration = Configuration(
- type = ChartType.BAR,
- dataSets = model.datasetList,
- labels = model.labelList,
-// options = options
- ),
- chartHeight = 1000,
- chartWidth = 3000
- )
- }
-
-}