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:
parent
fef087ba28
commit
b8802f8707
@ -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`.
|
||||||
|
@ -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();
|
||||||
|
@ -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"
|
||||||
|
@ -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 = []
|
|
||||||
|
@ -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`;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user