WIP: UI prototype using React hooks to render live data

save-backend/backend-api-docs.json

@@ -11,6 +11,63 @@
     }
   ],
   "paths": {
+    "/api/v1/a/validate": {
+      "get": {
+        "operationId": "sequential",
+        "parameters": [
+          {
+            "in": "header",
+            "name": "Accept",
+            "schema": {
+              "type": "string",
+              "enum": [
+                "application/x-ndjson"
+              ]
+            }
+          }
+        ],
+        "responses": {
+          "401": {
+            "content": {
+              "application/x-ndjson": {
+                "schema": {
+                  "$ref": "#/components/schemas/TestSuiteValidationResult"
+                }
+              },
+              "text/event-stream": {
+                "schema": {
+                  "$ref": "#/components/schemas/TestSuiteValidationResult"
+                }
+              }
+            },
+            "description": "Unauthorized"
+          },
+          "406": {
+            "content": {
+              "application/x-ndjson": {
+                "schema": {
+                  "$ref": "#/components/schemas/TestSuiteValidationResult"
+                }
+              },
+              "text/event-stream": {
+                "schema": {
+                  "$ref": "#/components/schemas/TestSuiteValidationResult"
+                }
+              }
+            },
+            "description": "Could not find acceptable representation."
+          }
+        },
+        "security": [
+          {
+            "basic": []
+          }
+        ],
+        "tags": [
+          "test-suite-validation-controller"
+        ]
+      }
+    },
     "/api/v1/avatar/upload": {
       "post": {
         "description": "Upload an avatar for user or organization.",
@@ -9641,6 +9698,26 @@
           }
         }
       },
+      "TestSuiteValidationResult": {
+        "required": [
+          "checkId",
+          "checkName",
+          "percentage"
+        ],
+        "type": "object",
+        "properties": {
+          "checkId": {
+            "type": "string"
+          },
+          "checkName": {
+            "type": "string"
+          },
+          "percentage": {
+            "type": "integer",
+            "format": "int32"
+          }
+        }
+      },
       "TestSuiteVersioned": {
         "required": [
           "description",

save-backend/src/main/kotlin/com/saveourtool/save/backend/SaveApplication.kt

@@ -6,9 +6,12 @@ import org.springframework.boot.autoconfigure.SpringBootApplication
 import org.springframework.boot.context.properties.EnableConfigurationProperties
 import org.springframework.http.ResponseEntity
 import reactor.core.publisher.Flux
+import reactor.core.publisher.ParallelFlux
 import java.nio.ByteBuffer
 
-typealias ByteBufferFluxResponse = ResponseEntity<Flux<ByteBuffer>>
+internal typealias FluxResponse<T> = ResponseEntity<Flux<T>>
+internal typealias ParallelFluxResponse<T> = ResponseEntity<ParallelFlux<T>>
+internal typealias ByteBufferFluxResponse = FluxResponse<ByteBuffer>
 
 /**
  * An entrypoint for spring for save-backend

save-backend/src/main/kotlin/com/saveourtool/save/backend/controllers/TestSuiteValidationController.kt

@@ -0,0 +1,108 @@
+package com.saveourtool.save.backend.controllers
+
+import com.saveourtool.save.backend.ParallelFluxResponse
+import com.saveourtool.save.backend.utils.withHttpHeaders
+import com.saveourtool.save.configs.ApiSwaggerSupport
+import com.saveourtool.save.test.TestSuiteValidationResult
+import com.saveourtool.save.v1
+import io.swagger.v3.oas.annotations.responses.ApiResponse
+import org.springframework.http.HttpHeaders.ACCEPT
+import org.springframework.http.MediaType.APPLICATION_NDJSON_VALUE
+import org.springframework.http.MediaType.TEXT_EVENT_STREAM_VALUE
+import org.springframework.web.bind.annotation.GetMapping
+import org.springframework.web.bind.annotation.RequestMapping
+import org.springframework.web.bind.annotation.RestController
+import reactor.core.publisher.Flux
+import reactor.core.publisher.ParallelFlux
+import reactor.core.scheduler.Schedulers
+import kotlin.streams.asStream
+import kotlin.time.Duration
+import kotlin.time.Duration.Companion.seconds
+
+/**
+ * Demonstrates _Server-Sent Events_ (SSE).
+ */
+@ApiSwaggerSupport
+@RestController
+@RequestMapping(path = ["/api/$v1/a"])
+class TestSuiteValidationController {
+    /**
+     * @return a stream of events.
+     */
+    @GetMapping(
+        path = ["/validate"],
+        headers = [
+            "$ACCEPT=$TEXT_EVENT_STREAM_VALUE",
+            "$ACCEPT=$APPLICATION_NDJSON_VALUE",
+        ],
+        produces = [
+            TEXT_EVENT_STREAM_VALUE,
+            APPLICATION_NDJSON_VALUE,
+        ],
+    )
+    @ApiResponse(responseCode = "406", description = "Could not find acceptable representation.")
+    fun sequential(): ParallelFluxResponse<TestSuiteValidationResult> =
+            withHttpHeaders {
+                overallProgress()
+            }
+
+    @Suppress("MAGIC_NUMBER")
+    private fun singleCheck(
+        checkId: String,
+        checkName: String,
+        duration: Duration,
+    ): Flux<TestSuiteValidationResult> {
+        @Suppress("MagicNumber")
+        val ticks = 0..100
+
+        val delayMillis = duration.inWholeMilliseconds / (ticks.count() - 1)
+
+        return Flux.fromStream(ticks.asSequence().asStream())
+            .map { percentage ->
+                TestSuiteValidationResult(
+                    checkId = checkId,
+                    checkName = checkName,
+                    percentage = percentage,
+                )
+            }
+            .map { item ->
+                Thread.sleep(delayMillis)
+                item
+            }
+            .subscribeOn(Schedulers.boundedElastic())
+    }
+
+    @Suppress("MAGIC_NUMBER")
+    private fun overallProgress(): ParallelFlux<TestSuiteValidationResult> {
+        @Suppress("ReactiveStreamsUnusedPublisher")
+        val checks = arrayOf(
+            singleCheck(
+                "check A",
+                "Searching for plug-ins with zero tests",
+                10.seconds,
+            ),
+
+            singleCheck(
+                "check B",
+                "Searching for test suites with wildcard mode",
+                20.seconds,
+            ),
+
+            singleCheck(
+                "check C",
+                "Ordering pizza from the nearest restaurant",
+                30.seconds,
+            ),
+        )
+
+        return when {
+            checks.isEmpty() -> Flux.empty<TestSuiteValidationResult>().parallel()
+
+            else -> checks.reduce { left, right ->
+                left.mergeWith(right)
+            }
+                .parallel(Runtime.getRuntime().availableProcessors())
+                .runOn(Schedulers.parallel())
+        }
+    }
+}

save-cloud-common/src/commonMain/kotlin/com/saveourtool/save/test/TestSuiteValidationResult.kt

@@ -0,0 +1,28 @@
+package com.saveourtool.save.test
+
+import kotlinx.serialization.Serializable
+
+/**
+ * @property checkId the unique check id.
+ * @property checkName the human-readable check name.
+ * @property percentage the completion percentage (`0..100`).
+ */
+@Serializable
+data class TestSuiteValidationResult(
+    val checkId: String,
+    val checkName: String,
+    val percentage: Int
+) {
+    init {
+        @Suppress("MAGIC_NUMBER")
+        require(percentage in 0..100) {
+            percentage.toString()
+        }
+    }
+
+    override fun toString(): String =
+            when (percentage) {
+                100 -> "Check $checkName is complete."
+                else -> "Check $checkName is running, $percentage% complete\u2026"
+            }
+}

save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/views/TestSuiteValidationResultView.kt

@@ -0,0 +1,59 @@
+@file:Suppress("FILE_NAME_MATCH_CLASS")
+
+package com.saveourtool.save.frontend.components.views
+
+import com.saveourtool.save.test.TestSuiteValidationResult
+import csstype.ClassName
+import csstype.WhiteSpace
+import csstype.Width
+import js.core.jso
+import react.FC
+import react.Props
+import react.dom.aria.AriaRole
+import react.dom.aria.ariaValueMax
+import react.dom.aria.ariaValueMin
+import react.dom.aria.ariaValueNow
+import react.dom.html.ReactHTML.div
+
+@Suppress(
+    "MagicNumber",
+    "MAGIC_NUMBER",
+)
+val testSuiteValidationResultView: FC<TestSuiteValidationResultProps> = FC { props ->
+    props.validationResults.forEach { item ->
+        div {
+            div {
+                className = ClassName("progress progress-sm mr-2")
+                div {
+                    className = ClassName("progress-bar bg-info")
+                    role = "progressbar".unsafeCast<AriaRole>()
+                    style = jso {
+                        width = "${item.percentage}%".unsafeCast<Width>()
+                    }
+                    ariaValueMin = 0.0
+                    ariaValueNow = item.percentage.toDouble()
+                    ariaValueMax = 100.0
+                }
+            }
+            div {
+                style = jso {
+                    whiteSpace = "pre".unsafeCast<WhiteSpace>()
+                }
+
+                +item.toString()
+            }
+        }
+    }
+}
+
+/**
+ * Properties for [testSuiteValidationResultView].
+ *
+ * @see testSuiteValidationResultView
+ */
+external interface TestSuiteValidationResultProps : Props {
+    /**
+     * Test suite validation results.
+     */
+    var validationResults: Collection<TestSuiteValidationResult>
+}