fix: display metrics in SchemaToHtml (#469)

closes kestra-io/kestra#8792

Author: brian-mulier-p

src/components/plugins/PropertyDetail.vue

@@ -6,7 +6,8 @@
             </span>
             <a v-if="subtype.startsWith('#')" :href="subtype" @click.stop>
                 <button class="d-flex fw-bold type-box rounded fs-7 px-2 py-1">
-                    <span class="ref-type">{{ className(subtype) }}</span><eye-outline />
+                    <span class="ref-type">{{ className(subtype) }}</span>
+                    <EyeOutline />
                 </button>
             </a>
             <span v-else class="type-box rounded fs-7 px-2 py-1">
@@ -41,6 +42,15 @@
             </code>
         </div>
 
+        <div v-if="property.unit !== undefined && property.unit.trim().length > 0">
+            <span>
+                Unit
+            </span>
+            <code class="border rounded px-2 py-1">
+                {{ property.unit }}
+            </code>
+        </div>
+
         <div v-if="property.minLength !== undefined">
             <span>
                 Min length
@@ -138,9 +148,9 @@
                 <slot v-if="property.title !== undefined" :content="codeSanitizer(property.title)" name="markdown" />
                 <slot v-if="property.description !== undefined" :content="codeSanitizer(property.description)" name="markdown" />
                 <div v-if="property['$internalStorageURI']">
-                  <Alert type="info">
-                    <slot content="Pebble expression referencing an Internal Storage URI e.g. `{{ outputs.mytask.uri }}`." name="markdown"/>
-                  </Alert>
+                    <Alert type="info">
+                        <slot content="Pebble expression referencing an Internal Storage URI e.g. `{{ outputs.mytask.uri }}`." name="markdown" />
+                    </Alert>
                 </div>
             </div>
         </div>
@@ -151,6 +161,7 @@
     import {className, extractEnumValues, extractTypeInfo, type JSONProperty} from "../../utils/schemaUtils.ts";
     import {ref} from "vue";
     import EyeOutline from "vue-material-design-icons/EyeOutline.vue";
+    import Alert from "../content/Alert.vue";
 
     const props = withDefaults(
         defineProps<{
@@ -213,4 +224,4 @@
             width: fit-content;
         }
     }
-</style>
+</style>

src/components/plugins/SchemaToHtml.vue

@@ -73,6 +73,21 @@
                 </template>
             </CollapsibleProperties>
 
+            <CollapsibleProperties
+                v-if="schema.properties?.$metrics"
+                class="plugin-section"
+                :properties="metrics"
+                section-name="Metrics"
+                href="metrics"
+                :show-dynamic="false"
+            >
+                <template #markdown="{content}">
+                    <div class="markdown">
+                        <slot name="markdown" :content="content" />
+                    </div>
+                </template>
+            </CollapsibleProperties>
+
             <Collapsible v-if="schema.definitions && Object.keys(schema.definitions).length > 0" class="plugin-section" clickable-text="Definitions" href="definitions" :initially-expanded="definitionsExpanded">
                 <template #content>
                     <div class="d-flex flex-column gap-7 ps-3">
@@ -103,7 +118,7 @@
     import {computed, onUnmounted, ref} from "vue";
     import type {HighlighterCore} from "shiki/core";
     import SchemaToCode from "./SchemaToCode.vue";
-    import type {JSONSchema} from "../../utils/schemaUtils.ts";
+    import type {JSONProperty, JSONSchema} from "../../utils/schemaUtils.ts";
     import Collapsible from "../misc/Collapsible.vue";
     import CollapsibleProperties from "./CollapsibleProperties.vue";
 
@@ -130,7 +145,11 @@
 
     const highlighter = ref<HighlighterCore | null>(null);
 
-    const examples = computed(() => props.schema.properties?.["$examples"])
+    const examples = computed(() => props.schema.properties?.["$examples"]);
+
+    const metrics = computed(() => Object.fromEntries(
+        props.schema.properties?.["$metrics"]?.map(metric => ([metric.name, {...metric, name: undefined}])) as [string, JSONProperty][]
+    ));
 
     const {
         githubLight,
@@ -200,11 +219,11 @@
     :deep(.type-box) {
         color: buttontext;
 
-        & .material-design-icon{
+        & .material-design-icon {
             &, & * {
                 height: 1rem;
                 width: 1rem;
             }
         }
     }
-</style>
+</style>

src/utils/schemaUtils.ts

@@ -1,30 +1,32 @@
 import Utils from "./Utils.ts";
 
 export interface JSONProperty {
-    type:string;
+    type: string;
+    name?: string;
+    unit?: string;
     $dynamic?: boolean;
-    $ref?:string;
-    $required?:boolean;
+    $ref?: string;
+    $required?: boolean;
     $beta?: boolean;
     $deprecated?: boolean;
     $internalStorageURI?: boolean;
-    allOf?:JSONProperty[];
-    anyOf?:JSONProperty[];
+    allOf?: JSONProperty[];
+    anyOf?: JSONProperty[];
     items?: JSONProperty;
-    additionalProperties?:JSONProperty;
-    title?:string;
-    description?:string;
-    default?:string;
-    pattern?:string;
-    minLength?:number;
-    maxLength?:number;
-    minItems?:number;
-    maxItems?:number;
-    minimum?:number;
-    exclusiveMinimum?:number;
-    maximum?:number;
-    exclusiveMaximum?:number;
-    format?:string;
+    additionalProperties?: JSONProperty;
+    title?: string;
+    description?: string;
+    default?: string;
+    pattern?: string;
+    minLength?: number;
+    maxLength?: number;
+    minItems?: number;
+    maxItems?: number;
+    minimum?: number;
+    exclusiveMinimum?: number;
+    maximum?: number;
+    exclusiveMaximum?: number;
+    format?: string;
     enum?: string[];
 }
 
@@ -47,6 +49,7 @@ export interface JSONSchema {
             lang?: string
             full?: boolean
         }[]
+        $metrics?: JSONProperty[];
     }
 }