refactor(webui): use @vue/cli to bootstrap new ui
This commit is contained in:
Antoine Caron
Traefiker Bot
parent
093658836e
commit
1bccbf061b
47 changed files with 5851 additions and 4291 deletions
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 {}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2 KiB |
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue