diff --git a/CHANGELOG.md b/CHANGELOG.md index 56ed9e3..86e0339 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +1.1.1 + +- fixed crash when the metadata contains queries without tags (reported by Etmolf, thanks) + 1.1 - improved detail button link now respects web UI path setting diff --git a/dist/toolbar.js b/dist/toolbar.js index 98c983c..a4509b7 100644 --- a/dist/toolbar.js +++ b/dist/toolbar.js @@ -1 +1 @@ -!function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";n.r(t);var o={activity:'',alertCircle:'',alertTriangle:'',arrowRight:'',check:'',database:'',disc:'',edit2:'',image:'',layers:'',mail:'',map:'',paperclip:'',zap:''};function r(e,t){for(var n=0;n=400&&this.responseStatus<500}},{key:"isServerError",value:function(){return this.responseStatus>=500&&this.responseStatus<600}},{key:"resolveCache",value:function(e){var t=parseInt(e.cacheDeletes),n=parseInt(e.cacheHits),o=parseInt(e.cacheReads),r=parseInt(e.cacheWrites);return{queries:{deletes:t,hits:n,reads:o,writes:r,total:t+n+o+r},time:e.cacheTime}}},{key:"resolveDatabase",value:function(e){var t=this.enforceArray(e.databaseQueries);return{queries:{total:parseInt(e.databaseQueriesCount)||t.length,slow:parseInt(e.databaseSlowQueries)||t.filter((function(e){return e.tags.includes("slow")})).length,selects:parseInt(e.databaseSelects)||t.filter((function(e){return e.query.match(/^select /i)})).length,inserts:parseInt(e.databaseInserts)||t.filter((function(e){return e.query.match(/^insert /i)})).length,updates:parseInt(e.databaseUpdates)||t.filter((function(e){return e.query.match(/^update /i)})).length,deletes:parseInt(e.databaseDeletes)||t.filter((function(e){return e.query.match(/^delete /i)})).length,others:parseInt(e.databaseOthers)||t.filter((function(e){return!e.query.match(/^(select|insert|update|delete) /i)})).length},time:Math.round(e.databaseDuration)}}},{key:"resolveEvents",value:function(e){return this.enforceArray(e.events).length}},{key:"resolveLog",value:function(e){return this.enforceArray(e.log).length}},{key:"resolveModels",value:function(e){var t=Object.values(e.modelsRetrieved).reduce((function(e,t){return e+t}),0),n=Object.values(e.modelsCreated).reduce((function(e,t){return e+t}),0),o=Object.values(e.modelsUpdated).reduce((function(e,t){return e+t}),0),r=Object.values(e.modelsDeleted).reduce((function(e,t){return e+t}),0);return{retrieved:t,created:n,updated:o,deleted:r,total:t+n+o+r}}},{key:"resolveNotifications",value:function(e){return this.enforceArray(e.notifications).length+Object.values(this.optionalNonEmptyObject(e.emailsData,{})).length}},{key:"resolveQueueJobs",value:function(e){return this.enforceArray(e.queueJobs).length}},{key:"resolveRedisCommands",value:function(e){return this.enforceArray(e.redisCommands).length}},{key:"resolveViews",value:function(e){return Object.values(this.optionalNonEmptyObject(e.viewsData,{})).length}},{key:"resolveClientMetrics",value:function(e){return[{name:"Redirect",value:(e=e.clientMetrics||{}).redirect},{name:"DNS",value:e.dns,color:"purple",onChart:!0},{name:"Connection",value:e.connection,color:"blue",onChart:!0},{name:"Waiting",value:e.waiting,color:"red",onChart:!0},{name:"Receiving",value:e.receiving,color:"green",onChart:!0},{name:"To interactive",value:e.domInteractive,color:"blue",onChart:!0,dom:!0},{name:"To complete",value:e.domComplete,color:"purple",onChart:!0,dom:!0}]}},{key:"resolvePerformanceMetrics",value:function(e){if(!(e=e.performanceMetrics))return[{name:"App",value:this.responseDuration-this.database.time-this.cache.time,color:"blue"},{name:"DB",value:this.database.time,color:"red"},{name:"Cache",value:this.cache.time,color:"green"}].filter((function(e){return e.value>0}));var t=(e=e.filter((function(e){return e instanceof Object})).map((function(e,t){return e.color=e.color||"purple",e}))).reduce((function(e,t){return e+t.value}),0);return e.push({name:"Other",value:this.responseDuration-t,color:"purple"}),e}},{key:"resolveWebVitals",value:function(e){e=e.webVitals;var t={cls:{slow:7300,moderate:3800},fid:{slow:300,moderate:100},lcp:{slow:4e3,moderate:2e3},fcp:{slow:4e3,moderate:2e3},ttfb:{slow:600,moderate:600},si:{slow:5800,moderate:4300}};return Object.keys(t).forEach((function(n){var o=e[n],r="fast",a=void 0!==o;o>t[n].slow?r="slow":o>t[n].moderate&&(r="moderate"),e[n]={value:o,score:r,available:a}})),e}},{key:"getErrorsCount",value:function(e){return e.log.reduce((function(e,t){return"error"==t.level?e+1:e}),0)}},{key:"getWarningsCount",value:function(e){return e.log.filter((function(e){return"warning"==e.level})).length+this.database.queries.slow}},{key:"formatBytes",value:function(e){var t=Math.floor(Math.log(e)/Math.log(1024));return"".concat(Math.round(e/Math.round(Math.pow(1024,t)))," ").concat(["B","kB","MB","GB","TB","PB"][t])}},{key:"enforceArray",value:function(e){return e instanceof Array?e:[]}},{key:"optionalNonEmptyObject",value:function(e,t){return e instanceof Object&&Object.keys(e).filter((function(e){return"__type__"!=e})).length?e:t}}])&&r(t.prototype,n),o&&r(t,o),e}();function i(e){return function(e){if(Array.isArray(e))return l(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return l(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return l(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n0&&void 0!==arguments[0]?arguments[0]:0;this.enabled&&(t>3||fetch("".concat(this.path).concat(this.requestId)).then((function(e){return e.json()})).then((function(n){if(!Object.keys(n).length)return setTimeout((function(){return e.show(t+1)}),(t+1)*(t+1)*100);e.render(new a(n))})))}},{key:"render",value:function(e){var t='\n\t\t\t
\n\t\t\t\t'.concat(this.renderStatusSection(e),"\n\n\t\t\t\t").concat(this.renderSection({name:"Performance",icon:"activity",values:[{name:"Response time",value:e.responseDuration,unit:"ms"},{name:"Memory usage",value:e.memoryUsage}],popover:[{name:"Response time",value:e.responseDuration,unit:"ms"},{name:"Memory",value:e.memoryUsage}].concat(i(e.performanceMetrics.map((function(e){return Object.assign({unit:"ms"},e)})))),popoverClasses:"left-aligned"}),"\n\n\t\t\t\t").concat(this.renderSection({name:"Log",icon:"edit2",values:[{name:"Messages",value:e.log}]}),"\n\n\t\t\t\t").concat(this.renderSection({name:"Events",icon:"zap",values:[{name:"Events",value:e.events}]}),"\n\n\t\t\t\t").concat(this.renderSection({name:"Database",icon:"database",values:[{name:"Queries",value:e.database.queries.total},{name:"Database time",value:e.database.time,unit:"ms"}],popover:[{name:"Queries",value:e.database.queries.total},{name:"Slow",value:e.database.queries.slow},{name:"Selects",value:e.database.queries.selects},{name:"Inserts",value:e.database.queries.inserts},{name:"Updates",value:e.database.queries.updates},{name:"Deletes",value:e.database.queries.deletes},{name:"Others",value:e.database.queries.others},{name:"Time",value:e.database.time,unit:"ms"}]}),"\n\n\t\t\t\t").concat(this.renderSection({name:"Models",icon:"disc",values:[{name:"Models",value:e.models.total}],popover:[{name:"Retrieved",value:e.models.retrieved},{name:"Created",value:e.models.created},{name:"Updated",value:e.models.updated},{name:"Deleted",value:e.models.deleted}]}),"\n\n\t\t\t\t").concat(this.renderSection({name:"Cache",icon:"paperclip",values:[{name:"Queries",value:e.cache.queries.total},{name:"Cache time",value:e.cache.time,unit:"ms"}],popover:[{name:"Queries",value:e.cache.queries.total},{name:"Reads",value:e.cache.queries.reads},{name:"Hits",value:e.cache.queries.hits},{name:"Writes",value:e.cache.queries.writes},{name:"Deletes",value:e.cache.queries.deletes},{name:"Time",value:e.cache.time,unit:"ms"}]}),"\n\n\t\t\t\t").concat(this.renderSection({name:"Redis",icon:"layers",values:[{name:"Commands",value:e.redis}]}),"\n\n\t\t\t\t").concat(this.renderSection({name:"Queue",icon:"clock",values:[{name:"Jobs",value:e.queue}]}),"\n\n\t\t\t\t").concat(this.renderSection({name:"Views",icon:"image",values:[{name:"Views",value:e.views}]}),"\n\n\t\t\t\t").concat(this.renderSection({name:"Notifications",icon:"mail",values:[{name:"Notifications",value:e.notifications}]}),"\n\n\t\t\t\t").concat(this.renderSection({name:"Routes",icon:"map",values:[{name:"Routes",value:e.routes}]}),'\n\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tShow details\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t').concat(o.arrowRight,"\n\t\t\t\t\t\n\t\t\t\t
\n\n\t\t\t\t").concat(this.renderChart(e.performanceMetrics),"\n\t\t\t\t").concat(this.renderChart(e.clientMetrics.filter((function(e){return e.onChart})),"chart-client"),"\n\t\t\t
\n\t\t");this.appendStyles();var n=document.createElement("div");n.innerHTML=t,document.querySelector("body").append(n)}},{key:"renderStatusSection",value:function(e){var t;return'\n\t\t\t
\n\t\t\t\t').concat(function(e){return e.errorsCount||e.isServerError()?o.alertCircle:e.warningsCount||e.isClientError()?o.alertTriangle:o.check}(e),"\n\t\t\t
\n\t\t")}},{key:"renderSection",value:function(e){var t=e.values.filter((function(e){return e.value})),n=e.popover?e.popover.filter((function(e){return e.value})):[];return t.forEach((function(e){return e.value=e.unit?"".concat(e.value," ").concat(e.unit):e.value})),n.forEach((function(e){return e.value=e.unit?"".concat(e.value," ").concat(e.unit):e.value})),t.length?'\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t').concat(o[e.icon],"\n\t\t\t\t
\n\t\t\t\t").concat(t.map((function(e){var t=e.name,n=e.value;return'
').concat(n,"
")})).join(""),'\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
').concat(o[e.icon]," ").concat(e.name,'
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t').concat(n.map((function(e){var t=e.name,n=e.value,o=e.color;return'
\n\t\t\t\t\t\t\t\t\t
'.concat(n,'
\n\t\t\t\t\t\t\t\t\t
').concat(t,"
\n\t\t\t\t\t\t\t\t
")})).join(""),"\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t"):""}},{key:"renderChart",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",n=e.reduce((function(e,t){return e+t.value}),0);return'\n\t\t\t
\n\t\t\t\t').concat(e.map((function(e){return'
')})).join(""),"\n\t\t\t
\n\t\t")}},{key:"appendStyles",value:function(){var e=document.createElement("style");e.innerHTML='\n.clockwork-toolbar {\n\talign-items: center;\n\tbackground: #fcfcfd;\n\tbottom: 0;\n\tbox-sizing: border-box;\n\tcolor: #000;\n\tcursor: default;\n\tdisplay: flex;\n\tfont-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;\n\tfont-size: 13px;\n\tfont-weight: normal;\n\theight: 32px;\n\tleft: 0;\n\tposition: fixed;\n\twidth: 100%;\n\tz-index: 9999;\n}\n\n.clockwork-toolbar * {\n\tbox-sizing: border-box;\n}\n\n.clockwork-toolbar-status {\n\talign-items: center;\n\tdisplay: flex;\n\theight: 100%;\n\tjustify-content: center;\n\twidth: 32px;\n}\n\n.clockwork-toolbar-status.success {\n background: hsl(109, 52%, 45%);\n color: #fff;\n}\n\n.clockwork-toolbar-status.warning {\n background: hsl(33, 87%, 47%);\n color: #fff;\n}\n\n.clockwork-toolbar-status.error {\n background: hsl(359, 57%, 55%);\n color: #fff;\n}\n\n.clockwork-toolbar-section {\n\talign-items: center;\n\tborder-right: 1px solid #d1d1e0;\n\tborder-right: 1px solid #f3f3f3;\n\tdisplay: flex;\n\theight: 100%;\n\tpadding: 0 14px;\n\tposition: relative;\n}\n\n.clockwork-toolbar-section-value {\n\tcolor: #258cdb;\n\tfont-size: 95%;\n\tfont-weight: 600;\n\tpadding-left: 10px;\n}\n\n.clockwork-toolbar-section-popover {\n\tbottom: 100%;\n\tdisplay: none;\n\tleft: 50%;\n\tpadding-bottom: 17px;\n\tposition: absolute;\n transform: translateX(-50%);\n\tz-index: 666;\n}\n\n.clockwork-toolbar-section:hover .clockwork-toolbar-section-popover {\n\tdisplay: block;\n}\n\n.clockwork-toolbar-section-popover-content {\n\tbackground: hsl(240, 20%, 99%);\n\tborder-radius: 8px;\n\tbox-shadow: 0 1px 5px rgba(33, 33, 33, 0.4);\n\tfont-size: 90%;\n\tmax-height: 400px;\n\toverflow: auto;\n\twidth: 100%;\n}\n\n.clockwork-toolbar-section-popover-content:before, .clockwork-toolbar-section-popover-content:after {\n\tborder-style: solid;\n\tcontent: \'\';\n\theight: 0;\n\tposition: absolute;\n\twidth: 0;\n}\n\n.clockwork-toolbar-section-popover-content:before {\n\tborder-color: hsl(240, 20%, 99%) transparent transparent transparent;\n\tborder-width: 11px 11px 0 11px;\n\tbottom: 7px;\n\tleft: calc(50% - 10px);\n\tz-index: 500;\n}\n\n.clockwork-toolbar-section-popover-content:after {\n\tborder-color: rgba(33, 33, 33, 0.06) transparent transparent transparent;\n\tborder-width: 12px 12px 0 12px;\n\tbottom: 5px;\n\tleft: calc(50% - 11px);\n}\n\n.clockwork-toolbar-section-popover.left-aligned {\n transform: translateX(-35px);\n}\n\n.clockwork-toolbar-section-popover.left-aligned .clockwork-toolbar-section-popover-content:before {\n\tleft: 35px;\n\tright: auto;\n}\n\n.clockwork-toolbar-section-popover.left-aligned .clockwork-toolbar-section-popover-content:after {\n\tleft: 34px;\n\tright: auto;\n}\n\n.clockwork-toolbar-section-popover-title {\n\talign-items: center;\n\tcolor: #404040;\n\tdisplay: flex;\n padding: 8px 12px;\n}\n\n.clockwork-toolbar-section-popover-title .feather {\n\tmargin-right: 5px;\n}\n\n.clockwork-toolbar-section-popover-values {\n align-items: center;\n\tborder-top: 1px solid #e7e7ef;\n display: flex;\n}\n\n.clockwork-toolbar-section-popover-value {\n\tborder-right: 1px solid #e7e7ef;\n cursor: default;\n padding: 8px 12px 8px;\n}\n\n.clockwork-toolbar-section-popover-value .value {\n color: #258cdb;\n font-size: 135%;\n margin-bottom: 3px;\n white-space: nowrap;\n}\n\n.clockwork-toolbar-section-popover-value .title {\n color: #777;\n font-size: 85%;\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n.clockwork-toolbar-section-popover-value .title.has-mark:before {\n\tborder-radius: 50%;\n\tcontent: \'\';\n\tdisplay: inline-block;\n\theight: 7px;\n\tmargin-right: 3px;\n\twidth: 7px;\n}\n\n.clockwork-toolbar-section-popover-value .title.mark-blue:before {\n\tbackground: hsl(212, 89%, 55%);\n}\n\n.clockwork-toolbar-section-popover-value .title.mark-red:before {\n\tbackground: hsl(359, 57%, 55%);\n}\n\n.clockwork-toolbar-section-popover-value .title.mark-green:before {\n\tbackground: hsl(109, 52%, 45%);\n}\n\n.clockwork-toolbar-section-popover-value .title.mark-purple:before {\n\tbackground: hsl(273, 57%, 55%);\n}\n\n.clockwork-toolbar-section-popover-value .title.mark-grey:before {\n\tbackground: hsl(240, 5, 27);\n}\n\n.clockwork-toolbar-details {\n\talign-items: center;\n\tdisplay: flex;\n\theight: 100%;\n\tmargin-left: auto;\n}\n\n.clockwork-toolbar-details-label {\n\tfont-size: 85%;\n}\n\n.clockwork-toolbar-details-button {\n\talign-items: center;\n\tbackground: hsl(30, 1%, 96%);\n\tbackground: #2786f3;\n\tcolor: dimgrey;\n\tcolor: #fff;\n\tdisplay: flex;\n\theight: 100%;\n\tjustify-content: center;\n\tmargin-left: 8px;\n\ttext-decoration: none;\n\twidth: 32px;\n}\n\n.clockwork-toolbar-performance-chart {\n\tposition: absolute;\n\tleft: 0;\n\ttop: 0;\n\theight: 1px;\n\tdisplay: flex;\n\twidth: calc(100% - 64px);\n\tleft: 32px;\n}\n\n.clockwork-toolbar-performance-chart .bar {\n\theight: 100%;\n}\n\n.clockwork-toolbar-performance-chart .bar.blue {\n\tbackground: hsl(212, 89%, 55%);\n}\n\n.clockwork-toolbar-performance-chart .bar.red {\n\tbackground: hsl(359, 57%, 55%);\n}\n\n.clockwork-toolbar-performance-chart .bar.green {\n\tbackground: hsl(109, 52%, 45%);\n}\n\n.clockwork-toolbar-performance-chart .bar.purple {\n\tbackground: hsl(273, 57%, 55%);\n}\n\n.clockwork-toolbar-performance-chart .bar.grey {\n\tbackground: hsl(240, 5, 27);\n}\n\n.clockwork-toolbar-performance-chart.chart-client {\n\tbottom: 0;\n\ttop: inherit;\n}\n\n.clockwork-toolbar .feather {\n\tdisplay: inline-block;\n\theight: 1em;\n\twidth: 1em;\n\tvertical-align: -0.125em;\n}\n\n.clockwork-toolbar .feather svg {\n\tdisplay: block;\n\theight: 100%;\n\twidth: 100%;\n}\n',document.querySelector("body").append(e)}},{key:"payload",value:function(){var e=document.cookie.match(/(?:^| )x-clockwork=([^;]*)/);return e?JSON.parse(decodeURIComponent(e[1])):{}}}])&&s(t.prototype,n),r&&s(t,r),e}())).show()}]); \ No newline at end of file +!function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";n.r(t);var o={activity:'',alertCircle:'',alertTriangle:'',arrowRight:'',check:'',database:'',disc:'',edit2:'',image:'',layers:'',mail:'',map:'',paperclip:'',zap:''};function r(e,t){for(var n=0;n=400&&this.responseStatus<500}},{key:"isServerError",value:function(){return this.responseStatus>=500&&this.responseStatus<600}},{key:"resolveCache",value:function(e){var t=parseInt(e.cacheDeletes),n=parseInt(e.cacheHits),o=parseInt(e.cacheReads),r=parseInt(e.cacheWrites);return{queries:{deletes:t,hits:n,reads:o,writes:r,total:t+n+o+r},time:e.cacheTime}}},{key:"resolveDatabase",value:function(e){var t=this.enforceArray(e.databaseQueries);return{queries:{total:parseInt(e.databaseQueriesCount)||t.length,slow:parseInt(e.databaseSlowQueries)||t.filter((function(e){return e.tags&&e.tags.includes("slow")})).length,selects:parseInt(e.databaseSelects)||t.filter((function(e){return e.query.match(/^select /i)})).length,inserts:parseInt(e.databaseInserts)||t.filter((function(e){return e.query.match(/^insert /i)})).length,updates:parseInt(e.databaseUpdates)||t.filter((function(e){return e.query.match(/^update /i)})).length,deletes:parseInt(e.databaseDeletes)||t.filter((function(e){return e.query.match(/^delete /i)})).length,others:parseInt(e.databaseOthers)||t.filter((function(e){return!e.query.match(/^(select|insert|update|delete) /i)})).length},time:Math.round(e.databaseDuration)}}},{key:"resolveEvents",value:function(e){return this.enforceArray(e.events).length}},{key:"resolveLog",value:function(e){return this.enforceArray(e.log).length}},{key:"resolveModels",value:function(e){var t=Object.values(e.modelsRetrieved).reduce((function(e,t){return e+t}),0),n=Object.values(e.modelsCreated).reduce((function(e,t){return e+t}),0),o=Object.values(e.modelsUpdated).reduce((function(e,t){return e+t}),0),r=Object.values(e.modelsDeleted).reduce((function(e,t){return e+t}),0);return{retrieved:t,created:n,updated:o,deleted:r,total:t+n+o+r}}},{key:"resolveNotifications",value:function(e){return this.enforceArray(e.notifications).length+Object.values(this.optionalNonEmptyObject(e.emailsData,{})).length}},{key:"resolveQueueJobs",value:function(e){return this.enforceArray(e.queueJobs).length}},{key:"resolveRedisCommands",value:function(e){return this.enforceArray(e.redisCommands).length}},{key:"resolveViews",value:function(e){return Object.values(this.optionalNonEmptyObject(e.viewsData,{})).length}},{key:"resolveClientMetrics",value:function(e){return[{name:"Redirect",value:(e=e.clientMetrics||{}).redirect},{name:"DNS",value:e.dns,color:"purple",onChart:!0},{name:"Connection",value:e.connection,color:"blue",onChart:!0},{name:"Waiting",value:e.waiting,color:"red",onChart:!0},{name:"Receiving",value:e.receiving,color:"green",onChart:!0},{name:"To interactive",value:e.domInteractive,color:"blue",onChart:!0,dom:!0},{name:"To complete",value:e.domComplete,color:"purple",onChart:!0,dom:!0}]}},{key:"resolvePerformanceMetrics",value:function(e){if(!(e=e.performanceMetrics))return[{name:"App",value:this.responseDuration-this.database.time-this.cache.time,color:"blue"},{name:"DB",value:this.database.time,color:"red"},{name:"Cache",value:this.cache.time,color:"green"}].filter((function(e){return e.value>0}));var t=(e=e.filter((function(e){return e instanceof Object})).map((function(e,t){return e.color=e.color||"purple",e}))).reduce((function(e,t){return e+t.value}),0);return e.push({name:"Other",value:this.responseDuration-t,color:"purple"}),e}},{key:"resolveWebVitals",value:function(e){e=e.webVitals;var t={cls:{slow:7300,moderate:3800},fid:{slow:300,moderate:100},lcp:{slow:4e3,moderate:2e3},fcp:{slow:4e3,moderate:2e3},ttfb:{slow:600,moderate:600},si:{slow:5800,moderate:4300}};return Object.keys(t).forEach((function(n){var o=e[n],r="fast",a=void 0!==o;o>t[n].slow?r="slow":o>t[n].moderate&&(r="moderate"),e[n]={value:o,score:r,available:a}})),e}},{key:"getErrorsCount",value:function(e){return e.log.reduce((function(e,t){return"error"==t.level?e+1:e}),0)}},{key:"getWarningsCount",value:function(e){return e.log.filter((function(e){return"warning"==e.level})).length+this.database.queries.slow}},{key:"formatBytes",value:function(e){var t=Math.floor(Math.log(e)/Math.log(1024));return"".concat(Math.round(e/Math.round(Math.pow(1024,t)))," ").concat(["B","kB","MB","GB","TB","PB"][t])}},{key:"enforceArray",value:function(e){return e instanceof Array?e:[]}},{key:"optionalNonEmptyObject",value:function(e,t){return e instanceof Object&&Object.keys(e).filter((function(e){return"__type__"!=e})).length?e:t}}])&&r(t.prototype,n),o&&r(t,o),e}();function i(e){return function(e){if(Array.isArray(e))return l(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return l(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return l(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n0&&void 0!==arguments[0]?arguments[0]:0;this.enabled&&(t>3||fetch("".concat(this.path).concat(this.requestId)).then((function(e){return e.json()})).then((function(n){if(!Object.keys(n).length)return setTimeout((function(){return e.show(t+1)}),(t+1)*(t+1)*100);e.render(new a(n))})))}},{key:"render",value:function(e){var t='\n\t\t\t
\n\t\t\t\t'.concat(this.renderStatusSection(e),"\n\n\t\t\t\t").concat(this.renderSection({name:"Performance",icon:"activity",values:[{name:"Response time",value:e.responseDuration,unit:"ms"},{name:"Memory usage",value:e.memoryUsage}],popover:[{name:"Response time",value:e.responseDuration,unit:"ms"},{name:"Memory",value:e.memoryUsage}].concat(i(e.performanceMetrics.map((function(e){return Object.assign({unit:"ms"},e)})))),popoverClasses:"left-aligned"}),"\n\n\t\t\t\t").concat(this.renderSection({name:"Log",icon:"edit2",values:[{name:"Messages",value:e.log}]}),"\n\n\t\t\t\t").concat(this.renderSection({name:"Events",icon:"zap",values:[{name:"Events",value:e.events}]}),"\n\n\t\t\t\t").concat(this.renderSection({name:"Database",icon:"database",values:[{name:"Queries",value:e.database.queries.total},{name:"Database time",value:e.database.time,unit:"ms"}],popover:[{name:"Queries",value:e.database.queries.total},{name:"Slow",value:e.database.queries.slow},{name:"Selects",value:e.database.queries.selects},{name:"Inserts",value:e.database.queries.inserts},{name:"Updates",value:e.database.queries.updates},{name:"Deletes",value:e.database.queries.deletes},{name:"Others",value:e.database.queries.others},{name:"Time",value:e.database.time,unit:"ms"}]}),"\n\n\t\t\t\t").concat(this.renderSection({name:"Models",icon:"disc",values:[{name:"Models",value:e.models.total}],popover:[{name:"Retrieved",value:e.models.retrieved},{name:"Created",value:e.models.created},{name:"Updated",value:e.models.updated},{name:"Deleted",value:e.models.deleted}]}),"\n\n\t\t\t\t").concat(this.renderSection({name:"Cache",icon:"paperclip",values:[{name:"Queries",value:e.cache.queries.total},{name:"Cache time",value:e.cache.time,unit:"ms"}],popover:[{name:"Queries",value:e.cache.queries.total},{name:"Reads",value:e.cache.queries.reads},{name:"Hits",value:e.cache.queries.hits},{name:"Writes",value:e.cache.queries.writes},{name:"Deletes",value:e.cache.queries.deletes},{name:"Time",value:e.cache.time,unit:"ms"}]}),"\n\n\t\t\t\t").concat(this.renderSection({name:"Redis",icon:"layers",values:[{name:"Commands",value:e.redis}]}),"\n\n\t\t\t\t").concat(this.renderSection({name:"Queue",icon:"clock",values:[{name:"Jobs",value:e.queue}]}),"\n\n\t\t\t\t").concat(this.renderSection({name:"Views",icon:"image",values:[{name:"Views",value:e.views}]}),"\n\n\t\t\t\t").concat(this.renderSection({name:"Notifications",icon:"mail",values:[{name:"Notifications",value:e.notifications}]}),"\n\n\t\t\t\t").concat(this.renderSection({name:"Routes",icon:"map",values:[{name:"Routes",value:e.routes}]}),'\n\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tShow details\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t').concat(o.arrowRight,"\n\t\t\t\t\t\n\t\t\t\t
\n\n\t\t\t\t").concat(this.renderChart(e.performanceMetrics),"\n\t\t\t\t").concat(this.renderChart(e.clientMetrics.filter((function(e){return e.onChart})),"chart-client"),"\n\t\t\t
\n\t\t");this.appendStyles();var n=document.createElement("div");n.innerHTML=t,document.querySelector("body").append(n)}},{key:"renderStatusSection",value:function(e){var t;return'\n\t\t\t
\n\t\t\t\t').concat(function(e){return e.errorsCount||e.isServerError()?o.alertCircle:e.warningsCount||e.isClientError()?o.alertTriangle:o.check}(e),"\n\t\t\t
\n\t\t")}},{key:"renderSection",value:function(e){var t=e.values.filter((function(e){return e.value})),n=e.popover?e.popover.filter((function(e){return e.value})):[];return t.forEach((function(e){return e.value=e.unit?"".concat(e.value," ").concat(e.unit):e.value})),n.forEach((function(e){return e.value=e.unit?"".concat(e.value," ").concat(e.unit):e.value})),t.length?'\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t').concat(o[e.icon],"\n\t\t\t\t
\n\t\t\t\t").concat(t.map((function(e){var t=e.name,n=e.value;return'
').concat(n,"
")})).join(""),'\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
').concat(o[e.icon]," ").concat(e.name,'
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t').concat(n.map((function(e){var t=e.name,n=e.value,o=e.color;return'
\n\t\t\t\t\t\t\t\t\t
'.concat(n,'
\n\t\t\t\t\t\t\t\t\t
').concat(t,"
\n\t\t\t\t\t\t\t\t
")})).join(""),"\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t"):""}},{key:"renderChart",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",n=e.reduce((function(e,t){return e+t.value}),0);return'\n\t\t\t
\n\t\t\t\t').concat(e.map((function(e){return'
')})).join(""),"\n\t\t\t
\n\t\t")}},{key:"appendStyles",value:function(){var e=document.createElement("style");e.innerHTML='\n.clockwork-toolbar {\n\talign-items: center;\n\tbackground: #fcfcfd;\n\tbottom: 0;\n\tbox-sizing: border-box;\n\tcolor: #000;\n\tcursor: default;\n\tdisplay: flex;\n\tfont-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;\n\tfont-size: 13px;\n\tfont-weight: normal;\n\theight: 32px;\n\tleft: 0;\n\tposition: fixed;\n\twidth: 100%;\n\tz-index: 9999;\n}\n\n.clockwork-toolbar * {\n\tbox-sizing: border-box;\n}\n\n.clockwork-toolbar-status {\n\talign-items: center;\n\tdisplay: flex;\n\theight: 100%;\n\tjustify-content: center;\n\twidth: 32px;\n}\n\n.clockwork-toolbar-status.success {\n background: hsl(109, 52%, 45%);\n color: #fff;\n}\n\n.clockwork-toolbar-status.warning {\n background: hsl(33, 87%, 47%);\n color: #fff;\n}\n\n.clockwork-toolbar-status.error {\n background: hsl(359, 57%, 55%);\n color: #fff;\n}\n\n.clockwork-toolbar-section {\n\talign-items: center;\n\tborder-right: 1px solid #d1d1e0;\n\tborder-right: 1px solid #f3f3f3;\n\tdisplay: flex;\n\theight: 100%;\n\tpadding: 0 14px;\n\tposition: relative;\n}\n\n.clockwork-toolbar-section-value {\n\tcolor: #258cdb;\n\tfont-size: 95%;\n\tfont-weight: 600;\n\tpadding-left: 10px;\n}\n\n.clockwork-toolbar-section-popover {\n\tbottom: 100%;\n\tdisplay: none;\n\tleft: 50%;\n\tpadding-bottom: 17px;\n\tposition: absolute;\n transform: translateX(-50%);\n\tz-index: 666;\n}\n\n.clockwork-toolbar-section:hover .clockwork-toolbar-section-popover {\n\tdisplay: block;\n}\n\n.clockwork-toolbar-section-popover-content {\n\tbackground: hsl(240, 20%, 99%);\n\tborder-radius: 8px;\n\tbox-shadow: 0 1px 5px rgba(33, 33, 33, 0.4);\n\tfont-size: 90%;\n\tmax-height: 400px;\n\toverflow: auto;\n\twidth: 100%;\n}\n\n.clockwork-toolbar-section-popover-content:before, .clockwork-toolbar-section-popover-content:after {\n\tborder-style: solid;\n\tcontent: \'\';\n\theight: 0;\n\tposition: absolute;\n\twidth: 0;\n}\n\n.clockwork-toolbar-section-popover-content:before {\n\tborder-color: hsl(240, 20%, 99%) transparent transparent transparent;\n\tborder-width: 11px 11px 0 11px;\n\tbottom: 7px;\n\tleft: calc(50% - 10px);\n\tz-index: 500;\n}\n\n.clockwork-toolbar-section-popover-content:after {\n\tborder-color: rgba(33, 33, 33, 0.06) transparent transparent transparent;\n\tborder-width: 12px 12px 0 12px;\n\tbottom: 5px;\n\tleft: calc(50% - 11px);\n}\n\n.clockwork-toolbar-section-popover.left-aligned {\n transform: translateX(-35px);\n}\n\n.clockwork-toolbar-section-popover.left-aligned .clockwork-toolbar-section-popover-content:before {\n\tleft: 35px;\n\tright: auto;\n}\n\n.clockwork-toolbar-section-popover.left-aligned .clockwork-toolbar-section-popover-content:after {\n\tleft: 34px;\n\tright: auto;\n}\n\n.clockwork-toolbar-section-popover-title {\n\talign-items: center;\n\tcolor: #404040;\n\tdisplay: flex;\n padding: 8px 12px;\n}\n\n.clockwork-toolbar-section-popover-title .feather {\n\tmargin-right: 5px;\n}\n\n.clockwork-toolbar-section-popover-values {\n align-items: center;\n\tborder-top: 1px solid #e7e7ef;\n display: flex;\n}\n\n.clockwork-toolbar-section-popover-value {\n\tborder-right: 1px solid #e7e7ef;\n cursor: default;\n padding: 8px 12px 8px;\n}\n\n.clockwork-toolbar-section-popover-value .value {\n color: #258cdb;\n font-size: 135%;\n margin-bottom: 3px;\n white-space: nowrap;\n}\n\n.clockwork-toolbar-section-popover-value .title {\n color: #777;\n font-size: 85%;\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n.clockwork-toolbar-section-popover-value .title.has-mark:before {\n\tborder-radius: 50%;\n\tcontent: \'\';\n\tdisplay: inline-block;\n\theight: 7px;\n\tmargin-right: 3px;\n\twidth: 7px;\n}\n\n.clockwork-toolbar-section-popover-value .title.mark-blue:before {\n\tbackground: hsl(212, 89%, 55%);\n}\n\n.clockwork-toolbar-section-popover-value .title.mark-red:before {\n\tbackground: hsl(359, 57%, 55%);\n}\n\n.clockwork-toolbar-section-popover-value .title.mark-green:before {\n\tbackground: hsl(109, 52%, 45%);\n}\n\n.clockwork-toolbar-section-popover-value .title.mark-purple:before {\n\tbackground: hsl(273, 57%, 55%);\n}\n\n.clockwork-toolbar-section-popover-value .title.mark-grey:before {\n\tbackground: hsl(240, 5, 27);\n}\n\n.clockwork-toolbar-details {\n\talign-items: center;\n\tdisplay: flex;\n\theight: 100%;\n\tmargin-left: auto;\n}\n\n.clockwork-toolbar-details-label {\n\tfont-size: 85%;\n}\n\n.clockwork-toolbar-details-button {\n\talign-items: center;\n\tbackground: hsl(30, 1%, 96%);\n\tbackground: #2786f3;\n\tcolor: dimgrey;\n\tcolor: #fff;\n\tdisplay: flex;\n\theight: 100%;\n\tjustify-content: center;\n\tmargin-left: 8px;\n\ttext-decoration: none;\n\twidth: 32px;\n}\n\n.clockwork-toolbar-performance-chart {\n\tposition: absolute;\n\tleft: 0;\n\ttop: 0;\n\theight: 1px;\n\tdisplay: flex;\n\twidth: calc(100% - 64px);\n\tleft: 32px;\n}\n\n.clockwork-toolbar-performance-chart .bar {\n\theight: 100%;\n}\n\n.clockwork-toolbar-performance-chart .bar.blue {\n\tbackground: hsl(212, 89%, 55%);\n}\n\n.clockwork-toolbar-performance-chart .bar.red {\n\tbackground: hsl(359, 57%, 55%);\n}\n\n.clockwork-toolbar-performance-chart .bar.green {\n\tbackground: hsl(109, 52%, 45%);\n}\n\n.clockwork-toolbar-performance-chart .bar.purple {\n\tbackground: hsl(273, 57%, 55%);\n}\n\n.clockwork-toolbar-performance-chart .bar.grey {\n\tbackground: hsl(240, 5, 27);\n}\n\n.clockwork-toolbar-performance-chart.chart-client {\n\tbottom: 0;\n\ttop: inherit;\n}\n\n.clockwork-toolbar .feather {\n\tdisplay: inline-block;\n\theight: 1em;\n\twidth: 1em;\n\tvertical-align: -0.125em;\n}\n\n.clockwork-toolbar .feather svg {\n\tdisplay: block;\n\theight: 100%;\n\twidth: 100%;\n}\n',document.querySelector("body").append(e)}},{key:"payload",value:function(){var e=document.cookie.match(/(?:^| )x-clockwork=([^;]*)/);return e?JSON.parse(decodeURIComponent(e[1])):{}}}])&&s(t.prototype,n),r&&s(t,r),e}())).show()}]); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 9ab2742..839335b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2050,7 +2050,6 @@ "dependencies": { "anymatch": "~3.1.1", "braces": "~3.0.2", - "fsevents": "~2.1.2", "glob-parent": "~5.1.0", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", @@ -5907,10 +5906,8 @@ "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==", "dev": true, "dependencies": { - "chokidar": "^3.4.1", "graceful-fs": "^4.1.2", - "neo-async": "^2.5.0", - "watchpack-chokidar2": "^2.0.1" + "neo-async": "^2.5.0" }, "optionalDependencies": { "chokidar": "^3.4.1", @@ -5972,7 +5969,6 @@ "anymatch": "^2.0.0", "async-each": "^1.0.1", "braces": "^2.3.2", - "fsevents": "^1.2.7", "glob-parent": "^3.1.0", "inherits": "^2.0.3", "is-binary-path": "^1.0.0",