Skip to content

Commit

Permalink
use visual-logger for dev-admin (#1597)
Browse files Browse the repository at this point in the history 
* use visual-logger for dev-admin

* show diff alert if no unusual logs

* keep webpack progress around for a bit longer to improve visual que

* setup tags first before make menu

* make dev-admin menu persistent

* improve menu hide/show
  • Loading branch information
@jchip
jchip authored Apr 11, 2020
1 parent 8bc5213 commit c1420c1
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 80 deletions.
99 changes: 74 additions & 25 deletions packages/xarc-app-dev/lib/dev-admin/admin-server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@ const APP_SERVER_NAME = "your app server";
const DEV_SERVER_NAME = "Electrode webpack dev server";
const PROXY_SERVER_NAME = "Electrode Dev Proxy";

const DEV_ADMIN_STATUS = "DevAdminStatus";
const WDS_PROGRESS = "WDSProgress";
const LOG_ALERT = "LogAlert";

const SERVER_ENVS = {
[APP_SERVER_NAME]: {
XARC_BABEL_TARGET: "node"
Expand All @@ -49,6 +53,7 @@ class AdminServer {
// will mess up the in place progress display that log-update handles
//
this._io = (options && options.inputOutput) || new ConsoleIO();

this._shutdown = false;
this._fullAppLogUrl = formUrl({ ...fullDevServer, path: controlPaths.appLog });
}
Expand All @@ -57,7 +62,14 @@ class AdminServer {
this._wds = ck`<gray.inverse>[wds]</> `;
this._proxy = ck`<green.inverse>[proxy]</> `;
this._app = ck`<cyan.inverse>[app]</> `;
this._menu = "";
this._io.setup();
this._io.addItem({
name: DEV_ADMIN_STATUS,
display: ck`<green.inverse>[DEV ADMIN]</>`,
spinner: true
});
this.updateStatus("webpack is PENDING");
this.handleUserInput();

this._shutdown || (await this.startWebpackDevServer());
Expand All @@ -70,11 +82,21 @@ class AdminServer {

this._shutdown ||
setTimeout(() => {
this.showMenu();
this.showMenu(true);
}, 100);
}

showMenu() {
updateStatus(line) {
if (line !== undefined) {
this._statusLine = line;
}
this._io.updateItem(
DEV_ADMIN_STATUS,
`Press M to show/hide menu. Q to exit. ${this._statusLine}${this._menu}`
);
}

makeMenu() {
const reporterUrl = formUrl({ ...fullDevServer, path: controlPaths.reporter });
const logUrl = formUrl({ ...fullDevServer, path: controlPaths.appLog });
const devurl = formUrl({ ...fullDevServer, path: controlPaths.dev });
Expand All @@ -92,7 +114,21 @@ ${proxyItem}<magenta>M</> - Show this menu <magenta>Q</> - Shutdown
<green> App Log URL: <cyan.underline>${logUrl}</></>
<green> DEV dashboard: <cyan.underline>${devurl}</></>
<green>WebPack reporter: <cyan.underline>${reporterUrl}</></>`;
this._io.show("\n" + boxen(menu, { margin: { left: 5 }, padding: { right: 3, left: 3 } }));

this._menu = "\n" + boxen(menu, { margin: { left: 5 }, padding: { right: 3, left: 3 } });
}

showMenu(force) {
const show = force !== undefined ? force : !this._menu;

if (show) {
this.makeMenu();
clearTimeout(this._hideMenuTimer);
this._hideMenuTimer = setTimeout(() => this.showMenu(false), 15 * 60 * 1000).unref(); // hide menu after a while
} else {
this._menu = "";
}
this.updateStatus();
}

getServer(name) {
Expand Down Expand Up @@ -152,7 +188,6 @@ ${proxyItem}<magenta>M</> - Show this menu <magenta>Q</> - Shutdown

async _quit() {
this._shutdown = true;
this._io.clearStatusMessage(true);
this._io.show(ck`<magenta>admin server exit, shutting down servers</magenta>`);
if (this._appWatcher) {
this._appWatcher.close();
Expand Down Expand Up @@ -295,13 +330,18 @@ ${proxyItem}<magenta>M</> - Show this menu <magenta>Q</> - Shutdown
.forEach(line => {
if (line.startsWith(progSig)) {
progLine = line.substring(progSig.length).replace(cwdRegex, ".");
out.writeStatusMessage(this._wds, progLine);
this._io.addItem({ name: WDS_PROGRESS, spinner: true, display: `Webpack Progress` });
this._io.updateItem(WDS_PROGRESS, progLine);
} else {
if (progLine) {
out.clearStatusMessage(this._wds);
setTimeout(() => this._io.removeItem(WDS_PROGRESS), 2000).unref();
progLine = "";
}
out.write(this._wds + line.replace(cwdRegex, ".") + "\n");
if (line.includes("webpack bundle is now")) {
this.updateStatus(line);
} else {
out.write(this._wds + line.replace(cwdRegex, ".") + "\n");
}
}
});
};
Expand Down Expand Up @@ -346,24 +386,34 @@ ${proxyItem}<magenta>M</> - Show this menu <magenta>Q</> - Shutdown
const { logSaver } = options;
logSaver._toggle = !logSaver._toggle;
if (!logSaver._toggle) {
this._io.clearStatusMessage(options.tag);
this._io.removeItem(LOG_ALERT);
} else {
this.showFullLogUrlMessage(options.tag, options.fullLogUrl);
this.showFullLogUrlMessage(logSaver._time, logSaver.fullLogUrl);
}
}
}

showFullLogUrlMessage(tag, url) {
const time = new Date().toLocaleTimeString().replace(/ /g, "");
this._io.writeStatusMessage(
tag,
[
ck`${time} - <orange>There may be logs from your app server that requires your attention.</>`,
ck`<orange>View full logs at: <cyan.underline>${url}</></>`
],
true,
ck`<green>Press Z to hide or show this message.</>`
);
showFullLogUrlMessage(time, url) {
this._io.addItem({
name: LOG_ALERT,
display: ck`<orange.inverse>ALERT</>`,
spinner: true
});
const instruction = `<orange>View full logs at: <cyan.underline>${url}</></> - \
<green>Press Z to hide or show this message</>`;
if (time) {
this._io.updateItem(
LOG_ALERT,
ck`${time} - <orange>Your app server may have logs that requires your attention.</>
${instruction}`
);
} else {
this._io.updateItem(
LOG_ALERT,
ck`<orange>no unusual log detected from your app server.</>
${instruction}`
);
}
}

deferLogsOutput(context, showFullLink = true, delay = 999) {
Expand Down Expand Up @@ -398,18 +448,19 @@ ${proxyItem}<magenta>M</> - Show this menu <magenta>Q</> - Shutdown
}

if (typeof store[ix] === "string") {
this._io.write(tag + store[ix] + "\n");
this._io.show(tag + store[ix]);
} else if (store[ix]) {
const json = store[ix];
this._io.write(tag + (json.msg || json.message || JSON.stringify(json)) + "\n");
this._io.show(tag + (json.msg || json.message || JSON.stringify(json)));
}
}
currentIx = ix + 1;
});
context._deferIx = [];
if (context._showFullLink === true) {
context._toggle = true;
this.showFullLogUrlMessage(tag, context.fullLogUrl);
context._time = new Date().toLocaleTimeString().replace(/ /g, "");
this.showFullLogUrlMessage(context._time, context.fullLogUrl);
}
context._showFullLink = undefined;
if (store.length > 25000) {
Expand Down Expand Up @@ -454,8 +505,6 @@ ${proxyItem}<magenta>M</> - Show this menu <magenta>Q</> - Shutdown
async startAppServer(debug) {
const skipWatch = debug === "--inspect-brk";

this._io.clearStatusMessage(this._app);

const logSaver = { tag: this._app, store: [], fullLogUrl: this._fullAppLogUrl };

await this.startServer({
Expand Down
63 changes: 8 additions & 55 deletions packages/xarc-app-dev/lib/dev-admin/console-io.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@

const readline = require("readline");
const logUpdate = require("log-update");
const VisualLogger = require("visual-logger");

class ConsoleIO {
constructor() {
this._out = process.stdout;
this.currentStatus = {};
class ConsoleIO extends VisualLogger {
constructor(options) {
super({ ...options, saveLogs: false });
this.setPrefix("");
}

setup() {
Expand All @@ -30,63 +31,15 @@ class ConsoleIO {
}

show(...args) {
this.clearStatusMessage();
console.log(...args);
this.writeStatusMessage();
this.log(...args);
}

write(str) {
this.clearStatusMessage();
this._out.write(str);
this.writeStatusMessage();
}

clearStatusMessage(resetTag) {
const { showing, preserve } = this.currentStatus;
if (showing) {
if (resetTag && resetTag !== true && resetTag !== this.currentStatus.tag) {
this.preserveStatusMsg();
}
logUpdate.clear();
this.currentStatus.showing = false;
}
if (resetTag) {
this.currentStatus = {};
}
}

preserveStatusMsg() {
if (this.currentStatus.msg && this.currentStatus.preserve) {
const { tag, msg } = this.currentStatus;
this.showStatusMessage(tag, msg);
logUpdate.done();
}
}

showStatusMessage(tag, msg, clearMsg = "") {
const lineTxt = []
.concat(msg, clearMsg)
.filter(x => x)
.map(line => `${tag}${line}`);
logUpdate(lineTxt.join("\n"));
this.currentStatus.showing = true;
}

writeStatusMessage(tag, msg, preserve = false, clearMsg = "") {
if (tag && msg) {
if (this.currentStatus.tag && this.currentStatus.tag !== tag) {
this.preserveStatusMsg();
}
this.currentStatus = { tag, msg, preserve, clearMsg };
}
if (!this.currentStatus.msg) return;

const { tag: xtag, msg: xmsg } = this.currentStatus;
this.showStatusMessage(xtag, xmsg, clearMsg);
this.log(str.trimRight());
}

exit() {
this._out.write("\n");
this.clearItems();
process.exit();
}
}
Expand Down
1 change: 1 addition & 0 deletions packages/xarc-app-dev/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@
"style-loader": "^0.20.1",
"subapp-util": "^1.0.4",
"sudo-prompt": "^8.2.5",
"visual-logger": "^1.0.0",
"webpack-cli": "^3.3.9",
"webpack-dev-middleware": "^3.4.0",
"webpack-hot-middleware": "^2.22.2",
Expand Down

0 comments on commit c1420c1

Please sign in to comment.