Interactive Gulp task for incident creation (#34)

* Add inquirer to get some prompts

* Create some questions

Refs #16

* Add tomljs to read config for choices

* Kebab-case the input file name

* Fix listing errors

* Lint all relevant js files

* Add new incident npm script

* Set as default so out of the box this just works

* refactor out args that are used everywhere

* Add inquirer validation

* Handle inquirer answers

* Create toml from answers

* Fix linting

* Treat title and file name separately

This allows for Hugo new to work and enhances the gulp task but breaks
TranslationBaseName e.g.: `post` for `post.es.md` (if `Multilingual` is
enabled.) which I’m not sure is enabled by default.

* add comment to replace

* update new issue creation

* fix spelling
This commit is contained in:
steveoh 2017-09-11 18:10:31 -06:00 committed by Jessica Parsons
parent fef087ba28
commit b8802f8707
5 changed files with 134 additions and 13 deletions

View File

@ -41,11 +41,10 @@ Incidents are plain markdown files inside the `site/content/incidents` directory
### Creating new incidents ### Creating new incidents
Adding incidents to your status page is as simple as adding a new document to the incidents collection. Adding incidents to your status page is as simple as adding a new document to the incidents collection.
Create a new incident using Hugo with a command like this as of Hugo v0.24: Create a new incident using npm:
``` ```
cd site npm run new-incident
hugo new incidents/oh-no-something-went-wrong.md
``` ```
Hugo will create a new Markdown file for you with title and date based on the file name and a few predefined settings in the header. To learn more about the different severities and report, you can see more detailed examples in `site/archetypes/incidents.md`. Hugo will create a new Markdown file for you with title and date based on the file name and a few predefined settings in the header. To learn more about the different severities and report, you can see more detailed examples in `site/archetypes/incidents.md`.

View File

@ -7,10 +7,17 @@ import cssnext from "postcss-cssnext";
import BrowserSync from "browser-sync"; import BrowserSync from "browser-sync";
import webpack from "webpack"; import webpack from "webpack";
import webpackConfig from "./webpack.conf"; import webpackConfig from "./webpack.conf";
import inquirer from "inquirer";
import toml from "tomljs";
import fs from "fs";
import path from "path";
import kebabCase from "lodash.kebabcase";
import tomlify from "tomlify-j0.4";
const browserSync = BrowserSync.create(); const browserSync = BrowserSync.create();
const hugoBin = `./bin/hugo_0.26_${process.platform}_amd64${process.platform === "windows" ? ".exe" : ""}`; const hugoBin = `./bin/hugo_0.26_${process.platform}_amd64${process.platform === "windows" ? ".exe" : ""}`;
const defaultArgs = ["-d", "../dist", "-s", "site", "-v"]; const defaultArgs = ["-s", "site", "-v"];
const buildArgs = ["-d", "../dist"];
gulp.task("hugo", (cb) => buildSite(cb)); gulp.task("hugo", (cb) => buildSite(cb));
gulp.task("hugo-preview", (cb) => buildSite(cb, ["--buildDrafts", "--buildFuture"])); gulp.task("hugo-preview", (cb) => buildSite(cb, ["--buildDrafts", "--buildFuture"]));
@ -50,9 +57,120 @@ gulp.task("server", ["hugo", "css", "js"], () => {
gulp.watch("./site/**/*", ["hugo"]); gulp.watch("./site/**/*", ["hugo"]);
}); });
function buildSite(cb, options) { gulp.task("new-incident", (cb) => {
const args = options ? defaultArgs.concat(options) : defaultArgs; const file = fs.readFileSync("site/config.toml").toString();
const config = toml(file);
const questions = [{
type: "input",
name: "name",
message: "What is the cause of the incident?",
validate: (value) => {
if (value.length > 0) {
return true;
}
return "You must have a cause title!";
}
}, {
type: "list",
name: "severity",
message: "What is the severity of the incident?",
choices: ["under-maintenance", "degraded-performance", "partial-outage", "major-outage"]
}, {
type: "checkbox",
name: "affected",
message: "What are the affected systems?",
choices: config.params.systems,
validate: (value) => {
if (value.length > 0) {
return true;
}
return "You must have an affected system?!";
}
}, {
type: "input",
name: "description",
message: "Add a terse description of the incident"
}, {
type: "confirm",
name: "open",
message: "Open the incident for editing?",
default: false
}];
inquirer.prompt(questions).then((answers) => {
let args = ["new", `incidents${path.sep}${kebabCase(answers.name)}.md`];
args = args.concat(defaultArgs);
const hugo = cp.spawn(hugoBin, args, {stdio: "pipe"});
hugo.stdout.on("data", (data) => {
const message = data.toString();
if (message.indexOf(" created") === -1) {
return;
}
const path = message.split(" ")[0];
const incident = fs.readFileSync(path).toString();
const frontMatter = toml(incident);
frontMatter.severity = answers.severity;
frontMatter.affectedsystems = answers.affected;
frontMatter.title = answers.name.replace(/-/g, " ");
const content = generateFrontMatter(frontMatter, answers);
fs.writeFileSync(path, content);
if (!answers.open) {
return;
}
let cmd = "xdg-open";
switch (process.platform) {
case "darwin": {
cmd = "open";
break;
}
case "win32":
case "win64": {
cmd = "start";
break;
}
default: {
cmd = "xdg-open";
break;
}
}
cp.exec(`${cmd} ${path}`);
});
hugo.on("close", (code) => {
if (code === 0) {
cb();
} else {
cb("new incident creation failed");
}
});
});
});
function generateFrontMatter(frontMatter, answers) {
return `+++
${tomlify(frontMatter, null, 2)}
+++
${answers.description}`;
}
function buildSite(cb, options) {
let args = options ? defaultArgs.concat(options) : defaultArgs;
args = args.concat(buildArgs);
// cp needs to be in site directory
return cp.spawn(hugoBin, args, {stdio: "inherit"}).on("close", (code) => { return cp.spawn(hugoBin, args, {stdio: "inherit"}).on("close", (code) => {
if (code === 0) { if (code === 0) {
browserSync.reload(); browserSync.reload();

View File

@ -9,7 +9,8 @@
"build": "gulp build", "build": "gulp build",
"build-preview": "gulp build-preview", "build-preview": "gulp build-preview",
"start": "gulp server", "start": "gulp server",
"lint": "eslint src" "lint": "eslint src gulpfile.babel.js webpack.conf.js",
"new-incident": "gulp new-incident"
}, },
"author": "", "author": "",
"license": "MIT", "license": "MIT",
@ -34,9 +35,13 @@
"gulp-postcss": "^6.1.1", "gulp-postcss": "^6.1.1",
"gulp-util": "^3.0.7", "gulp-util": "^3.0.7",
"imports-loader": "^0.6.5", "imports-loader": "^0.6.5",
"inquirer": "^3.2.3",
"lodash.kebabcase": "^4.1.1",
"postcss-cssnext": "^2.7.0", "postcss-cssnext": "^2.7.0",
"postcss-import": "^8.1.2", "postcss-import": "^8.1.2",
"postcss-loader": "^0.9.1", "postcss-loader": "^0.9.1",
"tomlify-j0.4": "^2.2.0",
"tomljs": "^0.1.3",
"url-loader": "^0.5.7", "url-loader": "^0.5.7",
"webpack": "^1.13.1", "webpack": "^1.13.1",
"whatwg-fetch": "^1.0.0" "whatwg-fetch": "^1.0.0"

View File

@ -12,6 +12,5 @@ title = "StatusKit"
# List of systems monitored in this status page. # List of systems monitored in this status page.
# You'll be able to change their status every time # You'll be able to change their status every time
# you open or update an incident. # you open or update an incident.
# Example: # Replace these examples with your own system names.
# systems = ["API", "CDN", "DNS", "Site delivery"] systems = ["API", "CDN", "DNS", "Site delivery"]
systems = []

View File

@ -2,15 +2,15 @@
const daysSince = document.getElementById("days-since-latest"); const daysSince = document.getElementById("days-since-latest");
if (daysSince) { if (daysSince) {
const aDay = 1000*60*60*24; const aDay = 1000 * 60 * 60 * 24;
const dateSince = new Date(daysSince.getAttribute("data-latest-incident-date")); const dateSince = new Date(daysSince.getAttribute("data-latest-incident-date"));
const now = new Date(); const now = new Date();
const timeSince = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()) - const timeSince = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()) -
new Date(dateSince.getUTCFullYear(), dateSince.getUTCMonth(), dateSince.getUTCDate()); new Date(dateSince.getUTCFullYear(), dateSince.getUTCMonth(), dateSince.getUTCDate());
const endDays = Math.floor(timeSince / aDay); const endDays = Math.floor(timeSince / aDay);
const count = endDays === 1 ? `${endDays} day` : `${endDays} days`; const count = endDays === 1 ? `${endDays} day` : `${endDays} days`;
daysSince.innerHTML = `${count} since last incident` daysSince.innerHTML = `${count} since last incident`;
} }