Skip to content

Commit 1d0a9f6

Browse files
GHMattiGHMatti
GHMatti
authored and
GHMatti
committed
feat: migrate to tailwind and ghmattimysql 1.3.1
1 parent 73a52f7 commit 1d0a9f6

18 files changed

+175
-252
lines changed

‎src/.eslintrc.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
node: true,
5+
},
6+
extends: [
7+
'plugin:vue/essential',
8+
'@vue/airbnb',
9+
],
10+
parserOptions: {
11+
ecmaVersion: 2020,
12+
},
13+
rules: {
14+
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15+
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
16+
},
17+
};

‎src/entry/nui.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import Vue from 'vue';
2-
import vuetify from '../vendor/ghmattimysql/packages/ghmattimysql-ui/src/plugins/vuetify';
32
import App from '../ui/Nui.vue';
3+
import 'material-design-icons-iconfont/dist/material-design-icons.css';
44

55
Vue.config.productionTip = false;
66

77
new Vue({
8-
vuetify,
98
render: (h) => h(App),
109
}).$mount('#app');

‎src/package.json‎

Lines changed: 18 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@
55
"private": true,
66
"scripts": {
77
"build": "webpack --progress",
8+
"build:ui": "vue-cli-service build ./entry/nui.js",
89
"build:docs": "webpack --progress --config webpack.config.docs.js",
910
"deploy:docs": "gh-pages -d docs/dist",
11+
"lint:ui": "vue-cli-service lint ./entry/nui.js",
1012
"lint": "eslint '**/*.js'"
1113
},
1214
"contributors": [
@@ -15,43 +17,35 @@
1517
],
1618
"license": "MIT",
1719
"dependencies": {
20+
"autoprefixer": "^9.8.4",
1821
"chart.js": "^2.9.3",
1922
"material-design-icons-iconfont": "^5.0.1",
2023
"mysql": "^2.18.1",
21-
"vue": "^2.6.11",
22-
"vuetify": "^2.2.27"
24+
"tailwindcss": "^1.4.6",
25+
"vue": "^2.6.11"
2326
},
2427
"devDependencies": {
25-
"@babel/core": "^7.10.2",
26-
"@babel/plugin-transform-typescript": "^7.10.1",
27-
"@babel/preset-env": "^7.10.2",
28+
"@babel/core": "^7.10.4",
29+
"@babel/plugin-transform-typescript": "^7.10.4",
30+
"@babel/preset-env": "^7.10.4",
2831
"@citizenfx/client": "^1.0.2624-1",
2932
"@citizenfx/server": "^1.0.2624-1",
30-
"@intervolga/optimize-cssnano-plugin": "^1.0.6",
31-
"@types/mysql": "^2.15.13",
32-
"@types/node": "^14.0.13",
33-
"@vue/cli-plugin-eslint": "^4.3.1",
34-
"@vue/cli-service": "^4.3.1",
35-
"@vue/eslint-config-airbnb": "^5.0.2",
36-
"babel-eslint": "^10.1.0",
33+
"@fullhuman/postcss-purgecss": "^2.3.0",
34+
"@fullhuman/vue-cli-plugin-purgecss": "^2.2.0",
35+
"@types/mysql": "^2.15.14",
36+
"@types/node": "^14.0.14",
37+
"@vue/cli-plugin-eslint": "^4.4.6",
38+
"@vue/cli-service": "^4.4.6",
39+
"@vue/eslint-config-airbnb": "^5.1.0",
3740
"babel-loader": "^8.1.0",
38-
"css-loader": "^3.5.3",
39-
"deepmerge": "^4.2.2",
4041
"eslint": "^6.8.0",
4142
"eslint-plugin-vue": "^6.2.2",
42-
"fibers": "^5.0.0",
43-
"file-loader": "^6.0.0",
44-
"gh-pages": "^3.0.0",
45-
"html-webpack-plugin": "^4.3.0",
46-
"mini-css-extract-plugin": "^0.9.0",
43+
"gh-pages": "^3.1.0",
4744
"npm-run-all": "^4.1.5",
4845
"sass": "^1.26.5",
49-
"sass-loader": "^8.0.2",
50-
"vue-loader": "^15.9.2",
51-
"vue-style-loader": "^4.1.2",
46+
"sass-loader": "^9.0.1",
5247
"vue-template-compiler": "^2.6.11",
53-
"vuetify-loader": "^1.4.3",
5448
"webpack": "^4.43.0",
55-
"webpack-cli": "^3.3.11"
49+
"webpack-cli": "^3.3.12"
5650
}
5751
}

‎src/postcss.config.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const IN_PRODUCTION = process.env.NODE_ENV === 'production';
2+
3+
module.exports = {
4+
plugins: [
5+
require('tailwindcss'),
6+
require('autoprefixer'),
7+
require('@fullhuman/postcss-purgecss')({
8+
content: ['./template/**/*.html', './ui/**/*.vue', './vendor/ghmattimysql/packages/ghmattimysql-ui/src/components/**/*.vue'],
9+
defaultExtractor(content) {
10+
const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '');
11+
return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || [];
12+
},
13+
whitelist: [],
14+
whitelistPatterns: [/-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/, /data-v-.*/],
15+
}),
16+
],
17+
};

‎src/tailwind.config.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = {
2+
purge: false,
3+
theme: {
4+
fontFamily: {
5+
sans: ['Fira Sans', 'sans-serif'],
6+
},
7+
extend: {
8+
backgroundOpacity: {
9+
10: '0.1',
10+
},
11+
margin: {
12+
'-2px': '-2px',
13+
},
14+
},
15+
},
16+
variants: {},
17+
plugins: [],
18+
};

‎src/ui/.eslintrc.js‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎src/ui/Nui.vue‎

Lines changed: 87 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,83 @@
11
<template>
2-
<v-app v-if="showInterface" class="v-app-background">
3-
<v-content>
4-
<v-container fluid fill-height>
5-
<v-layout align-center justify-center>
6-
<v-flex xs9>
7-
<v-card class="elevation-12">
8-
<v-system-bar window dark>
9-
mysql-async Explorer
10-
<v-spacer></v-spacer>
11-
<v-icon @click="close()">close</v-icon>
12-
</v-system-bar>
13-
<v-tabs
14-
v-model="active"
15-
color="primary"
16-
slider-color="secondary"
17-
>
18-
<v-tab ripple>
19-
Time-resolved
20-
</v-tab>
21-
<v-tab ripple>
22-
Resources
23-
</v-tab>
24-
<v-tab ripple>
25-
Slowest Queries
26-
</v-tab>
27-
<v-tab-item>
28-
<v-flex xs12 pa-2 style="height: 480px;">
29-
<m-chart
30-
id="time-graph"
31-
:labels="timeLabels"
32-
:datasets="timeData"
33-
height="540"
34-
></m-chart>
35-
</v-flex>
36-
</v-tab-item>
37-
<v-tab-item>
38-
<v-flex xs12 pa-2 style="height: 480px;">
39-
<m-chart
40-
id="resource-graph"
41-
:labels="resourceLabels"
42-
:datasets="resourceData"
43-
height="540"
44-
></m-chart>
45-
</v-flex>
46-
</v-tab-item>
47-
<v-tab-item>
48-
<v-flex xs12 pa-2 style="height: 480px;">
49-
<v-data-table
50-
align-end
51-
:headers="headers"
52-
:items="slowqueries"
53-
:items-per-page="7"
54-
:footer-props="{
55-
'items-per-page-options': [7],
56-
prevIcon: 'chevron_left',
57-
nextIcon: 'chevron_right'
58-
}"
59-
>
60-
<template v-slot:items="props">
61-
<td>{{ props.item.resource }}</td>
62-
<td>{{ props.item.sql }}</td>
63-
<td>{{ props.item.queryTime }}</td>
64-
</template>
65-
</v-data-table>
66-
</v-flex>
67-
</v-tab-item>
68-
</v-tabs>
69-
<v-footer dark color="black" height="28" style="min-height: 28px;">
70-
</v-footer>
71-
</v-card>
72-
</v-flex>
73-
</v-layout>
74-
</v-container>
75-
</v-content>
76-
</v-app>
2+
<main
3+
v-if="showInterface"
4+
class="flex h-screen bg-opacity-50 bg-black items-center justify-center"
5+
>
6+
<div class="w-full bg-white shadow-2xl rounded-md max-w-screen-xl">
7+
<m-app-bar>
8+
<m-icon class="mr-2">storage</m-icon>
9+
<span>MySQL Explorer</span>
10+
<div class="flex-grow" />
11+
<m-icon
12+
@click.native="close()"
13+
class="
14+
cursor-pointer rounded-full hover:bg-white hover:bg-opacity-10
15+
transition duration-300 ease-in-out
16+
"
17+
>
18+
close
19+
</m-icon>
20+
</m-app-bar>
21+
<m-tabs>
22+
<m-tab-item label="Time-resolved" icon="timeline">
23+
<div class="p-2" style="height: 480px;">
24+
<m-chart
25+
id="time-graph"
26+
chartFontFamily="'Fira Sans', 'sans-serif'"
27+
:labels="timeLabels"
28+
:datasets="timeData"
29+
:height="540"
30+
></m-chart>
31+
</div>
32+
</m-tab-item>
33+
<m-tab-item label="Resources" icon="apps">
34+
<div class="p-2" style="height: 480px;">
35+
<m-chart
36+
id="resource-graph"
37+
chartFontFamily="'Fira Sans', 'sans-serif'"
38+
:labels="resourceLabels"
39+
:datasets="resourceData"
40+
:height="540"
41+
></m-chart>
42+
</div>
43+
</m-tab-item>
44+
<m-tab-item label="Slowest Queries" icon="slow_motion_video">
45+
<div class="p-2" style="height: 480px;">
46+
<m-data-table
47+
:headers="headers"
48+
:items="slowqueries"
49+
:items-per-page="7"
50+
>
51+
<template v-slot:row="props">
52+
<td class="text-center h-12">{{ props.item.resource }}</td>
53+
<td class="text-left h-12">{{ props.item.sql }}</td>
54+
<td class="text-center h-12">{{ props.item.queryTime }}ms</td>
55+
</template>
56+
</m-data-table>
57+
</div>
58+
</m-tab-item>
59+
</m-tabs>
60+
<div class="h-8 bg-black w-full rounded-b-md" />
61+
</div>
62+
</main>
7763
</template>
7864

7965
<script>
66+
import MAppBar from '../vendor/ghmattimysql/packages/ghmattimysql-ui/src/components/MAppBar.vue';
8067
import MChart from '../vendor/ghmattimysql/packages/ghmattimysql-ui/src/components/MChart.vue';
68+
import MDataTable from '../vendor/ghmattimysql/packages/ghmattimysql-ui/src/components/MDataTable.vue';
69+
import MIcon from '../vendor/ghmattimysql/packages/ghmattimysql-ui/src/components/MIcon.vue';
70+
import MTabs from '../vendor/ghmattimysql/packages/ghmattimysql-ui/src/components/MTabs.vue';
71+
import MTabItem from '../vendor/ghmattimysql/packages/ghmattimysql-ui/src/components/MTabItem.vue';
8172
8273
export default {
8374
components: {
75+
MAppBar,
8476
MChart,
77+
MDataTable,
78+
MIcon,
79+
MTabs,
80+
MTabItem,
8581
},
8682
data() {
8783
return {
@@ -129,12 +125,12 @@ export default {
129125
text: 'Resource',
130126
value: 'resource',
131127
},
132-
{
133-
text: 'Query',
128+
{
129+
text: 'Query',
134130
value: 'sql',
135-
sortable: false,
131+
sortable: false,
136132
},
137-
{
133+
{
138134
text: 'Execution Time (ms)',
139135
value: 'queryTime',
140136
},
@@ -164,14 +160,14 @@ export default {
164160
onTimeData({ timeData }) {
165161
if (Array.isArray(timeData) && timeData.length === 3) {
166162
this.timeData = [
167-
Object.assign({}, this.colorGraphLoad, { label: 'Server Load (ms)' }, timeData[0]),
168-
Object.assign({}, this.colorGraphAvg, { label: 'Average Query Time (ms)' }, timeData[1]),
169-
Object.assign({}, this.colorGraphCount, { label: 'Query Count' }, timeData[2]),
163+
{ ...this.colorGraphLoad, label: 'Server Load (ms)', ...timeData[0] },
164+
{ ...this.colorGraphAvg, label: 'Average Query Time (ms)', ...timeData[1] },
165+
{ ...this.colorGraphCount, label: 'Query Count', ...timeData[2] },
170166
];
171167
const labels = [];
172168
for (let i = timeData[0].data.length - 1; i > -1; i -= 1) {
173169
if (i !== 0) {
174-
labels.push(`-${i*5}min`);
170+
labels.push(`-${i * 5}min`);
175171
} else {
176172
labels.push('now');
177173
}
@@ -182,9 +178,9 @@ export default {
182178
onResourceData({ resourceData }) {
183179
if (Array.isArray(resourceData) && resourceData.length === 3) {
184180
this.resourceData = [
185-
Object.assign({}, this.colorGraphLoad, { label: 'Server Load (ms)' }, resourceData[0]),
186-
Object.assign({}, this.colorGraphAvg, { label: 'Average Query Time (ms)' }, resourceData[1]),
187-
Object.assign({}, this.colorGraphCount, { label: 'Query Count' }, resourceData[2]),
181+
{ ...this.colorGraphLoad, label: 'Server Load (ms)', ...resourceData[0] },
182+
{ ...this.colorGraphAvg, label: 'Average Query Time (ms)', ...resourceData[1] },
183+
{ ...this.colorGraphCount, label: 'Query Count', ...resourceData[2] },
188184
];
189185
}
190186
},
@@ -199,17 +195,14 @@ export default {
199195
});
200196
},
201197
name: 'app',
202-
}
198+
};
203199
</script>
204200

205201
<style lang="scss">
202+
@import './tailwind.css'; // less configuring
206203
@import '../vendor/ghmattimysql/packages/ghmattimysql-ui/src/styles/mixins';
207204
208-
html {
209-
overflow-y: auto;
210-
}
211-
212-
@include font-face('Fira Sans', './assets/fonts/fira-sans-v9-latin-regular', 400, normal, woff woff2);
213-
@include font-face('Fira Sans', './assets/fonts/fira-sans-v9-latin-italic', 400, italic, woff woff2);
214-
@include font-face('Fira Sans', './assets/fonts/fira-sans-v9-latin-700', 700, normal, woff woff2);
205+
@include font-face('Fira Sans', './fonts/fira-sans-v9-latin-regular', 400, normal, woff woff2);
206+
@include font-face('Fira Sans', './fonts/fira-sans-v9-latin-italic', 400, italic, woff woff2);
207+
@include font-face('Fira Sans', './fonts/fira-sans-v9-latin-700', 700, normal, woff woff2);
215208
</style>

‎src/ui/assets/fonts/fira-sans-v9-latin-700.woff‎ renamed to ‎src/ui/fonts/fira-sans-v9-latin-700.woff‎

File renamed without changes.

‎src/ui/assets/fonts/fira-sans-v9-latin-700.woff2‎ renamed to ‎src/ui/fonts/fira-sans-v9-latin-700.woff2‎

File renamed without changes.

‎src/ui/assets/fonts/fira-sans-v9-latin-italic.woff‎ renamed to ‎src/ui/fonts/fira-sans-v9-latin-italic.woff‎

File renamed without changes.

0 commit comments

Comments
 (0)