Add execution time milliseconds on the result panel header

Author: edmocosta

wasm/internal/ottlplayground.go

@@ -22,6 +22,7 @@ package internal
 import (
 	"fmt"
 	"strings"
+	"time"
 
 	"github.com/open-telemetry/opentelemetry-collector-contrib/cmd/ottlplayground/internal"
 )
@@ -42,10 +43,11 @@ func registerStatementsExecutor(executor internal.Executor) {
 	statementsExecutorsLookup[executor.Metadata().ID] = executor
 }
 
-func newResult(json string, err string, logs string) map[string]any {
+func newResult(json string, err string, logs string, executionTime int64) map[string]any {
 	v := map[string]any{
-		"value": json,
-		"logs":  logs,
+		"value":         json,
+		"logs":          logs,
+		"executionTime": executionTime,
 	}
 	if err != "" {
 		v["error"] = err
@@ -54,7 +56,7 @@ func newResult(json string, err string, logs string) map[string]any {
 }
 
 func NewErrorResult(err string, logs string) map[string]any {
-	return newResult("", err, logs)
+	return newResult("", err, logs, 0)
 }
 
 func takeObservedLogs(executor internal.Executor) string {
@@ -72,6 +74,7 @@ func ExecuteStatements(config, ottlDataType, ottlDataPayload, executorName strin
 		return NewErrorResult(fmt.Sprintf("unsupported evaluator %s", executorName), "")
 	}
 
+	start := time.Now()
 	var output []byte
 	var err error
 	switch ottlDataType {
@@ -89,7 +92,8 @@ func ExecuteStatements(config, ottlDataType, ottlDataPayload, executorName strin
 		return NewErrorResult(fmt.Sprintf("unable to run %s statements. Error: %v", ottlDataType, err), takeObservedLogs(executor))
 	}
 
-	return newResult(string(output), "", takeObservedLogs(executor))
+	executionTime := time.Since(start).Milliseconds()
+	return newResult(string(output), "", takeObservedLogs(executor), executionTime)
 }
 
 func StatementsExecutors() []any {

wasm/internal/ottlplayground_test.go

@@ -34,9 +34,10 @@ func Test_NewErrorResult(t *testing.T) {
 	logs := "execution logs"
 	err := "error"
 	expected := map[string]any{
-		"value": "",
-		"logs":  logs,
-		"error": err,
+		"value":         "",
+		"logs":          logs,
+		"error":         err,
+		"executionTime": int64(0),
 	}
 
 	result := NewErrorResult(err, logs)
@@ -50,14 +51,11 @@ func Test_ExecuteStatements_UnsupportedExecutor(t *testing.T) {
 	executorName := "unsupported_processor"
 
 	expectedError := fmt.Sprintf("unsupported evaluator %s", executorName)
-	expected := map[string]any{
-		"value": "",
-		"logs":  "",
-		"error": expectedError,
-	}
-
 	result := ExecuteStatements(config, otlpDataType, otlpDataPayload, executorName)
-	assert.Equal(t, expected, result)
+	assert.Equal(t, "", result["value"])
+	assert.Equal(t, "", result["logs"])
+	assert.Equal(t, expectedError, result["error"])
+	assert.GreaterOrEqual(t, result["executionTime"], int64(0))
 }
 
 func Test_ExecuteStatements_UnsupportedOTLPType(t *testing.T) {
@@ -67,14 +65,12 @@ func Test_ExecuteStatements_UnsupportedOTLPType(t *testing.T) {
 	executorName := "transform_processor"
 
 	expectedError := fmt.Sprintf("unsupported OTLP data type %s", otlpDataType)
-	expected := map[string]any{
-		"value": "",
-		"logs":  "",
-		"error": expectedError,
-	}
 
 	result := ExecuteStatements(config, otlpDataType, otlpDataPayload, executorName)
-	assert.Equal(t, expected, result)
+	assert.Equal(t, "", result["value"])
+	assert.Equal(t, "", result["logs"])
+	assert.Equal(t, expectedError, result["error"])
+	assert.GreaterOrEqual(t, result["executionTime"], int64(0))
 }
 
 func Test_ExecuteStatements(t *testing.T) {
@@ -149,9 +145,11 @@ func Test_ExecuteStatements(t *testing.T) {
 				assert.Empty(t, result["value"])
 				expectedErrorMsg := fmt.Sprintf("unable to run %s statements. Error: %v", tt.otlpDataType, tt.expectedError)
 				assert.Contains(t, result["error"], expectedErrorMsg)
+				assert.Equal(t, result["executionTime"], int64(0))
 			} else {
 				assert.Equal(t, tt.expectedOutput, result["value"])
 				assert.NotContains(t, result, "error")
+				assert.GreaterOrEqual(t, result["executionTime"], int64(0))
 			}
 
 			mockExecutor.AssertExpectations(t)

web/src/components/examples.js

@@ -102,7 +102,7 @@ const TRANSFORM_PROCESSOR_CONFIG_EXAMPLES = [
       ' - context: log\n' +
       '   statements:\n' +
       '    - merge_maps(cache, ParseJSON(body), "upsert") where IsMatch(body, "^\\\\{")\n' +
-      '    - set(time, Time(cache["timestamp"], "%Y-%m-%dT%H:%M:%SZ"))\n'+
+      '    - set(time, Time(cache["timestamp"], "%Y-%m-%dT%H:%M:%SZ"))\n' +
       '    - set(severity_text, cache["level"])\n' +
       '    - set(body, cache["message"])',
     payload:

web/src/components/panels/result-panel.js

@@ -84,6 +84,22 @@ export class PlaygroundResultPanel extends LitElement {
                     <div class="header">
                         <span><strong>Result</strong></span>
                     </div>
+                          ${
+                            this.result?.executionTime
+                              ? html`
+                                  <div
+                                    class="execution-time-header"
+                                    title="Execution time"
+                                  >
+                                    <span>
+                                      <span
+                                        >${this.result?.executionTime} ms</span
+                                      >
+                                    </span>
+                                  </div>
+                                `
+                              : nothing
+                          }
                 </div>
                 <div>
                     <div class="result-panel-view">

web/src/components/panels/result-panel.styles.js

@@ -51,6 +51,13 @@ const resultPanelStyle = css`
     }
   }
 
+  .result-panel-controls .execution-time-header {
+    float: right;
+    font-size: 12px;
+    color: gray;
+    cursor: default;
+  }
+
   .result-panel-content {
     overflow: auto;
     height: calc(100% - 74px);

web/src/components/playground.js

@@ -103,9 +103,9 @@ export class Playground extends LitElement {
 
   _initState() {
     let urlStateData = this._loadURLBase64DataHash();
-    let version = urlStateData?.version
-    if (!version || !this._versions?.some(it => it.version === version)) {
-        version = this._versions?.[0]?.version;
+    let version = urlStateData?.version;
+    if (!version || !this._versions?.some((it) => it.version === version)) {
+      version = this._versions?.[0]?.version;
     }
 
     if (urlStateData) {