Skip to content

Commit

Permalink
feat: migrate to tailwind and ghmattimysql 1.3.1
Browse files Browse the repository at this point in the history
  • Loading branch information
GHMatti authored and GHMatti committed Jul 5, 2020
1 parent 73a52f7 commit 1d0a9f6
Show file tree
Hide file tree
Showing 18 changed files with 175 additions and 252 deletions.
17 changes: 17 additions & 0 deletions src/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/essential',
'@vue/airbnb',
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
},
};
3 changes: 1 addition & 2 deletions src/entry/nui.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import Vue from 'vue';
import vuetify from '../vendor/ghmattimysql/packages/ghmattimysql-ui/src/plugins/vuetify';
import App from '../ui/Nui.vue';
import 'material-design-icons-iconfont/dist/material-design-icons.css';

Vue.config.productionTip = false;

new Vue({
vuetify,
render: (h) => h(App),
}).$mount('#app');
42 changes: 18 additions & 24 deletions src/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,10 @@
"private": true,
"scripts": {
"build": "webpack --progress",
"build:ui": "vue-cli-service build ./entry/nui.js",
"build:docs": "webpack --progress --config webpack.config.docs.js",
"deploy:docs": "gh-pages -d docs/dist",
"lint:ui": "vue-cli-service lint ./entry/nui.js",
"lint": "eslint '**/*.js'"
},
"contributors": [
Expand All @@ -15,43 +17,35 @@
],
"license": "MIT",
"dependencies": {
"autoprefixer": "^9.8.4",
"chart.js": "^2.9.3",
"material-design-icons-iconfont": "^5.0.1",
"mysql": "^2.18.1",
"vue": "^2.6.11",
"vuetify": "^2.2.27"
"tailwindcss": "^1.4.6",
"vue": "^2.6.11"
},
"devDependencies": {
"@babel/core": "^7.10.2",
"@babel/plugin-transform-typescript": "^7.10.1",
"@babel/preset-env": "^7.10.2",
"@babel/core": "^7.10.4",
"@babel/plugin-transform-typescript": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@citizenfx/client": "^1.0.2624-1",
"@citizenfx/server": "^1.0.2624-1",
"@intervolga/optimize-cssnano-plugin": "^1.0.6",
"@types/mysql": "^2.15.13",
"@types/node": "^14.0.13",
"@vue/cli-plugin-eslint": "^4.3.1",
"@vue/cli-service": "^4.3.1",
"@vue/eslint-config-airbnb": "^5.0.2",
"babel-eslint": "^10.1.0",
"@fullhuman/postcss-purgecss": "^2.3.0",
"@fullhuman/vue-cli-plugin-purgecss": "^2.2.0",
"@types/mysql": "^2.15.14",
"@types/node": "^14.0.14",
"@vue/cli-plugin-eslint": "^4.4.6",
"@vue/cli-service": "^4.4.6",
"@vue/eslint-config-airbnb": "^5.1.0",
"babel-loader": "^8.1.0",
"css-loader": "^3.5.3",
"deepmerge": "^4.2.2",
"eslint": "^6.8.0",
"eslint-plugin-vue": "^6.2.2",
"fibers": "^5.0.0",
"file-loader": "^6.0.0",
"gh-pages": "^3.0.0",
"html-webpack-plugin": "^4.3.0",
"mini-css-extract-plugin": "^0.9.0",
"gh-pages": "^3.1.0",
"npm-run-all": "^4.1.5",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue-loader": "^15.9.2",
"vue-style-loader": "^4.1.2",
"sass-loader": "^9.0.1",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.4.3",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
"webpack-cli": "^3.3.12"
}
}
17 changes: 17 additions & 0 deletions src/postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
const IN_PRODUCTION = process.env.NODE_ENV === 'production';

module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
require('@fullhuman/postcss-purgecss')({
content: ['./template/**/*.html', './ui/**/*.vue', './vendor/ghmattimysql/packages/ghmattimysql-ui/src/components/**/*.vue'],
defaultExtractor(content) {
const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '');
return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || [];
},
whitelist: [],
whitelistPatterns: [/-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/, /data-v-.*/],
}),
],
};
18 changes: 18 additions & 0 deletions src/tailwind.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
module.exports = {
purge: false,
theme: {
fontFamily: {
sans: ['Fira Sans', 'sans-serif'],
},
extend: {
backgroundOpacity: {
10: '0.1',
},
margin: {
'-2px': '-2px',
},
},
},
variants: {},
plugins: [],
};
23 changes: 0 additions & 23 deletions src/ui/.eslintrc.js

This file was deleted.

181 changes: 87 additions & 94 deletions src/ui/Nui.vue
Original file line number Diff line number Diff line change
@@ -1,87 +1,83 @@
<template>
<v-app v-if="showInterface" class="v-app-background">
<v-content>
<v-container fluid fill-height>
<v-layout align-center justify-center>
<v-flex xs9>
<v-card class="elevation-12">
<v-system-bar window dark>
mysql-async Explorer
<v-spacer></v-spacer>
<v-icon @click="close()">close</v-icon>
</v-system-bar>
<v-tabs
v-model="active"
color="primary"
slider-color="secondary"
>
<v-tab ripple>
Time-resolved
</v-tab>
<v-tab ripple>
Resources
</v-tab>
<v-tab ripple>
Slowest Queries
</v-tab>
<v-tab-item>
<v-flex xs12 pa-2 style="height: 480px;">
<m-chart
id="time-graph"
:labels="timeLabels"
:datasets="timeData"
height="540"
></m-chart>
</v-flex>
</v-tab-item>
<v-tab-item>
<v-flex xs12 pa-2 style="height: 480px;">
<m-chart
id="resource-graph"
:labels="resourceLabels"
:datasets="resourceData"
height="540"
></m-chart>
</v-flex>
</v-tab-item>
<v-tab-item>
<v-flex xs12 pa-2 style="height: 480px;">
<v-data-table
align-end
:headers="headers"
:items="slowqueries"
:items-per-page="7"
:footer-props="{
'items-per-page-options': [7],
prevIcon: 'chevron_left',
nextIcon: 'chevron_right'
}"
>
<template v-slot:items="props">
<td>{{ props.item.resource }}</td>
<td>{{ props.item.sql }}</td>
<td>{{ props.item.queryTime }}</td>
</template>
</v-data-table>
</v-flex>
</v-tab-item>
</v-tabs>
<v-footer dark color="black" height="28" style="min-height: 28px;">
</v-footer>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
<main
v-if="showInterface"
class="flex h-screen bg-opacity-50 bg-black items-center justify-center"
>
<div class="w-full bg-white shadow-2xl rounded-md max-w-screen-xl">
<m-app-bar>
<m-icon class="mr-2">storage</m-icon>
<span>MySQL Explorer</span>
<div class="flex-grow" />
<m-icon
@click.native="close()"
class="
cursor-pointer rounded-full hover:bg-white hover:bg-opacity-10
transition duration-300 ease-in-out
"
>
close
</m-icon>
</m-app-bar>
<m-tabs>
<m-tab-item label="Time-resolved" icon="timeline">
<div class="p-2" style="height: 480px;">
<m-chart
id="time-graph"
chartFontFamily="'Fira Sans', 'sans-serif'"
:labels="timeLabels"
:datasets="timeData"
:height="540"
></m-chart>
</div>
</m-tab-item>
<m-tab-item label="Resources" icon="apps">
<div class="p-2" style="height: 480px;">
<m-chart
id="resource-graph"
chartFontFamily="'Fira Sans', 'sans-serif'"
:labels="resourceLabels"
:datasets="resourceData"
:height="540"
></m-chart>
</div>
</m-tab-item>
<m-tab-item label="Slowest Queries" icon="slow_motion_video">
<div class="p-2" style="height: 480px;">
<m-data-table
:headers="headers"
:items="slowqueries"
:items-per-page="7"
>
<template v-slot:row="props">
<td class="text-center h-12">{{ props.item.resource }}</td>
<td class="text-left h-12">{{ props.item.sql }}</td>
<td class="text-center h-12">{{ props.item.queryTime }}ms</td>
</template>
</m-data-table>
</div>
</m-tab-item>
</m-tabs>
<div class="h-8 bg-black w-full rounded-b-md" />
</div>
</main>
</template>

<script>
import MAppBar from '../vendor/ghmattimysql/packages/ghmattimysql-ui/src/components/MAppBar.vue';
import MChart from '../vendor/ghmattimysql/packages/ghmattimysql-ui/src/components/MChart.vue';
import MDataTable from '../vendor/ghmattimysql/packages/ghmattimysql-ui/src/components/MDataTable.vue';
import MIcon from '../vendor/ghmattimysql/packages/ghmattimysql-ui/src/components/MIcon.vue';
import MTabs from '../vendor/ghmattimysql/packages/ghmattimysql-ui/src/components/MTabs.vue';
import MTabItem from '../vendor/ghmattimysql/packages/ghmattimysql-ui/src/components/MTabItem.vue';
export default {
components: {
MAppBar,
MChart,
MDataTable,
MIcon,
MTabs,
MTabItem,
},
data() {
return {
Expand Down Expand Up @@ -129,12 +125,12 @@ export default {
text: 'Resource',
value: 'resource',
},
{
text: 'Query',
{
text: 'Query',
value: 'sql',
sortable: false,
sortable: false,
},
{
{
text: 'Execution Time (ms)',
value: 'queryTime',
},
Expand Down Expand Up @@ -164,14 +160,14 @@ export default {
onTimeData({ timeData }) {
if (Array.isArray(timeData) && timeData.length === 3) {
this.timeData = [
Object.assign({}, this.colorGraphLoad, { label: 'Server Load (ms)' }, timeData[0]),
Object.assign({}, this.colorGraphAvg, { label: 'Average Query Time (ms)' }, timeData[1]),
Object.assign({}, this.colorGraphCount, { label: 'Query Count' }, timeData[2]),
{ ...this.colorGraphLoad, label: 'Server Load (ms)', ...timeData[0] },
{ ...this.colorGraphAvg, label: 'Average Query Time (ms)', ...timeData[1] },
{ ...this.colorGraphCount, label: 'Query Count', ...timeData[2] },
];
const labels = [];
for (let i = timeData[0].data.length - 1; i > -1; i -= 1) {
if (i !== 0) {
labels.push(`-${i*5}min`);
labels.push(`-${i * 5}min`);
} else {
labels.push('now');
}
Expand All @@ -182,9 +178,9 @@ export default {
onResourceData({ resourceData }) {
if (Array.isArray(resourceData) && resourceData.length === 3) {
this.resourceData = [
Object.assign({}, this.colorGraphLoad, { label: 'Server Load (ms)' }, resourceData[0]),
Object.assign({}, this.colorGraphAvg, { label: 'Average Query Time (ms)' }, resourceData[1]),
Object.assign({}, this.colorGraphCount, { label: 'Query Count' }, resourceData[2]),
{ ...this.colorGraphLoad, label: 'Server Load (ms)', ...resourceData[0] },
{ ...this.colorGraphAvg, label: 'Average Query Time (ms)', ...resourceData[1] },
{ ...this.colorGraphCount, label: 'Query Count', ...resourceData[2] },
];
}
},
Expand All @@ -199,17 +195,14 @@ export default {
});
},
name: 'app',
}
};
</script>

<style lang="scss">
@import './tailwind.css'; // less configuring
@import '../vendor/ghmattimysql/packages/ghmattimysql-ui/src/styles/mixins';
html {
overflow-y: auto;
}
@include font-face('Fira Sans', './assets/fonts/fira-sans-v9-latin-regular', 400, normal, woff woff2);
@include font-face('Fira Sans', './assets/fonts/fira-sans-v9-latin-italic', 400, italic, woff woff2);
@include font-face('Fira Sans', './assets/fonts/fira-sans-v9-latin-700', 700, normal, woff woff2);
@include font-face('Fira Sans', './fonts/fira-sans-v9-latin-regular', 400, normal, woff woff2);
@include font-face('Fira Sans', './fonts/fira-sans-v9-latin-italic', 400, italic, woff woff2);
@include font-face('Fira Sans', './fonts/fira-sans-v9-latin-700', 700, normal, woff woff2);
</style>
File renamed without changes.
File renamed without changes.
File renamed without changes.
5 changes: 0 additions & 5 deletions src/ui/styles/variables.scss

This file was deleted.

Loading

0 comments on commit 1d0a9f6

Please sign in to comment.