Techognito/starter-kit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated UI to use patternfly

Browse source 
* Removed unused css files
* Converted all UI elements to patternfly 4
* Implemented config page under same app
* Replaced slider with patternfly `Progress` component
This commit is contained in:
Benjamin Graham 2020-07-23 22:08:12 -04:00 • committed by Justin Stephenson
parent 46ad9834b3
commit aa63c3871c
21 changed files with 1612 additions and 2381 deletions
Download patch file Download diff file Expand all files Collapse all files

197
webpack.config.js
View file

@ -1,49 +1,34 @@
const path = require("path");
const copy = require("copy-webpack-plugin");
const extract = require("extract-text-webpack-plugin");
const extract = require("mini-css-extract-plugin");
const fs = require("fs");
const webpack = require("webpack");
const CompressionPlugin = require("compression-webpack-plugin");
var externals = {
"cockpit": "cockpit",
cockpit: "cockpit",
};
/* These can be overridden, typically from the Makefile.am */
const srcdir = (process.env.SRCDIR || __dirname) + path.sep + "src";
const builddir = (process.env.SRCDIR || __dirname);
const builddir = process.env.SRCDIR || __dirname;
const distdir = builddir + path.sep + "dist";
const section = process.env.ONLYDIR || null;
const libdir = path.resolve(srcdir, "pkg" + path.sep + "lib");
const nodedir = path.resolve((process.env.SRCDIR || __dirname), "node_modules");
const libdir = path.resolve(srcdir, "pkg" + path.sep + "lib")
const nodedir = path.resolve(process.env.SRCDIR || __dirname, "node_modules");
/* A standard nodejs and webpack pattern */
var production = process.env.NODE_ENV === 'production';
var production = process.env.NODE_ENV === "production";
var info = {
entries: {
"recordings": [
"./recordings.jsx",
"./recordings.css",
"./pkg/lib/listing.less",
index: [
"./index.js",
],
"config": [
"./config.jsx",
"./recordings.css",
"./table.css",
]
},
files: [
"index.html",
"config.html",
"player.jsx",
"player.css",
"recordings.jsx",
"recordings.css",
"table.css",
"manifest.json",
"timer.css",
"./pkg/lib/listing.less",
"manifest.json"
],
};
@ -64,108 +49,150 @@ var output = {
function vpath(/* ... */) {
var filename = Array.prototype.join.call(arguments, path.sep);
var expanded = builddir + path.sep + filename;
if (fs.existsSync(expanded))
return expanded;
if (fs.existsSync(expanded)) return expanded;
expanded = srcdir + path.sep + filename;
return expanded;
}
/* Qualify all the paths in entries */
Object.keys(info.entries).forEach(function(key) {
Object.keys(info.entries).forEach(function (key) {
if (section && key.indexOf(section) !== 0) {
delete info.entries[key];
return;
}
info.entries[key] = info.entries[key].map(function(value) {
if (value.indexOf("/") === -1)
return value;
else
return vpath(value);
info.entries[key] = info.entries[key].map(function (value) {
if (value.indexOf("/") === -1) return value;
else return vpath(value);
});
});
/* Qualify all the paths in files listed */
var files = [];
info.files.forEach(function(value) {
info.files.forEach(function (value) {
if (!section || value.indexOf(section) === 0)
files.push({ from: vpath("src", value), to: value });
});
info.files = files;
var plugins = [
new copy(info.files),
new extract("[name].css")
];
var plugins = [new copy(info.files), new extract({ filename: "[name].css" })];
/* Only minimize when in production mode */
if (production) {
/* Rename output files when minimizing */
output.filename = "[name].min.js";
plugins.unshift(new CompressionPlugin({
asset: "[path].gz[query]",
test: /\.(js|html)$/,
minRatio: 0.9,
deleteOriginalAssets: true
}));
plugins.unshift(
new CompressionPlugin({
asset: "[path].gz[query]",
test: /\.(js|html)$/,
minRatio: 0.9,
deleteOriginalAssets: true,
})
);
}
var babel_loader = {
loader: "babel-loader",
options: {
presets: [
[
"@babel/env",
{
targets: {
chrome: "57",
firefox: "52",
safari: "10.3",
edge: "16",
opera: "44",
},
},
],
"@babel/preset-react",
],
},
};
module.exports = {
mode: production ? 'production' : 'development',
mode: production ? "production" : "development",
resolve: {
modules: [libdir, nodedir],
},
entry: info.entries,
externals: externals,
output: output,
devtool: "source-map",
resolve: {
alias: {
"fs": path.resolve(nodedir, "fs-extra"),
},
modules: [libdir, nodedir],
},
module: {
rules: [
{
enforce: 'pre',
enforce: "pre",
exclude: /node_modules/,
loader: 'eslint-loader',
test: /\.jsx$/
},
{
enforce: 'pre',
exclude: /node_modules/,
loader: 'eslint-loader',
test: /\.es6$/
loader: "eslint-loader",
test: /\.(js|jsx)$/,
},
{
exclude: /node_modules/,
loader: 'babel-loader',
test: /\.js$/
use: babel_loader,
test: /\.(js|jsx)$/,
},
/* HACK: remove unwanted fonts from PatternFly's css */
{
test: /patternfly-4-cockpit.scss$/,
use: [
extract.loader,
{
loader: "css-loader",
options: {
sourceMap: true,
url: false,
},
},
{
loader: "string-replace-loader",
options: {
multiple: [
{
search: /src:url\("patternfly-icons-fake-path\/pficon[^}]*/g,
replace: "src:url('fonts/patternfly.woff')format('woff');",
},
{
search: /@font-face[^}]*patternfly-fonts-fake-path[^}]*}/g,
replace: "",
},
],
},
},
{
loader: "sass-loader",
options: {
sourceMap: true,
outputStyle: "compressed",
},
},
],
},
{
exclude: /node_modules/,
loader: 'babel-loader',
test: /\.jsx$/
test: /\.s?css$/,
exclude: /patternfly-4-cockpit.scss/,
use: [
extract.loader,
{
loader: "css-loader",
options: {
sourceMap: true,
url: false,
},
},
{
loader: "sass-loader",
options: {
sourceMap: true,
outputStyle: "compressed",
},
},
],
},
{
exclude: /node_modules/,
loader: 'babel-loader',
test: /\.es6$/
},
{
test: /\.less$/,
loader: extract.extract("css-loader!less-loader")
},
{
exclude: /node_modules/,
loader: extract.extract('css-loader!sass-loader'),
test: /\.scss$/
},
{
loader: extract.extract("css-loader?minimize=&root=" + libdir),
test: /\.css$/,
}
]
],
},
plugins: plugins
}
plugins: plugins,
};