Giter Club home page Giter Club logo

asyncapi-metrics-dashboard's Introduction

AsyncAPI Metrics Dashboard

This Next.js 14 application parses AsyncAPI metrics from New Relic and displays them for relevant Working Groups, providing a dashboard for viewing metrics. It employs a Static Site Generation (SSG) model, pre-rendering pages at build time, and updates the data only once daily to ensure optimal performance.

Getting Started

  1. Clone the repository:

    git clone https://github.com/Amzani/asyncapi-metrics-dashboard.git
  2. Install dependencies:

    npm install
  3. Configure New Relic credentials: Create a .env.local file in the project root directory and add the following:

    NEW_RELIC_USER_API_KEY
    NEW_RELIC_ENDPOINT
    NEW_RELIC_ACCOUNT_ID
    
  4. Run the development server:

    npm run dev
  5. Access the dashboard: The application will be accessible at http://localhost:3000

Features

  • Parses AsyncAPI metrics from New Relic
  • Groups metrics for relevant datasets
  • Displays metrics in a user-friendly dashboard
  • Static Site Generation (SSG): Pages are pre-rendered for faster load times.
  • Daily Data Updates: Ensures data freshness while maintaining performance.

Tech Stack

  • Next.js 14
  • New Relic API
  • React
  • Tremor (@tremor/react)
  • Tailwind CSS

asyncapi-metrics-dashboard's People

Contributors

amzani avatar khudadad414 avatar

Stargazers

Pedro Ramos avatar

Watchers

 avatar  avatar

Forkers

khudadad414

asyncapi-metrics-dashboard's Issues

Create Metrics Dashboard

Problem

We aim to provide a dashboard for monitoring our Developer Experience (DX) metrics, which should be collected in asyncapi/community#879

Solution

The dashboard must have the capability to showcase Developer Experience Working group metrics and enable other working groups to add their respective metrics.

  • Time to first API Design
  • System errors
  • Validation errors
  • Time to fix a validation error
  • Number of created AsyncAPI files
  • AsyncAPI 3.0x Adoption

Look & Feel

Screenshot 2024-02-15 at 16 28 29

Link to Figma

Where do we get metrics:

This initiative focuses on the CLI metrics

Definition of metrics

Time to first API Design

It's the time between the creation of a new AsyncAPI file and generation (doc, code...) for a specific user.

 asyncapi generate - asyncapi new file

System errors

Refer to any issue or malfunction of our tools that are not generated by the user (eg. validation errors).
Example: asyncapi/cli#1137

Validation errors

Errors from asyncapi validate

Time to fix a validation error

The delta between a failing validation and successful validation.

 asyncapi validate (success) - asyncapi validate (error)

Number of created AsyncAPI File

From asyncapi new file

AsyncAPI 3.0x Adoption

We can parse the version when a user triggers asyncapi validate

Tech stack

Note: This is a suggestion! anything else relevant with a valid argument can work as well.

Rabbit holes

  1. Assurance in the Metrics Collection:

    • Due to the pending merge of asyncapi/community#879, uncertainty surrounds whether we'll have the required metrics in time. To proactively address this risk, let's proceed without being blocked and develop using mocked data.
  2. Rate Limit Consideration for New Relic API:

    • Should we opt to construct our own component rather than relying on NewRelic widgets, it's imperative that the backend incorporates a caching mechanism. Refer to [this discussion]((asyncapi/community#879 (comment)) for more details.

Scope

Out of bounds

  • We show only Developer Experience (DX) metrics

Success criteria

  • The dashboard should be accessible to the public either through the website or a designated URL such as metrics.asyncapi.com.
  • Maintainers need to have a clear understanding of the metrics presented on the dashboard.

Metrics readiness

Related to #1

  • Time to first API Design
  • System errors
  • Validation errors
  • Time to fix a validation error
  • Number of created AsyncAPI files
  • AsyncAPI 3.0x Adoption

The Problem with New Relic aggregating timestamps

Problem

New Relic's 1-hour raw aggregation limit on timestamps prevents us from accurately tracking metrics like "Time To First API Design" and "Time To Fix a Validation Error" over a 3-month period.

1)The query will round older data, leading to inaccurate results for these metrics.
2) We can't use the TIMESERIES feature to request historical data.

Possible Solutions

  1. Extend the query time: Using the RAW query modifier to access unaggregated data for up to 2 days.
  2. Implement Local Caching: Implement a local caching system to store data for these specific metrics for 3 months.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.