Convert to the latest versions of Kotlin and all dependencies.

.github/workflows/publish-to-gh-pages.yml

@@ -32,7 +32,7 @@ jobs:
       - name: Upload build reports
         uses: actions/upload-pages-artifact@v1
         with:
-          path: build/distributions/
+          path: build/dist/js/productionExecutable/
   # Deploy job
   deploy:
     # The type of runner that the job will run on

README.md

@@ -6,8 +6,8 @@ JVB dashboard provides a UI to connect to a JVB's REST API and display live grap
 * Run `./gradlew build`
 
 # Deploying
-The built files will be in `/build/distributions`.  These files can be copied anywhere and hosted.  The easiest way to host
-them locally is to run `python3 -m http.server` in the `/build/distributions` directory.
+The built files will be in `/build/dist/js/productionExecutable`.  These files can be copied anywhere and hosted.  The easiest way to host
+them locally is to run `python3 -m http.server` in the `/build/dist/js/productionExecutable` directory.
 
 # Known issues
 * The JVB's REST API is usually not publicly accessible, so the easiest way to have the UI connect to it is to create an

build.gradle.kts

@@ -1,59 +1,56 @@
 plugins {
-    id("org.jetbrains.kotlin.js") version "1.4.10"
+    kotlin("multiplatform") version "2.0.0"
 }
 
 group = "org.jitsi"
 version = "1.0-SNAPSHOT"
 
 repositories {
     mavenCentral()
-    jcenter()
-}
-
-dependencies {
-    implementation(kotlin("stdlib-js"))
-
-    implementation("org.jetbrains:kotlin-react:16.13.1-pre.110-kotlin-1.4.0")
-    implementation("org.jetbrains:kotlin-react-dom:16.13.1-pre.110-kotlin-1.4.0")
-    implementation(npm("react", "16.13.1"))
-    implementation(npm("react-dom", "16.13.1"))
-
-    implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.3.9")
-
-    implementation(npm("highcharts", "8.2.2"))
-    implementation(npm("highcharts-react-official", "3.0.0"))
-
-    implementation("org.jetbrains:kotlin-styled:1.0.0-pre.110-kotlin-1.4.0")
-    implementation(npm("styled-components", "~5.1.1"))
-    implementation(npm("inline-style-prefixer", "~6.0.0"))
-    implementation(npm("react-select", "~3.1.0"))
-    implementation("org.jetbrains:kotlin-react-router-dom:5.2.0-pre.136-kotlin-1.4.10")
 }
 
 kotlin {
-    sourceSets.configureEach {
-        languageSettings.apply {
-            useExperimentalAnnotation("kotlinx.coroutines.ExperimentalCoroutinesApi")
-            useExperimentalAnnotation("kotlin.time.ExperimentalTime")
-        }
-    }
     js {
         browser {
             webpackTask {
-                cssSupport.enabled = true
+                cssSupport {
+                    enabled.set(true)
+                }
             }
 
             runTask {
-                cssSupport.enabled = true
-            }
-
-            testTask {
-                useKarma {
-                    useChromeHeadless()
-                    webpackConfig.cssSupport.enabled = true
+                cssSupport {
+                    enabled.set(true)
                 }
             }
         }
         binaries.executable()
     }
+    sourceSets["jsMain"].languageSettings {
+        apply {
+            optIn("kotlinx.coroutines.ExperimentalCoroutinesApi")
+            optIn("kotlin.time.ExperimentalTime")
+        }
+    }
+
+    sourceSets["jsMain"].dependencies {
+        implementation(kotlin("stdlib-js"))
+
+        implementation("org.jetbrains.kotlin-wrappers:kotlin-react:18.3.1-pre.770")
+        implementation("org.jetbrains.kotlin-wrappers:kotlin-react-legacy:18.3.1-pre.770")
+        implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom-legacy:18.3.1-pre.770")
+
+        implementation(npm("react", "18.3.1"))
+        implementation(npm("react-dom", "18.3.1"))
+
+        implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.8.1")
+
+        implementation(npm("highcharts", "11.4.6"))
+        implementation(npm("highcharts-react-official", "3.2.1"))
+
+        implementation("org.jetbrains.kotlin-wrappers:kotlin-styled-next:1.2.4-pre.770")
+        implementation(npm("inline-style-prefixer", "~7.0.1"))
+        implementation(npm("react-select", "~5.8.0"))
+        implementation("org.jetbrains.kotlin-wrappers:kotlin-react-router-dom:6.23.1-pre.770")
+    }
 }

gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.1.1-bin.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

gradlew

@@ -82,7 +82,6 @@ esac
 
 CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
 
-
 # Determine the Java command to use to start the JVM.
 if [ -n "$JAVA_HOME" ] ; then
     if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
@@ -130,7 +129,6 @@ fi
 if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
     APP_HOME=`cygpath --path --mixed "$APP_HOME"`
     CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
-
     JAVACMD=`cygpath --unix "$JAVACMD"`
 
     # We build the pattern for arguments to be converted via cygpath

gradlew.bat

@@ -84,7 +84,6 @@ set CMD_LINE_ARGS=%*
 
 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%
 

src/jsMain/kotlin/App.kt

@@ -0,0 +1,53 @@
+import js.objects.jso
+import react.FC
+import react.Props
+import react.RBuilder
+import react.RComponent
+import react.PropsWithChildren
+import react.State
+import react.dom.html.ReactHTML.div
+import react.dom.html.ReactHTML.span
+import react.react
+import react.router.RouterProvider
+import react.router.dom.Link
+import react.router.dom.createHashRouter
+
+val root = FC<Props> {
+    div {
+        Link {
+            to = "/dump"
+            +"Dump viewer"
+        }
+        span {
+            +" | "
+        }
+        Link {
+            to = "/live"
+            +"Live dashboard"
+        }
+    }
+}
+
+
+private val hashRouter = createHashRouter(
+    routes = arrayOf(
+        jso {
+            path = "/"
+            Component = root
+        },
+        jso {
+            path = "/dump"
+            Component = Dump::class.react
+        },
+        jso {
+            path = "/live"
+            Component = LiveDashboard::class.react
+        }
+    )
+)
+
+val App = FC<Props> {
+     RouterProvider {
+         router = hashRouter
+     }
+}

src/main/kotlin/ChartSelection.kt → src/jsMain/kotlin/ChartSelection.kt

@@ -3,11 +3,12 @@ import highcharts.Event
 import highcharts.Point
 import react.RBuilder
 import react.RComponent
-import react.RProps
-import react.RState
+import react.PropsWithChildren
+import react.State
+import react.RefCallback
 
 // Defines a selector and the graph itself, and acts as the 'go between' between the two
-class ChartSelection : RComponent<GraphSelectionProps, RState>() {
+class ChartSelection : RComponent<GraphSelectionProps, State>() {
     private var currentlyGraphedKeys = listOf<String>()
     private var selector: Selector? = null
     private var chart: Chart? = null
@@ -52,8 +53,8 @@ class ChartSelection : RComponent<GraphSelectionProps, RState>() {
                 onSelectedKeysChange = this@ChartSelection::selectedKeysChanged
                 allKeys = props.allKeys
             }
-            ref {
-                selector = it as? Selector
+            ref = RefCallback<Selector> {
+                selector = it
             }
         }
         child(Chart::class) {
@@ -63,8 +64,8 @@ class ChartSelection : RComponent<GraphSelectionProps, RState>() {
                 graphType = props.graphType ?: "line"
                 startZoomSeconds = props.startZoomSeconds
             }
-            ref {
-                chart = it as? Chart
+            ref = RefCallback<Chart> {
+                chart = it
             }
         }
     }
@@ -97,7 +98,7 @@ class ChartSelection : RComponent<GraphSelectionProps, RState>() {
 
     // Leaving this here, but since it doesn't propagate these values to props, it's a bit cumbersome to use.
     // See https://github.com/JetBrains/kotlin-wrappers/issues/385
-//    companion object : RStatics<GraphSelectionProps, RState, GraphSelection, Nothing>(GraphSelection::class) {
+//    companion object : RStatics<GraphSelectionProps, State, GraphSelection, Nothing>(GraphSelection::class) {
 //        init {
 //            defaultProps = GraphSelectionProps().apply {
 //                allKeys = emptyList()
@@ -107,7 +108,7 @@ class ChartSelection : RComponent<GraphSelectionProps, RState>() {
 //    }
 }
 
-external interface GraphSelectionProps : RProps {
+external interface GraphSelectionProps : PropsWithChildren {
     var title: String?
     var allKeys: List<String>?
     // An optional property which can contain stored data to be graphed

src/main/kotlin/ChartZoomButtons.kt → src/jsMain/kotlin/ChartZoomButtons.kt

@@ -3,13 +3,14 @@ import kotlinx.css.fontWeight
 import kotlinx.html.js.onClickFunction
 import react.RBuilder
 import react.RComponent
-import react.RProps
-import react.RState
+import react.PropsWithChildren
+import react.State
 import react.setState
 import styled.css
 import styled.styledButton
 import kotlin.time.Duration
 
+
 class ChartZoomButtons : RComponent<ChartZoomProps, ChartZoomState>() {
     init {
         // Default to 1 minute
@@ -25,14 +26,12 @@ class ChartZoomButtons : RComponent<ChartZoomProps, ChartZoomState>() {
                         this.fontWeight = FontWeight.bold
                     }
                 }
-                attrs {
-                    text(buttonDesc.title)
-                    onClickFunction = {
-                        setState {
-                            currZoomSeconds = buttonDesc.zoomSeconds
-                        }
-                        props.onZoomChange?.invoke(buttonDesc.zoomSeconds)
+                attrs.text(buttonDesc.title)
+                attrs.onClickFunction = {
+                    setState {
+                        currZoomSeconds = buttonDesc.zoomSeconds
                     }
+                    props.onZoomChange?.invoke(buttonDesc.zoomSeconds)
                 }
             }
         }
@@ -41,11 +40,11 @@ class ChartZoomButtons : RComponent<ChartZoomProps, ChartZoomState>() {
     fun currZoomSeconds(): Int = state.currZoomSeconds
 }
 
-external interface ChartZoomState : RState {
+external interface ChartZoomState : State {
     var currZoomSeconds: Int
 }
 
-external interface ChartZoomProps : RProps {
+external interface ChartZoomProps : PropsWithChildren {
     var onZoomChange: ((Int) -> Unit)?
     var buttons: List<ZoomButtonDesc>?
 }
@@ -57,4 +56,4 @@ data class ZoomButtonDesc(
 )
 
 fun ZoomButtonDesc(title: String, size: Duration): ZoomButtonDesc =
-    ZoomButtonDesc(title, size.inSeconds.toInt())
+    ZoomButtonDesc(title, size.inWholeSeconds.toInt())

src/main/kotlin/Conference.kt → src/jsMain/kotlin/Conference.kt

@@ -6,7 +6,6 @@ import kotlinx.coroutines.GlobalScope
 import kotlinx.coroutines.Job
 import kotlinx.coroutines.await
 import kotlinx.coroutines.cancel
-import kotlinx.coroutines.channels.Channel
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.isActive
 import kotlinx.coroutines.launch
@@ -16,8 +15,9 @@ import kotlinx.css.pct
 import kotlinx.html.js.onClickFunction
 import react.RBuilder
 import react.RComponent
-import react.RProps
-import react.RState
+import react.PropsWithChildren
+import react.RefCallback
+import react.State
 import react.dom.div
 import react.dom.h2
 import react.dom.p
@@ -141,11 +141,9 @@ class Conference : RComponent<ConferenceProps, ConferenceState>() {
                 } else {
                     +"Conference (${props.id})"
                 }
-                attrs {
-                    onClickFunction = { _ ->
-                        setState {
-                            expanded = !expanded
-                        }
+                attrs.onClickFunction = { _ ->
+                    setState {
+                        expanded = !expanded
                     }
                 }
             }
@@ -168,9 +166,9 @@ class Conference : RComponent<ConferenceProps, ConferenceState>() {
                             nonNumericalKeys = state.nonNumericalKeys
                             data = props.confData
                         }
-                        ref {
+                        ref = RefCallback<ChartCollection> {
                             if (it != null) {
-                                chartCollection = it as ChartCollection
+                                chartCollection = it
                             }
                         }
                     }
@@ -191,9 +189,9 @@ class Conference : RComponent<ConferenceProps, ConferenceState>() {
                                     data = existingEpData
                                 }
                             }
-                            ref {
+                            ref = RefCallback<Endpoint> {
                                 if (it != null) {
-                                    eps[epId] = it as Endpoint
+                                    eps[epId] = it
                                 }
                             }
                         }
@@ -215,9 +213,9 @@ class Conference : RComponent<ConferenceProps, ConferenceState>() {
                                     data = existingEpData
                                 }
                             }
-                            ref {
+                            ref = RefCallback<Endpoint> {
                                 if (it != null) {
-                                    eps[relayId] = it as Endpoint
+                                    eps[relayId] = it
                                 }
                             }
                         }
@@ -283,7 +281,7 @@ private fun getRelayIds(confData: dynamic): Array<String> {
         keys(confData.relays) else emptyArray()
 }
 
-external interface ConferenceState : RState {
+external interface ConferenceState : State {
     var epIds: Array<String>
     var relayIds: Array<String>
     var name: String
@@ -293,7 +291,7 @@ external interface ConferenceState : RState {
     var dataByEp: MutableMap<String, MutableList<dynamic>>?
 }
 
-external interface ConferenceProps : RProps {
+external interface ConferenceProps : PropsWithChildren {
     var baseRestApiUrl: String?
     var id: String
     var confData: List<dynamic>?