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

Author: steveoh

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`.

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"]);
 });
 
+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) {
-  const args = options ? defaultArgs.concat(options) : defaultArgs;
+  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();

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"

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"]

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`;
 }