feat(ui): prepare springwolf for AsyncApi 3.0 (wip)

feat(ui): remove testing code

feat(ui): remove asyncApi 2.0 hint about publish/subscribe

feat(ui): add parsing error boundary

feat(ui): add license chip

feat(ui): add notification.service.ts

feat(ui): rename Channel to ChannelOperation

also fix bindings

feat(ui): update asyncapi mapper (wip)

feat(ui): add todos

feat(ui): update asyncapi models to v3

chore(ui): split model packages

chore(ui): download asyncapi document only once

refactor(ui): re-organize components

chore(ui): use asyncapi v3 mock

chore(ui): remove IE support

chore(ui): move favicon.ico to assets

springwolf-ui/README.md

@@ -16,6 +16,13 @@ dependencies {
 
 After starting the application, visit: `localhost:8080/springwolf/asyncapi-ui.html`.
 
+## TODOs:
+
+- Migrate to AsyncApi 3
+- Review Angular compoents - adapt to latest angular guidelines
+- Migrate tslint to eslint
+- Validate existing documents using parser-js?
+
 ## Development
 1. Run `npm i`
 2. Run `ng serve`
@@ -25,8 +32,6 @@ After starting the application, visit: `localhost:8080/springwolf/asyncapi-ui.ht
 The application renders content based on mock data in `src/app/shared/mock`.
 It contains multiple mocks - including the ones from the springwolf-core examples projects.
 
-To update the mock data, run `npm run update-mocks`.
-
 ## Release
 
 Releasing is done by running the gradle task `publish`. For local development, use `publishToMavenLocal`.

springwolf-ui/angular.json

@@ -27,7 +27,7 @@
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "./node_modules/font-awesome/css/font-awesome.min.css",
-              "src/styles.css"
+              "src/main.css"
             ],
             "scripts": []
           },
@@ -91,7 +91,7 @@
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.css"
+              "src/main.css"
             ],
             "scripts": []
           }

springwolf-ui/browserslist

@@ -9,4 +9,3 @@
 last 2 versions
 Firefox ESR
 not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.

springwolf-ui/src/app/app.module.ts

@@ -7,20 +7,21 @@ import { HttpClientInMemoryWebApiModule } from "angular-in-memory-web-api";
 import { HighlightModule, HIGHLIGHT_OPTIONS } from "ngx-highlightjs";
 import { environment } from "./../environments/environment";
 import { AppComponent } from "./app.component";
-import { ChannelMainComponent } from "./channels/channel-main/channel-main.component";
-import { ChannelsComponent } from "./channels/channels.component";
-import { HeaderComponent } from "./header/header.component";
-import { InfoComponent } from "./info/info.component";
+import { ChannelMainComponent } from "./components/channels/channel-main/channel-main.component";
+import { ChannelsComponent } from "./components/channels/channels.component";
+import { HeaderComponent } from "./components/header/header.component";
+import { InfoComponent } from "./components/info/info.component";
 import { MaterialModule } from "./material.module";
-import { SchemaComponent } from "./schemas/schema/schema.component";
-import { SchemasComponent } from "./schemas/schemas.component";
-import { ServersComponent } from "./servers/servers.component";
-import { AsyncApiService } from "./shared/asyncapi.service";
-import { MockServer } from "./shared/mock/mock-server";
-import { PublisherService } from "./shared/publisher.service";
+import { SchemaComponent } from "./components/schemas/schema/schema.component";
+import { SchemasComponent } from "./components/schemas/schemas.component";
+import { ServersComponent } from "./components/servers/servers.component";
+import { AsyncApiService } from "./service/asyncapi/asyncapi.service";
+import { MockServer } from "./service/mock/mock-server";
+import { PublisherService } from "./service/publisher.service";
+import { NotificationService } from "./service/notification.service";
 import { FormsModule } from "@angular/forms";
-import { JsonComponent } from "./shared/components/json/json.component";
-import { AsyncApiMapperService } from "./shared/asyncapi-mapper.service";
+import { JsonComponent } from "./components/json/json.component";
+import { AsyncApiMapperService } from "./service/asyncapi/asyncapi-mapper.service";
 
 @NgModule({
   declarations: [
@@ -48,6 +49,7 @@ import { AsyncApiMapperService } from "./shared/asyncapi-mapper.service";
   providers: [
     AsyncApiService,
     AsyncApiMapperService,
+    NotificationService,
     PublisherService,
     {
       provide: HIGHLIGHT_OPTIONS,

springwolf-ui/src/app/channels/channel-main/channel-main.component.ts → springwolf-ui/src/app/components/channels/channel-main/channel-main.component.ts

@@ -1,11 +1,12 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 import { Component, Input, OnInit } from "@angular/core";
-import { AsyncApiService } from "src/app/shared/asyncapi.service";
-import { Example } from "src/app/shared/models/example.model";
-import { Schema } from "src/app/shared/models/schema.model";
-import { PublisherService } from "src/app/shared/publisher.service";
+import { AsyncApiService } from "src/app/service/asyncapi/asyncapi.service";
+import { Example } from "src/app/models/example.model";
+import { Schema } from "src/app/models/schema.model";
+import { PublisherService } from "src/app/service/publisher.service";
 import { MatSnackBar } from "@angular/material/snack-bar";
-import { MessageBinding, Operation } from "src/app/shared/models/channel.model";
+import { Operation } from "src/app/models/channel.model";
+import { Binding } from "src/app/models/bindings.model";
 import { STATUS } from "angular-in-memory-web-api";
 
 @Component({
@@ -70,9 +71,7 @@ export class ChannelMainComponent implements OnInit {
     );
   }
 
-  createMessageBindingExample(
-    messageBinding?: MessageBinding
-  ): Example | undefined {
+  createMessageBindingExample(messageBinding?: Binding): Example | undefined {
     if (messageBinding === undefined || messageBinding === null) {
       return undefined;
     }
@@ -93,12 +92,13 @@ export class ChannelMainComponent implements OnInit {
     return bindingExample;
   }
 
-  getExampleValue(bindingValue: string | Schema): any {
+  getExampleValue(bindingValue: string | Binding): any {
     if (typeof bindingValue === "string") {
       return bindingValue;
-    } else {
+    } else if (typeof bindingValue.example === "object") {
       return bindingValue.example.value;
     }
+    return undefined;
   }
 
   recalculateLineCount(field: string, text: string): void {

springwolf-ui/src/app/channels/channels.component.html → springwolf-ui/src/app/components/channels/channels.component.html

@@ -1,29 +1,6 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
 <h1>Channels</h1>
 
-<a
-  href="https://www.asyncapi.com/blog/publish-subscribe-semantics"
-  target="_blank"
-  >Semantics of publish and subscribe:</a
->
-<ul>
-  <li>
-    <span class="badge publish-badge">
-      publish
-      <i class="fa fa-arrow-circle-down"></i>
-    </span>
-    means publish an event to the channel and this application will receive it
-  </li>
-  <li>
-    <span class="badge subscribe-badge">
-      subscribe
-      <i class="fa fa-arrow-circle-up"></i>
-    </span>
-    means subscribe to this channel to receive events published by this
-    application
-  </li>
-</ul>
-
 <mat-accordion>
   <mat-expansion-panel
     *ngFor="let channel of channels"

springwolf-ui/src/app/channels/channels.component.ts → springwolf-ui/src/app/components/channels/channels.component.ts

@@ -1,7 +1,10 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 import { Component, OnInit } from "@angular/core";
-import { AsyncApiService } from "../shared/asyncapi.service";
-import { Channel, CHANNEL_ANCHOR_PREFIX } from "../shared/models/channel.model";
+import { AsyncApiService } from "../../service/asyncapi/asyncapi.service";
+import {
+  ChannelOperation,
+  CHANNEL_ANCHOR_PREFIX,
+} from "../../models/channel.model";
 import { Location } from "@angular/common";
 
 @Component({
@@ -10,7 +13,7 @@ import { Location } from "@angular/common";
   styleUrls: ["./channels.component.css"],
 })
 export class ChannelsComponent implements OnInit {
-  channels: Channel[];
+  channels: ChannelOperation[];
   selectedChannel: string;
   docName: string;
 
@@ -25,14 +28,16 @@ export class ChannelsComponent implements OnInit {
     this.location.subscribe((): void => this.setChannelSelectionFromLocation());
 
     this.asyncApiService.getAsyncApi().subscribe((asyncapi) => {
-      this.channels = this.sortChannels(asyncapi.channels);
+      this.channels = this.sortChannels(asyncapi.channelOperations);
     });
   }
 
-  private sortChannels(channels: Array<Channel>): Array<Channel> {
+  private sortChannels(
+    channels: Array<ChannelOperation>
+  ): Array<ChannelOperation> {
     return channels.sort((a, b) => {
       if (a.operation.protocol === b.operation.protocol) {
-        if (a.operation.operation === b.operation.operation) {
+        if (a.operation.operationType === b.operation.operationType) {
           if (a.name === b.name) {
             return a.operation.message.name.localeCompare(
               b.operation.message.name
@@ -41,15 +46,17 @@ export class ChannelsComponent implements OnInit {
             return a.name.localeCompare(b.name);
           }
         } else {
-          return a.operation.operation.localeCompare(b.operation.operation);
+          return a.operation.operationType.localeCompare(
+            b.operation.operationType
+          );
         }
       } else {
         return a.operation.protocol.localeCompare(b.operation.protocol);
       }
     });
   }
 
-  setChannelSelection(channel: Channel): void {
+  setChannelSelection(channel: ChannelOperation): void {
     window.location.hash = channel.anchorIdentifier;
   }
   setChannelSelectionFromLocation(): void {

springwolf-ui/src/app/components/info/info.component.html

@@ -0,0 +1,22 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<h1>{{ info?.title }}</h1>
+<h5>
+  API VERSION {{ info?.version }}
+  -
+  <a href="javascript:void(0);" (click)="download()"
+    >Download AsyncAPI JSON file</a
+  >
+</h5>
+<p *ngIf="info?.license?.name">
+  <mat-chip>
+    <a
+      *ngIf="info?.license?.url; else licenseElseBlock"
+      [href]="info.license.url"
+      target="_blank"
+    >
+      {{ info.license.name }}
+    </a>
+    <ng-template #licenseElseBlock>{{ info.license.name }}</ng-template>
+  </mat-chip>
+</p>
+<p *ngIf="info?.description">{{ info.description }}</p>

springwolf-ui/src/app/info/info.component.ts → springwolf-ui/src/app/components/info/info.component.ts

@@ -1,8 +1,8 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 import { Component, OnInit } from "@angular/core";
-import { AsyncApi } from "../shared/models/asyncapi.model";
-import { Info } from "../shared/models/info.model";
-import { AsyncApiService } from "../shared/asyncapi.service";
+import { AsyncApi } from "../../models/asyncapi.model";
+import { Info } from "../../models/info.model";
+import { AsyncApiService } from "../../service/asyncapi/asyncapi.service";
 
 @Component({
   selector: "app-info",

springwolf-ui/src/app/schemas/schema/schema.component.ts → springwolf-ui/src/app/components/schemas/schema/schema.component.ts

@@ -1,6 +1,6 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 import { Component, Input } from "@angular/core";
-import { Schema } from "src/app/shared/models/schema.model";
+import { Schema } from "src/app/models/schema.model";
 
 @Component({
   selector: "app-schema",

springwolf-ui/src/app/schemas/schemas.component.ts → springwolf-ui/src/app/components/schemas/schemas.component.ts

@@ -1,8 +1,8 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 import { Component, OnInit } from "@angular/core";
 import { Location } from "@angular/common";
-import { AsyncApiService } from "../shared/asyncapi.service";
-import { Schema } from "../shared/models/schema.model";
+import { AsyncApiService } from "../../service/asyncapi/asyncapi.service";
+import { Schema } from "../../models/schema.model";
 
 @Component({
   selector: "app-schemas",

springwolf-ui/src/app/servers/servers.component.ts → springwolf-ui/src/app/components/servers/servers.component.ts

@@ -1,7 +1,7 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 import { Component, OnInit } from "@angular/core";
-import { AsyncApiService } from "../shared/asyncapi.service";
-import { Server } from "../shared/models/server.model";
+import { AsyncApiService } from "../../service/asyncapi/asyncapi.service";
+import { Server } from "../../models/server.model";
 
 @Component({
   selector: "app-servers",

springwolf-ui/src/app/material.module.ts

@@ -12,6 +12,7 @@ import { ClipboardModule } from "@angular/cdk/clipboard";
 import { MatSnackBarModule } from "@angular/material/snack-bar";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatSelectModule } from "@angular/material/select";
+import { MatChipsModule } from "@angular/material/chips";
 
 const modules = [
   MatButtonModule,
@@ -25,6 +26,7 @@ const modules = [
   MatSnackBarModule,
   MatFormFieldModule,
   MatSelectModule,
+  MatChipsModule,
 ];
 
 @NgModule({

springwolf-ui/src/app/shared/models/asyncapi.model.ts → springwolf-ui/src/app/models/asyncapi.model.ts

@@ -1,12 +1,12 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 import { Info } from "./info.model";
 import { Server } from "./server.model";
-import { Channel } from "./channel.model";
+import { ChannelOperation } from "./channel.model";
 import { Schema } from "./schema.model";
 
 export interface AsyncApi {
   info: Info;
   servers: Map<string, Server>;
-  channels: Channel[];
+  channelOperations: ChannelOperation[];
   components: { schemas: Map<string, Schema> };
 }

springwolf-ui/src/app/models/bindings.model.ts

@@ -0,0 +1,8 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+export interface Bindings {
+  [protocol: string]: Binding;
+}
+
+export interface Binding {
+  [protocol: string]: string | Binding;
+}

springwolf-ui/src/app/shared/models/channel.model.ts → springwolf-ui/src/app/models/channel.model.ts

@@ -1,20 +1,20 @@
 /* SPDX-License-Identifier: Apache-2.0 */
-import { Schema } from "./schema.model";
+import { Binding, Bindings } from "./bindings.model";
 
 export const CHANNEL_ANCHOR_PREFIX = "#channel-";
-export interface Channel {
+export interface ChannelOperation {
   name: string;
   anchorIdentifier: string;
   description?: string;
   operation: Operation;
 }
 
-export type OperationType = "publish" | "subscribe";
+export type OperationType = "receive" | "send";
 export interface Operation {
   message: Message;
-  bindings?: { [protocol: string]: any };
+  bindings?: Bindings;
   protocol: string;
-  operation: OperationType;
+  operationType: OperationType;
 }
 
 export interface Message {
@@ -31,10 +31,6 @@ export interface Message {
     title: string;
     anchorUrl: string;
   };
-  bindings?: Map<string, MessageBinding>;
+  bindings?: Map<string, Binding>;
   rawBindings?: { [protocol: string]: object };
 }
-
-export interface MessageBinding {
-  [protocol: string]: string | Schema;
-}

springwolf-ui/src/app/shared/models/info.model.ts → springwolf-ui/src/app/models/info.model.ts

@@ -3,5 +3,9 @@ export interface Info {
   title: string;
   version: string;
   description?: string;
+  license: {
+    name?: string;
+    url?: string;
+  };
   asyncApiJson: object;
 }

springwolf-ui/src/app/shared/models/server.model.ts → springwolf-ui/src/app/models/server.model.ts

@@ -1,5 +1,5 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 export interface Server {
-  url: string;
+  host: string;
   protocol: string;
 }