SimpleAsyncapi.tsx

import React, { useState, useEffect } from 'react';
import { ApplicationView } from '@asyncapi/edavisualiser';
import '@asyncapi/edavisualiser/styles/default.css';
import '@asyncapi/parser/dist/bundle';

const asyncAPIDocument = `
asyncapi: '2.4.0'
info:
  title: Streetlights Kafka API
  version: '1.0.0'
  description: |
    The Smartylighting Streetlights API allows you to remotely manage the city lights.

    ### Check out its awesome features:

    * Turn a specific streetlight on/off 🌃
    * Dim a specific streetlight 😎
    * Receive real-time information about environmental lighting conditions 📈
  license:
    name: Apache 2.0
    url: https://www.apache.org/licenses/LICENSE-2.0

servers:
  test:
    url: test.mykafkacluster.org:8092
    protocol: kafka-secure
    description: Test broker
    security:
      - saslScram: []
  test_oauth:
    url: test.mykafkacluster.org:8093
    protocol: kafka-secure
    description: Test port for oauth 
    security:
      - streetlights_auth:
         - streetlights:write
         - streetlights:read
    
 
defaultContentType: application/json

channels:
  smartylighting.streetlights.1.0.event.{streetlightId}.lighting.measured:
    description: The topic on which measured values may be produced and consumed.
    servers:
     - test  
    parameters:
      streetlightId:
        $ref: '#/components/parameters/streetlightId'
    publish:
      summary: Inform about environmental lighting conditions of a particular streetlight.
      operationId: receiveLightMeasurement
      traits:
        - $ref: '#/components/operationTraits/kafka'
      message:
        $ref: '#/components/messages/lightMeasured'
       
  smartylighting.streetlights.1.0.action.{streetlightId}.turn.on:
    servers:
     - test_oauth  
    parameters:
      streetlightId:
        $ref: '#/components/parameters/streetlightId'
    subscribe:
      operationId: turnOn
      traits:
        - $ref: '#/components/operationTraits/kafka'
      message:
        $ref: '#/components/messages/turnOnOff'
      security:
      # This operation level security implies the ability to subscribe to messages from
      # \`smartylighting.streetlights.1.0.action.{streetlightId}.turn.on\` channel with Authorization headers 
      # that have \`streetlights:read\` scope. Note that an operation level security must still satisfy 
      # security requirements specified at the server level.
        - streetlights_auth:
          - streetlights:read  

  smartylighting.streetlights.1.0.action.{streetlightId}.turn.off:
    servers:
     - test_oauth  
    parameters:
      streetlightId:
        $ref: '#/components/parameters/streetlightId'
    subscribe:
      operationId: turnOff
      traits:
        - $ref: '#/components/operationTraits/kafka'
      message:
        $ref: '#/components/messages/turnOnOff'
      security:
      # This operation level security implies the ability to subscribe to messages from
      # \`smartylighting.streetlights.1.0.action.{streetlightId}.turn.off\` channel with Authorization headers 
      # that have \`streetlights:read\` scope. Note that an operation level security must still satisfy 
      # security options specified at the server level.
        - streetlights_auth:
          - streetlights:read    
  smartylighting.streetlights.1.0.action.{streetlightId}.dim:
    servers:
     - test_oauth  
    parameters:
      streetlightId:
        $ref: '#/components/parameters/streetlightId'
    subscribe:
      operationId: dimLight
      traits:
        - $ref: '#/components/operationTraits/kafka'
      message:
        $ref: '#/components/messages/dimLight'
      security:
      # This operation level security implies the ability to subscribe to messages from
      # \`smartylighting.streetlights.1.0.action.{streetlightId}.dim\` channel with Authorization headers 
      # that have \`streetlights:read\` scope. Note that an operation level security must still satisfy 
      # security options specified at the server level.
        - streetlights_auth:
          - streetlights:read  
  

components:
  messages:
    lightMeasured:
      name: lightMeasured
      title: Light measured
      summary: Inform about environmental lighting conditions of a particular streetlight.
      contentType: application/json
      traits:
        - $ref: '#/components/messageTraits/commonHeaders'
      payload:
        $ref: "#/components/schemas/lightMeasuredPayload"
    turnOnOff:
      name: turnOnOff
      title: Turn on/off
      summary: Command a particular streetlight to turn the lights on or off.
      traits:
        - $ref: '#/components/messageTraits/commonHeaders'
      payload:
        $ref: "#/components/schemas/turnOnOffPayload"
    dimLight:
      name: dimLight
      title: Dim light
      summary: Command a particular streetlight to dim the lights.
      traits:
        - $ref: '#/components/messageTraits/commonHeaders'
      payload:
        $ref: "#/components/schemas/dimLightPayload"

  schemas:
    lightMeasuredPayload:
      type: object
      properties:
        lumens:
          type: integer
          minimum: 0
          description: Light intensity measured in lumens.
        sentAt:
          $ref: "#/components/schemas/sentAt"
    turnOnOffPayload:
      type: object
      properties:
        command:
          type: string
          enum:
            - on
            - off
          description: Whether to turn on or off the light.
        sentAt:
          $ref: "#/components/schemas/sentAt"
    dimLightPayload:
      type: object
      properties:
        percentage:
          type: integer
          description: Percentage to which the light should be dimmed to.
          minimum: 0
          maximum: 100
        sentAt:
          $ref: "#/components/schemas/sentAt"
    sentAt:
      type: string
      format: date-time
      description: Date and time when the message was sent.

  securitySchemes:
    saslScram:
      type: scramSha256
      description: Provide your username and password for SASL/SCRAM authentication
    streetlights_auth:
      type: oauth2
      description: The oauth security descriptions
      flows:
       clientCredentials:
        tokenUrl: 'https://example.com/api/oauth/dialog'
        scopes:
          streetlights:read: Scope required for subscribing to channel
          streetlights:write: Scope required for publishing to channel

  parameters:
    streetlightId:
      description: The ID of the streetlight.
      schema:
        type: string

  messageTraits:
    commonHeaders:
      headers:
        type: object
        properties:
          my-app-header:
            type: integer
            minimum: 0
            maximum: 100

  operationTraits:
    kafka:
      bindings:
        kafka:
          clientId:
            type: string
            enum: ['my-app-id']
`;

function Asyncapi() {
  const [document, setDocument] = useState(undefined);

  useEffect(() => {
    const parser = (window as any)['AsyncAPIParser'];
    const fetchData = async () => setDocument(await parser.parse(asyncAPIDocument));
    fetchData().catch(console.error);
  }, []);

  let node;
  if (document !== undefined) {
    node = (
      <ApplicationView asyncapi={{ document }} edgeType={'animated'} />
    );
  } else {
    node = <h1>Wait...</h1>;
  }
  
  return (
    <div className="App">{node}</div>
  );
}

export default Asyncapi;