From 6633c352215430e82966970e2c80d85a72c5b8c6 Mon Sep 17 00:00:00 2001 From: likeguo Date: Sun, 8 May 2022 23:49:18 +0800 Subject: [PATCH] feature/new-home-part1 --- src/layouts/BasicLayout.js | 23 +++-- src/routes/Home/home.less | 20 ++++- src/routes/Home/index.js | 175 ++++++++++++++++++++++++++++++++++--- src/services/api.js | 109 +++++++++++++---------- 4 files changed, 256 insertions(+), 71 deletions(-) diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js index c10eeb978..6256eaf32 100644 --- a/src/layouts/BasicLayout.js +++ b/src/layouts/BasicLayout.js @@ -17,19 +17,19 @@ import React from "react"; import PropTypes from "prop-types"; -import { Layout, message } from "antd"; +import {Layout, message} from "antd"; import DocumentTitle from "react-document-title"; -import { connect } from "dva"; -import { Route, Redirect, Switch } from "dva/router"; -import { ContainerQuery } from "react-container-query"; +import {connect} from "dva"; +import {Redirect, Route, Switch} from "dva/router"; +import {ContainerQuery} from "react-container-query"; import classNames from "classnames"; import pathToRegexp from "path-to-regexp"; import GlobalHeader from "../components/GlobalHeader"; import SiderMenu from "../components/SiderMenu"; import NotFound from "../routes/Exception/404"; -import { getRoutes } from "../utils/utils"; -import AuthRoute, { checkMenuAuth, getAuthMenus } from "../utils/AuthRoute"; -import { getMenuData } from "../common/menu"; +import {getRoutes} from "../utils/utils"; +import AuthRoute, {checkMenuAuth, getAuthMenus} from "../utils/AuthRoute"; +import {getMenuData} from "../common/menu"; import logo from "../assets/logo.svg"; const MyContext = React.createContext(); @@ -177,10 +177,9 @@ class BasicLayout extends React.PureComponent { } else { const { routerData, permissions } = this.props; // get the first authorized route path in routerData - const authorizedPath = Object.keys(routerData).find( + return Object.keys(routerData).find( item => checkMenuAuth(item, permissions) && item !== "/" ); - return authorizedPath; } return redirect; }; @@ -228,17 +227,17 @@ class BasicLayout extends React.PureComponent { } menuMap[item.role].push(item); }); - Object.keys(menuMap).forEach((key, index) => { + Object.keys(menuMap).forEach((key) => { menus[0].children.push({ name: key, - path: `/plug/${index}`, + path: `/plug/${menuMap[key][0].role}`, authority: undefined, icon: "unordered-list", children: menuMap[key].map(item => { const { name } = item; return { name: name.replace(name[0], name[0].toUpperCase()), - path: `/plug/${index}/${item.name}`, + path: `/plug/${item.role}/${item.name}`, authority: undefined, id: item.id, locale: `SHENYU.MENU.PLUGIN.${item.name.toUpperCase()}`, diff --git a/src/routes/Home/home.less b/src/routes/Home/home.less index 538f06107..feae880c6 100644 --- a/src/routes/Home/home.less +++ b/src/routes/Home/home.less @@ -16,11 +16,29 @@ */ @import "~antd/lib/style/themes/default.less"; + .content { text-align: center; - padding-top: 200px; + padding-top: 40px; + padding-bottom: 20px; + span { font-size: 32px; color: @primary-color; } } + +.processContent { + margin-left: 30px; + margin-right: 30px; +} + +.contextHide { + margin-bottom: 0; + margin-right: 0; + margin-left: 0; +} + +.logItem { + padding: 10px 5px 5px 10px !important; +} diff --git a/src/routes/Home/index.js b/src/routes/Home/index.js index 56991964f..0de685b8e 100644 --- a/src/routes/Home/index.js +++ b/src/routes/Home/index.js @@ -15,12 +15,19 @@ * limitations under the License. */ -import React, { Component } from "react"; -import { connect } from "dva"; +import React, {Component} from "react"; +import {Steps, Divider, Card, Col, Row, Timeline, Statistic, Icon, Popover, Tag, Alert} from 'antd'; +import {connect} from "dva"; +import { routerRedux } from 'dva/router'; import styles from "./home.less"; -import { getCurrentLocale, getIntlContent } from '../../utils/IntlUtils' +import {getIntlContent} from '../../utils/IntlUtils'; +import {activePluginSnapshot, getNewEventRecodLogList} from "../../services/api"; -@connect(({ global }) => ({ +const {Step} = Steps; + +const colors = ["magenta","red","green","cyan","purple","blue","orange"]; + +@connect(({global}) => ({ global })) export default class Home extends Component { @@ -28,32 +35,174 @@ export default class Home extends Component { constructor(props) { super(props); this.state = { - localeName: '' + // eslint-disable-next-line react/no-unused-state + localeName: '', + activePluginSnapshot: [], + activeLog: [], } } componentDidMount() { const token = window.sessionStorage.getItem("token"); if (token) { - const { dispatch } = this.props; + const {dispatch} = this.props; dispatch({ type: "global/fetchPlatform" }); } + activePluginSnapshot().then(res => { + if (res){ + this.setState({activePluginSnapshot: res.data || []}) + } + }); + getNewEventRecodLogList().then(res =>{ + if (res){ + this.setState({activeLog: res.data || []}) + } + }) + } - changeLocales(locale) { - this.setState({ - localeName: locale - }); - getCurrentLocale(this.state.localeName); + componentWillUnmount() { + this.setState = ()=>false; + } + + pluginOnClick = (plugin) =>{ + const {dispatch} = this.props; + dispatch(routerRedux.push(`plug/${plugin.role}/${plugin.name}`)); } render() { + const contextStyle = {"fontWeight": "bold",color:"#3b9a9c"} + const pluginSteps = this.state.activePluginSnapshot.map((p,index )=> { + const content = ( +
+

{p.role}

+

the plugin has handle is : {p.handleCount}

+

the plugin has selector is : {p.selectorCount}

+
+
+ 
{JSON.stringify(JSON.parse(p.config !== null ? p.config : '{}'), null, 4)}
+
+
+ ); + const title = ( + {p.name} }> + {p.name} + {p.role} + + ); + const description = handle is {p.handleCount} selector is {p.selectorCount} ; + return ; + }) + const activeLogItems = this.state.activeLog.map((log,index) =>{ + const textStyle = {"fontWeight": "bold",color:log.color}; + const type = log.operationType.startsWith("CREATE") ? "success" : log.operationType.startsWith("DELETE") ? "warning" : "info"; + return( + + {log.operationType} by {log.operator}

} + description={

{log.operationTime} : {log.context}

} + type={type} + /> + + ) + }) + return ( -
- {getIntlContent("SHENYU.HOME.WELCOME")} +
+
+ {getIntlContent("SHENYU.HOME.WELCOME")} +
+
+ + + + + + +
+ + + + + {pluginSteps} + + + + + + +
+ + + } /> + + + + + +
+
+ + + } /> + + + + + +
+
+ + + } /> + + + + + +
+
+ + + } + suffix="" + /> + + + } + suffix="" + /> + + +
+ + + + + + + {activeLogItems} + + + + + +
+
); } diff --git a/src/services/api.js b/src/services/api.js index 6779a6dd9..46f814259 100644 --- a/src/services/api.js +++ b/src/services/api.js @@ -15,10 +15,11 @@ * limitations under the License. */ -import { stringify } from "qs"; +import {stringify} from "qs"; import request from "../utils/request"; const baseUrl = document.getElementById("httpPath").innerHTML; + /* add user */ export async function addUser(params) { return request(`${baseUrl}/dashboardUser`, { @@ -29,6 +30,7 @@ export async function addUser(params) { } }); } + /* delete user */ export async function deleteUser(params) { return request(`${baseUrl}/dashboardUser/batch`, { @@ -36,6 +38,7 @@ export async function deleteUser(params) { body: [...params.list] }); } + /* update user */ export async function updateUser(params) { return request(`${baseUrl}/dashboardUser/${params.id}`, { @@ -63,31 +66,18 @@ export async function updatePassword(params) { /* get all metadata */ export async function getAllMetadata(params) { - const { appName, currentPage, pageSize } = params; - let myParams = params; - if (appName) { - myParams = params; - } else { - myParams = { currentPage, pageSize }; - } - - return request(`${baseUrl}/meta-data/queryList?${stringify(myParams)}`, { + const {appName, currentPage, pageSize} = params; + return request(`${baseUrl}/meta-data/queryList?${stringify(appName ? params : {currentPage, pageSize})}`, { method: `GET` }); } export async function findMetadata(params) { - // const { appName, currentPage, pageSize } = params; - // let myParams = params; - // if (appName) { - // myParams = params; - // } else { - // myParams = { currentPage, pageSize }; - // } return request(`${baseUrl}/meta-data/${params.id}`, { method: `GET` }); } + /* addMetadata */ export async function addMetadata(params) { return request(`${baseUrl}/meta-data/createOrUpdate`, { @@ -97,6 +87,7 @@ export async function addMetadata(params) { } }); } + /* updateMetadata */ export async function updateMetadata(params) { return request(`${baseUrl}/meta-data/createOrUpdate`, { @@ -115,6 +106,7 @@ export async function updateMetadata(params) { } }); } + /* syncData */ export async function syncData() { return request(`${baseUrl}/meta-data/syncData`, { @@ -137,6 +129,7 @@ export async function deleteMetadata(params) { body: [...params.list] }); } + /* updateEnabled */ export async function updateEnabled(params) { return request(`${baseUrl}/meta-data/batchEnabled`, { @@ -147,19 +140,16 @@ export async function updateEnabled(params) { } }); } + /* getAllUsers */ export async function getAllUsers(params) { - const { userName, currentPage, pageSize } = params; - let myParams = params; - if (userName) { - myParams = params; - } else { - myParams = { currentPage, pageSize }; - } + const {userName, currentPage, pageSize} = params; + const myParams = userName ? params : {currentPage, pageSize}; return request(`${baseUrl}/dashboardUser?${stringify(myParams)}`, { method: `GET` }); } + /* findUser */ export async function findUser(params) { return request(`${baseUrl}/dashboardUser/${params.id}`, { @@ -176,6 +166,7 @@ export async function addPlugin(params) { } }); } + /* deletePlugin */ export async function deletePlugin(params) { return request(`${baseUrl}/plugin/batch`, { @@ -183,6 +174,7 @@ export async function deletePlugin(params) { body: [...params.list] }); } + /* updatePlugin */ export async function updatePlugin(params) { return request(`${baseUrl}/plugin/${params.id}`, { @@ -204,12 +196,21 @@ export async function getAllPlugins(params) { method: `GET` }); } + +/* get Plugins snapshot */ +export function activePluginSnapshot() { + return request(`${baseUrl}/plugin/snapshot/active`, { + method: `GET` + }); +} + /* findPlugin */ export async function findPlugin(params) { return request(`${baseUrl}/plugin/${params.id}`, { method: `GET` }); } + /* updatepluginEnabled */ export async function updatepluginEnabled(params) { return request(`${baseUrl}/plugin/enabled`, { @@ -230,6 +231,7 @@ export async function addAuth(params) { } }); } + /* deleteAuth */ export async function deleteAuth(params) { return request(`${baseUrl}/appAuth/batch`, { @@ -237,6 +239,7 @@ export async function deleteAuth(params) { body: [...params.list] }); } + /* updateAuth */ export async function updateAuth(params) { return request(`${baseUrl}/appAuth/${params.id}`, { @@ -248,19 +251,16 @@ export async function updateAuth(params) { } }); } + /* getAllAuth */ export async function getAllAuth(params) { - const { appKey, currentPage, pageSize } = params; - let myParams = params; - if (appKey) { - myParams = params; - } else { - myParams = { currentPage, pageSize }; - } + const {appKey, currentPage, pageSize} = params; + let myParams = appKey ? params : {currentPage, pageSize}; return request(`${baseUrl}/appAuth?${stringify(myParams)}`, { method: `GET` }); } + /* syncAuthsData */ export async function syncAuthsData() { return request(`${baseUrl}/appAuth/syncData`, { @@ -268,15 +268,11 @@ export async function syncAuthsData() { body: {} }); } + /* getAllAuths */ export async function getAllAuths(params) { - const { appKey, phone, currentPage, pageSize } = params; - let myParams = params; - if (appKey || phone) { - myParams = params; - } else { - myParams = { currentPage, pageSize }; - } + const {appKey, phone, currentPage, pageSize} = params; + const myParams = appKey || phone ? params : {currentPage, pageSize}; return request(`${baseUrl}/appAuth/findPageByQuery?${stringify(myParams)}`, { method: `GET` }); @@ -288,18 +284,21 @@ export async function findAuthData(params) { method: `GET` }); } + /* findAuthDataDel */ export async function findAuthDataDel(params) { return request(`${baseUrl}/appAuth/detailPath?id=${params.id}`, { method: `GET` }); } + /* get all metadatas */ export async function getAllMetadatas() { return request(`${baseUrl}/meta-data/findAll`, { method: `GET` }); } + /* update auth */ export async function updateAuthData(params) { return request(`${baseUrl}/appAuth/updateDetail`, { @@ -309,6 +308,7 @@ export async function updateAuthData(params) { } }); } + /* update authDel */ export async function updateAuthDel(params) { return request(`${baseUrl}/appAuth/updateDetailPath`, { @@ -316,6 +316,7 @@ export async function updateAuthDel(params) { body: params }); } + /* add auth */ export async function addAuthData(params) { return request(`${baseUrl}/appAuth/apply`, { @@ -325,6 +326,7 @@ export async function addAuthData(params) { } }); } + /* batch enable auth */ export async function updateAuthEnabled(params) { return request(`${baseUrl}/appAuth/batchEnabled`, { @@ -335,6 +337,7 @@ export async function updateAuthEnabled(params) { } }); } + /* batch delete auth */ export async function deleteAuths(params) { return request(`${baseUrl}/appAuth/batchDelete`, { @@ -342,6 +345,7 @@ export async function deleteAuths(params) { body: [...params.list] }); } + /* find auth */ export async function findAuth(params) { return request(`${baseUrl}/appAuth/${params.id}`, { @@ -358,6 +362,7 @@ export async function addSelector(params) { } }); } + /* delete selector */ export async function deleteSelector(params) { return request(`${baseUrl}/selector/batch`, { @@ -365,6 +370,7 @@ export async function deleteSelector(params) { body: [...params.list] }); } + /* update selector */ export async function updateSelector(params) { return request(`${baseUrl}/selector/${params.id}`, { @@ -374,12 +380,14 @@ export async function updateSelector(params) { } }); } + /* get all selectors */ export async function getAllSelectors(params) { return request(`${baseUrl}/selector?${stringify(params)}`, { method: `GET` }); } + /* get single selector */ export async function findSelector(params) { return request(`${baseUrl}/selector/${params.id}`, { @@ -401,6 +409,7 @@ export async function addRule(params) { } }); } + export async function deleteRule(params) { return request(`${baseUrl}/rule/batch`, { method: `DELETE`, @@ -443,6 +452,7 @@ export async function asyncPlugin() { method: `POST` }); } + // 同步单个插件 export async function asyncOnePlugin(params) { return request(`${baseUrl}/plugin/syncPluginData/${params.id}`, { @@ -463,6 +473,7 @@ export async function getAllPluginHandles(params) { method: `GET` }); } + // add plugin handle export async function addPluginHandle(params) { return request(`${baseUrl}/plugin-handle`, { @@ -472,6 +483,7 @@ export async function addPluginHandle(params) { } }); } + // get detail of plugin handle export async function findPluginHandle(params) { return request(`${baseUrl}/plugin-handle/${params.id}`, { @@ -573,10 +585,10 @@ export async function getAllRoles() { /* get roles by page */ export async function getRoleList(params) { - const { roleName, currentPage, pageSize } = params; - let myParams = { ...params }; + const {roleName, currentPage, pageSize} = params; + let myParams = {...params}; if (!roleName) { - myParams = { currentPage, pageSize }; + myParams = {currentPage, pageSize}; } return request(`${baseUrl}/role?${stringify(myParams)}`, { method: `GET` @@ -622,10 +634,10 @@ export async function updateRole(params) { /* get resources by page */ export async function getAllResources(params) { - const { title, currentPage, pageSize } = params; - let myParams = { ...params }; + const {title, currentPage, pageSize} = params; + let myParams = {...params}; if (!title) { - myParams = { currentPage, pageSize }; + myParams = {currentPage, pageSize}; } return request(`${baseUrl}/resource?${stringify(myParams)}`, { method: `GET` @@ -724,7 +736,7 @@ export async function addDataPermisionRule(params) { } }); } - +// Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and /* delete dataPermision's selector */ export async function deleteDataPermisionSelector(params) { return request(`${baseUrl}/data-permission/selector`, { @@ -744,3 +756,10 @@ export async function deleteDataPermisionRule(params) { } }); } + +/* get new event recode logs */ +export function getNewEventRecodLogList() { + return request(`${baseUrl}/operation-record/log/list`, { + method: `GET` + }); +}