From b8802f87079bdd543d2c5249c6f1513d264947f7 Mon Sep 17 00:00:00 2001 From: steveoh Date: Mon, 11 Sep 2017 18:10:31 -0600 Subject: [PATCH] Interactive Gulp task for incident creation (#34) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- README.md | 5 +- gulpfile.babel.js | 124 ++++++++++++++++++++++++++++++++++++++++++++-- package.json | 7 ++- site/config.toml | 5 +- src/js/app.js | 6 +-- 5 files changed, 134 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 0d81df3..0431e3d 100644 --- a/README.md +++ b/README.md @@ -41,11 +41,10 @@ Incidents are plain markdown files inside the `site/content/incidents` directory ### Creating new incidents 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 -hugo new incidents/oh-no-something-went-wrong.md +npm run new-incident ``` 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`. diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 8ee1c8f..19ff22d 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -7,10 +7,17 @@ import cssnext from "postcss-cssnext"; import BrowserSync from "browser-sync"; import webpack from "webpack"; 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 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-preview", (cb) => buildSite(cb, ["--buildDrafts", "--buildFuture"])); @@ -50,9 +57,120 @@ gulp.task("server", ["hugo", "css", "js"], () => { gulp.watch("./site/**/*", ["hugo"]); }); -function buildSite(cb, options) { - const args = options ? defaultArgs.concat(options) : defaultArgs; +gulp.task("new-incident", (cb) => { + 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) => { if (code === 0) { browserSync.reload(); diff --git a/package.json b/package.json index 723646c..f4c4fc6 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,8 @@ "build": "gulp build", "build-preview": "gulp build-preview", "start": "gulp server", - "lint": "eslint src" + "lint": "eslint src gulpfile.babel.js webpack.conf.js", + "new-incident": "gulp new-incident" }, "author": "", "license": "MIT", @@ -34,9 +35,13 @@ "gulp-postcss": "^6.1.1", "gulp-util": "^3.0.7", "imports-loader": "^0.6.5", + "inquirer": "^3.2.3", + "lodash.kebabcase": "^4.1.1", "postcss-cssnext": "^2.7.0", "postcss-import": "^8.1.2", "postcss-loader": "^0.9.1", + "tomlify-j0.4": "^2.2.0", + "tomljs": "^0.1.3", "url-loader": "^0.5.7", "webpack": "^1.13.1", "whatwg-fetch": "^1.0.0" diff --git a/site/config.toml b/site/config.toml index 4a6fc88..33b416a 100644 --- a/site/config.toml +++ b/site/config.toml @@ -12,6 +12,5 @@ title = "StatusKit" # List of systems monitored in this status page. # You'll be able to change their status every time # you open or update an incident. -# Example: -# systems = ["API", "CDN", "DNS", "Site delivery"] -systems = [] +# Replace these examples with your own system names. +systems = ["API", "CDN", "DNS", "Site delivery"] diff --git a/src/js/app.js b/src/js/app.js index 4f6e28b..b61fc27 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -2,15 +2,15 @@ const daysSince = document.getElementById("days-since-latest"); 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 now = new Date(); 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 count = endDays === 1 ? `${endDays} day` : `${endDays} days`; - daysSince.innerHTML = `${count} since last incident` + daysSince.innerHTML = `${count} since last incident`; }