Apache Traffic Control - Migrating Grafana scripted CDN metrics dashboards to Scenes: a seamless transition

The Anh Nguyen — Sat, 09 Mar 2024 09:21:05 +0000

The landscape of data visualization is continuously evolving, and staying current with the latest tools and best practices is crucial. Grafana, a widely-used open-source analytics and monitoring platform, consistently leads with innovative features and enhancements. A significant development is the launch of Grafana Scenes, a potent new tool for creating dynamic dashboard experiences.

What is Grafana Scenes?

Grafana Scenes is a new frontend library that enables developers to create dashboard-like experiences — such as querying and transformations, dynamic panel rendering, and time ranges — directly within their Grafana application plugins.

Grafana Scenes first introduced with the launch of Grafana 10 at GrafanaCON 2023.

Why Migrate to Grafana Scenes?

Context

Apache Traffic Control (ATC), an open-source CDN implementation, currently utilizes deprecated scripted dashboards written in pure JavaScript to visualize CDN metrics (bandwidth, connections, TPS, …) and server metrics (CPU, memory, …). (Reference: https://github.com/grafana/grafana/issues/24059)

Migrating existing scripted dashboards to Grafana Scenes offers several advantages, including:

Future-Proof Compatibility: By adopting Scenes, ATC ensures compatibility with upcoming Grafana updates. Maintaining compatibility with newer versions becomes effortless as Grafana evolves.
Enhanced Performance: Scenes are architected for superior efficiency and lower weight compared to scripted dashboards. This translates to faster loading times and a smoother user experience, especially for complex dashboards.
Greater Flexibility: Scenes grant developers access to a wider array of customization options and features. From interactive components to advanced layout controls, Scenes empower the ATC community to create richer and more engaging dashboards.
Thriving Community Support: As Scenes gain momentum within the Grafana community, ATC contributors can leverage a growing pool of resources, tutorials, and plugins dedicated to enhancing Scenes functionality. Migrating to Scenes ensures access to this expanding ecosystem for collaboration and support.

Exploring the UI of Grafana Scenes:

The Codebase

The Grafana Scenes code for ATC is available on GitHub: https://github.com/apache/trafficcontrol/tree/master/traffic_stats/trafficcontrol-scenes

Pull Request for Reference

The pull request details the migration process: https://github.com/apache/trafficcontrol/pull/7927

Code Snippets

Here are the code structure of TrafficControl Grafana Scenes and some basic code snippets to showcase Grafana Scenes implementation:



import {
    EmbeddedScene,
    QueryVariable,
    SceneControlsSpacer,
    SceneFlexItem,
    SceneFlexLayout,
    SceneRefreshPicker,
    SceneTimePicker,
    SceneTimeRange,
    SceneVariableSet,
    VariableValueSelectors,
} from "@grafana/scenes";
import { INFLUXDB_DATASOURCES_REF } from "const";

import { getBandwidthPanel } from "./panels/bandwidth";
import { getConnectionsPanel } from "./panels/connections";

/**
 * Function to get the cache group scene.
 *
 * @returns The embedded scene representing the cache group.
 */
export function getCacheGroupScene(): EmbeddedScene {
    const timeRange = new SceneTimeRange({
        from: "now-6h",
        to: "now",
    });

    const cachegroup = new QueryVariable({
        datasource: INFLUXDB_DATASOURCES_REF.cacheStats,
        name: "cachegroup",
        query: 'SHOW TAG VALUES ON "cache_stats" FROM "monthly"."bandwidth" with key = "cachegroup"',
    });

    return new EmbeddedScene({
        $timeRange: timeRange,
        $variables: new SceneVariableSet({
            variables: [cachegroup],
        }),
        body: new SceneFlexLayout({
            children: [
                new SceneFlexItem({
                    body: getBandwidthPanel(),
                    minHeight: 300,
                }),
                new SceneFlexItem({
                    body: getConnectionsPanel(),
                    minHeight: 300,
                }),
            ],
            direction: "column",
        }),
        controls: [
            new VariableValueSelectors({}),
            new SceneControlsSpacer(),
            new SceneTimePicker({isOnCanvas: true}),
            new SceneRefreshPicker({
                intervals: ["5s", "1m", "1h"],
                isOnCanvas: true,
            }),
        ],
    });
}

To make Grafana work, you need to add some data sources and information about the traffic control scenes app during provisioning.

Conclusion

Migrating ATC's CDN metric dashboards to Grafana Scenes empowers developers with a modern, performant, and future-proof visualization solution. This shift unlocks access to a thriving community and a vast array of features to craft exceptional dashboards. By leveraging Scenes, ATC can streamline development and deliver an enhanced user experience for CDN metric visualization.

Explore Grafana Scenes documentation: https://grafana.com/blog/2023/08/03/new-in-grafana-10-grafana-scenes-for-building-dynamic-dashboarding-experiences/

Contribute to the ATC project: https://github.com/apache/trafficcontrol

UI package: Gather user feedback in your React apps

The Anh Nguyen — Sun, 04 Feb 2024 18:19:34 +0000

I spent the weekend diving into publishing an npm package that I'm thrilled to introduce: react-user-feedback. If you're a React/FE developer, you know the importance of collecting user feedback to continually improve your applications.

react-user-feedback is an npm package I created that provides a <UserFeedback/> React UI component powered by the dynamic combination of TailwindCSS, shadcn/ui, zod and react-hook-form.

Now it’s time to get started:

1. Install the NPM package



npm install @ntheanh201/react-user-feedback

2. Import the component and stylesheet

You can render the component globally or have the component be scoped to a specific page.



import UserFeedback from "@ntheanh201/react-user-feedback";

// tailwindcss, shadcn/ui
import "@ntheanh201/react-user-feedback/dist/styles.css";

function App() {
  return (
        <UserFeedback
          disabled={false}
          allowImage={true}
          feedbackTypes={[
            { value: "general", label: "General" },
            { value: "bug", label: "Bug" },
            { value: "idea", label: "Idea" },
          ]}
          onSubmit={(values, onError) => {
            console.log("values: ", values);
          }}
        />
  );
}

3. Collect valuable feedback

That's it! One more step is that you need to send the feedback to your server and you're ready to gather user feedback efficiently and effectively in your React application.

Enjoy the benefits of react-user-feedback and elevate your development process.

I created it to solve a personal problem as a hobby developer. I hope you find the package helpful. If you wanna contribute to this package, feel free to check: https://github.com/ntheanh201/react-user-feedback#contributing