Tesserae - Uptime

Uptime

Description

The Uptime component is part of the Tesserae UI library.

Displays system status over time using colored segments and month grids.

API reference

class

UptimeBars

public class UptimeBars : IComponent, IHasMarginPadding

A horizontal series of small status bars showing per-period uptime / availability over a time window.

Constructors

Constructor

UptimeBars

public UptimeBars()

Initializes a new instance of this class.

Properties

Property

UptimeBars.Margin

public string Margin { get ; set ; }

Gets or sets the CSS margin of the component.

Property

UptimeBars.Padding

public string Padding { get ; set ; }

Gets or sets the CSS padding of the component.

Methods

Method

UptimeBars.Items

public UptimeBars Items(IEnumerable<(UptimeStatus status, IComponent tooltipContent)> items)

Adds the given items to the component.

Method

UptimeBars.Compact

public UptimeBars Compact()

Renders the component in a compact form.

Method

UptimeBars.Render

public HTMLElement Render()

Renders the component's root HTML element.

class

UptimeCalendar

public class UptimeCalendar : IComponent, IHasMarginPadding

A calendar-grid visualisation of daily uptime / availability over a multi-month window.

Constructors

Constructor

UptimeCalendar

public UptimeCalendar(string title, string subtitle)

Initializes a new instance of this class.

Properties

Property

UptimeCalendar.Margin

public string Margin { get ; set ; }

Gets or sets the CSS margin of the component.

Property

UptimeCalendar.Padding

public string Padding { get ; set ; }

Gets or sets the CSS padding of the component.

Methods

Method

UptimeCalendar.Items

public UptimeCalendar Items(IEnumerable<(UptimeStatus status, IComponent tooltipContent)> items)

Adds the given items to the component.

Method

UptimeCalendar.Render

public HTMLElement Render()

Renders the component's root HTML element.

enum

UptimeStatus

public enum UptimeStatus

Predefined statuses (up, down, degraded, unknown) used by and .

Samples

Last 90 days uptime

uptime-sample.js

using System;
using System.Collections.Generic;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var barsItems = new List<(UptimeStatus, IComponent)>();
            for (int i = 0; i < 90; i++)
            {
                var status = GetRandomStatus();
                barsItems.Add((status, GetTooltip(status, i)));
            }

            var component = UptimeBars().Items(barsItems);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }

        private static UptimeStatus GetRandomStatus()
        {
            var r = Math.Random();
            if (r > 0.95) return UptimeStatus.Major;
            if (r > 0.90) return UptimeStatus.Minor;
            if (r > 0.85) return UptimeStatus.Maintenance;
            return UptimeStatus.Operational;
        }

        private static IComponent GetTooltip(UptimeStatus status, int daysAgo)
        {
            var date = DateTime.Today.AddDays(-daysAgo).ToShortDateString();
            return Raw(
                Div(_("tss-uptime-tooltip-content"),
                    Stack().Children(
                        TextBlock(date).SemiBold(),
                        TextBlock(status.ToString()).Small()
                    ).Render()
                )
            );
        }
    }
}

Service Uptime (compact view)

uptime-2-sample.js

using System;
using System.Collections.Generic;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var barsItems = new List<(UptimeStatus, IComponent)>();
            for (int i = 0; i < 90; i++)
            {
                var status = GetRandomStatus();
                barsItems.Add((status, GetTooltip(status, i)));
            }

            var component = UptimeBars().Compact().Items(barsItems);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }

        private static UptimeStatus GetRandomStatus()
        {
            var r = Math.Random();
            if (r > 0.95) return UptimeStatus.Major;
            if (r > 0.90) return UptimeStatus.Minor;
            if (r > 0.85) return UptimeStatus.Maintenance;
            return UptimeStatus.Operational;
        }

        private static IComponent GetTooltip(UptimeStatus status, int daysAgo)
        {
            var date = DateTime.Today.AddDays(-daysAgo).ToShortDateString();
            return Raw(
                Div(_("tss-uptime-tooltip-content"),
                    Stack().Children(
                        TextBlock(date).SemiBold(),
                        TextBlock(status.ToString()).Small()
                    ).Render()
                )
            );
        }
    }
}

Service Uptime History

uptime-3-sample.js

using System;
using System.Collections.Generic;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = Grid(1.fr(), 1.fr(), 1.fr()).Gap(16.px()).Children(
                UptimeCalendar("July 2024", "99.8%").Items(GetCalendarItems(90)),
                UptimeCalendar("August 2024", "98.1%").Items(GetCalendarItems(60)),
                UptimeCalendar("September 2024", "100%").Items(GetCalendarItems(30))
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }

        private static IEnumerable<(UptimeStatus, IComponent)> GetCalendarItems(int startDaysAgo)
        {
            var calItems = new List<(UptimeStatus, IComponent)>();
            for (int i = 0; i < 30; i++)
            {
                var status = GetRandomStatus();
                calItems.Add((status, GetTooltip(status, startDaysAgo - i)));
            }
            for (int i = 0; i < 5; i++)
            {
                calItems.Add((UptimeStatus.Future, null));
            }
            return calItems;
        }

        private static UptimeStatus GetRandomStatus()
        {
            var r = Math.Random();
            if (r > 0.95) return UptimeStatus.Major;
            if (r > 0.90) return UptimeStatus.Minor;
            if (r > 0.85) return UptimeStatus.Maintenance;
            return UptimeStatus.Operational;
        }

        private static IComponent GetTooltip(UptimeStatus status, int daysAgo)
        {
            var date = DateTime.Today.AddDays(-daysAgo).ToShortDateString();
            return Raw(
                Div(_("tss-uptime-tooltip-content"),
                    Stack().Children(
                        TextBlock(date).SemiBold(),
                        TextBlock(status.ToString()).Small()
                    ).Render()
                )
            );
        }
    }
}

Uptime

Description

API reference

Constructors

UptimeBars

Properties

UptimeBars.Margin

UptimeBars.Padding

Methods

UptimeBars.Items

UptimeBars.Compact

UptimeBars.Render

Constructors

UptimeCalendar

Properties

UptimeCalendar.Margin

UptimeCalendar.Padding

Methods

UptimeCalendar.Items

UptimeCalendar.Render

Samples

Last 90 days uptime

Service Uptime (compact view)

Service Uptime History

See also