Issue Status
Simple, modern and flexible status page
Issue Status is the static client-side status page built on React using GitHub Issues for Component and Incident reporting with live updating using the GitHub API, there is no need to rebuild and redeploy for every update. All hosted on GitHub Pages
Demo
You can view the Issue Status demo here. This demo is hosted on GitHub Pages
Features
- Easy setup
- Show status of your services using Components
- Report Incidents
- Markdown support
- Component and Incident templates
- Easy integration with services and monitoring
- Live updating status page
- Hosting on GitHub Pages or other hosting providers
- Use Zapier Triggers to update the status page
Setup
- Clone / Fork this repository to your GitHub account (forking only required for GitHub Pages)
- Run
git checkout tags/VERSION
to checkout to the latest version. It is not recommended to setup using the master branch - Edit the
.env
file found in the root directory and enter your configuration options
GitHub Pages
- Run
npm run deploy
this will build the React project and deploy it to thegh-pages
branch - Finally make sure GitHub Pages option in your GitHub repository settings is set to use the
gh-pages
branch
Other hosting providers
- Run
npm run build
this will create a build directory containing the built app - For deploying click here
You may also want to configure issue templates for your repository which will act as Component and Incident templates. Including the issue status
label in an issue template will allow unauthorised GitHub users to update the status page, this should be added when creating the issue
Update
Updating is important to get the latest features and patches
- This guide should bring you through the steps of syncing your forked version of this repository. Ensure you have backed up your
.env
configuration file as this may be overwritten, you will need to make sure you include the env variables from the latest version - Run
git checkout tags/VERSION
to checkout to the latest version. It is not recommended to setup using the master branch
GitHub Pages
- Run
npm run deploy
to deploy the latest version to GitHub Pages
Other hosting providers
- Run
npm run build
to create a new build directory - For deploying click here
Advanced
Integrate and automate Components and Incidents, this may be useful for changing a Component to major outage
when you detect your services aren't running or performance issues
when the response time goes over a set point.
- Issue Status API (GitHub API wrapper) - In the future, there will be a GitHub API wrapper which can be hosted on a server. This will expose simplified endpoints for integrating with monitoring services, IFTTT and any other services
- IFTTT - This is currently not possible due to a couple issues. 1. GitHub service does not include labels in the create Issue action. 2. The GitHub service does not have an update Issue action. It is also not possible to call the GitHub API directly as IFTTT does not include a User-Agent header in the Webhooks service and all requests with no User-Agent header will be rejected by the GitHub API. This is possible using the Issue Status API
- Zapier - You can create Zaps which have a trigger and an action, use the GitHub Integrations action to update/created Components and Incidents with any of the Zapier Triggers
- GitHub API - You can use the GitHub API directly, you can use this for more advanced options
Configuration
Customise your status page - ensure all required options are entered and any unused optional options are set blank, ie REACT_APP_MANIFEST=
REACT_APP_MANIFEST
(optional) - Determines the manifest url in the built HTML fileREACT_APP_TITLE
(required) - Determines the<title>
tag in the built HTML file with suffixStatus
REACT_APP_DESCRIPTION
(optional) - Determines the description<meta>
tag in the built HTML fileREACT_APP_LOGO
(optional) - Accepts an image URL and is used in the status page headerREACT_APP_NAME
(optional) - Used in the status page header when noREACT_APP_LOGO
is provided. This will be used in the img alt attribute if a logo is providedREACT_APP_REPOSITORY
(required) - GitHubusername/repository
that Components and Incidents will be fetched from, ietadhglewis/issue-status
Details
In depth overview of the functionality
- The main status bar logic is as follows: < 70% Components
operational
= "Some systems are experiencing issues", more than 0 Componentsmajor outage
= "Some systems are experiencing a major outage". Otherwise, "All Systems Operational" - A
Component
each display a current status. To create a Component add tagsissue status
,component
and a tag for the current status:operational
,performance issues
,partial outage
ormajor outage
(if an issue only hasissue status
andcomponent
it will be listed asUnknown
) to a GitHub Issue. You can view all the demo Components here - A
Incident
will show in the Incidents section as eitherActive
orClosed
depending whether on the GitHub Issue is Open or Closed. To create an Incident add tagsissue status
andincident
to a GitHub Issue. You can view all the demo Incidents here - Issue Status uses the GitHub API v3 which has a rate limit of 60 requests per hour for unauthenticated requests (Issue Status is client side and will use unauthenticated requests). Issue Status will fetch 15 times per hour, sending 2 requests per fetch / 30 requests per hour (excluding reload button)
If you have any issues or questions feel free to contact me or create an issue
Version
1