diff --git a/app/assets/background.css b/app/assets/background.css index 3463623..b030ed5 100644 --- a/app/assets/background.css +++ b/app/assets/background.css @@ -42,4 +42,4 @@ .c0126 { opacity: 1; -} \ No newline at end of file +} diff --git a/app/assets/fonts.css b/app/assets/fonts.css new file mode 100644 index 0000000..9f84f41 --- /dev/null +++ b/app/assets/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: 'orbitronregular'; + src: url('orbitron-medium-webfont.woff2') format('woff2'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Electrolize'; + src: url('electrolize-regular-webfont.woff2') format('woff2'); + font-weight: normal; + font-style: normal; +} diff --git a/app/assets/styles.less b/app/assets/styles.less index ce2b0e2..d574ee4 100644 --- a/app/assets/styles.less +++ b/app/assets/styles.less @@ -18,20 +18,6 @@ @ColorRed: #c50313; -@font-face { - font-family: 'orbitronregular'; - src: url('orbitron-medium-webfont.woff2') format('woff2'); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: 'Electrolize'; - src: url('electrolize-regular-webfont.woff2') format('woff2'); - font-weight: normal; - font-style: normal; -} - html, body { height: 100%; @@ -50,10 +36,6 @@ body { #jxos-dashboard { - @import "pretty-checkbox.css"; - @import "ansi.css"; - @import "background.css"; - background: rgba(5,6,8, 0.85); color: @InspectorText; width: 100%; @@ -321,6 +303,13 @@ body { padding: 21px 30px; } + &.gpu { + .rt-td { + word-break: keep-all; + white-space: nowrap; + } + } + .miners, .network-info, .disk-info, @@ -498,6 +487,11 @@ body { padding: 30px 30px 20px; position: relative; margin: 0 10px 20px; + + [class^="area-chart-"] { + position: relative; + left: -24px; + } } .graph-content:first-child { @@ -590,7 +584,7 @@ body { .rt-th:last-child, .rt-td:last-child { - width: 16% !important; + width: 25% !important; } } diff --git a/app/base/Component.js b/app/base/Component.js index 9bbd6b1..2aacc03 100644 --- a/app/base/Component.js +++ b/app/base/Component.js @@ -8,6 +8,7 @@ export default class Component extends React.Component { duration = 300; delay = 100; fader = []; + state = {}; constructor(props) { super(props); diff --git a/app/base/ConfigPanel.js b/app/base/ConfigPanel.js index f05190b..84ab1ed 100644 --- a/app/base/ConfigPanel.js +++ b/app/base/ConfigPanel.js @@ -5,6 +5,7 @@ import Config from '../modules/Config'; export default class ConfigPanel extends React.Component { isSaving = false; + state = {}; constructor(props) { super(props); diff --git a/app/components/Background.js b/app/components/Background.js index dd96af6..5dc192e 100644 --- a/app/components/Background.js +++ b/app/components/Background.js @@ -6,85 +6,85 @@ export default class Background extends React.PureComponent { return (
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
diff --git a/app/components/Donation.js b/app/components/Donation.js index 2cc3335..bf5f223 100644 --- a/app/components/Donation.js +++ b/app/components/Donation.js @@ -487,13 +487,13 @@ export default class Donation extends React.PureComponent {

- + ETH Donation Address

-

+

0x147bcfcf7e7048e1d1e9b410f14223206a62cfe2 -

+
diff --git a/app/components/FormGroup.js b/app/components/FormGroup.js index 84e8b92..99de84c 100644 --- a/app/components/FormGroup.js +++ b/app/components/FormGroup.js @@ -12,7 +12,8 @@ import { Text, Checkbox, Select } from 'informed'; export default class FormGroup extends Component { - delay = 10; + state = {}; + delay = 10; duration = 200; constructor(props) { @@ -38,7 +39,7 @@ export default class FormGroup extends Component {
diff --git a/app/components/Frame.js b/app/components/Frame.js index 83ed9f5..cb103e9 100644 --- a/app/components/Frame.js +++ b/app/components/Frame.js @@ -11,6 +11,7 @@ export default class Frame extends Component { static svgCount = 1; svgElement = []; svgDelay = 50; + state = {}; constructor(props) { super(props); @@ -73,21 +74,23 @@ export default class Frame extends Component { case 'frame-a': svg.push( (this.svgElement.push(ref))} - viewBox="0 0 4.638 22.934" - xmlns="http://www.w3.org/2000/svg" - vector-effect="non-scaling-stroke" - preserveAspectRatio="none"> + key="svg-frame-a-1" + ref={ref => (this.svgElement.push(ref))} + viewBox="0 0 4.638 22.934" + xmlns="http://www.w3.org/2000/svg" + vectorEffect="non-scaling-stroke" + preserveAspectRatio="none"> ); svg.push( (this.svgElement.push(ref))} viewBox="0 0 4.557 22.918" xmlns="http://www.w3.org/2000/svg" - vector-effect="non-scaling-stroke" + vectorEffect="non-scaling-stroke" preserveAspectRatio="none"> @@ -100,10 +103,11 @@ export default class Frame extends Component { svg.push( (this.svgElement.push(ref))} viewBox="0 0 4.557 22.918" xmlns="http://www.w3.org/2000/svg" - vector-effect="non-scaling-stroke" + vectorEffect="non-scaling-stroke" preserveAspectRatio="none"> @@ -112,10 +116,11 @@ export default class Frame extends Component { svg.push( (this.svgElement.push(ref))} viewBox="0 0 4.638 22.934" xmlns="http://www.w3.org/2000/svg" - vector-effect="non-scaling-stroke" + vectorEffect="non-scaling-stroke" preserveAspectRatio="none"> @@ -128,10 +133,11 @@ export default class Frame extends Component { case 'frame-c': svg.push( (this.svgElement.push(ref))} viewBox="0 0 69.321 5.078" xmlns="http://www.w3.org/2000/svg" - vector-effect="non-scaling-stroke" + vectorEffect="non-scaling-stroke" preserveAspectRatio="none"> @@ -139,10 +145,11 @@ export default class Frame extends Component { ); svg.push( (this.svgElement.push(ref))} viewBox="0 0 69.393 5.424" xmlns="http://www.w3.org/2000/svg" - vector-effect="non-scaling-stroke" + vectorEffect="non-scaling-stroke" preserveAspectRatio="none"> @@ -154,10 +161,11 @@ export default class Frame extends Component { case 'frame-d': svg.push( (this.svgElement.push(ref))} viewBox="0 0 41.54 5.078" xmlns="http://www.w3.org/2000/svg" - vector-effect="non-scaling-stroke" + vectorEffect="non-scaling-stroke" preserveAspectRatio="none"> @@ -166,10 +174,11 @@ export default class Frame extends Component { svg.push( (this.svgElement.push(ref))} viewBox="0 0 41.612 5.424" xmlns="http://www.w3.org/2000/svg" - vector-effect="non-scaling-stroke" + vectorEffect="non-scaling-stroke" preserveAspectRatio="none"> @@ -182,10 +191,11 @@ export default class Frame extends Component { case 'frame-e': svg.push( (this.svgElement.push(ref))} viewBox="0 0 3.969 54.504" xmlns="http://www.w3.org/2000/svg" - vector-effect="non-scaling-stroke" + vectorEffect="non-scaling-stroke" preserveAspectRatio="none"> @@ -194,10 +204,11 @@ export default class Frame extends Component { svg.push( (this.svgElement.push(ref))} viewBox="0 0 3.894 54.504" xmlns="http://www.w3.org/2000/svg" - vector-effect="non-scaling-stroke" + vectorEffect="non-scaling-stroke" preserveAspectRatio="none"> @@ -208,10 +219,11 @@ export default class Frame extends Component { case 'frame-f': svg.push( (this.svgElement.push(ref))} viewBox="0 0 305.594 2.91" xmlns="http://www.w3.org/2000/svg" - vector-effect="non-scaling-stroke" + vectorEffect="non-scaling-stroke" preserveAspectRatio="none"> @@ -233,7 +245,7 @@ export default class Frame extends Component {
{ frameType && getSVG(frameType) }
- { title &&

{ title }

} + { title &&

{ title }

} { table && } { children }
diff --git a/app/components/GpuInfo.js b/app/components/GpuInfo.js index 5a2eb84..54d28cc 100644 --- a/app/components/GpuInfo.js +++ b/app/components/GpuInfo.js @@ -29,7 +29,7 @@ export default class GpuInfo extends Component { let data = [], x = 0; if (this.debug) { for (x=0;x < 21;x++) { - data.push({label: 'AMD', temperature: '56 C', fan: '45%', memory: '50%', power: '90%', watt: '124W'}); + data.push({label: 'NVIDIA', temperature: '100 C', fan: '100 %', memory: '100 %', power: '100 %', watt: '123.23 W'}); } } else { diff --git a/app/components/Graph.js b/app/components/Graph.js index e7b1850..aed83b2 100644 --- a/app/components/Graph.js +++ b/app/components/Graph.js @@ -22,9 +22,6 @@ export default class Graph extends React.Component { this.state.payload = 'payload' in props ? props.payload : 0; this.state.size = 'size' in props ? props.size : 1; this.highest = this.state.payload; - - 'connected' in props && props.connected && this.update() && this.ticker(); - this.element = React.createRef(); this.state.windowWidth = false; } @@ -105,14 +102,15 @@ export default class Graph extends React.Component { { !(title && width) ?
Loading data...
: { return (
- + { text }
diff --git a/app/components/StatusInfo.js b/app/components/StatusInfo.js index cbb151f..259437b 100644 --- a/app/components/StatusInfo.js +++ b/app/components/StatusInfo.js @@ -38,8 +38,8 @@ export default class StatusInfo extends Component {
{ connected - ? Connected - : Disconnected + ? Connected + : Disconnected }
diff --git a/app/index.js b/app/index.js index c436d3f..586b4c1 100644 --- a/app/index.js +++ b/app/index.js @@ -5,6 +5,9 @@ import ReactDOM from 'react-dom'; import Layout from './layout'; import './assets/styles.less'; +import './assets/background.css'; +import './assets/fonts.css'; +import './assets/pretty-checkbox.css'; ReactDOM.render( , diff --git a/app/layout.js b/app/layout.js index 7091d3b..ff358c1 100644 --- a/app/layout.js +++ b/app/layout.js @@ -27,6 +27,9 @@ export default class Layout extends React.Component { constructor(props) { super(props); this.config = new Config(); + } + + componentDidMount() { this.loadConfig(); this.serverMonitor(); } diff --git a/package-lock.json b/package-lock.json index 22333d4..1d0e615 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "jxdashboard", - "version": "2.0.0", + "version": "2.0.2", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -5370,6 +5370,31 @@ "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==", "dev": true }, + "mini-css-extract-plugin": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.0.tgz", + "integrity": "sha512-MNpRGbNA52q6U92i0qbVpQNsgk7LExy41MdAlG84FeytfDOtRIf/mCHdEgG8rpTKOaNKiqUnZdlptF469hxqOw==", + "dev": true, + "requires": { + "loader-utils": "^1.1.0", + "normalize-url": "1.9.1", + "schema-utils": "^1.0.0", + "webpack-sources": "^1.1.0" + }, + "dependencies": { + "schema-utils": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz", + "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==", + "dev": true, + "requires": { + "ajv": "^6.1.0", + "ajv-errors": "^1.0.0", + "ajv-keywords": "^3.1.0" + } + } + } + }, "minimalistic-assert": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", @@ -5709,6 +5734,18 @@ "remove-trailing-separator": "^1.0.1" } }, + "normalize-url": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz", + "integrity": "sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=", + "dev": true, + "requires": { + "object-assign": "^4.0.1", + "prepend-http": "^1.0.0", + "query-string": "^4.1.0", + "sort-keys": "^1.0.0" + } + }, "npm-run-path": { "version": "2.0.2", "resolved": "http://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz", @@ -6211,6 +6248,12 @@ "integrity": "sha512-ESPktioptiSUchCKgggAkzdmkgzKfmp0EU8jXH+5kbIUB+unr0Y4CY9SRMvibuvYUBjNh1ACLbxqYNpdTQOteQ==", "dev": true }, + "prepend-http": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz", + "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=", + "dev": true + }, "pretty-byte": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/pretty-byte/-/pretty-byte-1.0.1.tgz", @@ -6355,6 +6398,16 @@ "integrity": "sha1-kX/TG3N5tT/UQeU2r2R1UuAefp4=", "dev": true }, + "query-string": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz", + "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=", + "dev": true, + "requires": { + "object-assign": "^4.1.0", + "strict-uri-encode": "^1.0.0" + } + }, "querystring": { "version": "0.2.0", "resolved": "http://registry.npm.taobao.org/querystring/download/querystring-0.2.0.tgz", @@ -7158,6 +7211,15 @@ "kind-of": "^3.2.0" } }, + "sort-keys": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz", + "integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=", + "dev": true, + "requires": { + "is-plain-obj": "^1.0.0" + } + }, "source-list-map": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.0.tgz", @@ -7391,6 +7453,12 @@ "integrity": "sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=", "dev": true }, + "strict-uri-encode": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz", + "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=", + "dev": true + }, "string-width": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", @@ -8556,6 +8624,24 @@ } } }, + "webpack-sources": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz", + "integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==", + "dev": true, + "requires": { + "source-list-map": "^2.0.0", + "source-map": "~0.6.1" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "whatwg-fetch": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz", diff --git a/package.json b/package.json index 1345c57..3d7dc4f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jxdashboard", - "version": "2.0.1", + "version": "2.0.2", "description": "Dashboard for JXOS", "main": "main.js", "scripts": { @@ -41,6 +41,7 @@ "less-loader": "^5.0.0", "lodash": "^4.17.15", "lodash-webpack-plugin": "^0.11.5", + "mini-css-extract-plugin": "^0.8.0", "net": "^1.0.2", "pretty-byte": "^1.0.1", "pypacker": "^0.2.1", diff --git a/webpack.config.js b/webpack.config.js index febd0bd..27f3f71 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,13 +1,13 @@ /** * Webpack 4 configuration file - * - * @todo improve the bundle size and modify the scripts for building */ const LodashModuleReplacementPlugin = require('lodash-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const path = require('path'); const webpack = require('webpack'); const isProd = (process.env.NODE_ENV === 'production') || (process.env.JX_DEV === "production"); + module.exports = { entry: './app/index.js', mode: isProd ? 'production' : 'development', @@ -18,20 +18,18 @@ module.exports = { module: { rules: [ { - test: /\.s?css$/, + test: /\.less$/, use: [ - 'css-loader' + MiniCssExtractPlugin.loader, + 'css-loader', + 'less-loader' ] }, { - test: /\.less$/, + test: /\.css$/, use: [ - { - loader: 'css-loader' - }, - { - loader: 'less-loader' - } + MiniCssExtractPlugin.loader, + 'css-loader' ] }, { @@ -74,6 +72,9 @@ module.exports = { }, plugins: [ new LodashModuleReplacementPlugin, + new MiniCssExtractPlugin({ + filename: 'style.css' + }), ], watchOptions: { ignored: [