suave F# api using hyperscript, Suave and Feliz.ViewEngine to check and reload data from server at a regular interval

checkApiStatusServerHyperScript.fsx

#r "nuget:FSharp.Data"
//#r "nuget:Plotly.NET"
#r "nuget:Feliz.ViewEngine"
#r "nuget:Suave"
open FSharp.Data
//open Plotly.NET
open Feliz.ViewEngine
open Suave
open Suave.Filters
open Suave.Operators
open Suave.Successful

// Define JSON providers for Slack, Bitbucket, and Atlassian APIs
type SlackStatusCheckProvider = JsonProvider<"https://status.slack.com/api/v2.0.0/current">
type BitbucketStatusCheckProvider = JsonProvider<"https://bqlf8qjztdtr.statuspage.io/api/v2/status.json">
type AtlassianStatusCheckProvider = JsonProvider<"https://status.atlassian.com/api/v2/status.json">

// Function to get the service status (UP or DOWN)
let okStatuses = [ "ok"; "operational" ]
let isServiceUp (status: string) =
    match okStatuses |> Seq.tryFind (fun ok -> status.ToLower().Contains(ok)) with 
    |Some(ok) ->  true
    |None -> false


let getCurrentStatuses () =
    // Load status data for each service
    let slackStatus = SlackStatusCheckProvider.Load("https://status.slack.com/api/v2.0.0/current")
    let bitbucketStatus = BitbucketStatusCheckProvider.Load("https://bqlf8qjztdtr.statuspage.io/api/v2/status.json")
    let atlassianStatus = AtlassianStatusCheckProvider.Load("https://status.atlassian.com/api/v2/status.json")


    // Get service status for each service
    let slackStatusStr = isServiceUp slackStatus.Status
    let bitbucketStatusStr = isServiceUp bitbucketStatus.Status.Description
    let atlassianStatusStr = isServiceUp atlassianStatus.Status.Description

    // get the service statuses
    [
        "Slack", slackStatusStr
        "Bitbucket", bitbucketStatusStr
        "Atlassian", atlassianStatusStr
    ]

let js s = s
let css s = s

// https://marketplace.visualstudio.com/items?itemName=alfonsogarciacaro.vscode-template-fsharp-highlight
let jsScript = 
    js """
    function reload()
    {
        window.location.reload();
    };
    """


let myCss = 
    css """
    .blue {
        color: blue;
        font-size: large;
        background-color: green;
    }
    """

let loopInSeconds = 30

let renderView statuses =

    let body = [
        Html.h1 "IS IT UP?"
        Html.section [
            Html.div [
                prop.custom ("_", 
                    $"on load repeat until event stop wait {loopInSeconds}s send updt to up wait 100ms and call reload()")
            ]
            Html.div [
                prop.text "Updates:"
                prop.id "up"
                prop.children [
                    for service,isUp in statuses do
                        let status = if isUp then "UP" else "DOWN"
                        Html.p $"{service}: is {status}"
                ]
                prop.custom ("_","on updt toggle .blue on me")
            ]
        ]
    ]

    Html.html [
        Html.head [
            Html.title "F# ♥ Htmx"
            Html.script [ prop.src "https://unpkg.com/htmx.org@1.6.0" ]
            Html.script [ prop.src "https://unpkg.com/hyperscript.org@0.9.11" ]
            Html.script [
                prop.text jsScript
            ]
            Html.style myCss
            Html.meta [ prop.charset.utf8 ]
        ]
        Html.body body
    ]
    |> Render.htmlView


let server = 
    path "/" >=> 
        GET  >=> OK (getCurrentStatuses () |> renderView)

startWebServer defaultConfig server