JavaScript Widget

Sometimes an OpenAI service can be down. You can visit https://status.openai.com/ to see the latest status updates for each individual area of OpenAI such as ChatGPT and the API.

If you create an application that relies on OpenAI and OpenAI goes down, it might be a good idea to inform your users that the service is having issues. One approach towards doing this in a web application environment is to create a widget using JavaScript.

At first I was going to try and create a widget on my own, but I’m glad I asked ChatGPT to help first. My main concern was trying to find a way to get the current status of the OpenAI services programmatically. ChatGPT not only provided me with ways to obtain the status information I was looking for but helped me write a widget from scratch using only JavaScript.

Here is the beginning of my conversation using ChatGPT-4

You

is there a way for me to programmatically know the current status of openai api that’s displayed on the status.openai.com site?

ChatGPT

Yes, you can programmatically access the current status of the OpenAI API as displayed on the status.openai.com site using various API endpoints. Here are a few key endpoints you can use:

Summary Endpoint: This provides a summary of the status page, including a status indicator, component statuses, unresolved incidents, and any upcoming or in-progress scheduled maintenances. The endpoint is https://status.openai.com/api/v2/summary.json.

Status Endpoint: This endpoint gives you the status rollup for the whole page, including an indicator (none, minor, major, or critical) and a description of the blended component status. The endpoint is https://status.openai.com/api/v2/status.json.

Components Endpoint: This endpoint lists all the components of the page along with their statuses, which can be operational, degraded performance, partial outage, or major outage. The endpoint is https://status.openai.com/api/v2/components.json.

These endpoints can be accessed using standard HTTP requests, making it easy to integrate into various programming environments.

You

that’s exactly what i needed, how do i figure out what all of the status values are, not just for the page overall but for each component

ChatGPT

I did a quick search and here’s what I discovered.

To understand the status values for each component of the OpenAI API, you can refer to the following information:

Component Status Values: Each component listed on the OpenAI status page can have one of the following statuses:

operational

degraded_performance

partial_outage

major_outage These values represent the current operational status of each component. You can access this information through the components endpoint: https://status.openai.com/api/v2/components.json.

Incident Status Values: Incidents, which are significant events affecting the status, usually go through a progression of statuses, which include:

Investigating

Identified

Monitoring

Resolved

Postmortem The impact of these incidents is also classified as None (black), Minor (yellow), Major (orange), or Critical (red).

These status values provide a comprehensive view of the health and performance of the OpenAI API components and can be used for monitoring and alerting purposes in your applications.

You

create me a javascript widget that shows the current status of the API and GPT components. i want to be able to refence this widget by linking to a .js file. the widget should float on the bottom right of the page and should be color coded for the status, red amber or green for each of the two components. provide me the js and i will create the .js file.

After some back and forth, I ended up with some really great JavaScript code. You can copy this into a .js file and create the widget yourself!

Note: this script utilizes jQuery.

$(document).ready(function() {
    var componentsToShow = [];

    // Iterate over all script tags to find the specific JS file
    $('script').each(function() {
        var src = $(this).attr('src');
        if (src && src.includes('openaistatus.min.js')) {
            var urlParams = new URL(src, window.location.href).searchParams;
            componentsToShow = urlParams.get('components') ? urlParams.get('components').toLowerCase().split(',') : [];
            return false; // Break the loop
        }
    });

    // Function to determine color based on status
    function getStatusColor(status) {
        switch(status) {
            case "operational": return "green";
            case "degraded_performance": return "yellow";
            case "partial_outage": return "orange";
            case "major_outage": return "red";
            default: return "grey";
        }
    }

    // Function to create a status box with tooltip
    function createStatusBox(status, name, tooltip) {
        var color = getStatusColor(status);
        var statusStyle = 'width: 100px; height: 30px; border-radius: 4px; background-color: ' + color + '; margin: 0 5px; display: flex; align-items: center; justify-content: center; color: white;';
        return '' + name + '';
    }

    // Fetch and display status information
    $.getJSON("https://status.openai.com/api/v2/components.json", function(data) {
        data.components.forEach(function(component) {
            if (componentsToShow.includes(component.name.toLowerCase())) {
                var status = component.status;
                var tooltipText = component.name + " Status: " + status + "\nLast Modified: " + component.updated_at + "\nDescription: " + (component.description || "N/A");
                $("#statusWidget").append(createStatusBox(status, component.name, tooltipText));
            }
        });
    });

    // Add the floating status widget container with modern styling
    var widgetStyle = 'position: fixed; bottom: 10px; right: 10px; background-color: #fff; border: 1px solid #ddd; padding: 10px; z-index: 1000; font-family: Arial, sans-serif; border-radius: 8px; display: flex; cursor: pointer;';
    $("body").append('');

    // Open the status page in a new window on click
    $("#statusWidget").click(function() {
        window.open("https://status.openai.com", "_blank");
    });
});

I took the code, created a .js file, and deployed the widget to the a web application. Here it is implemented on the MetroShareGPT site. Note that the current status for the OpenAI API is green 👍

Now the user will know if the OpenAI service is not currently functioning and whether or not to expect an interruption in service. You can link to the JavaScript file you create in your own page using a script tag.

<script src="~/js/openaistatus.min.js?components=api"></script>

Notice the components parameter in the query string of the script tag. There are 4 components: API, ChatGPT, Labs, and Playground. Update your script tag and include the components as necessary.

When the status of the API changes, I will try to capture an updated screen shot of the widget in action.

UPDATE

13-Feb-2024

I’ve captured images of the widget being activated during an OpenAI outage. Here are screen shots from the MetroShareGPT website that hosts the widget and the OpenAI website that displays outage details.

Leave a Reply Cancel reply