Commit dccc5e98 authored by Mantas's avatar Mantas
Browse files

v2 Dev Preview 1

parent 2c05edfd
exampleSite/public/
public/
# cState Updates
## v1.0 (November 25, 2017)
**cState is now ready for use in production! With a switch to the Hugo theming system, you can now independently manage incidents, content, settings, while seamlessly keeping cState up to date.**
+ Whole new header design that lets you choose between a logo and just text
+ Updated incident history section and post design
+ Updated config file; added variables for changing the look and feel of your status page
+ Ensured proper legacy browser support by making JavaScript optional
+ Update incident view to include better mini header, clear issue type, and whether it is resolved
+ Updated footer design, added copyright notice
- Removed pinging, which was never properly implemented
- Removed notifications, as they never worked in the first place
- Fixed bug, where the main announcement box would clip, creating a small white 1px border
- Generally removed a lot of leftover cruft and ensured cState is in pristine condition for a stable release
# Code of Conduct
> TL;DR is to be a good, sensible person. It does not matter who you are.
> TL;DR is to be a good, sensible person. It does not matter who you are, this rule applies to _everybody_.
This community as a whole, much like others, is made up of a mixture of professionals and volunteers from all over the world, working on every aspect of the project at hand. Diversity can be a strength, but it can also lead to communication issues and unhappiness. To that end, we have a few ground rules that we ask people to adhere to. This code applies to all spaces managed by the project creators equally.
......
The MIT License (MIT)
=====================
Copyright (C) 2017 Mantas Vilčinskas
Copyright (C) Mantas Vilčinskas
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
......
# cState
[![GitHub last commit](https://img.shields.io/github/last-commit/mistermantas/cstate.svg?style=flat-square)](https://github.com/mistermantas/cstate/commits/master)
[![GitHub repo size in bytes](https://img.shields.io/github/repo-size/mistermantas/cstate.svg?style=flat-square)](https://github.com/mistermantas/cstate/tree/master/)
[![Discord](https://img.shields.io/badge/discord-join%20chat-7289DA.svg?style=flat-square)](http://discord.io/choraleapp) [![Twitter](https://img.shields.io/twitter/follow/mistermantas.svg?style=social&label=Follow)](https://twitter.com/mistermantas)
[![GitHub release](https://img.shields.io/github/release/mistermantas/cstate.svg?style=flat-square)](https://github.com/mistermantas/cstate/releases) [![GitHub last commit](https://img.shields.io/github/last-commit/mistermantas/cstate.svg?style=flat-square)](https://github.com/mistermantas/cstate/commits/master) [![GitHub repo size in bytes](https://img.shields.io/github/repo-size/mistermantas/cstate.svg?style=flat-square)](https://github.com/mistermantas/cstate/tree/master/) [![Gitter](https://img.shields.io/badge/chat-gitter-ed1965.svg?style=flat-square)](https://gitter.im/cState/Lobby) [![Twitter](https://img.shields.io/twitter/follow/mistermantas.svg?style=social&label=Follow)](https://twitter.com/mistermantas)
> The fastest and most efficient status page on the market, beating even paid solutions. cState has outstanding browser support (IE8+) and can easily be managed with GitHub Pages or Netlify. Ready for production.
> Über fast, backwards compatible (IE8+), tiny, and simple status page built with Hugo. Compatible with Netlify & GitHub Pages.
[**See real-world example**](https://rabbitnodestatus.netlify.com/)
*This release is a developer preview.*
[**Live demo**](https://cstate.netlify.com)
## Contents
+ [Features](#features)
+ [Install](#install)
+ Getting started
+ [Production](#production)
+ [Development](#development)
+ [Updating](#updating)
+ [FAQ](#faq)
+ [Contribute](#contribute)
+ [License](#license)
......@@ -19,124 +22,120 @@
## Features
+ Built with [Hugo](https://gohugo.io), a hyperfast Golang generator
+ Works not just on mobile browsers, but also on archaic browsers like Internet Explorer 8
+ Works not just on mobile, but also on the archaic Internet Explorer 8
+ Comes with a simple, focused, and extremely light design
+ Edit your status page just from the config file
+ Comes pre-equipped with Netlify CMS for quick updates
+ Edit your status page from a simple config file
+ Comes pre-equipped with Netlify CMS for quick admin updates
+ Easy to edit and deploy on Netlify or GitHub Pages
+ Secure, ready for HTTPS, thanks to [JAMstack](https://jamstack.org/)
## Getting started
For this tutorial, it is assumed that you have Hugo and Git installed (check with `hugo version` & `git --version`).
## Install
#### Production (with Netlify)
We encourage you to use [Netlify](https://www.netlify.com) for cState. These are the following options you need to change in deploy settings:
+ Build command: **hugo**
+ Publish directory: **public**
+ Add one build enviroment variable
+ Add one build environment variable
+ Key: **HUGO_VERSION**
+ Value: **0.31**
For this tutorial, it is assumed that you have Hugo and Git installed (check with `hugo version` & `git --version`).
**This does not seem to work in one go on PowerShell, so enter each command individually.**
1. Download the contents of the `exampleSite` directory in this repository. This will be your site guts, which will hold the content and configuration for the status page.
2. Create a `themes` folder and navigate to it on the command line.
```bash
# 1. First off, we initialize the Git repository
# !: If you already have one, skip this step
git init;
# !: THIS ONLY WORKS ON BASH, USE THE 2ND COMMAND FOR POWERSHELL
# 2. Then this creates all the necessary directories
mkdir -p content/issues themes static;
mkdir -p content/issues, themes, static;
# 3. We get the config file
curl -o config.yml https://cdn.rawgit.com/mistermantas/cstate/master/config-example.yml;
mkdir themes; cd themes;
```
# 4. Download cState
cd themes; git submodule add https://github.com/mistermantas/cstate;
3. Now simply add a Git submodule pointing to this repository, like so:
# 5. Last off, start the server locally
cd ../; hugo serve;
```bash
git submodule add https://github.com/mistermantas/cstate
```
And that is it; you have set up cState locally.
4. Set up cState for your liking. It is now ready to be deployed
#### Development
Now is a good time to make cState look the way you want it to, so upload a favicon (and logo) to `/static/`. Edit `config.yml` to fit your needs. And so on, and so forth.
1. Clone this repository in the command line:
**Do not change any files in the `themes` directory or its subdirectories. Everything is handled automatically by Git. If the content or static directories are empty, create at least one file in them (such as `gitkeep.txt`) to make sure Git picks them up.**
```bash
git clone https://github.com/mistermantas/cstate.git
```
To make the status page public, you will need to connect to a remote GitHub repository much like this:
2. Go to the `exampleSite` folder, like so:
```bash
# Create a remote origin like this (if you have not already)
git remote add origin https://github.com/username/example.git
cd cstate-master/exampleSite
```
# Add all the files
git add -A
3. Uncomment this line in `config.yml`:
# Then a message based on your changes
git commit -m "Testing out cState"
```yml
# themesDir: ../..
```
3. Then try out the site! A link to it will be shown on screen.
# All done
git push -u origin master
```bash
hugo serve
```
For an example of a working status page, see [rabbitnode/status](https://github.com/rabbitnode/status).
The main directory is the theme itself (the cState guts, basically) and the `exampleSite` folder houses all content. Use this local setup to experiment before deploying to production!
If you would like to commit/make a PR, make sure that `themesDir` is a comment before trying to merge upstream.
## Updating
From your root directory, enter these 2 commands:
Assuming the production install instructions were followed, keep cState updated by having an up to date Git submodule in the `themes` folder. containing this repository. Your content will stay separate, as to avoid any conflicts.
```bash
# 1. Fetch submodules
git submodule update --init --recursive;
# 2. Now pull the changes
git submodule foreach git pull origin master
git submodule update
```
You may also need to update the build enviroment variable **HUGO_VERSION** if you are using Netlify to [the latest equivelant](https://github.com/gohugoio/hugo/releases).
You can [read more on git-scm.com](https://git-scm.com/book/en/v2/Git-Tools-Submodules) about submodules.
## FAQ
### Where do issues go? What is the frontmatter, how do I define metadata for issues?
Create a file in `content/issues`. The name of the file will be the slug (what shows up in the URL bar). For example, this is what `i-am-an-issue.md` should look like:
Create a file in `content/issues`. The name of the file will be the slug (what shows up in the URL bar). For example, this is what `major-outage-east-us.md` should look like:
```md
---
Title: Give your issue a good title
Description: This description is here merely for metadata purposes and may show up in search results. It may be used as a summary.
Date: 2017-02-30 14:30
Title: Major outage in East US
Date: 2017-02-30 14:30:00
Resolved: true
ResolvedWhen: 2017-02-30 16:00:00
Severity: down
Affected:
- Client Area
- API
Section: post
---
Content goes here.
*Monitoring* - After hitting the ole reboot button Example Chat App is now recovering. We're going to continue to monitor as everyone reconnects. {{< track "2018-04-13 16:50:00" >}}
*Investigating* - We're aware of users experiencing unavailable guilds and issues when attempting to connect. We're currently investigating. {{< track "2018-04-13 15:54:00" >}}
```
Time to break that down.
`Title`: This is the one of the most important parts of an incident. *(required)*
`Description`: This description is here merely for metadata purposes and may show up in search results. It may be used as a summary.
`Date`: An ISO-8601 formatted date. Does not include time zone. *(required)*
`Date`: An ISO-8601 formatted date. Does not include time zone. This is when you first discovered the issue. *(required)*
`Resolved`: Whether issue should affect overall status. Either `true` or `false`. *(boolean, required)*
`ResolvedWhen`: An ISO-8601 formatted date. Does not include time zone. This is when downtime stopped. You may set the time that downtime ended without completely resolving the issue (thus leaving time for monitoring).
`Severity`: If an issue is not resolved, it will have an applied severity. There are 3 levels of severity: `notice`, `disrupted`, and `down`. If there are multiple issues, the status page will take the appearance of the more drastic issue (such as `disrupted` instead of `notice`). *(required)*
`Affected`. Add the items that were present in the config file which should alter the status of each individual system (component). *(array, required)*
`Section`. This must be `issue`, so that Hugo treats it as one. *(required)*
### Is there an admin panel or some easy way to change the state of each issue?
If you use [Netlify](https://www.netlify.com), you can expect to see Netlify CMS integration very soon. Otherwise, you could fall back to [prose.io](http://prose.io) or something similiar.
If you use [Netlify](https://www.netlify.com), you can expect to see Netlify CMS integration very soon. Otherwise, you could fall back to [prose.io](http://prose.io) or something similar.
### How do I make this work on GitHub Pages?
Compile locally, commit changes, and push them out. We do recommend using [Netlify](https://www.netlify.com), however.
Compile locally (using production instructions), commit changes, and push them out. Using [Netlify](https://www.netlify.com) is recommended as it simplifies the process.
### My question was not answered!
......@@ -146,8 +145,9 @@ This part of the documentation still needs to finished. [Questions](https://gith
+ Glance over the [Code of Conduct](/CODE_OF_CONDUCT.md).
+ Before submitting a pull request, create an issue to [discuss the implications of your proposal](https://github.com/mistermantas/cstate/issues).
+ Write consistent, simple, and readable code. You can [join the Chorale Discord](http://discord.io/choraleapp) to discuss in `#cstate`.
+ Write consistent, simple, readable code and precise documentation.
+ [Join the Gitter chat](http://discord.io/choraleapp) for help or discussion.
## License
MIT © Mantas Vilčinskas
[MIT](https://github.com/mistermantas/cstate/blob/master/LICENSE.md) © Mantas Vilčinskas
---
Title:
Description:
Date:
Resolved:
ResolvedWhen:
Severity:
Affected:
Section: issue
......
# Welcome to the Hugo configuration file.
# Hugo is used for building the status page,
# so this file can be used to change how
# your status page should behave or look.
# What is your status page called?
# Shows up in the browser bar and meta tags
title: Example Inc. Status
# What language is this page in?
# Only alters the html[lang] attribute
languageCode: en-US
# What is the hostname or path to the root?
# Where is the site hosted?
# Example: https://status.example.com/
baseURL: https://status.example.com/
# Should posts, which have a publish date
# from the future, be built? Useful for
# sharing upcoming maintenance, etc.
#
# We recommend to keep this at `true`.
# BOOLEAN; `true`, `false`
buildFuture: true
params:
# These are your systems. Change them to
# change the amount of components.
systems:
- Core
- EU
- US
# Should we show the logo or the title
# of the status page?
useLogo: false
# Where is the logo located, if one is
# present at all?
logo: /logo.png
# This is the description that is shown
# in the footer and meta tags.
description: We continuously monitor the status of our services and if there are any interruptions, a note will be posted here.
# Cplors throughout cState
#
# Defaults:
#
# ok: 228B22
# warning: DC143C
# down: FF8C00
# notice: 708090
# border: dfdfdf
# faded: ccc
ok: 228B22
disrupted: FF8C00
down: DC143C
notice: 708090
border: dfdfdf
faded: ccc
# These options affect the core of cState.
# Please do not change them if you do not
# know what you are doing.
theme: cstate
############################################################
# +------------------------------------------------------+ #
# | Notes | #
# +------------------------------------------------------+ #
############################################################
# Welcome to the cState configuration file!
#
# Hugo is used for building the status page,
# so this file can be used to change how
# your status page should behave or look.
#
# If you want to use special characters,
# such as accented letters, you MUST save
# the file as UTF-8, not ANSI.
#
# If cState does not load, ensure that:
# - No tabs are present;
# YAML only allows spaces
# - Indents are correct
# YAML hierarchy is based entirely on indentation
# - You have "escaped" all apostrophes
# in your text: If you want to write "don't",
# for example, write "don''t" instead!
# Note the doubled apostrophe.
# - Text with symbols is enclosed in single
# or double quotation marks.
#
# If you have problems, create an issue on GitHub:
# https://github.com/mistermantas/cstate/issues
############################################################
# +------------------------------------------------------+ #
# | Basic metadata | #
# +------------------------------------------------------+ #
############################################################
# What is your status page called?
# Shows up in the browser bar and meta tags
title: Example Chat App Status
# What language is this page in?
# Only alters the html[lang] attribute
languageCode: en-US
# What is the hostname or path to the root?
# Where is the site hosted?
#
# Slash enables relative links.
#
# Default: /
# Example: https://status.example.com/
baseURL: /
############################################################
# +------------------------------------------------------+ #
# | Preferences | #
# +------------------------------------------------------+ #
############################################################
# Should posts, which have a publish date
# from the future, be built? Useful for
# sharing upcoming maintenance, etc.
#
# We recommend to keep this at `true`.
# BOOLEAN; `true`, `false`
buildFuture: true
params:
# These are your systems. Change them to
# change the amount of components.
systems:
#-
# name: Client Area
# codename: panel
#-
# name: Minecraft
# codename: mc
#-
# name: Web Hosting
# codename: web
- Gateway
- API
- Media Proxy
# What header design should we use?
# Default: true
# BOOLEAN; `true`, `false`
useLargeHeaderDesign: false
# Should we show the logo or the title
# of the status page?
useLogo: false
# Where is the logo located, if one is
# present at all?
#
# Recommended: png or jpg for best
# browser support!
# logo: /logo.png
# This is the description that is shown
# in the footer and meta tags.
description: We continuously monitor the status of our services and if there are any interruptions, a note will be posted here.
# Cplors throughout cState
#
# Defaults:
#
# brand: #181818
# ok: 228B22
# warning: DC143C
# down: FF8C00
# notice: 708090
brand: 181818
ok: 228B22
disrupted: FF8C00
down: DC143C
notice: 708090
border: dfdfdf
faded: ccc
# If the status page shows that
# there are disruptions or outages
# happening, should it keep the
# brand header color or drop it
# and use the status indication
# colors that were just defined?
#
# Default: true
# BOOLEAN; `true`, `false`
alwaysKeepBrandColor: true
############################################################
# +------------------------------------------------------+ #
# | Developer | #
# +------------------------------------------------------+ #
############################################################
# Custom CSS file
# If you want to add any
# custom styling, you may
# link to one file with all
# your modifications here.
#
# This has *intentionally*
# been left uncommented,
# as it is not an advanced
# feature for developers.
#
# customCSS: /custom.css
# Custom JavaScript file
# If you want to add any
# custom scripting, you may
# link to one file with all
# your modifications here.
#
# This has *intentionally*
# been left uncommented,
# as it is not an advanced
# feature for developers.
#
# customJS: /custom.js
############################################################
# +------------------------------------------------------+ #
# | For developers | #
# +------------------------------------------------------+ #
############################################################
# These options affect the core of cState.
# Please do not change them if you do not
# know what you are doing.
theme: cstate
# If you are developing locally and want
# to contribute to the cState Git repo,
# please uncomment this option but do not
# forget to re-comment it when
# themesDir: ../..
---
Title: Unavailable Guilds & Connection Issues
Date: 2018-04-13 15:54:00
Resolved: true
ResolvedWhen: 2018-04-13 17:30:00
# down, disrupted, notice
Severity: down
Affected:
- API
Section: issue
---
*Post-mortem*
At approximately 14:01, a Redis instance acting as the primary for a highly-available cluster used by our API services was migrated automatically by Google’s Cloud Platform. This migration caused the node to incorrectly drop offline, forcing the cluster to rebalance and trigger known issues with the way our API instances handle Redis failover. After resolving this partial outage, unnoticed issues on other services caused a cascading failure through Example Chat App’s real time system. These issues caused enough critical impact that Example Chat App’s engineering team was forced to fully restart the service, reconnecting millions of clients over a period of 20 minutes.
---
*Update* - A fix has been implemented and we are monitoring the results. Looks like this has been fixed. {{< track "2018-04-13 17:30:00" >}}
*Monitoring* - After hitting the ole reboot button Example Chat App is now recovering. We're going to continue to monitor as everyone reconnects. {{< track "2018-04-13 16:50:00" >}}
*Investigating* - We're aware of users experiencing unavailable guilds and issues when attempting to connect. We're currently investigating. {{< track "2018-04-13 15:54:00" >}}
---
Title: US East Connection Issues
Date: 2018-05-25 04:13:00
Resolved: true
ResolvedWhen: 2018-05-25 04:40:00
# down, disrupted, notice
Severity: disrupted
Affected:
- API
Section: issue
---
*Resolved* -
We believe all users experiencing issues have been able to connect at this time. {{< track "2018-05-25 05:54:00" >}}
*Monitoring* - We believe the connectivity issues are being caused by an isolated ISP issue. We've had reports that swapping to Google DNS servers (see here; https://developers.google.com/speed/public-dns/docs/using) resolves the problem for users. {{< track "2018-05-25 04:40:00" >}}
*Investigating* - We're aware of reports that users are experiencing connection issues on the East coast of the United States. We're currently investigating these issues, and apologize for any inconvenience it may be causing you. {{< track "2018-05-25 04:13:00" >}}
---
title: Uptime
type: uptime
---
{{ partial "meta" . }}
{{ $incidents := where .Site.RegularPages "Params.section" "issue" }}
{{ $active := where $incidents "Params.resolved" "=" false }}
......@@ -6,18 +7,8 @@
{{ $isDisrupted := where $active "Params.severity" "=" "disrupted" }}
{{ $isDown := where $active "Params.severity" "=" "down" }}
<body class="status-{{ if $isDown }}down{{ else }}{{ if $isDisrupted}}disrupted{{ else }}{{ if $isNotice }}notice{{ else }}ok{{ end }}{{ end }}{{ end }}">
<div class="header">
<div class="contain contain--more center">
<a href="/" class="logo">
{{ if .Site.Params.useLogo }}
<h1><img src="{{ .Site.Params.logo }}" alt="{{ .Site.Title }}"></h1>
{{ else }}
<h1>{{ .Site.Title }}</h1>
{{ end }}
</a>
</div>
</div>
<body class="status status-{{ if $isDown }}down{{ else }}{{ if $isDisrupted}}disrupted{{ else }}{{ if $isNotice }}notice{{ else }}ok{{ end }}{{ end }}{{ end }} {{ if not .Site.Params.alwaysKeepBrandColor }}change-header-color{{ end }}">
{{ partial "header" . }}
<!-- Main -->
<div class="contain">
......@@ -32,7 +23,7 @@
{{ if $isDown }}
Experiencing major issues
{{ else }}
{{ if $isDisrupted}}
{{ if $isDisrupted }}
Experiencing disruptions
{{ else }}
{{ if $isNotice }}
......@@ -42,47 +33,80 @@
{{ end }}{{ end }}{{ end }}
</strong>
<span class="status summary__date" onclick="location.reload()"></span>
<span class="status summary__date" onclick="location.reload()"></span>
</div>
{{ if $active }}
<div class="announcement-box">
{{ range $active }}
<div class="padding">
<p><strong>{{ .Title }}</strong></p>
{{ .Content }}
</div>
{{ else }}{{ end }}
</div>
{{ end }}
{{ range $active }}
<div class="padding"></div>
<small class="date">{{ .Date.Format "January 02, 2006 at 3:04 PM" }}</small><br>
<strong class="faded">{{ .Title }}</strong>
{{ .Content }}
<div class="padding"></div>
{{ else }}{{ end }}
<!-- Individual info -->
{{ if not $active }}
<div class="padding"></div>
<div class="components">
{{ $systems := .Site.Params.systems }}
{{ range $index, $systems }}
<div class="component" data-status="ok">
{{ $activeComponentIssues := where $active "Params.affected" "intersect" (slice .) }}
{{ $thisIsNotice := where $activeComponentIssues "Params.severity" "=" "notice" }}
{{ $thisIsDisrupted := where $activeComponentIssues "Params.severity" "=" "disrupted" }}
{{ $thisIsDown := where $activeComponentIssues "Params.severity" "=" "down" }}
<div class="component" data-status="{{ if $thisIsDown }}down{{ else }}{{ if $thisIsDisrupted }}disrupted{{ else }}{{ if $thisIsNotice }}notice{{ else }}ok{{ end }}{{ end }}{{ end }}">