github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-07-15 19:41:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update some node deps.

Browse Source
This commit is contained in:
Filip Barl
2019-03-05 16:01:53 +01:00
parent a32bcc436c
commit 019ab0ff80
19 changed files with 2351 additions and 1378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
client/.babelrc
View File

@@ -1,8 +1,43 @@
{
"plugins": [
"lodash",
"transform-class-properties",
["transform-object-rest-spread", { "useBuiltIns": true }]
"presets": [
[
"@babel/preset-env",
{
"modules": false
}
],
"@babel/preset-react"
],
"presets": ["env", "react"]
"plugins": [
[
"@babel/plugin-proposal-object-rest-spread",
{
"useBuiltIns": true
}
],
"@babel/plugin-proposal-class-properties",
"lodash",
],
"env": {
"test": {
"presets": [
[
"@babel/preset-env",
{
"modules": "commonjs"
}
],
"@babel/preset-react"
],
"plugins": [
[
"@babel/plugin-proposal-object-rest-spread",
{
"useBuiltIns": true
}
],
"@babel/plugin-proposal-class-properties",
]
}
}
}

1
client/.nvmrc Normal file
View File

@@ -0,0 +1 @@
v8.9.0

2
client/app/scripts/actions/app-actions.js
View File

@@ -15,7 +15,6 @@ import {
teardownWebsockets,
getNodes,
} from '../utils/web-api-utils';
import { loadTheme } from '../utils/contrast-utils';
import { isPausedSelector } from '../selectors/time-travel';
import {
availableMetricTypesSelector,
@@ -701,7 +700,6 @@ export function receiveNotFound(nodeId, requestTimestamp) {
export function setContrastMode(enabled) {
return (dispatch) => {
loadTheme(enabled ? 'contrast' : 'normal');
dispatch({
enabled,
type: ActionTypes.TOGGLE_CONTRAST_MODE,

8
client/app/scripts/components/app.js
View File

@@ -192,10 +192,13 @@ class App extends React.Component {
const {
isTableViewMode, isGraphViewMode, isResourceViewMode, showingDetails,
showingHelp, showingNetworkSelector, showingTroubleshootingMenu,
timeTravelTransitioning, timeTravelSupported
timeTravelTransitioning, timeTravelSupported, contrastMode,
} = this.props;
const className = classNames('scope-app', { 'time-travel-open': timeTravelSupported });
const className = classNames('scope-app', {
'contrast-mode': contrastMode,
'time-travel-open': timeTravelSupported,
});
const isIframe = window !== window.top;
return (
@@ -248,6 +251,7 @@ class App extends React.Component {
function mapStateToProps(state) {
return {
contrastMode: state.get('contrastMode'),
currentTopology: state.get('currentTopology'),
isGraphViewMode: isGraphViewModeSelector(state),
isResourceViewMode: isResourceViewModeSelector(state),

46
client/app/scripts/contrast-compiler.js
View File

@@ -1,46 +0,0 @@
/* eslint-disable class-methods-use-this */
// Webpack plugin for creating contrast mode stylesheet
const _ = require('lodash');
function findAsset(collection, name) {
return _.find(collection, c => _.includes(c, name));
}
module.exports = class ContrastStyleCompiler {
apply(compiler) {
let themeJsChunk;
compiler.plugin('compilation', (compilation) => {
compilation.plugin('html-webpack-plugin-before-html-processing', (htmlPluginData, callback) => {
themeJsChunk = findAsset(htmlPluginData.assets.js, 'contrast-theme');
if (!themeJsChunk) {
return callback(null, htmlPluginData);
}
// Find the name of the contrast stylesheet and save it to a window variable.
const { css, publicPath } = htmlPluginData.assets;
const contrast = findAsset(css, 'contrast-theme');
const normal = findAsset(css, 'style-app');
// Convert to JSON string so they can be parsed into a window variable
const themes = JSON.stringify({ contrast, normal, publicPath });
// Append a script to the end of <head /> to evaluate before the other scripts are loaded.
const script = `<script>window.__WEAVE_SCOPE_THEMES = JSON.parse('${themes}')</script>`;
const [head, end] = htmlPluginData.html.split('</head>');
htmlPluginData.html = head.concat(script).concat('\n </head>').concat(end);
// Remove the contrast assets so they don't get added to the HTML.
_.remove(htmlPluginData.assets.css, i => i === contrast);
_.remove(htmlPluginData.assets.js, i => i === themeJsChunk);
return callback(null, htmlPluginData);
});
});
compiler.plugin('emit', (compilation, callback) => {
// Remove the contrast-theme.js file, since it doesn't do anything
const filename = themeJsChunk && themeJsChunk.split('?')[0];
if (filename) {
delete compilation.assets[filename];
}
callback();
});
}
};

1
client/app/scripts/contrast-theme.js
View File

@@ -1 +0,0 @@
import '../styles/contrast.scss';

2
client/app/scripts/main.dev.js
View File

@@ -1,4 +1,4 @@
import 'babel-polyfill';
import '@babel/polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

2
client/app/scripts/main.js
View File

@@ -1,4 +1,4 @@
import 'babel-polyfill';
import '@babel/polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

2
client/app/scripts/terminal-main.js
View File

@@ -1,4 +1,4 @@
import 'babel-polyfill';
import '@babel/polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

3
client/app/scripts/utils/color-utils.js
View File

@@ -1,5 +1,6 @@
import { hsl } from 'd3-color';
import { scaleLinear, scaleOrdinal, schemeCategory10 } from 'd3-scale';
import { scaleLinear, scaleOrdinal } from 'd3-scale';
import { schemeCategory10 } from 'd3-scale-chromatic';
const PSEUDO_COLOR = '#b1b1cb';
const hueRange = [20, 330]; // exclude red

38
client/app/scripts/utils/contrast-utils.js
View File

@@ -1,38 +0,0 @@
/* eslint-disable no-underscore-dangle */
import last from 'lodash/last';
/**
* Change the Scope UI theme from normal to high-contrast.
* This will inject a stylesheet into <head> and override the styles.
*
* A window-level variable is written to the .html page during the build process that contains
* the filename (and content hash) needed to download the file.
*/
function getFilename(href) {
return last(href.split('/'));
}
export function loadTheme(theme = 'normal') {
if (window.__WEAVE_SCOPE_THEMES) {
// Load the pre-built stylesheet.
const stylesheet = window.__WEAVE_SCOPE_THEMES[theme];
const head = document.querySelector('head');
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = stylesheet;
link.onload = () => {
// Remove the old stylesheet to prevent weird overlapping styling issues
const oldTheme = theme === 'normal' ? 'contrast' : 'normal';
const links = document.querySelectorAll('head link');
for (let i = 0; i < links.length; i += 1) {
const l = links[i];
if (getFilename(l.href) === getFilename(window.__WEAVE_SCOPE_THEMES[oldTheme])) {
head.removeChild(l);
break;
}
}
};
head.appendChild(link);
}
}

2
client/app/styles/_contrast-overrides.scss → client/app/styles/_contrast-theme.scss
View File

@@ -1,4 +1,4 @@
@import "variables";
@import "default-theme";
$background-color: $color-white;
$background-lighter-color: $color-white;

1
client/app/styles/_variables.scss → client/app/styles/_default-theme.scss
View File

@@ -45,3 +45,4 @@ $timeline-height: 55px;
/* specific elements */
$body-background-color: $color-purple-25;
$label-background-color: transparentize($color-purple-25, 0.3);

4
client/app/styles/contrast.scss
View File

@@ -1,4 +0,0 @@
@import "variables";
@import "contrast-overrides";
@import "base";
@import "terminal";

16
client/app/styles/main.scss
View File

@@ -1,3 +1,15 @@
@import "variables";
@import "terminal";
// Load the default theme initially to apply it on the global html level.
@import "default-theme";
@import "base";
@import "terminal";
.scope-app.contrast-mode {
// Load the contrast theme and reload all the CSS in the scope-app container.
@import "contrast-theme";
@import "base";
}
.scope-app:not(.contrast-mode) {
// Load the default theme and reload all the CSS in the scope-app container.
@import "default-theme";
@import "base";
}

53
client/package.json
View File

@@ -7,14 +7,15 @@
"private": true,
"main": "index.js",
"dependencies": {
"babel-plugin-lodash": "3.2.11",
"babel-polyfill": "6.26.0",
"@babel/polyfill": "^7.0.0",
"babel-plugin-lodash": "3.3.2",
"classnames": "2.2.5",
"d3-array": "1.2.1",
"d3-color": "1.0.3",
"d3-drag": "1.2.3",
"d3-format": "1.3.2",
"d3-scale": "2.1.2",
"d3-scale-chromatic": "1.3.3",
"d3-selection": "1.3.2",
"d3-shape": "1.2.2",
"d3-time-format": "2.1.0",
@@ -48,29 +49,30 @@
"xterm": "3.10.1"
},
"devDependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@fortawesome/fontawesome-free": "^5.5.0",
"autoprefixer": "7.1.5",
"babel-cli": "6.26.0",
"babel-core": "6.26.0",
"babel-eslint": "8.0.1",
"babel-jest": "21.2.0",
"babel-loader": "6.4.1",
"babel-eslint": "8.2.1",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.0",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-preset-env": "1.6.1",
"babel-preset-react": "6.24.1",
"clean-webpack-plugin": "0.1.17",
"css-loader": "0.28.11",
"eslint": "4.9.0",
"eslint": "4.17.0",
"eslint-config-airbnb": "16.1.0",
"eslint-loader": "1.9.0",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-jsx-a11y": "6.0.2",
"eslint-plugin-react": "7.4.0",
"eslint-loader": "2.0.0",
"eslint-plugin-import": "2.12.0",
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-react": "7.6.1",
"express": "4.16.4",
"extract-text-webpack-plugin": "2.1.0",
"file-loader": "1.1.5",
"html-webpack-plugin": "2.30.1",
"file-loader": "1.1.11",
"html-webpack-plugin": "3.2.0",
"http-proxy": "1.16.2",
"http-proxy-rules": "1.1.1",
"jest": "21.2.1",
@@ -78,12 +80,12 @@
"json-loader": "0.5.7",
"mockdate": "2.0.2",
"node-sass": "^4.6.0",
"postcss-loader": "1.3.3",
"postcss-loader": "2.1.4",
"react-router": "3.2.0",
"sass-lint": "^1.12.1",
"sass-loader": "6.0.6",
"sasslint-webpack-plugin": "^1.0.4",
"style-loader": "0.19.0",
"sass-lint-webpack": "1.0.0",
"sass-loader": "7.0.1",
"style-loader": "0.21.0",
"stylelint": "9.10.1",
"stylelint-config-recommended": "2.1.0",
"stylelint-config-styled-components": "0.1.1",
@@ -92,9 +94,10 @@
"stylelint-processor-styled-components": "1.5.2",
"url": "0.11.0",
"url-loader": "0.6.2",
"webpack": "2.4.1",
"webpack-dev-middleware": "1.10.2",
"webpack-hot-middleware": "2.18.0"
"webpack": "4.6.0",
"webpack-cli": "^3.3.0",
"webpack-dev-middleware": "3.1.3",
"webpack-hot-middleware": "2.22.2"
},
"scripts": {
"build": "webpack --config webpack.production.config.js",
@@ -128,6 +131,6 @@
]
},
"engines": {
"node": "^8.4.0"
"node": "^8.9.0"
}
}

68
client/webpack.local.config.js
View File

@@ -1,10 +1,8 @@
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SassLintPlugin = require('sasslint-webpack-plugin');
const ContrastStyleCompiler = require('./app/scripts/contrast-compiler');
const SassLintPlugin = require('sass-lint-webpack');
const { themeVarsAsScss } = require('weaveworks-ui-components/lib/theme');
/**
@@ -28,10 +26,6 @@ module.exports = {
'./app/scripts/main',
'webpack-hot-middleware/client'
],
'contrast-theme': [
'./app/scripts/contrast-theme',
'webpack-hot-middleware/client'
],
'dev-app': [
'./app/scripts/main.dev',
'webpack-hot-middleware/client'
@@ -40,47 +34,46 @@ module.exports = {
'./app/scripts/terminal-main',
'webpack-hot-middleware/client'
],
vendors: ['babel-polyfill', 'classnames', 'dagre', 'filesize', 'immutable',
vendors: ['@babel/polyfill', 'classnames', 'dagre', 'filesize', 'immutable',
'moment', 'page', 'react', 'react-dom', 'react-motion', 'react-redux', 'redux',
'redux-thunk', 'reqwest', 'xterm', 'webpack-hot-middleware/client'
]
},
// See https://webpack.js.org/concepts/mode/#mode-development.
mode: 'development',
// Used by Webpack Dev Middleware
output: {
publicPath: '',
filename: '[name].js',
path: path.join(__dirname, 'build'),
filename: '[name].js'
publicPath: '',
},
// Necessary plugins for hot load
plugins: [
new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', filename: 'vendors.js' }),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new ExtractTextPlugin('style-[name]-[chunkhash].css'),
new SassLintPlugin({
context: 'app/styles',
ignorePlugins: ['html-webpack-plugin', 'extract-text-webpack-plugin'],
}),
new HtmlWebpackPlugin({
chunks: ['vendors', 'terminal-app'],
filename: 'terminal.html',
template: 'app/html/index.html',
filename: 'terminal.html'
}),
new HtmlWebpackPlugin({
chunks: ['vendors', 'dev-app', 'contrast-theme'],
chunks: ['vendors', 'dev-app'],
filename: 'dev.html',
template: 'app/html/index.html',
filename: 'dev.html'
}),
new HtmlWebpackPlugin({
chunks: ['vendors', 'app', 'contrast-theme'],
chunks: ['vendors', 'app'],
filename: 'index.html',
template: 'app/html/index.html',
filename: 'index.html'
}),
new ContrastStyleCompiler()
new SassLintPlugin({
context: 'app/styles',
ignorePlugins: ['html-webpack-plugin'],
}),
],
// Transform source code using Babel and React Hot Loader
@@ -114,15 +107,16 @@ module.exports = {
{
test: /\.jsx?$/,
exclude: /node_modules|vendor/,
loader: 'babel-loader'
use: [
{ loader: 'babel-loader', options: { cacheDirectory: true } },
]
},
{
test: /\.(scss|css)$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader'
}, {
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: {
plugins: [
@@ -131,7 +125,15 @@ module.exports = {
})
]
}
}, {
},
],
},
{
test: /\.scss$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{
loader: 'sass-loader',
options: {
data: themeVarsAsScss(),
@@ -140,8 +142,8 @@ module.exports = {
path.resolve(__dirname, './node_modules/rc-slider'),
]
}
}],
})
},
],
}
]
},

63
client/webpack.production.config.js
View File

@@ -3,9 +3,7 @@ const autoprefixer = require('autoprefixer');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ContrastStyleCompiler = require('./app/scripts/contrast-compiler');
const { themeVarsAsScss } = require('weaveworks-ui-components/lib/theme');
const GLOBALS = {
@@ -33,47 +31,46 @@ module.exports = {
entry: {
app: './app/scripts/main',
'contrast-theme': ['./app/scripts/contrast-theme'],
'terminal-app': './app/scripts/terminal-main',
// keep only some in here, to make vendors and app bundles roughly same size
vendors: ['babel-polyfill', 'classnames', 'immutable',
vendors: ['@babel/polyfill', 'classnames', 'immutable',
'react', 'react-dom', 'react-redux', 'redux', 'redux-thunk'
]
},
// See https://webpack.js.org/concepts/mode/#mode-production.
mode: 'production',
output: {
path: path.join(__dirname, OUTPUT_PATH),
filename: '[name]-[chunkhash].js',
publicPath: PUBLIC_PATH
path: path.join(__dirname, OUTPUT_PATH),
publicPath: PUBLIC_PATH,
},
plugins: [
new CleanWebpackPlugin([OUTPUT_PATH]),
new webpack.DefinePlugin(GLOBALS),
new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', filename: 'vendors.js' }),
new webpack.optimize.OccurrenceOrderPlugin(true),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new webpack.IgnorePlugin(/.*\.map$/, /xterm\/lib\/addons/),
new webpack.optimize.UglifyJsPlugin({
sourceMap: false,
compress: {
warnings: false
}
}),
new ExtractTextPlugin('style-[name]-[chunkhash].css'),
// new webpack.optimize.UglifyJsPlugin({
// sourceMap: false,
// compress: {
// warnings: false
// }
// }),
new HtmlWebpackPlugin({
hash: true,
chunks: ['vendors', 'terminal-app'],
filename: 'terminal.html',
hash: true,
template: 'app/html/index.html',
filename: 'terminal.html'
}),
new HtmlWebpackPlugin({
chunks: ['vendors', 'app'],
filename: 'index.html',
hash: true,
chunks: ['vendors', 'app', 'contrast-theme'],
template: 'app/html/index.html',
filename: 'index.html'
}),
new ContrastStyleCompiler()
],
module: {
@@ -116,12 +113,11 @@ module.exports = {
loader: 'babel-loader'
},
{
test: /\.(scss|css)$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader'
}, {
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: {
plugins: [
@@ -130,18 +126,25 @@ module.exports = {
})
]
}
}, {
},
],
},
{
test: /\.scss$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{
loader: 'sass-loader',
options: {
minimize: true,
data: themeVarsAsScss(),
includePaths: [
path.resolve(__dirname, './node_modules/xterm'),
path.resolve(__dirname, './node_modules/rc-slider'),
]
}
}]
})
},
],
}
]
},

3372
client/yarn.lock
View File

File diff suppressed because it is too large Load Diff