refactor(webui): use @vue/cli to bootstrap new ui
This commit is contained in:
Antoine Caron
Traefiker Bot
parent
093658836e
commit
1bccbf061b
2
Makefile
2
Makefile
|
|
@ -58,7 +58,7 @@ build-webui-image:
|
|||
generate-webui: build-webui-image
|
||||
if [ ! -d "static" ]; then \
|
||||
mkdir -p static; \
|
||||
docker run --rm -v "$$PWD/static":'/src/static' traefik-webui npm run build; \
|
||||
docker run --rm -v "$$PWD/static":'/src/static' traefik-webui npm run build:nc; \
|
||||
docker run --rm -v "$$PWD/static":'/src/static' traefik-webui chown -R $(shell id -u):$(shell id -g) ../static; \
|
||||
echo 'For more informations show `webui/readme.md`' > $$PWD/static/DONT-EDIT-FILES-IN-THIS-DIRECTORY.md; \
|
||||
fi
|
||||
|
|
|
|||
2
webui/.browserslistrc
Normal file
2
webui/.browserslistrc
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
> 1%
|
||||
last 2 versions
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
# Editor configuration, see http://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
max_line_length = off
|
||||
trim_trailing_whitespace = false
|
||||
14
webui/.eslintrc.js
Normal file
14
webui/.eslintrc.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
node: true
|
||||
},
|
||||
extends: ["plugin:vue/essential", "@vue/prettier"],
|
||||
rules: {
|
||||
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
|
||||
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
|
||||
},
|
||||
parserOptions: {
|
||||
parser: "babel-eslint"
|
||||
}
|
||||
};
|
||||
63
webui/.gitignore
vendored
63
webui/.gitignore
vendored
|
|
@ -1,44 +1,21 @@
|
|||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# compiled output
|
||||
/dist
|
||||
/dist-server
|
||||
/tmp
|
||||
/out-tsc
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
||||
# IDEs and editors
|
||||
/.idea
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# IDE - VSCode
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
|
||||
# misc
|
||||
/.sass-cache
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# e2e
|
||||
/e2e/*.js
|
||||
/e2e/*.map
|
||||
|
||||
# System Files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"singleQuote": true
|
||||
}
|
||||
|
|
@ -14,4 +14,3 @@ COPY . $WEBUI_DIR/
|
|||
EXPOSE 8080
|
||||
|
||||
RUN yarn lint
|
||||
RUN yarn format --check
|
||||
|
|
|
|||
|
|
@ -1,138 +0,0 @@
|
|||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"webui": {
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"projectType": "application",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"outputPath": "dist",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
"tsConfig": "src/tsconfig.app.json",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"assets": [
|
||||
"src/assets/images",
|
||||
"src/favicon.ico"
|
||||
],
|
||||
"styles": [
|
||||
"src/app.sass"
|
||||
],
|
||||
"scripts": [
|
||||
"node_modules/@fortawesome/fontawesome/index.js",
|
||||
"node_modules/@fortawesome/fontawesome-free-solid/index.js"
|
||||
]
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
"extractCss": true,
|
||||
"namedChunks": false,
|
||||
"aot": true,
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true,
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"browserTarget": "webui:build"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "webui:build:production"
|
||||
}
|
||||
}
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "webui:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "src/test.ts",
|
||||
"karmaConfig": "./karma.conf.js",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "src/tsconfig.spec.json",
|
||||
"scripts": [
|
||||
"node_modules/@fortawesome/fontawesome/index.js",
|
||||
"node_modules/@fortawesome/fontawesome-free-solid/index.js"
|
||||
],
|
||||
"styles": [
|
||||
"src/app.sass"
|
||||
],
|
||||
"assets": [
|
||||
"src/assets/images",
|
||||
"src/favicon.ico"
|
||||
]
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"src/tsconfig.app.json",
|
||||
"src/tsconfig.spec.json"
|
||||
],
|
||||
"exclude": [
|
||||
"**/node_modules/**"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"webui-e2e": {
|
||||
"root": "e2e",
|
||||
"sourceRoot": "e2e",
|
||||
"projectType": "application",
|
||||
"architect": {
|
||||
"e2e": {
|
||||
"builder": "@angular-devkit/build-angular:protractor",
|
||||
"options": {
|
||||
"protractorConfig": "./protractor.conf.js",
|
||||
"devServerTarget": "webui:serve"
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"src/tsconfig.spec.json"
|
||||
],
|
||||
"exclude": [
|
||||
"**/node_modules/**"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "webui",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"prefix": "app",
|
||||
"styleext": "sass"
|
||||
},
|
||||
"@schematics/angular:directive": {
|
||||
"prefix": "app"
|
||||
}
|
||||
}
|
||||
}
|
||||
3
webui/babel.config.js
Normal file
3
webui/babel.config.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
module.exports = {
|
||||
presets: ["@vue/app"]
|
||||
};
|
||||
22
webui/jest.config.js
Normal file
22
webui/jest.config.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
module.exports = {
|
||||
moduleFileExtensions: ["js", "jsx", "json", "vue"],
|
||||
transform: {
|
||||
"^.+\\.vue$": "vue-jest",
|
||||
".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
|
||||
"jest-transform-stub",
|
||||
"^.+\\.jsx?$": "babel-jest"
|
||||
},
|
||||
transformIgnorePatterns: ["/node_modules/"],
|
||||
moduleNameMapper: {
|
||||
"^@/(.*)$": "<rootDir>/src/$1"
|
||||
},
|
||||
snapshotSerializers: ["jest-serializer-vue"],
|
||||
testMatch: [
|
||||
"**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
|
||||
],
|
||||
testURL: "http://localhost/",
|
||||
watchPlugins: [
|
||||
"jest-watch-typeahead/filename",
|
||||
"jest-watch-typeahead/testname"
|
||||
]
|
||||
};
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
// Karma configuration file, see link for more information
|
||||
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
||||
|
||||
module.exports = function (config) {
|
||||
config.set({
|
||||
basePath: '',
|
||||
frameworks: ['jasmine', '@angular-devkit/build-angular'],
|
||||
plugins: [
|
||||
require('karma-jasmine'),
|
||||
require('karma-chrome-launcher'),
|
||||
require('karma-jasmine-html-reporter'),
|
||||
require('karma-coverage-istanbul-reporter'),
|
||||
require('@angular-devkit/build-angular/plugins/karma')
|
||||
],
|
||||
client:{
|
||||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||
},
|
||||
coverageIstanbulReporter: {
|
||||
dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
|
||||
fixWebpackSourcePaths: true
|
||||
},
|
||||
|
||||
reporters: ['progress', 'kjhtml'],
|
||||
port: 9876,
|
||||
colors: true,
|
||||
logLevel: config.LOG_INFO,
|
||||
autoWatch: true,
|
||||
browsers: ['Chrome'],
|
||||
singleRun: false
|
||||
});
|
||||
};
|
||||
|
|
@ -1,64 +1,34 @@
|
|||
{
|
||||
"name": "traefik",
|
||||
"version": "3.0.0",
|
||||
"authors": [
|
||||
"Fernandez Ludovic <lfernandez.dev@gmail.com>",
|
||||
"Micaël Mbagira <micael.mbagira@icloud.com>",
|
||||
"Jan Kuri <jan@bleenco.com>"
|
||||
],
|
||||
"license": "MIT",
|
||||
"name": "webui-v2",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve --proxy-config proxy.conf.json",
|
||||
"build": "ng build --prod --no-delete-output-path --output-path ../static/",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"format": "yarn prettier 'src/**/*.{js,ts,html}' '*.md'",
|
||||
"e2e": "ng e2e"
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build --dest ../static",
|
||||
"build:nc": "vue-cli-service build --no-clean --dest ../static",
|
||||
"lint": "vue-cli-service lint",
|
||||
"test:unit": "vue-cli-service test:unit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "^7.2.3",
|
||||
"@angular/common": "^7.2.3",
|
||||
"@angular/compiler": "^7.2.3",
|
||||
"@angular/core": "^7.2.3",
|
||||
"@angular/forms": "^7.2.3",
|
||||
"@angular/http": "^7.2.3",
|
||||
"@angular/platform-browser": "^7.2.3",
|
||||
"@angular/platform-browser-dynamic": "^7.2.3",
|
||||
"@angular/router": "^7.2.3",
|
||||
"@fortawesome/fontawesome": "^1.1.5",
|
||||
"@fortawesome/fontawesome-free-solid": "^5.0.10",
|
||||
"bulma": "^0.7.0",
|
||||
"core-js": "^2.4.1",
|
||||
"d3": "^5.8.0",
|
||||
"d3-format": "^1.3.0",
|
||||
"date-fns": "^1.29.0",
|
||||
"lodash": "^4.17.5",
|
||||
"rxjs": "^6.4.0",
|
||||
"tslib": "^1.9.0",
|
||||
"zone.js": "^0.8.19"
|
||||
"core-js": "^2.6.5",
|
||||
"vue": "^2.6.10",
|
||||
"vue-router": "^3.0.3",
|
||||
"vuex": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~0.13.0",
|
||||
"@angular/cli": "~7.3.0",
|
||||
"@angular/compiler-cli": "^7.2.3",
|
||||
"@angular/language-service": "^7.2.3",
|
||||
"@types/jasmine": "~3.3.8",
|
||||
"@types/jasminewd2": "~2.0.2",
|
||||
"@types/node": "~10.12.20",
|
||||
"codelyzer": "^4.0.1",
|
||||
"jasmine-core": "~3.3.0",
|
||||
"jasmine-spec-reporter": "~4.2.1",
|
||||
"karma": "~4.0.0",
|
||||
"karma-chrome-launcher": "~2.2.0",
|
||||
"karma-coverage-istanbul-reporter": "^2.0.4",
|
||||
"karma-jasmine": "~2.0.1",
|
||||
"karma-jasmine-html-reporter": "^1.4.0",
|
||||
"prettier": "^1.16.4",
|
||||
"protractor": "~5.4.2",
|
||||
"ts-node": "~8.0.2",
|
||||
"tslint": "~5.12.1",
|
||||
"tslint-config-prettier": "^1.18.0",
|
||||
"typescript": "~3.2.4"
|
||||
"@vue/cli-plugin-babel": "^3.9.0",
|
||||
"@vue/cli-plugin-eslint": "^3.9.0",
|
||||
"@vue/cli-plugin-unit-jest": "^3.9.0",
|
||||
"@vue/cli-service": "^3.9.0",
|
||||
"@vue/eslint-config-prettier": "^4.0.1",
|
||||
"@vue/test-utils": "1.0.0-beta.29",
|
||||
"babel-core": "7.0.0-bridge.0",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"babel-jest": "^23.6.0",
|
||||
"eslint": "^5.16.0",
|
||||
"eslint-plugin-vue": "^5.0.0",
|
||||
"node-sass": "^4.9.0",
|
||||
"sass-loader": "^7.1.0",
|
||||
"vue-template-compiler": "^2.6.10"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
5
webui/postcss.config.js
Normal file
5
webui/postcss.config.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
autoprefixer: {}
|
||||
}
|
||||
};
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
// Protractor configuration file, see link for more information
|
||||
// https://github.com/angular/protractor/blob/master/lib/config.ts
|
||||
|
||||
const { SpecReporter } = require('jasmine-spec-reporter');
|
||||
|
||||
exports.config = {
|
||||
allScriptsTimeout: 11000,
|
||||
specs: [
|
||||
'./e2e/**/*.e2e-spec.ts'
|
||||
],
|
||||
capabilities: {
|
||||
'browserName': 'chrome'
|
||||
},
|
||||
directConnect: true,
|
||||
baseUrl: 'http://localhost:4200/',
|
||||
framework: 'jasmine',
|
||||
jasmineNodeOpts: {
|
||||
showColors: true,
|
||||
defaultTimeoutInterval: 30000,
|
||||
print: function() {}
|
||||
},
|
||||
onPrepare() {
|
||||
require('ts-node').register({
|
||||
project: 'e2e/tsconfig.e2e.json'
|
||||
});
|
||||
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
|
||||
}
|
||||
};
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
{
|
||||
"/api": {
|
||||
"target": "http://localhost:8080",
|
||||
"secure": false
|
||||
},
|
||||
"/health": {
|
||||
"target": "http://localhost:8080",
|
||||
"secure": false
|
||||
}
|
||||
}
|
||||
17
webui/public/index.html
Normal file
17
webui/public/index.html
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Traefik</title>
|
||||
<base href="./" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/x-icon" href="<%= BASE_URL %>traefik.icon.png">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but webui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 2 KiB After Width: | Height: | Size: 2 KiB |
|
|
@ -54,14 +54,14 @@ make generate-webui # Generate static contents in `traefik/static/` folder.
|
|||
- Go to the directory `webui`
|
||||
- Edit files in `webui/src`
|
||||
- Run in development mode :
|
||||
- `yarn start`
|
||||
- `yarn serve`
|
||||
|
||||
## Libraries
|
||||
|
||||
- [Node](https://nodejs.org)
|
||||
- [Yarn](https://yarnpkg.com/)
|
||||
- [Webpack](https://github.com/webpack/webpack)
|
||||
- [Angular](https://angular.io)
|
||||
- [Vue](https://vuejs.org/)
|
||||
- [Bulma](https://bulma.io)
|
||||
- [D3](https://d3js.org)
|
||||
- [D3 - Documentation](https://github.com/mbostock/d3/wiki)
|
||||
|
|
|
|||
16
webui/src/App.vue
Normal file
16
webui/src/App.vue
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="sass">
|
||||
|
||||
@import 'styles/typography'
|
||||
@import 'styles/colors'
|
||||
|
||||
html
|
||||
font-family: $open-sans
|
||||
height: 100%
|
||||
background: $background
|
||||
</style>
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
@charset "utf-8"
|
||||
|
||||
@import 'styles/typography'
|
||||
@import 'styles/variables'
|
||||
@import 'styles/colors'
|
||||
@import '~bulma/sass/utilities/all'
|
||||
@import '~bulma/sass/base/all'
|
||||
@import '~bulma/sass/grid/all'
|
||||
@import '~bulma/sass/elements/container'
|
||||
@import '~bulma/sass/elements/tag'
|
||||
@import '~bulma/sass/elements/other'
|
||||
@import '~bulma/sass/elements/box'
|
||||
@import '~bulma/sass/elements/form'
|
||||
@import '~bulma/sass/elements/table'
|
||||
@import '~bulma/sass/components/navbar'
|
||||
@import '~bulma/sass/components/tabs'
|
||||
@import '~bulma/sass/elements/notification'
|
||||
@import 'styles/nav'
|
||||
@import 'styles/content'
|
||||
@import 'styles/message'
|
||||
@import 'styles/charts'
|
||||
@import 'styles/helper'
|
||||
|
||||
html
|
||||
font-family: $open-sans
|
||||
height: 100%
|
||||
background: $background
|
||||
|
||||
.wip
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
justify-content: center
|
||||
height: 80vh
|
||||
|
||||
.title
|
||||
font-size: 4em
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
import { Component, Inject } from '@angular/core';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
<main class="wip">
|
||||
<img src="./assets/images/traefik.logo.svg" alt="logo" />
|
||||
<header>
|
||||
<h1 class="title">
|
||||
<i class="fa fa-exclamation-triangle"></i>
|
||||
Work in progress...
|
||||
</h1>
|
||||
<p>
|
||||
In the meantime, you can review your current configuration by using
|
||||
the
|
||||
<a href="{{ href }}/api/rawdata">{{ href }}/api/rawdata</a> endpoint
|
||||
<br /><br />
|
||||
Also, please keep your <i class="fa fa-eye"></i> on our
|
||||
<a href="https://docs.traefik.io/v2.0/operations/dashboard/"
|
||||
>documentation</a
|
||||
>
|
||||
to stay informed
|
||||
</p>
|
||||
<p></p>
|
||||
</header>
|
||||
</main>
|
||||
`
|
||||
})
|
||||
export class AppComponent {
|
||||
public href: string;
|
||||
|
||||
constructor(@Inject(DOCUMENT) private document: Document) {
|
||||
this.href = this.document.location.origin;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import { CommonModule } from '@angular/common';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [AppComponent],
|
||||
imports: [BrowserModule, CommonModule, HttpClientModule, FormsModule],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule {}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
export const environment = {
|
||||
production: true
|
||||
};
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
// The file contents for the current environment will overwrite these during build.
|
||||
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
|
||||
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
|
||||
// The list of which env maps to which file can be found in `.angular-cli.json`.
|
||||
|
||||
export const environment = {
|
||||
production: false
|
||||
};
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB |
|
|
@ -1,17 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="has-navbar-fixed-top">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Traefik</title>
|
||||
<base href="./" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/x-icon"
|
||||
href="./assets/images/traefik.icon.png"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
12
webui/src/main.js
Normal file
12
webui/src/main.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import Vue from "vue";
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
import store from "./store";
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
render: h => h(App)
|
||||
}).$mount("#app");
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import { enableProdMode } from '@angular/core';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppModule } from './app/app.module';
|
||||
import { environment } from './environments/environment';
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
platformBrowserDynamic()
|
||||
.bootstrapModule(AppModule)
|
||||
.catch(err => console.log(err));
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
/**
|
||||
* Required to support Web Animations `@angular/platform-browser/animations`.
|
||||
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
|
||||
**/
|
||||
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
||||
|
||||
/**
|
||||
* By default, zone.js will patch all possible macroTask and DomEvents
|
||||
* user can disable parts of macroTask/DomEvents patch by setting following flags
|
||||
*/
|
||||
|
||||
// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
|
||||
// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
|
||||
// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
|
||||
|
||||
/*
|
||||
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
|
||||
* with the following flag, it will bypass `zone.js` patch for IE/Edge
|
||||
*/
|
||||
// (window as any).__Zone_enable_cross_context_check = true;
|
||||
|
||||
/***************************************************************************************************
|
||||
* Zone JS is required by default for Angular itself.
|
||||
*/
|
||||
import 'zone.js/dist/zone'; // Included with Angular CLI.
|
||||
|
||||
/***************************************************************************************************
|
||||
* APPLICATION IMPORTS
|
||||
*/
|
||||
15
webui/src/router.js
Normal file
15
webui/src/router.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import Vue from "vue";
|
||||
import Router from "vue-router";
|
||||
import WIP from "./views/WIP.vue";
|
||||
|
||||
Vue.use(Router);
|
||||
|
||||
export default new Router({
|
||||
routes: [
|
||||
{
|
||||
path: "/",
|
||||
name: "home",
|
||||
component: WIP
|
||||
}
|
||||
]
|
||||
});
|
||||
10
webui/src/store.js
Normal file
10
webui/src/store.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import Vue from "vue";
|
||||
import Vuex from "vuex";
|
||||
|
||||
Vue.use(Vuex);
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {},
|
||||
mutations: {},
|
||||
actions: {}
|
||||
});
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
.line-chart
|
||||
width: 100%
|
||||
height: 320px
|
||||
background-color: $white
|
||||
|
||||
svg
|
||||
font: 10px sans-serif
|
||||
|
||||
.line
|
||||
fill: none
|
||||
stroke: $blue
|
||||
stroke-width: 3px
|
||||
shape-rendering: geometricPrecision
|
||||
|
||||
.axis line, .axis path
|
||||
stroke: $text
|
||||
opacity: .2
|
||||
shape-rendering: crispEdges
|
||||
fill: none
|
||||
|
||||
.axis path
|
||||
display: none
|
||||
|
||||
.axis text
|
||||
fill: $text
|
||||
|
||||
|
||||
.bar-chart
|
||||
width: 100%
|
||||
height: 320px
|
||||
background-color: $white
|
||||
|
||||
.axis text
|
||||
fill: $text
|
||||
font: 10px sans-serif
|
||||
|
||||
.axis line, .axis path
|
||||
fill: none
|
||||
opacity: .2
|
||||
stroke: $text
|
||||
|
||||
.axis--x
|
||||
|
||||
text
|
||||
font: 12px sans-serif
|
||||
|
||||
path
|
||||
display: none
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
.content
|
||||
background: transparent
|
||||
margin: 2rem 0
|
||||
|
||||
.subtitle
|
||||
color: $black
|
||||
font-size: 0.9rem
|
||||
font-weight: $weight-bold
|
||||
text-transform: uppercase
|
||||
|
||||
.subtitle-name
|
||||
padding-left: 0.5rem
|
||||
|
||||
.content-item
|
||||
background: $white
|
||||
border: 1px solid $border-secondary
|
||||
margin: 10px 0
|
||||
border-radius: $traefik-border-radius
|
||||
box-shadow: 1px 2px 5px rgba($border, 0.4)
|
||||
|
||||
h2
|
||||
color: $text-dark
|
||||
font-size: 14px
|
||||
padding: 20px 20px 0 20px
|
||||
font-weight: $weight-semibold
|
||||
|
||||
.content-item-data
|
||||
padding: 10px 20px
|
||||
|
||||
.item-data
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: space-between
|
||||
padding: 5px 10px
|
||||
|
||||
&.border-right
|
||||
border-right: 1px solid #DFE3E9
|
||||
|
||||
.data-blue
|
||||
color: $blue
|
||||
font-size: 22px
|
||||
font-weight: $weight-semibold
|
||||
|
||||
.data-grey
|
||||
color: $grey
|
||||
font-size: 12px
|
||||
font-weight: $weight-light
|
||||
|
||||
.widget-item
|
||||
min-height: 80px
|
||||
padding: 20px
|
||||
|
||||
h1
|
||||
color: $text-dark
|
||||
font-size: 18px
|
||||
font-weight: $weight-light
|
||||
|
||||
img
|
||||
width: 40px
|
||||
height: 40px
|
||||
display: block
|
||||
float: left
|
||||
margin-right: 10px
|
||||
|
||||
span
|
||||
font-size: 13px
|
||||
display: block
|
||||
|
||||
&.mtop12
|
||||
margin-top: 12px
|
||||
|
||||
.loading-text
|
||||
height: 320px
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
|
||||
.main-loader
|
||||
width: 70px
|
||||
display: block
|
||||
margin: 15px auto
|
||||
|
||||
.search-container
|
||||
background: $white
|
||||
color: $black
|
||||
display: flex
|
||||
align-items: center
|
||||
border-radius: $traefik-border-radius
|
||||
box-shadow: 1px 2px 5px rgba($border, 0.4)
|
||||
border: 1px solid $border-secondary
|
||||
position: relative
|
||||
height: 3rem
|
||||
|
||||
.search-button
|
||||
position: absolute
|
||||
left: 1rem
|
||||
top: 0.8rem
|
||||
|
||||
input
|
||||
color: $text
|
||||
border: none
|
||||
border-radius: $traefik-border-radius
|
||||
outline: none
|
||||
font-size: 1rem
|
||||
font-weight: $weight-light
|
||||
width: 100%
|
||||
padding-left: 2.8rem
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
.padding-5-10
|
||||
padding: 5px 10px
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
.message
|
||||
display: block
|
||||
font-size: 0.8rem
|
||||
margin: 1rem 0 1.5rem 0
|
||||
padding-bottom: 0.3rem
|
||||
border: 1px solid $border
|
||||
background: $white
|
||||
border-radius: $traefik-border-radius
|
||||
box-shadow: 1px 2px 5px rgba($border, 0.4)
|
||||
|
||||
.message-header
|
||||
color: $color-secondary
|
||||
border-bottom: 1px solid $border-secondary
|
||||
padding: 0.6rem
|
||||
border-top-left-radius: $traefik-border-radius
|
||||
border-top-right-radius: $traefik-border-radius
|
||||
|
||||
.icon
|
||||
display: block
|
||||
float: left
|
||||
width: 1.4rem
|
||||
height: 1.4rem
|
||||
margin-right: 0.5rem
|
||||
|
||||
h2
|
||||
display: flex
|
||||
|
||||
img
|
||||
margin-right: 15px
|
||||
|
||||
.message-body
|
||||
|
||||
.tabs
|
||||
margin-bottom: 0.5rem
|
||||
|
||||
.section-container
|
||||
padding: 0.3em 0 0 0
|
||||
|
||||
.section-line
|
||||
padding: 0 0.75em
|
||||
|
||||
.section-line-header
|
||||
padding: 0.2em 0 0 0
|
||||
|
||||
// required for small screen (without -> table overlapping)
|
||||
.table-fixed
|
||||
table-layout: fixed
|
||||
|
||||
// required for small screen (without -> table overlapping)
|
||||
.table-fixed-break
|
||||
table-layout: fixed
|
||||
word-wrap: break-word
|
||||
|
||||
.table-cell-limited
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
|
||||
.table-col-75
|
||||
width: 75%
|
||||
|
||||
h2
|
||||
color: $black
|
||||
|
||||
hr
|
||||
margin: 5px 0
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
.navbar
|
||||
border-bottom: 1px solid $border
|
||||
box-shadow: 1px 2px 5px rgba($border, 0.4)
|
||||
|
||||
.navbar-item
|
||||
font-size: 0.8rem
|
||||
text-transform: uppercase
|
||||
font-weight: $weight-semibold
|
||||
|
||||
.navbar-logo
|
||||
width: 40px
|
||||
min-height: 40px
|
||||
|
|
@ -1 +0,0 @@
|
|||
$traefik-border-radius: 4px
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
||||
|
||||
import { getTestBed } from '@angular/core/testing';
|
||||
import {
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting
|
||||
} from '@angular/platform-browser-dynamic/testing';
|
||||
import 'zone.js/dist/zone-testing';
|
||||
|
||||
declare const require: any;
|
||||
|
||||
// First, initialize the Angular testing environment.
|
||||
getTestBed().initTestEnvironment(
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting()
|
||||
);
|
||||
// Then we find all the tests.
|
||||
const context = require.context('./', true, /\.spec\.ts$/);
|
||||
// And load the modules.
|
||||
context.keys().map(context);
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/app",
|
||||
"baseUrl": "./",
|
||||
"module": "es2015",
|
||||
"types": []
|
||||
},
|
||||
"exclude": [
|
||||
"test.ts",
|
||||
"**/*.spec.ts"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/spec",
|
||||
"baseUrl": "./",
|
||||
"module": "commonjs",
|
||||
"types": [
|
||||
"jasmine",
|
||||
"node"
|
||||
]
|
||||
},
|
||||
"files": [
|
||||
"test.ts",
|
||||
"polyfills.ts"
|
||||
],
|
||||
"include": [
|
||||
"**/*.spec.ts",
|
||||
"**/*.d.ts"
|
||||
]
|
||||
}
|
||||
5
webui/src/typings.d.ts
vendored
5
webui/src/typings.d.ts
vendored
|
|
@ -1,5 +0,0 @@
|
|||
/* SystemJS module definition */
|
||||
declare var module: NodeModule;
|
||||
interface NodeModule {
|
||||
id: string;
|
||||
}
|
||||
39
webui/src/views/WIP.vue
Normal file
39
webui/src/views/WIP.vue
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<main class="wip">
|
||||
<img src="../assets/images/traefik.logo.svg" alt="logo" />
|
||||
<header>
|
||||
<h1 class="title">
|
||||
<i class="fa fa-exclamation-triangle"></i>
|
||||
Work in progress...
|
||||
</h1>
|
||||
<p>
|
||||
In the meantime, you can review your current configuration by using the
|
||||
<a href="/api/rawdata">/api/rawdata</a> endpoint <br /><br />
|
||||
Also, please keep your <i class="fa fa-eye"></i> on our
|
||||
<a href="https://docs.traefik.io/v2.0/operations/dashboard/"
|
||||
>documentation</a
|
||||
>
|
||||
to stay informed
|
||||
</p>
|
||||
<p></p>
|
||||
</header>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "home"
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.wip
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
justify-content: center
|
||||
height: 100vh
|
||||
|
||||
.title
|
||||
font-size: 4em
|
||||
</style>
|
||||
5
webui/tests/unit/.eslintrc.js
Normal file
5
webui/tests/unit/.eslintrc.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
env: {
|
||||
jest: true
|
||||
}
|
||||
};
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"importHelpers": true,
|
||||
"outDir": "./dist/out-tsc",
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"moduleResolution": "node",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"target": "es5",
|
||||
"typeRoots": [
|
||||
"node_modules/@types"
|
||||
],
|
||||
"lib": [
|
||||
"es2017",
|
||||
"dom"
|
||||
],
|
||||
"module": "es2015",
|
||||
"baseUrl": "./"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,145 +0,0 @@
|
|||
{
|
||||
"rulesDirectory": [
|
||||
"node_modules/codelyzer"
|
||||
],
|
||||
"rules": {
|
||||
"arrow-return-shorthand": true,
|
||||
"callable-types": true,
|
||||
"class-name": true,
|
||||
"comment-format": [
|
||||
true,
|
||||
"check-space"
|
||||
],
|
||||
"curly": true,
|
||||
"deprecation": {
|
||||
"severity": "warn"
|
||||
},
|
||||
"eofline": true,
|
||||
"forin": true,
|
||||
"import-blacklist": [
|
||||
true,
|
||||
"rxjs/Rx"
|
||||
],
|
||||
"import-spacing": true,
|
||||
"indent": [
|
||||
true,
|
||||
"spaces"
|
||||
],
|
||||
"interface-over-type-literal": true,
|
||||
"label-position": true,
|
||||
"max-line-length": [
|
||||
true,
|
||||
140
|
||||
],
|
||||
"member-access": false,
|
||||
"member-ordering": [
|
||||
true,
|
||||
{
|
||||
"order": [
|
||||
"static-field",
|
||||
"instance-field",
|
||||
"static-method",
|
||||
"instance-method"
|
||||
]
|
||||
}
|
||||
],
|
||||
"no-arg": true,
|
||||
"no-bitwise": true,
|
||||
"no-console": [
|
||||
true,
|
||||
"debug",
|
||||
"info",
|
||||
"time",
|
||||
"timeEnd",
|
||||
"trace"
|
||||
],
|
||||
"no-construct": true,
|
||||
"no-debugger": true,
|
||||
"no-duplicate-super": true,
|
||||
"no-empty": false,
|
||||
"no-empty-interface": true,
|
||||
"no-eval": true,
|
||||
"no-inferrable-types": [
|
||||
true,
|
||||
"ignore-params"
|
||||
],
|
||||
"no-misused-new": true,
|
||||
"no-non-null-assertion": true,
|
||||
"no-shadowed-variable": true,
|
||||
"no-string-literal": false,
|
||||
"no-string-throw": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-trailing-whitespace": true,
|
||||
"no-unnecessary-initializer": true,
|
||||
"no-unused-expression": true,
|
||||
"no-use-before-declare": true,
|
||||
"no-var-keyword": true,
|
||||
"object-literal-sort-keys": false,
|
||||
"one-line": [
|
||||
true,
|
||||
"check-open-brace",
|
||||
"check-catch",
|
||||
"check-else",
|
||||
"check-whitespace"
|
||||
],
|
||||
"prefer-const": true,
|
||||
"quotemark": [
|
||||
true,
|
||||
"single"
|
||||
],
|
||||
"radix": true,
|
||||
"semicolon": [
|
||||
true,
|
||||
"always"
|
||||
],
|
||||
"triple-equals": [
|
||||
true,
|
||||
"allow-null-check"
|
||||
],
|
||||
"typedef-whitespace": [
|
||||
true,
|
||||
{
|
||||
"call-signature": "nospace",
|
||||
"index-signature": "nospace",
|
||||
"parameter": "nospace",
|
||||
"property-declaration": "nospace",
|
||||
"variable-declaration": "nospace"
|
||||
}
|
||||
],
|
||||
"unified-signatures": true,
|
||||
"variable-name": false,
|
||||
"whitespace": [
|
||||
true,
|
||||
"check-branch",
|
||||
"check-decl",
|
||||
"check-operator",
|
||||
"check-separator",
|
||||
"check-type"
|
||||
],
|
||||
"directive-selector": [
|
||||
true,
|
||||
"attribute",
|
||||
"app",
|
||||
"camelCase"
|
||||
],
|
||||
"component-selector": [
|
||||
true,
|
||||
"element",
|
||||
"app",
|
||||
"kebab-case"
|
||||
],
|
||||
"no-output-on-prefix": true,
|
||||
"use-input-property-decorator": true,
|
||||
"use-output-property-decorator": true,
|
||||
"use-host-property-decorator": true,
|
||||
"no-input-rename": true,
|
||||
"no-output-rename": true,
|
||||
"use-life-cycle-interface": true,
|
||||
"use-pipe-transform-interface": true,
|
||||
"component-class-suffix": true,
|
||||
"directive-class-suffix": true
|
||||
},
|
||||
"extends": [
|
||||
"tslint-config-prettier"
|
||||
]
|
||||
}
|
||||
3
webui/vue.config.js
Normal file
3
webui/vue.config.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
module.exports = {
|
||||
publicPath: "/dashboard"
|
||||
};
|
||||
8988
webui/yarn.lock
8988
webui/yarn.lock
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue