Enhancement: Add More Spec Details to the UI (#517)

* test: ignore line ending in generated specs assertions Is failing in Windows OS Refs #378 * refactor(kafka): add primitive payload, example of `minimum` value To visualize in UI Refs #378 test(kafka): add primitive types More data to demonstrate + type badges check * refactor(ui): add schema properties template To reuse for primitive types Refs #378 * feat(ui): add `type` badge to schema payload header No intuitive way to check whether the payload is an objects or a string Refs #378 * feat(ui): add minimum and maximum values to the spec`s model Feature request Refs #378 * feat(ui): display primitive type info Feature request. Only properties has info displayed Refs #378 * feat(ui): display minimum and maximum values Feature request. Refs #378 * Revert "test: ignore line ending in generated specs assertions" This reverts commit 07a6b30.
springwolf · Jan 2, 2024 · ce60277 · ce60277
1 parent be3c479
commit ce60277
Show file tree

Hide file tree

Showing 11 changed files with 138 additions and 21 deletions.
diff --git a/...r/springwolf/addons/common_model_converters/converters/monetaryamount/MonetaryAmount.java b/...r/springwolf/addons/common_model_converters/converters/monetaryamount/MonetaryAmount.java
@@ -10,7 +10,7 @@
 class MonetaryAmount {
 
     @JsonProperty("amount")
-    @Schema(example = "99.99")
+    @Schema(example = "99.99", minimum = "0.1")
     private BigDecimal amount;
 
     @JsonProperty("currency")

diff --git a/...rc/main/java/io/github/stavshamir/springwolf/example/kafka/consumers/ExampleConsumer.java b/...rc/main/java/io/github/stavshamir/springwolf/example/kafka/consumers/ExampleConsumer.java
@@ -29,6 +29,11 @@ public void receiveExamplePayload(ExamplePayloadDto payload) {
         anotherProducer.sendMessage(example);
     }
 
+    @KafkaListener(topics = "primitive-topic")
+    public void receivePrimitivePayload(String primitivePayload) {
+        log.info("Received new messages in primitive-topic: {}", primitivePayload);
+    }
+
     @KafkaListener(topics = "another-topic", groupId = "example-group-id", batch = "true")
     public void receiveAnotherPayloadBatched(List<AnotherPayloadDto> payloads) {
         log.info("Received new messages in another-topic: {}", payloads.toString());

diff --git a/...test/java/io/github/stavshamir/springwolf/example/kafka/SpringContextIntegrationTest.java b/...test/java/io/github/stavshamir/springwolf/example/kafka/SpringContextIntegrationTest.java
@@ -48,7 +48,7 @@ void testContextWithApplicationProperties() {
 
         @Test
         void testAllChannelsAreFound() {
-            assertThat(asyncApiService.getAsyncAPI().getChannels()).hasSize(4);
+            assertThat(asyncApiService.getAsyncAPI().getChannels()).hasSize(5);
         }
     }
 

diff --git a/springwolf-examples/springwolf-kafka-example/src/test/resources/asyncapi.json b/springwolf-examples/springwolf-kafka-example/src/test/resources/asyncapi.json
@@ -172,6 +172,38 @@
         }
       }
     },
+    "primitive-topic": {
+      "publish": {
+        "operationId": "primitive-topic_publish_receivePrimitivePayload",
+        "description": "Auto-generated description",
+        "bindings": {
+          "kafka": {
+            "bindingVersion": "0.4.0"
+          }
+        },
+        "message": {
+          "schemaFormat": "application/vnd.oai.openapi+json;version=3.0.0",
+          "name": "java.lang.String",
+          "title": "String",
+          "payload": {
+            "$ref": "#/components/schemas/String"
+          },
+          "headers": {
+            "$ref": "#/components/schemas/HeadersNotDocumented"
+          },
+          "bindings": {
+            "kafka": {
+              "bindingVersion": "0.4.0"
+            }
+          }
+        }
+      },
+      "bindings": {
+        "kafka": {
+          "bindingVersion": "0.4.0"
+        }
+      }
+    },
     "topic-defined-via-asyncPublisher-annotation": {
       "subscribe": {
         "operationId": "topic-defined-via-asyncPublisher-annotation_subscribe",
@@ -456,10 +488,19 @@
           "type": "object"
         }
       },
+      "String": {
+        "type": "string",
+        "example": "string",
+        "x-json-schema": {
+          "$schema": "https://json-schema.org/draft-04/schema#",
+          "type": "string"
+        }
+      },
       "io.github.stavshamir.springwolf.addons.common_model_converters.converters.monetaryamount.MonetaryAmount": {
         "type": "object",
         "properties": {
           "amount": {
+            "minimum": 0.1,
             "type": "number",
             "example": 99.99
           },
@@ -477,6 +518,7 @@
           "name": "io.github.stavshamir.springwolf.addons.common_model_converters.converters.monetaryamount.MonetaryAmount",
           "properties": {
             "amount": {
+              "minimum": 0.1,
               "name": "amount",
               "type": "number"
             },

diff --git a/springwolf-ui/src/app/components/schemas/schema/schema.component.css b/springwolf-ui/src/app/components/schemas/schema/schema.component.css
@@ -12,6 +12,10 @@
   color: red;
 }
 
+.type-content {
+  display: flex;
+}
+
 .type {
   color: #55a;
 }
@@ -20,3 +24,11 @@
   color: #6b6b6b;
   font-style: italic;
 }
+
+.range {
+  background-color: rgb(128, 90, 213);
+  color: rgb(255, 255, 255);
+  margin: 0 8 0 8;
+  padding: 2 4 2 4;
+  border-radius: 4px;
+}
diff --git a/springwolf-ui/src/app/components/schemas/schema/schema.component.html b/springwolf-ui/src/app/components/schemas/schema/schema.component.html
@@ -1,6 +1,15 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
 <table class="schema">
   <tbody>
+    <!--  Primitive types  -->
+    <tr *ngIf="schema.type !== 'object'">
+      <ng-container
+        [ngTemplateOutlet]="valueContent"
+        [ngTemplateOutletContext]="{ value: schema }"
+      >
+      </ng-container>
+    </tr>
+    <!--  Objects  -->
     <tr *ngFor="let property of schema?.properties | keyvalue">
       <td class="key">
         {{ property.key }}
@@ -21,25 +30,53 @@
             >
           </span>
         </ng-container>
-        <span class="type" *ngIf="property.value.type != 'array'">{{
-          property.value.type
-        }}</span>
-        <span class="type" *ngIf="property.value.refTitle">
-          <a [href]="property.value.anchorUrl">{{ property.value.refTitle }}</a>
-        </span>
-        <span class="format" *ngIf="property.value.format"
-          >({{ property.value.format }})</span
-        >
-        <div class="description">{{ property.value.description }}</div>
-        <span class="example" *ngIf="property.value.example"
-          >example: {{ property.value.example.value }}</span
+        <ng-container
+          [ngTemplateOutlet]="valueContent"
+          [ngTemplateOutletContext]="{ value: property.value }"
         >
-        <mat-select *ngIf="property.value.enum" placeholder="Enum">
-          <mat-option *ngFor="let enum of property.value.enum" [value]="enum">{{
-            enum
-          }}</mat-option>
-        </mat-select>
+        </ng-container>
       </td>
     </tr>
   </tbody>
 </table>
+
+<ng-template #valueContent let-value="value">
+  <div class="type-content">
+    <span class="type" *ngIf="value.type != 'array'">{{ value.type }}</span>
+
+    <ng-container
+      [ngTemplateOutlet]="rangeContent"
+      [ngTemplateOutletContext]="{
+        minimum: value.minimum,
+        maximum: value.maximum
+      }"
+    >
+    </ng-container>
+  </div>
+
+  <span class="type" *ngIf="value.refTitle">
+    <a [href]="value.anchorUrl">{{ value.refTitle }}</a>
+  </span>
+  <span class="format" *ngIf="value.format">({{ value.format }})</span>
+  <div class="description">{{ value.description }}</div>
+  <span class="example" *ngIf="value.example"
+    >example: {{ value.example.value }}</span
+  >
+  <mat-select *ngIf="value.enum" placeholder="Enum">
+    <mat-option *ngFor="let enum of value.enum" [value]="enum"
+      >{{ enum }}
+    </mat-option>
+  </mat-select>
+</ng-template>
+
+<ng-template #rangeContent let-minimum="minimum" let-maximum="maximum">
+  <span class="range" *ngIf="minimum !== undefined && maximum === undefined">
+    &gt;= {{ minimum }}
+  </span>
+  <span class="range" *ngIf="minimum === undefined && maximum !== undefined">
+    &lt;= {{ maximum }}
+  </span>
+  <span class="range" *ngIf="minimum !== undefined && maximum !== undefined">
+    [ {{ minimum }} .. {{ maximum }} ]
+  </span>
+</ng-template>
diff --git a/springwolf-ui/src/app/components/schemas/schemas.component.css b/springwolf-ui/src/app/components/schemas/schemas.component.css
@@ -9,3 +9,14 @@ h3 {
   padding: 6px;
   font-weight: normal;
 }
+
+.badge {
+}
+
+.type-badge {
+  background-color: #e0e0e0;
+  border-radius: 4px;
+  padding: 4px;
+  font-weight: normal;
+  font-size: small;
+}
diff --git a/springwolf-ui/src/app/components/schemas/schemas.component.html b/springwolf-ui/src/app/components/schemas/schemas.component.html
@@ -11,8 +11,12 @@ <h1>Schemas</h1>
       <mat-panel-title>
         <h3>{{ schema.value.title }}</h3>
       </mat-panel-title>
-      <mat-panel-description>
-        {{ schema.value.description }}
+      <mat-panel-description
+        class="flex-column flex-start items-center"
+        [ngClass]="{ 'gap-16': schema.value.description }"
+      >
+        <div>{{ schema.value.description }}</div>
+        <div class="badge type-badge">{{ schema.value.type }}</div>
       </mat-panel-description>
     </mat-expansion-panel-header>
     <h4>

diff --git a/springwolf-ui/src/app/models/schema.model.ts b/springwolf-ui/src/app/models/schema.model.ts
@@ -21,4 +21,6 @@ export interface Schema {
   required?: string[];
   enum?: string[];
   example?: Example;
+  minimum?: number;
+  maximum?: number;
 }
diff --git a/springwolf-ui/src/app/service/asyncapi/asyncapi-mapper.service.ts b/springwolf-ui/src/app/service/asyncapi/asyncapi-mapper.service.ts
@@ -270,6 +270,8 @@ export class AsyncApiMapperService {
       properties,
       required: schema.required,
       example,
+      minimum: schema.minimum,
+      maximum: schema.maximum,
     };
   }
 

diff --git a/springwolf-ui/src/app/service/asyncapi/models/schema.model.ts b/springwolf-ui/src/app/service/asyncapi/models/schema.model.ts
@@ -12,5 +12,7 @@ export interface ServerAsyncApiSchema {
       }
     | string;
   required?: string[];
+  minimum?: number;
+  maximum?: number;
   $ref?: string;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -48,7 +48,7 @@ void testContextWithApplicationProperties() { @@
             @Test
             void testAllChannelsAreFound() {
-                assertThat(asyncApiService.getAsyncAPI().getChannels()).hasSize(4);
+                assertThat(asyncApiService.getAsyncAPI().getChannels()).hasSize(5);
             }
         }
@@ Expand Down @@