Skip to content

Commit 7b07983

Browse files
jbrooksukjbrooksuk
authored
Merge pull request #4359 from cachethq/frontend-fixes
Frontend fixes
2 parents 2b85807 + 9472c78 commit 7b07983

File tree

19 files changed

+8803
-7787
lines changed

19 files changed

+8803
-7787
lines changed

‎composer.json

+5-2
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
"nexmo/client": "^1.5",
5656
"pragmarx/google2fa": "^5.0",
5757
"predis/predis": "^1.1",
58-
"twig/twig": "^3.0"
58+
"twig/twig": "^2.13"
5959
},
6060
"require-dev": {
6161
"ext-sqlite3": "*",
@@ -113,7 +113,10 @@
113113
},
114114
"preferred-install": "dist",
115115
"sort-packages": true,
116-
"optimize-autoloader": true
116+
"optimize-autoloader": true,
117+
"allow-plugins": {
118+
"kylekatarnls/update-helper": true
119+
}
117120
},
118121
"extra": {
119122
"branch-alias": {

‎composer.lock

+881-636
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+10-16
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,13 @@
77
"watch-poll": "npm run watch -- --watch-poll",
88
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
99
"prod": "npm run production",
10-
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
11-
"postinstall": "opencollective-postinstall || true"
10+
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
1211
},
1312
"devDependencies": {
1413
"animate-sass": "^0.8.2",
1514
"axios": "^0.19",
16-
"bootstrap-sass": "^3.4.1",
17-
"chart.js": "^2.9.3",
15+
"bootstrap-sass": "^3.4.3",
16+
"chart.js": "^2.9.4",
1817
"cross-env": "^5.1",
1918
"es5-shim": "^4.5.14",
2019
"flatpickr": "^4.5.7",
@@ -24,24 +23,19 @@
2423
"jquery-minicolors": "^2.1.10",
2524
"jquery-serializeobject": "^1.0.0",
2625
"jquery-sparkline": "^2.4.0",
27-
"laravel-mix": "^2.1",
28-
"laravel-mix-purgecss": "^3.0.0",
26+
"laravel-mix": "^5.0.9",
27+
"laravel-mix-purgecss": "^4.2.0",
2928
"livestamp": "git+https://github.com/mattbradley/livestampjs.git#develop",
3029
"lodash": "^4.17.13",
3130
"messenger": "git+https://github.com/HubSpot/messenger.git",
3231
"moment": "^2.24.0",
3332
"promise": "^7.3.1",
33+
"sass": "^1.69.5",
34+
"sass-loader": "^8.0.2",
3435
"sortablejs": "^1.8.4",
3536
"sweetalert2": "^6.8.0",
36-
"vue": "^2.6.10",
37-
"vue-template-compiler": "^2.6.10"
37+
"vue": "^2.7.15",
38+
"vue-template-compiler": "^2.7.15"
3839
},
39-
"private": true,
40-
"dependencies": {
41-
"opencollective-postinstall": "^2.0.2"
42-
},
43-
"collective": {
44-
"type": "opencollective",
45-
"url": "https://opencollective.com/Cachet"
46-
}
40+
"private": true
4741
}

‎public/dist/css/app.css

+4-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/dist/css/dashboard/dashboard.css

+5-6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/dist/js/all.js

+1-28
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/dist/js/app.js

+2-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/dist/js/manifest.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/dist/js/vendor.js

+2-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/mix-manifest.json

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
2-
"/dist/js/vendor.js": "/dist/js/vendor.js?id=e330d11061bb920e9441",
3-
"/dist/js/app.js": "/dist/js/app.js?id=85f4e87f2c37c96e623d",
4-
"/dist/css/dashboard/dashboard.css": "/dist/css/dashboard/dashboard.css?id=b6a9327dd3b9b7c7ed2d",
5-
"/dist/css/app.css": "/dist/css/app.css?id=c7bf7628a7a22dfec2ed",
6-
"/dist/js/manifest.js": "/dist/js/manifest.js?id=40dcfff9d09d402daf38",
7-
"/dist/js/all.js": "/dist/js/all.js?id=bbc128edf91b2898cdf0"
2+
"/dist/js/app.js": "/dist/js/app.js?id=077e70541c0df5adf687",
3+
"/dist/css/dashboard/dashboard.css": "/dist/css/dashboard/dashboard.css?id=7e9267fcdd1150802d64",
4+
"/dist/css/app.css": "/dist/css/app.css?id=1de6dbcedf7e30bc18d0",
5+
"/dist/js/manifest.js": "/dist/js/manifest.js?id=3c768977c2574a34506e",
6+
"/dist/js/vendor.js": "/dist/js/vendor.js?id=669b7556d754809958ea",
7+
"/dist/js/all.js": "/dist/js/all.js?id=8ccdfb9fa27b19a16205"
88
}

‎resources/assets/js/app.js

+7-3
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ window.axios.defaults.headers.common = {
2525
*/
2626
const Flatpickr = require('flatpickr');
2727

28+
import Metric from './components/status-page/Metric.vue';
29+
import Dashboard from './components/dashboard/Dashboard.vue';
30+
import Setup from './components/Setup.vue';
31+
2832
((win, doc) => {
2933
/**
3034
* Next, we will create a fresh Vue application instance and attach it to
@@ -56,9 +60,9 @@ const Flatpickr = require('flatpickr');
5660
});
5761
},
5862
components: {
59-
'setup': require('./components/Setup'),
60-
'dashboard': require('./components/dashboard/Dashboard'),
61-
'metric-chart': require('./components/status-page/Metric'),
63+
'setup': Setup,
64+
'dashboard': Dashboard,
65+
'metric-chart': Metric,
6266
}
6367
});
6468
})()

‎resources/assets/js/cachet.js

+2-18
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
$(function () {
1+
(function () {
22
// Ajax Setup
33
$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
44
var token;
@@ -310,22 +310,6 @@ $(function () {
310310
sparkLine();
311311
}
312312

313-
function goToStep(current, next) {
314-
// validation was ok. We can go on next step.
315-
$('.block-' + current)
316-
.removeClass('show')
317-
.addClass('hidden');
318-
319-
$('.block-' + next)
320-
.removeClass('hidden')
321-
.addClass('show');
322-
323-
$('.steps .step')
324-
.removeClass("active")
325-
.filter(":lt(" + (next) + ")")
326-
.addClass("active");
327-
}
328-
329313
// Check for updates.
330314
if ($('#update-alert').length > 0) {
331315
$.ajax({
@@ -357,4 +341,4 @@ $(function () {
357341
if (_.isFunction(cancelCallback)) cancelCallback();
358342
});
359343
}
360-
});
344+
}());

‎resources/assets/js/components/Setup.vue

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script>
2-
module.exports = {
3-
props: [],
2+
export default {
43
data () {
54
return {
65
env: {

‎resources/assets/js/components/status-page/Metric.vue

+22-19
Original file line numberDiff line numberDiff line change
@@ -24,28 +24,22 @@
2424
</div>
2525
<div class="row">
2626
<div class="col-xs-12">
27-
<canvas :id="metricId" height="160" width="600"></canvas>
27+
<canvas :id="metricId" height="200" width="900"></canvas>
2828
</div>
2929
</div>
3030
</div>
3131
</template>
3232

3333
<script>
3434
const Chart = require('chart.js')
35-
const _ = require('lodash')
36-
37-
// Configure Chart.js
38-
Chart.defaults.global.elements.point.hitRadius = 10
39-
Chart.defaults.global.responsiveAnimationDuration = 1000
40-
Chart.defaults.global.legend.display = false
41-
42-
module.exports = {
43-
props: [
44-
'metric',
45-
'theme',
46-
'theme-light',
47-
'theme-dark'
48-
],
35+
36+
export default {
37+
props: {
38+
metric: Object,
39+
theme: String,
40+
themeLight: String,
41+
themeDark: String,
42+
},
4943
data () {
5044
return {
5145
canvas: null,
@@ -77,15 +71,15 @@ module.exports = {
7771
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
7872
7973
this.context.fillStyle = "#666"
80-
this.context.font = '44px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
74+
this.context.font = '20px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
8175
82-
const textString = "Loading data",
83-
textWidth = this.context.measureText(textString).width
76+
const textString = "Loading metrics..."
77+
const textWidth = this.context.measureText(textString).width
8478
8579
this.canvas.textBaseline = 'middle'
8680
this.canvas.textAlign = "center"
8781
88-
this.context.fillText(textString , (this.canvas.width / 2) - (textWidth / 2), 100)
82+
this.context.fillText(textString, (this.canvas.width / 2) - (textWidth / 2), 100)
8983
}
9084
},
9185
methods: {
@@ -134,6 +128,7 @@ module.exports = {
134128
data_keys[i] = data_keys[i].substr(11);
135129
}
136130
}
131+
137132
this.chart = new Chart(this.context, {
138133
type: 'line',
139134
data: {
@@ -149,6 +144,14 @@ module.exports = {
149144
}]
150145
},
151146
options: {
147+
elements: {
148+
point: {
149+
hitRadius: 5
150+
}
151+
},
152+
legend: {
153+
display: false
154+
},
152155
scales: {
153156
yAxes: [{
154157
ticks: {

‎resources/assets/sass/status-page/_status-page.scss

+3
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ body.status-page {
3636
}
3737

3838
.tooltip {
39+
background-color: black;
3940
.tooltip-inner {
4041
padding: 8px 12px;
4142
font-size: 14px;
@@ -226,6 +227,8 @@ body.status-page {
226227
}
227228

228229
.panel-heading {
230+
padding-top: 1em;
231+
padding-bottom: 1.4em;
229232
strong {
230233
font-size: 1.1em;
231234
}

‎resources/views/partials/incidents.blade.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
<div class="list-group">
3535
@foreach($incident->updates as $update)
3636
<li class="list-group-item incident-update-item">
37-
37+
3838
<i class="{{ $update->icon }}" title="{{ $update->human_status }}" data-toggle="tooltip"></i>
3939
{!! $update->formatted_message !!}
4040
<small>

‎resources/views/partials/modules/metrics.blade.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<ul class="list-group">
55
@foreach($metrics as $metric)
66
<li class="list-group-item metric" data-metric-id="{{ $metric->id }}">
7-
<metric-chart :metric="{{ $metric->toJson() }}" :theme-light="{{ json_encode($themeMetrics) }}" :theme="{{ json_encode(color_darken($themeMetrics, -0.1)) }}" :theme-dark="{{ json_encode(color_darken($themeMetrics, -0.2)) }}"></metric-chart>
7+
<metric-chart :metric="{{ $metric->toJson() }}" theme-light="{{ $themeMetrics }}" theme="{{ color_darken($themeMetrics, -0.1) }}" theme-dark="{{ color_darken($themeMetrics, -0.2) }}"></metric-chart>
88
</li>
99
@endforeach
1010
</ul>

‎webpack.mix.js

+2-6
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,10 @@ require('laravel-mix-purgecss')
1313
|
1414
*/
1515

16-
const sassOptions = {
17-
includePaths: ['node_modules'],
18-
};
19-
2016
mix
2117
.copyDirectory('node_modules/ionicons/fonts', 'public/fonts')
22-
.sass('resources/assets/sass/dashboard.scss', 'public/dist/css/dashboard', sassOptions)
23-
.sass('resources/assets/sass/app.scss', 'public/dist/css', sassOptions)
18+
.sass('resources/assets/sass/dashboard.scss', 'public/dist/css/dashboard')
19+
.sass('resources/assets/sass/app.scss', 'public/dist/css')
2420
.purgeCss()
2521
.options({
2622
processCssUrls: false

0 commit comments

Comments
 (0)