Skip to content

Commit

Permalink
feat(ui): move to vue 3 with no compatibility and remove bootstrap vu…
Browse files Browse the repository at this point in the history 
…e in favor of element plus
  • Loading branch information
@tchiotludo
tchiotludo committed Dec 21, 2022
1 parent 560ac04 commit 14e82e5
Show file tree
Hide file tree
Showing 103 changed files with 3,646 additions and 3,686 deletions.
1,086 changes: 450 additions & 636 deletions ui/package-lock.json
View file

Large diffs are not rendered by default.

9 changes: 2 additions & 7 deletions ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,9 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@vue/compat": "^3.2.41",
"ansi-to-html": "^0.7.2",
"axios": "1.1.3",
"bootstrap": "^4.6.2",
"bootstrap-vue": "^2.23.1",
"chart.js": "^3.9.1",
"core-js": "^3.25.5",
"cron-parser": "^4.6.0",
Expand All @@ -22,6 +20,7 @@
"cytoscape": "3.23.0",
"cytoscape-dagre": "^2.4.0",
"cytoscape-dom-node": "^1.1.0",
"element-plus": "^2.2.21",
"humanize-duration": "^3.27.3",
"js-yaml": "^4.1.0",
"lodash": "4.17.21",
Expand All @@ -32,21 +31,17 @@
"md5": "^2.3.0",
"moment": "^2.29.4",
"moment-range": "4.0.2",
"nprogress": "^0.2.0",
"prismjs": "^1.29.0",
"qs": "^6.11.0",
"throttle-debounce": "^5.0.0",
"vue": "^3.2.41",
"vue-analytics": "^5.22.1",
"vue-axios": "3.5.2",
"vue-chart-3": "^3.1.8",
"vue-gtag": "^2.0.1",
"vue-i18n": "^9.2.2",
"vue-material-design-icons": "^5.1.2",
"vue-nprogress": "^0.2.0",
"vue-router": "^4.1.6",
"vue-select": "^4.0.0-beta.6",
"vue-sidebar-menu": "^5.2.4",
"vue2-datepicker": "^3.11.0",
"vuex": "^4.1.0",
"xss": "^1.0.14"
},
Expand Down
4 changes: 2 additions & 2 deletions ui/public/loader.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@
height: 100%;
z-index: 1000;
opacity: 1.0;
background: #303e67;
background: #f8f8fc;
}

.theme-dark #loader-wrapper {
html.dark #loader-wrapper {
background-color: #1b1e2a;
}

Expand Down
150 changes: 47 additions & 103 deletions ui/src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,22 @@
<template>
<div>
<nprogress-container />
<top-nav-bar :menu-collapsed="menuCollapsed" />
<el-config-provider>
<left-menu @menu-collapse="onMenuCollapse" />
<custom-toast v-if="message" :no-auto-hide="true" :message="message" />
<div id="app" class="container-fluid">
<div class="content-wrapper" :class="menuCollapsed">
<router-view v-if="!error" />
<template v-else>
<errors :code="error" />
</template>
</div>
</div>
<main :class="menuCollapsed">
<top-nav-bar :menu-collapsed="menuCollapsed" />
<router-view v-if="!error" />
<template v-else>
<errors :code="error" />
</template>
</main>
<div id="theme-loaded" />
</div>
</el-config-provider>
</template>

<script>
import LeftMenu from "override/components/LeftMenu.vue";
import TopNavBar from "./components/layout/TopNavBar";
import CustomToast from "./components/customToast";
import NprogressContainer from "vue-nprogress/src/NprogressContainer";
import Errors from "./components/errors/Errors";
import {mapState} from "vuex";
import Utils from "./utils/utils";
Expand All @@ -31,7 +27,6 @@
LeftMenu,
TopNavBar,
CustomToast,
NprogressContainer,
Errors
},
data() {
Expand All @@ -45,11 +40,6 @@
},
created() {
if (this.created === false) {
// @TODO
// if (this.$route.path === "/") {
// this.$router.push({name: "flows/list"});
// }
this.displayApp()
this.loadGeneralRessources()
}
Expand All @@ -59,18 +49,11 @@
this.menuCollapsed = collapse ? "menu-collapsed" : "menu-not-collapsed";
},
displayApp() {
this.grabThemeResources();
this.onMenuCollapse(localStorage.getItem("menuCollapsed") === "true");
this.switchTheme();
this.$root.$on("setTheme", (theme) => {
this.switchTheme(theme);
})
this.switchTheme(undefined, () => {
document.getElementById("loader-wrapper").style.display = "none";
document.getElementById("app-container").style.display = "block";
});
document.getElementById("loader-wrapper").style.display = "none";
document.getElementById("app-container").style.display = "block";
},
loadGeneralRessources() {
let uid = localStorage.getItem("uid");
Expand All @@ -89,102 +72,63 @@
});
})
},
grabThemeResources() {
// eslint-disable-next-line no-undef
const assets = JSON.parse(KESTRA_ASSETS);
// eslint-disable-next-line no-undef
const basePath = KESTRA_UI_PATH;
const themes = {};
Object.entries(assets)
.filter(r => r[0].startsWith("theme-"))
.forEach(r => {
let theme = r[0];
let files = typeof r[1] === "string" ? [r[1]] : r[1] ;
if (themes[theme] === undefined) {
themes[theme] = [];
}
files
.forEach(r => {
let elem;
if (r.endsWith(".js")) {
elem = document.createElement("script");
elem.setAttribute("type", "text/javascript");
elem.setAttribute("src", basePath + r);
} else {
elem = document.createElement("link");
elem.setAttribute("rel", "stylesheet");
elem.setAttribute("href", basePath + r);
}
elem.setAttribute("data-theme", theme);
themes[theme].push(elem);
})
})
this.$store.commit("core/setThemes", themes);
},
switchTheme(theme, callback) {
switchTheme(theme) {
// default theme
if (theme === undefined) {
if (localStorage.getItem("theme")) {
theme = localStorage.getItem("theme");
} else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
theme = "theme-dark";
theme = "dark";
} else {
theme = "theme-light";
theme = "light";
}
}
// remove old one
[...document.querySelectorAll("*[data-theme]")]
.forEach(elem => {
elem.parentNode.removeChild(elem);
})
// class name
let htmlClass = document.getElementsByTagName("html")[0].classList;
htmlClass.forEach((cls) => {
if (cls.startsWith("theme")) {
if (cls === "dark" || cls === "light") {
htmlClass.remove(cls);
}
})
htmlClass.add(theme);
// add current one
this.themes[theme]
.forEach(r => {
document.getElementsByTagName("head")[0].appendChild(r);
})
// check loaded
let intervalID = setInterval(
() => {
let loaderCheck = document.getElementById("theme-loaded");
if (loaderCheck && getComputedStyle(loaderCheck).content === "\"" + theme + "\"") {
clearInterval(intervalID);
if (this.theme !== theme) {
localStorage.setItem("theme", theme);
this.$store.commit("core/setTheme", theme);
}
callback && callback(theme)
}
},
1000
);
localStorage.setItem("theme", theme);
}
}
};
</script>


<style lang="scss">
// @import "styles/theme-light";
@use "styles/vendor";
@use "styles/app";
</style>

<style lang="scss" scoped>
@use 'element-plus/theme-chalk/src/mixins/mixins' as mixin;
main {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
padding-top: 15px;
padding-bottom: 60px !important;
transition: all 0.3s ease;
&.menu-collapsed {
padding-left: 80px;
}
&.menu-not-collapsed {
padding-left: calc(mixin.getCssVar('menu-width') + 15px);
@include mixin.res(lg) {
padding-left: calc(mixin.getCssVar('menu-width') + 40px + 15px);
padding-right: 40px;
}
}
}
</style>
17 changes: 6 additions & 11 deletions ui/src/components/Id.vue
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,10 @@
<template>
<code :id="uuid" class="text-nowrap">
{{ transformValue }}
<b-tooltip
custom-class="auto-width"
v-if="hasTooltip"
:target="uuid"
triggers="hover"
>
<code>{{ value }}</code>
</b-tooltip>
</code>
<el-tooltip transition="" :hide-after="0" placement="top">
<template #content><code>{{ value }}</code></template>
<code :id="uuid" class="text-nowrap">
{{ transformValue }}
</code>
</el-tooltip>
</template>

<script>
Expand Down
12 changes: 10 additions & 2 deletions ui/src/components/Kicon.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
<template>
<span class="kicon" v-b-tooltip="{title:tooltip, placement, html: true}">
<slot />
<span class="kicon">
<el-tooltip
v-if="tooltip"
:content="tooltip"
:raw-content="true"
:placement="placement"
>
<slot />
</el-tooltip>
<slot v-else />
</span>
</template>
<script>
Expand Down
30 changes: 7 additions & 23 deletions ui/src/components/Status.vue
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,17 @@
<template>
<b-button @click="$emit('click', $event)" class="status" :class="cls">
<component :is="icon" />
<el-button @click="$emit('click', $event)" class="status" :icon="icon" :size="this.size" :type="this.type" :class="cls">
<template v-if="label">
{{ $filters.cap($filters.lower(status)) }}
</template>
</b-button>
</el-button>
</template>

<script>
import State from "../utils/state";
import PauseCircle from "vue-material-design-icons/PauseCircle";
import CheckCircle from "vue-material-design-icons/CheckCircle";
import PlayCircle from "vue-material-design-icons/PlayCircle";
import CloseCircle from "vue-material-design-icons/CloseCircle";
import StopCircle from "vue-material-design-icons/StopCircle";
import Restart from "vue-material-design-icons/Restart";
import AlertCircle from "vue-material-design-icons/AlertCircle";
import PlayPause from "vue-material-design-icons/PlayPause";
import ProgressWrench from "vue-material-design-icons/ProgressWrench";
export default {
components: {
PauseCircle,
CheckCircle,
PlayCircle,
CloseCircle,
StopCircle,
Restart,
AlertCircle,
PlayPause,
ProgressWrench
},
props: {
status: {
Expand All @@ -55,13 +37,15 @@
},
icon () {
return State.icon()[this.status];
},
type () {
return State.type()[this.status];
}
}
};
</script>
<style scoped lang="scss">
button.status {
cursor: default !important;
.el-button {
white-space: nowrap;
}
Expand Down
Loading

0 comments on commit 14e82e5

Please sign in to comment.