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.

Namespace: Tesserae
Implements: IComponent, IHasMarginPadding

Constructors

Name	Description
UptimeBars	Initializes a new instance of this class.

Constructor

UptimeBars

public UptimeBars()

Initializes a new instance of this class.

Properties

Name	Description
Margin	Gets or sets the CSS margin of the component.
Padding	Gets or sets the CSS padding of the component.

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

Name	Description
Items	Adds the given items to the component.
Compact	Renders the component in a compact form.
Render	Renders the component's root HTML element.

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.

Namespace: Tesserae
Implements: IComponent, IHasMarginPadding

Constructors

Name	Description
UptimeCalendar	Initializes a new instance of this class.

Constructor

UptimeCalendar

public UptimeCalendar(string title, string subtitle)

Initializes a new instance of this class.

Properties

Name	Description
Margin	Gets or sets the CSS margin of the component.
Padding	Gets or sets the CSS padding of the component.

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

Name	Description
Items	Adds the given items to the component.
Render	Renders the component's root HTML element.

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 UptimeBars and UptimeCalendar.

Namespace: Tesserae

Samples

Last 90 days uptime

uptime-sample.cs

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.cs

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.cs

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