You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by ki...@apache.org on 2021/12/22 08:05:22 UTC
[dolphinscheduler] branch dev updated: [Feature][UI Next] Add charts setting. (#7543)
This is an automated email from the ASF dual-hosted git repository.
kirs pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 46fa9ed [Feature][UI Next] Add charts setting. (#7543)
46fa9ed is described below
commit 46fa9ed9c83b65ae1b09a3fd5e714e1323c9346e
Author: songjianet <17...@qq.com>
AuthorDate: Wed Dec 22 16:05:14 2021 +0800
[Feature][UI Next] Add charts setting. (#7543)
---
dolphinscheduler-ui-next/package.json | 2 +
.../src/components/chart/index.ts | 66 +++++++++++++
.../src/components/chart/modules/Gauge.tsx | 106 +++++++++++++++++++++
.../src/components/chart/modules/Pie.tsx | 97 +++++++++++++++++++
.../src/components/table/DSTable.tsx | 24 -----
.../src/layouts/basic/components/sider/index.tsx | 41 ++++----
.../src/layouts/content/Content.tsx | 34 -------
dolphinscheduler-ui-next/src/main.ts | 4 +
.../src/router/modules/datasource.ts | 8 +-
.../src/router/modules/monitor.ts | 8 +-
.../src/router/modules/projects.ts | 8 +-
.../src/router/modules/resources.ts | 8 +-
.../src/router/modules/security.ts | 8 +-
dolphinscheduler-ui-next/src/store/route/route.ts | 20 ++--
dolphinscheduler-ui-next/src/store/route/types.ts | 10 +-
dolphinscheduler-ui-next/src/views/home/index.tsx | 10 +-
dolphinscheduler-ui-next/src/views/login/index.tsx | 7 +-
.../src/views/login/use-login.ts | 8 +-
.../src/views/login/use-translate.ts | 8 +-
.../src/views/login/use-validate.ts | 8 +-
20 files changed, 359 insertions(+), 126 deletions(-)
diff --git a/dolphinscheduler-ui-next/package.json b/dolphinscheduler-ui-next/package.json
index 1cb7eba..0b5aad5 100644
--- a/dolphinscheduler-ui-next/package.json
+++ b/dolphinscheduler-ui-next/package.json
@@ -12,6 +12,8 @@
"dependencies": {
"@vueuse/core": "^7.2.2",
"axios": "^0.24.0",
+ "echarts": "^5.2.2",
+ "lodash": "^4.17.21",
"date-fns": "^2.27.0",
"naive-ui": "^2.21.5",
"nprogress": "^0.2.0",
diff --git a/dolphinscheduler-ui-next/src/components/chart/index.ts b/dolphinscheduler-ui-next/src/components/chart/index.ts
new file mode 100644
index 0000000..c7c14bc
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/components/chart/index.ts
@@ -0,0 +1,66 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { getCurrentInstance, onMounted, onBeforeUnmount, watch } from 'vue'
+import { useThemeStore } from '@/store/theme/theme'
+import { throttle } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECharts } from 'echarts'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+
+function initChart<Opt extends ECBasicOption>(
+ domRef: Ref<HTMLDivElement | null>,
+ option: Opt
+): ECharts | null {
+ let chart: ECharts | null = null
+ const themeStore = useThemeStore()
+ const globalProperties =
+ getCurrentInstance()?.appContext.config.globalProperties
+
+ const init = () => {
+ chart = globalProperties?.echarts.init(
+ domRef.value,
+ themeStore.darkTheme ? 'dark-bold' : 'macarons'
+ )
+ chart && chart.setOption(option)
+ }
+
+ const resize = throttle(() => {
+ chart && chart.resize()
+ }, 20)
+
+ watch(
+ () => themeStore.darkTheme,
+ () => {
+ chart?.dispose()
+ init()
+ }
+ )
+
+ onMounted(() => {
+ init()
+ addEventListener('resize', resize)
+ })
+
+ onBeforeUnmount(() => {
+ removeEventListener('resize', resize)
+ })
+
+ return chart
+}
+
+export default initChart
diff --git a/dolphinscheduler-ui-next/src/components/chart/modules/Gauge.tsx b/dolphinscheduler-ui-next/src/components/chart/modules/Gauge.tsx
new file mode 100644
index 0000000..5bb9ec1
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/components/chart/modules/Gauge.tsx
@@ -0,0 +1,106 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineComponent, PropType, ref } from 'vue'
+import initChart from '@/components/chart'
+import type { Ref } from 'vue'
+
+const props = {
+ height: {
+ type: [String, Number] as PropType<string | number>,
+ default: 400,
+ },
+ width: {
+ type: [String, Number] as PropType<string | number>,
+ default: 400,
+ },
+}
+
+const GaugeChart = defineComponent({
+ name: 'GaugeChart',
+ props,
+ setup() {
+ const gaugeChartRef: Ref<HTMLDivElement | null> = ref(null)
+
+ const option = {
+ series: [
+ {
+ type: 'gauge',
+ axisLine: {
+ lineStyle: {
+ width: 30,
+ },
+ },
+ pointer: {
+ itemStyle: {
+ color: 'auto',
+ },
+ },
+ axisTick: {
+ distance: -30,
+ length: 8,
+ lineStyle: {
+ color: '#fff',
+ width: 2,
+ },
+ },
+ splitLine: {
+ distance: -30,
+ length: 30,
+ lineStyle: {
+ color: '#fff',
+ width: 4,
+ },
+ },
+ axisLabel: {
+ color: 'auto',
+ distance: 40,
+ fontSize: 20,
+ },
+ detail: {
+ valueAnimation: true,
+ formatter: '{value} km/h',
+ color: 'auto',
+ },
+ data: [
+ {
+ value: 70,
+ },
+ ],
+ },
+ ],
+ }
+
+ initChart(gaugeChartRef, option)
+
+ return { gaugeChartRef }
+ },
+ render() {
+ const { height, width } = this
+ return (
+ <div
+ ref='gaugeChartRef'
+ style={{
+ height: typeof height === 'number' ? height + 'px' : height,
+ width: typeof width === 'number' ? width + 'px' : width,
+ }}
+ />
+ )
+ },
+})
+
+export default GaugeChart
diff --git a/dolphinscheduler-ui-next/src/components/chart/modules/Pie.tsx b/dolphinscheduler-ui-next/src/components/chart/modules/Pie.tsx
new file mode 100644
index 0000000..be982bb
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/components/chart/modules/Pie.tsx
@@ -0,0 +1,97 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineComponent, PropType, ref } from 'vue'
+import initChart from '@/components/chart'
+import type { Ref } from 'vue'
+
+const props = {
+ height: {
+ type: [String, Number] as PropType<string | number>,
+ default: 400,
+ },
+ width: {
+ type: [String, Number] as PropType<string | number>,
+ default: 400,
+ },
+}
+
+const PieChart = defineComponent({
+ name: 'PieChart',
+ props,
+ setup() {
+ const pieChartRef: Ref<HTMLDivElement | null> = ref(null)
+
+ const option = {
+ tooltip: {
+ trigger: 'item',
+ backgroundColor: '#fff',
+ },
+ legend: {
+ top: '5%',
+ left: 'center',
+ },
+ series: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: 'center',
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: '40',
+ fontWeight: 'bold',
+ },
+ },
+ labelLine: {
+ show: false,
+ },
+ data: [
+ { value: 1048, name: 'Search Engine' },
+ { value: 735, name: 'Direct' },
+ { value: 580, name: 'Email' },
+ { value: 484, name: 'Union Ads' },
+ { value: 300, name: 'Video Ads' },
+ ],
+ },
+ ],
+ }
+
+ initChart(pieChartRef, option)
+
+ return { pieChartRef }
+ },
+ render() {
+ const { height, width } = this
+ return (
+ <div
+ ref='pieChartRef'
+ style={{
+ height: typeof height === 'number' ? height + 'px' : height,
+ width: typeof width === 'number' ? width + 'px' : width,
+ }}
+ />
+ )
+ },
+})
+
+export default PieChart
diff --git a/dolphinscheduler-ui-next/src/components/table/DSTable.tsx b/dolphinscheduler-ui-next/src/components/table/DSTable.tsx
deleted file mode 100644
index 39932b3..0000000
--- a/dolphinscheduler-ui-next/src/components/table/DSTable.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { defineComponent } from 'vue'
-
-const DSTable = defineComponent({
- name: 'DSTable',
-})
-
-export default DSTable
diff --git a/dolphinscheduler-ui-next/src/layouts/basic/components/sider/index.tsx b/dolphinscheduler-ui-next/src/layouts/basic/components/sider/index.tsx
index b2666ac..d901ca4 100644
--- a/dolphinscheduler-ui-next/src/layouts/basic/components/sider/index.tsx
+++ b/dolphinscheduler-ui-next/src/layouts/basic/components/sider/index.tsx
@@ -50,27 +50,28 @@ const Sider = defineComponent({
return { handleMenuClick }
},
render() {
- return
- this.visible ?
- (
- <NLayoutSider
- width={240}
- collapseMode={'width'}
- collapsedWidth={64}
+ return
+ this.visible ? (
+ <NLayoutSider
+ width={240}
+ collapseMode={'width'}
+ collapsedWidth={64}
+ inverted={this.inverted}
+ nativeScrollbar={false}
+ show-trigger
+ bordered
+ >
+ <NMenu
+ onUpdate:value={this.handleMenuClick}
inverted={this.inverted}
- nativeScrollbar={false}
- show-trigger
- bordered
- >
- <NMenu
- onUpdate:value={this.handleMenuClick}
- inverted={this.inverted}
- collapsedWidth={64}
- collapsedIconSize={22}
- options={this.menuOptions}
- />
- </NLayoutSider>
- ) : ''
+ collapsedWidth={64}
+ collapsedIconSize={22}
+ options={this.menuOptions}
+ />
+ </NLayoutSider>
+ ) : (
+ ''
+ )
},
})
diff --git a/dolphinscheduler-ui-next/src/layouts/content/Content.tsx b/dolphinscheduler-ui-next/src/layouts/content/Content.tsx
deleted file mode 100644
index 8211f18..0000000
--- a/dolphinscheduler-ui-next/src/layouts/content/Content.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { defineComponent } from 'vue'
-import { NLayout, NLayoutContent } from 'naive-ui'
-
-const Content = defineComponent({
- name: 'Content',
- render() {
- return (
- <NLayout>
- <NLayoutContent>
- <router-view />
- </NLayoutContent>
- </NLayout>
- )
- },
-})
-
-export default Content
diff --git a/dolphinscheduler-ui-next/src/main.ts b/dolphinscheduler-ui-next/src/main.ts
index dd7b1a4..3050c54 100644
--- a/dolphinscheduler-ui-next/src/main.ts
+++ b/dolphinscheduler-ui-next/src/main.ts
@@ -20,9 +20,13 @@ import App from './App'
import router from './router'
import { createPinia } from 'pinia'
import i18n from '@/locales'
+import * as echarts from 'echarts'
+import 'echarts/theme/macarons'
+import 'echarts/theme/dark-bold'
import './assets/styles/default.scss'
const app = createApp(App)
+app.config.globalProperties.echarts = echarts
app.use(router)
app.use(createPinia())
app.use(i18n)
diff --git a/dolphinscheduler-ui-next/src/router/modules/datasource.ts b/dolphinscheduler-ui-next/src/router/modules/datasource.ts
index df73f76..23a26f5 100644
--- a/dolphinscheduler-ui-next/src/router/modules/datasource.ts
+++ b/dolphinscheduler-ui-next/src/router/modules/datasource.ts
@@ -34,8 +34,8 @@ export default {
name: 'datasource-list',
component: components['home'],
meta: {
- title: '数据源中心'
- }
- }
- ]
+ title: '数据源中心',
+ },
+ },
+ ],
}
diff --git a/dolphinscheduler-ui-next/src/router/modules/monitor.ts b/dolphinscheduler-ui-next/src/router/modules/monitor.ts
index 43d4dbd..94d0dfb 100644
--- a/dolphinscheduler-ui-next/src/router/modules/monitor.ts
+++ b/dolphinscheduler-ui-next/src/router/modules/monitor.ts
@@ -42,8 +42,8 @@ export default {
name: 'servers-worker',
component: components['home'],
meta: {
- title: '服务管理-Worker'
- }
- }
- ]
+ title: '服务管理-Worker',
+ },
+ },
+ ],
}
diff --git a/dolphinscheduler-ui-next/src/router/modules/projects.ts b/dolphinscheduler-ui-next/src/router/modules/projects.ts
index b5d3f7c..9485952 100644
--- a/dolphinscheduler-ui-next/src/router/modules/projects.ts
+++ b/dolphinscheduler-ui-next/src/router/modules/projects.ts
@@ -42,8 +42,8 @@ export default {
name: 'projects-index',
component: components['home'],
meta: {
- title: '工作流监控'
- }
- }
- ]
+ title: '工作流监控',
+ },
+ },
+ ],
}
diff --git a/dolphinscheduler-ui-next/src/router/modules/resources.ts b/dolphinscheduler-ui-next/src/router/modules/resources.ts
index dbd27e5..0e47d21 100644
--- a/dolphinscheduler-ui-next/src/router/modules/resources.ts
+++ b/dolphinscheduler-ui-next/src/router/modules/resources.ts
@@ -42,8 +42,8 @@ export default {
name: 'resource-file-create',
component: components['home'],
meta: {
- title: '创建资源'
- }
- }
- ]
+ title: '创建资源',
+ },
+ },
+ ],
}
diff --git a/dolphinscheduler-ui-next/src/router/modules/security.ts b/dolphinscheduler-ui-next/src/router/modules/security.ts
index dfacd25..731a24a 100644
--- a/dolphinscheduler-ui-next/src/router/modules/security.ts
+++ b/dolphinscheduler-ui-next/src/router/modules/security.ts
@@ -42,8 +42,8 @@ export default {
name: 'users-manage',
component: components['home'],
meta: {
- title: '用户管理'
- }
- }
- ]
+ title: '用户管理',
+ },
+ },
+ ],
}
diff --git a/dolphinscheduler-ui-next/src/store/route/route.ts b/dolphinscheduler-ui-next/src/store/route/route.ts
index 5ef26a5..8d85a51 100644
--- a/dolphinscheduler-ui-next/src/store/route/route.ts
+++ b/dolphinscheduler-ui-next/src/store/route/route.ts
@@ -15,13 +15,13 @@
* limitations under the License.
*/
-import { toRaw } from "vue";
-import { defineStore } from "pinia";
-import RouteState from "./types";
-import { RouteRecordRaw } from "vue-router";
+import { toRaw } from 'vue'
+import { defineStore } from 'pinia'
+import RouteState from './types'
+import { RouteRecordRaw } from 'vue-router'
export const useAsyncRouteStore = defineStore({
- id: "route",
+ id: 'route',
state: (): RouteState => ({
menus: [],
routers: [],
@@ -29,18 +29,18 @@ export const useAsyncRouteStore = defineStore({
}),
getters: {
getMenus(): RouteRecordRaw[] {
- return this.menus;
+ return this.menus
},
getRouters(): RouteRecordRaw[] {
- return toRaw(this.addRouters);
+ return toRaw(this.addRouters)
},
},
actions: {
setMenus(menus) {
- this.menus = menus;
+ this.menus = menus
},
async generateRouters(routes) {
- console.log(routes);
+ console.log(routes)
},
},
-});
+})
diff --git a/dolphinscheduler-ui-next/src/store/route/types.ts b/dolphinscheduler-ui-next/src/store/route/types.ts
index 86fbc6a..415839a 100644
--- a/dolphinscheduler-ui-next/src/store/route/types.ts
+++ b/dolphinscheduler-ui-next/src/store/route/types.ts
@@ -14,12 +14,12 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { RouteRecordRaw } from "vue-router";
+import { RouteRecordRaw } from 'vue-router'
interface RouteState {
- menus: RouteRecordRaw[];
- routers: any[];
- addRouters: any[];
+ menus: RouteRecordRaw[]
+ routers: any[]
+ addRouters: any[]
}
-export default RouteState;
+export default RouteState
diff --git a/dolphinscheduler-ui-next/src/views/home/index.tsx b/dolphinscheduler-ui-next/src/views/home/index.tsx
index 77bcf76..fc40b72 100644
--- a/dolphinscheduler-ui-next/src/views/home/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/home/index.tsx
@@ -17,11 +17,19 @@
import { defineComponent } from 'vue'
import styles from './index.module.scss'
+import PieChart from '@/components/chart/modules/Pie'
+import GaugeChart from '@/components/chart/modules/Gauge'
export default defineComponent({
name: 'home',
setup() {},
render() {
- return <div class={styles.container}>Home Test</div>
+ return (
+ <div class={styles.container}>
+ Home Test
+ <PieChart />
+ <GaugeChart />
+ </div>
+ )
},
})
diff --git a/dolphinscheduler-ui-next/src/views/login/index.tsx b/dolphinscheduler-ui-next/src/views/login/index.tsx
index 307b162..eebee0f 100644
--- a/dolphinscheduler-ui-next/src/views/login/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/login/index.tsx
@@ -82,7 +82,12 @@ const login = defineComponent({
/>
</NFormItem>
</NForm>
- <NButton round type='primary' onClick={this.handleLogin}>
+ <NButton
+ round
+ type='info'
+ style={{ width: '100%' }}
+ onClick={this.handleLogin}
+ >
{this.t('login.signin')}
</NButton>
</div>
diff --git a/dolphinscheduler-ui-next/src/views/login/use-login.ts b/dolphinscheduler-ui-next/src/views/login/use-login.ts
index 12f331e..9514c31 100644
--- a/dolphinscheduler-ui-next/src/views/login/use-login.ts
+++ b/dolphinscheduler-ui-next/src/views/login/use-login.ts
@@ -19,12 +19,12 @@ import { useRouter } from 'vue-router'
import type { Router } from 'vue-router'
import { queryLog } from '@/service/modules/login'
-export function useLogin (state) {
+export function useLogin(state: any) {
const router: Router = useRouter()
const handleLogin = () => {
state.loginFormRef.validate((valid: any) => {
if (!valid) {
- queryLog({...state.loginForm}).then((res: Response) => {
+ queryLog({ ...state.loginForm }).then((res: Response) => {
console.log('res', res)
router.push({ path: 'home' })
})
@@ -34,6 +34,6 @@ export function useLogin (state) {
})
}
return {
- handleLogin
+ handleLogin,
}
-}
\ No newline at end of file
+}
diff --git a/dolphinscheduler-ui-next/src/views/login/use-translate.ts b/dolphinscheduler-ui-next/src/views/login/use-translate.ts
index a111bc3..859ba2e 100644
--- a/dolphinscheduler-ui-next/src/views/login/use-translate.ts
+++ b/dolphinscheduler-ui-next/src/views/login/use-translate.ts
@@ -15,13 +15,13 @@
* limitations under the License.
*/
-import { WritableComputedRef } from "vue"
+import { WritableComputedRef } from 'vue'
-export function useTranslate (locale: WritableComputedRef<string>) {
+export function useTranslate(locale: WritableComputedRef<string>) {
const handleChange = (value: string) => {
locale.value = value
}
return {
- handleChange
+ handleChange,
}
-}
\ No newline at end of file
+}
diff --git a/dolphinscheduler-ui-next/src/views/login/use-validate.ts b/dolphinscheduler-ui-next/src/views/login/use-validate.ts
index 640ec30..0120e7a 100644
--- a/dolphinscheduler-ui-next/src/views/login/use-validate.ts
+++ b/dolphinscheduler-ui-next/src/views/login/use-validate.ts
@@ -19,7 +19,7 @@ import { reactive, ref } from 'vue'
import { FormRules } from 'naive-ui'
import { useI18n } from 'vue-i18n'
-export function useValidate () {
+export function useValidate() {
const { t, locale } = useI18n()
const state = reactive({
loginFormRef: ref(),
@@ -48,6 +48,8 @@ export function useValidate () {
})
return {
- state, t, locale
+ state,
+ t,
+ locale,
}
-}
\ No newline at end of file
+}