DEV Community: Tarun Kumar

Grafana with JSON API

Tarun Kumar — Fri, 27 Oct 2023 12:49:07 +0000

Introduction

Grafana is an open-source, composable observability and data visualization platform. It empowers users to effortlessly query, visualize, alert on, and gain insights from their metrics, regardless of where they are stored.

One of the notable strengths of Grafana is its extensive support for various data sources, including but not limited to Prometheus, Loki, Elasticsearch, InfluxDB, Postgres, and data fetched from APIs. This wide range of compatibility ensures that users can seamlessly integrate their preferred data sources into Grafana.

Grafana is renowned for its visually appealing and informative dashboards, which enable users to visualize metrics, logs, and traces from multiple sources simultaneously. These dashboards can be dynamic and reusable, fostering a collaborative and data-driven culture within teams. Sharing dashboards with other team members is effortless, promoting effective collaboration and knowledge sharing.

Among the key features offered by Grafana are comprehensive data visualization capabilities, customizable dashboards, robust alerting mechanisms, efficient data exploration tools, and the ability to combine data from various sources. These features empower users to gain valuable insights and make informed decisions based on their data.

While there are numerous online resources available discussing the utilization of popular data sources like InfluxDB or Postgres databases, there is a lack of comprehensive guides or informative posts explaining the correct usage of a JSON API. To address this gap, this blog post aims to provide a practical demonstration of effectively utilizing the JSON API Datasource in Grafana. The U.S. BUREAU OF LABOR STATISTICS' Public data source will serve as an illustrative example throughout the post. For more detailed information on the BLS public data API, please refer to the official documentation available at https://www.bls.gov/developers/api_signature_v2.htm.

JSON API

The Grafana JSON API is a data source plugin that allows you to query arbitrary JSON endpoints and parse the response into Grafana dataframes. This makes it possible to use Grafana to visualize data from a wide range of sources, including third-party APIs, custom data sources, and even log files. For more detailed information on the JSON API, please refer to the official documentation available at https://grafana.github.io/grafana-json-datasource.

Start with Grafana to begin using JSON API Plugin

To access Grafana, launch your preferred web browser and navigate to the default Grafana port at http://localhost:3000/.

To proceed further, access the Grafana Toggle Menu or Hemberger Menu and locate the connection option. Within the connection section, select the Add New Connection feature. Utilize the search box to locate the JSON API Plugin as demonstrated in the image below, and select it to proceed.

Please proceed with the installation of the JSON API Data Source Plugin by clicking on the 'install' button.

After installation, a new option called "Add new data source" will be presented. Simply click on this option to proceed.

Provide any text in the name field. I have entered BLSPublicData for Reference. Locate the Url field and insert the following JSON API URL: https://api.bls.gov/publicAPI/v2/timeseries/data/. (The URL can be found at Shingle Series section of BLS Public Data API https://www.bls.gov/developers/api_signature_v2.htm). Proceed to click on the Save & Test button, as demonstrated in the image provided below.

The Save & Test button's execution time may vary depending on the internet connection. After execution, an error will be thrown indicating "JSON API: Method Not Allowed". However, there is no need to be concerned as this error will be rectified once we provide the appropriate Payload to the API at a later stage.

Select the option 'Build Dashboard' depicted in the image below.

Select BLSPublicData as the data source, resulting in the creation of a fresh panel within a newly generated dashboard, subsequently leading to the navigation into edit mode.

This is the appearance of the panel while in edit mode. If you observe any sample data within the panel, Click the refresh button to begin with a clean slate.

Navigate to the Query Tab and locate the "A" section. Within this section, click on the "Path" tab and insert "/LAUCN040010000000005" as the payload in the GET API.

Please proceed to the "Fields" tab and input "$.Results" as directed. Once you enter, you can begin observing the data in panel view.

To view the data for "year", input "$.Results.series[].data[].year" and click enter.

For additional data, simply click on the "+" button to add a new field and enter the required details as illustrated in the image below.

Click on the apply button to display the ultimate outcome in the panel on the dashboard.

Conclusion
The JSON API Plugin proves to be an invaluable tool for users who require real-time visualization of server data without the need for local or remote database storage. This ensures that the data retrieved is always current, allowing for further analysis to be conducted based on the latest information to meet any business needs.

Stacking of Pop-Up Notification in WPF

Tarun Kumar — Sun, 21 May 2023 06:00:05 +0000

Introduction

The pop-up notification (or toast, desktop notification, notification bubble, or simply notification) is a graphical control element that communicates certain events to the user without forcing them to react to this notification immediately, unlike conventional pop-up windows. Desktop notifications usually disappear automatically after a short amount of time with or without any user intervention.

As a dotnet developer, you may have found yourself in need of displaying one or many such toast notifications in your application to communicate to user or make user aware in many cases not limited to
1) Success/Fail response to an action.
2) Internet connected/disconnected.
3) Battery about to die etc.

In this blog post, I will show you how to create a stacking of simple pop up notification and these notification will disappear automatically after a short time in WPF.

Project setup

To get started, we'll create a separate WPF user control library for our Custom Notification Controls. This will allow us to reuse the control in different projects without having to write the same code over and over again.
Here are the steps to create a WPF user control library in Visual Studio:

Open Visual Studio and create a new project.
In the New Project dialog box, select WPF User Control Library and click Next.
Give your project a name ex."NotificationControls" and click Next.
Select the dotnet version and click Create.

Designing the Notification Controls

To start with, lets create a simple usercontrol and named it NotificationView and add below code.

In the XAML file, we have 'StackPanel' to hold an Image to show icons for kinds (Success, Information, Warning etc.) and a Textblock to hold message.

NotificationView.xaml

<UserControl x:Class="NotificationControls.NotificationView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:NotificationControls"
             xmlns:draw="clr-namespace:System.Drawing;assembly=System.Drawing.Common"
             mc:Ignorable="d" 
             x:Name="notificationView">
    <UserControl.Resources>
        <local:IconToImageSourceConverter x:Key="IconToImageSourceConverter"/>
    </UserControl.Resources>
    <StackPanel Orientation="Horizontal">
        <Image Source="{Binding ElementName=notificationView, Path=IconKind, Converter={StaticResource IconToImageSourceConverter}, Mode=OneWay}" Width="25" Height="25"/>
        <TextBlock Margin="2 0" Grid.Column="1" TextWrapping="WrapWithOverflow" Text="{Binding ElementName=notificationView, Path=Message}"
                   VerticalAlignment="Center" HorizontalAlignment="Left"/>
    </StackPanel>
</UserControl>

In the NotificationControls.xaml.cs code behind file, Dependency Property is used to exposed property to external world and for binding.

NotificationView.xaml.cs

using System;
using System.Drawing;
using System.Threading.Tasks;
using System.Threading;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Threading;

namespace NotificationControls
{
    /// <summary>
    /// Interaction logic for Notification.xaml
    /// </summary>
    public partial class NotificationView : UserControl
    {
        // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty IconKindProperty =
            DependencyProperty.Register(nameof(IconKind), typeof(Icon), typeof(NotificationView), new PropertyMetadata(SystemIcons.Error));

        // Using a DependencyProperty as the backing store for Message.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty MessageProperty =
            DependencyProperty.Register(nameof(Message), typeof(string), typeof(NotificationView), new PropertyMetadata(string.Empty));

        public NotificationView()
        {
            InitializeComponent();
            Loaded += NotificationView_Loaded;
        }

        public event Action Closed;

        private void NotificationView_Loaded(object sender, RoutedEventArgs e)
        {
            var task = Task.Delay(TimeSpan.FromSeconds(5));
            _ = task.ContinueWith(t => Application.Current.Dispatcher.BeginInvoke(DispatcherPriority.Normal, () => Closed?.Invoke()));
        }

        public Icon IconKind
        {
            get { return (Icon)GetValue(IconKindProperty); }
            set { SetValue(IconKindProperty, value); }
        }

        public string Message
        {
            get { return (string)GetValue(MessageProperty); }
            set { SetValue(MessageProperty, value); }
        }
    }
}

Since the Image has Binding associated with Dependency property IconKind which is of type System.Drawing.Icon, An "IconToImageSourceConverter" converter is used to convert icon to image source.

IconToImageSourceConverter.cs

public class IconToImageSourceConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var icon = value as Icon;
            if (icon == null)
                return null;

            ImageSource imageSource = Imaging.CreateBitmapSourceFromHIcon(
                icon.Handle,
                Int32Rect.Empty,
                BitmapSizeOptions.FromEmptyOptions());
            return imageSource;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return DependencyProperty.UnsetValue;
        }
    }

With all the above, we have successfully create a notification control which can display a notification with an type and a message.

Example, Error notification with message "Error occured, Please try again!" and IconKind as SystemIcons.Error, will display as below

To let notification disappear after a short time (For this example, lets keep this to 5 seconds), A loaded event is subscribe and Task.Delay(TimeSpan.FromSeconds(5)) is used to wait for 5 second and then invoke close event.

Now, It is time to stack one or many notification in control and allow them to disappear after 5 second. To achieve this, Create a class with name StackedNoifications and derive it from StackPanel Control class. Now, add the below code to the StackedNoifications class.

using NotificationControls;
using System;
using System.Linq;
using System.Windows;
using System.Windows.Controls;

namespace CompanionWindows.Views.Controls
{
    public class StackedNoifications : StackPanel
    {
        // Using a DependencyProperty as the backing store for Message.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty NotificationMessageProperty =
            DependencyProperty.Register(nameof(NotificationMessage), typeof(Notification),
                typeof(StackedNoifications), new PropertyMetadata(null, OnMessageChanged));

        public Notification NotificationMessage
        {
            get => (Notification)GetValue(NotificationMessageProperty);
            set => SetValue(NotificationMessageProperty, value);
        }
        private static void OnMessageChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            try
            {
                var stackednotification = (StackedNoifications)d;
                if (e.NewValue is Notification newMessage)
                {
                    stackednotification.Push(newMessage);
                }
            }
            catch (Exception)
            {
                // ignore
            }
        }

        private NotificationView CreateNotificationView(Notification newMessage)
        {
            var view = new NotificationView
            {
                Message = newMessage.Message,
                Margin = new Thickness(0, 0, 0, 8),
                IconKind = newMessage.IconKind
            };

            return view;
        }

        private void Push(Notification newMessage)
        {
            var alertPopupViews = Children.OfType<NotificationView>().ToList();

            if (!alertPopupViews.Any(v => v.Message == newMessage.Message))
            {
                var notificationView = CreateNotificationView(newMessage);
                notificationView.Closed += () => Pop(notificationView);

                Children.Add(notificationView);
            }
        }
        public void Pop(NotificationView view) => Children.Remove(view);
    }
}

The StackedNoifications has dependency property NotificationMessage which has implemented PropertyChangedCallback

The PropertyChangedCallback that is invoked when the effective property value of a dependency property changes which is used to push new messages to stack panel.

Once all code are in placed, The final result would be

Conclusion

With these elements and classes in place, we can create a fully functional custom notification control which is capable of communicating certain events to the user without forcing them to react to this notification immediately in WPF.