Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

clockwork-browser

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

clockwork-browser - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

4

CHANGELOG.md

@@ -0,1 +1,5 @@

1.1.1
- fixed crash when the metadata contains queries without tags (reported by Etmolf, thanks)
1.1

@@ -2,0 +6,0 @@

2

dist/toolbar.js

@@ -1,1 +0,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:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>',alertCircle:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>',alertTriangle:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>',arrowRight:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>',check:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>',database:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-database"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path></svg>',disc:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-disc"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="3"></circle></svg>',edit2:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>',image:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>',layers:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>',mail:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>',map:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon><line x1="8" y1="2" x2="8" y2="18"></line><line x1="16" y1="6" x2="16" y2="22"></line></svg>',paperclip:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-paperclip"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>',zap:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>'};function r(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}var a=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.id=t.id,this.responseDuration=Math.round(parseFloat(t.responseDuration)),this.memoryUsage=this.formatBytes(t.memoryUsage),this.cache=this.resolveCache(t),this.database=this.resolveDatabase(t),this.events=this.resolveEvents(t),this.log=this.resolveLog(t),this.models=this.resolveModels(t),this.notifications=this.resolveNotifications(t),this.queueJobs=this.resolveQueueJobs(t),this.redisCommands=this.resolveRedisCommands(t),this.views=this.resolveViews(t),this.performanceMetrics=this.resolvePerformanceMetrics(t),this.clientMetrics=this.resolveClientMetrics(t),this.webVitals=this.resolveWebVitals(t),this.errorsCount=this.getErrorsCount(t),this.warningsCount=this.getWarningsCount(t)}var t,n,o;return t=e,(n=[{key:"isClientError",value:function(){return this.responseStatus>=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);n<t;n++)o[n]=e[n];return o}function s(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}(new(function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e);var t=this.payload();this.enabled=t.toolbar,this.requestId=t.requestId,this.path=t.path||"/__clockwork/",this.webPath=t.webPath||"/clockwork/app"}var t,n,r;return t=e,(n=[{key:"show",value:function(){var e=this,t=arguments.length>0&&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<div class="clockwork-toolbar">\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<div class="clockwork-toolbar-details">\n\t\t\t\t\t<span class="clockwork-toolbar-details-label">\n\t\t\t\t\t\tShow details\n\t\t\t\t\t</span>\n\t\t\t\t\t<a href="').concat(this.webPath,"#").concat(e.id,'" target="_blank" class="clockwork-toolbar-details-button">\n\t\t\t\t\t\t').concat(o.arrowRight,"\n\t\t\t\t\t</a>\n\t\t\t\t</div>\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</div>\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<div class="clockwork-toolbar-status '.concat((t=e,t.errorsCount||t.isServerError()?"error":t.warningsCount||t.isClientError()?"warning":"success"),'">\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</div>\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,"&nbsp;").concat(e.unit):e.value})),n.forEach((function(e){return e.value=e.unit?"".concat(e.value,"&nbsp;").concat(e.unit):e.value})),t.length?'\n\t\t\t<div class="clockwork-toolbar-section">\n\t\t\t\t<div class="clockwork-toolbar-section-icon" title="'.concat(e.name,'">\n\t\t\t\t\t').concat(o[e.icon],"\n\t\t\t\t</div>\n\t\t\t\t").concat(t.map((function(e){var t=e.name,n=e.value;return'<div class="clockwork-toolbar-section-value" title="'.concat(t,'">').concat(n,"</div>")})).join(""),'\n\t\t\t\t<div class="clockwork-toolbar-section-popover ').concat(e.popoverClasses||"",'">\n\t\t\t\t\t<div class="clockwork-toolbar-section-popover-content">\n\t\t\t\t\t\t<div class="clockwork-toolbar-section-popover-title">').concat(o[e.icon]," ").concat(e.name,'</div>\n\t\t\t\t\t\t<div class="clockwork-toolbar-section-popover-values">\n\t\t\t\t\t\t\t').concat(n.map((function(e){var t=e.name,n=e.value,o=e.color;return'<div class="clockwork-toolbar-section-popover-value">\n\t\t\t\t\t\t\t\t\t<div class="value">'.concat(n,'</div>\n\t\t\t\t\t\t\t\t\t<div class="title ').concat(o?"has-mark mark-".concat(o):"",'">').concat(t,"</div>\n\t\t\t\t\t\t\t\t</div>")})).join(""),"\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\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<div class="clockwork-toolbar-performance-chart '.concat(t,'">\n\t\t\t\t').concat(e.map((function(e){return'<div class="bar '.concat(e.color,'" title="').concat(e.name,'" style="width:').concat(e.value/n*100,'%"></div>')})).join(""),"\n\t\t\t</div>\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()}]);
!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:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>',alertCircle:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>',alertTriangle:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>',arrowRight:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>',check:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>',database:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-database"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path></svg>',disc:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-disc"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="3"></circle></svg>',edit2:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>',image:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>',layers:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>',mail:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>',map:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon><line x1="8" y1="2" x2="8" y2="18"></line><line x1="16" y1="6" x2="16" y2="22"></line></svg>',paperclip:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-paperclip"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>',zap:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>'};function r(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}var a=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.id=t.id,this.responseDuration=Math.round(parseFloat(t.responseDuration)),this.memoryUsage=this.formatBytes(t.memoryUsage),this.cache=this.resolveCache(t),this.database=this.resolveDatabase(t),this.events=this.resolveEvents(t),this.log=this.resolveLog(t),this.models=this.resolveModels(t),this.notifications=this.resolveNotifications(t),this.queueJobs=this.resolveQueueJobs(t),this.redisCommands=this.resolveRedisCommands(t),this.views=this.resolveViews(t),this.performanceMetrics=this.resolvePerformanceMetrics(t),this.clientMetrics=this.resolveClientMetrics(t),this.webVitals=this.resolveWebVitals(t),this.errorsCount=this.getErrorsCount(t),this.warningsCount=this.getWarningsCount(t)}var t,n,o;return t=e,(n=[{key:"isClientError",value:function(){return this.responseStatus>=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);n<t;n++)o[n]=e[n];return o}function s(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}(new(function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e);var t=this.payload();this.enabled=t.toolbar,this.requestId=t.requestId,this.path=t.path||"/__clockwork/",this.webPath=t.webPath||"/clockwork/app"}var t,n,r;return t=e,(n=[{key:"show",value:function(){var e=this,t=arguments.length>0&&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<div class="clockwork-toolbar">\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<div class="clockwork-toolbar-details">\n\t\t\t\t\t<span class="clockwork-toolbar-details-label">\n\t\t\t\t\t\tShow details\n\t\t\t\t\t</span>\n\t\t\t\t\t<a href="').concat(this.webPath,"#").concat(e.id,'" target="_blank" class="clockwork-toolbar-details-button">\n\t\t\t\t\t\t').concat(o.arrowRight,"\n\t\t\t\t\t</a>\n\t\t\t\t</div>\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</div>\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<div class="clockwork-toolbar-status '.concat((t=e,t.errorsCount||t.isServerError()?"error":t.warningsCount||t.isClientError()?"warning":"success"),'">\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</div>\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,"&nbsp;").concat(e.unit):e.value})),n.forEach((function(e){return e.value=e.unit?"".concat(e.value,"&nbsp;").concat(e.unit):e.value})),t.length?'\n\t\t\t<div class="clockwork-toolbar-section">\n\t\t\t\t<div class="clockwork-toolbar-section-icon" title="'.concat(e.name,'">\n\t\t\t\t\t').concat(o[e.icon],"\n\t\t\t\t</div>\n\t\t\t\t").concat(t.map((function(e){var t=e.name,n=e.value;return'<div class="clockwork-toolbar-section-value" title="'.concat(t,'">').concat(n,"</div>")})).join(""),'\n\t\t\t\t<div class="clockwork-toolbar-section-popover ').concat(e.popoverClasses||"",'">\n\t\t\t\t\t<div class="clockwork-toolbar-section-popover-content">\n\t\t\t\t\t\t<div class="clockwork-toolbar-section-popover-title">').concat(o[e.icon]," ").concat(e.name,'</div>\n\t\t\t\t\t\t<div class="clockwork-toolbar-section-popover-values">\n\t\t\t\t\t\t\t').concat(n.map((function(e){var t=e.name,n=e.value,o=e.color;return'<div class="clockwork-toolbar-section-popover-value">\n\t\t\t\t\t\t\t\t\t<div class="value">'.concat(n,'</div>\n\t\t\t\t\t\t\t\t\t<div class="title ').concat(o?"has-mark mark-".concat(o):"",'">').concat(t,"</div>\n\t\t\t\t\t\t\t\t</div>")})).join(""),"\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\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<div class="clockwork-toolbar-performance-chart '.concat(t,'">\n\t\t\t\t').concat(e.map((function(e){return'<div class="bar '.concat(e.color,'" title="').concat(e.name,'" style="width:').concat(e.value/n*100,'%"></div>')})).join(""),"\n\t\t\t</div>\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()}]);
{
"name": "clockwork-browser",
"version": "1.1.0",
"version": "1.1.1",
"description": "Clockwork client-side metrics collection and toolbar.",

@@ -5,0 +5,0 @@ "homepage": "https://underground.works/clockwork",

@@ -55,3 +55,3 @@ export default class Request

let slow = parseInt(data.databaseSlowQueries)
|| queries.filter(query => query.tags.includes('slow')).length
|| queries.filter(query => query.tags && query.tags.includes('slow')).length
let selects = parseInt(data.databaseSelects)

@@ -58,0 +58,0 @@ || queries.filter(query => query.query.match(/^select /i)).length

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc