feat：console&login demand (#11045)

console-ui/src/constants.js

@@ -44,3 +44,5 @@ export const GET_CONFIGURATION = 'GET_CONFIGURATION';
 export const GLOBAL_PAGE_SIZE_LIST = [10, 20, 30, 50, 100];
 
 export const LOGINPAGE_ENABLED = 'docsite_loginpage';
+
+export const SERVER_GUIDE = 'SERVER_GUIDE';

console-ui/src/index.js

@@ -103,6 +103,7 @@ class App extends React.Component {
     changeLanguage: PropTypes.func,
     getState: PropTypes.func,
     loginPageEnabled: PropTypes.string,
+    consoleUiEnable: PropTypes.string,
   };
 
   constructor(props) {
@@ -121,7 +122,8 @@ class App extends React.Component {
   }
 
   get router() {
-    const { loginPageEnabled } = this.props;
+    const { loginPageEnabled, consoleUiEnable } = this.props;
+
     return (
       <HashRouter>
         <Switch>
@@ -130,9 +132,9 @@ class App extends React.Component {
           )}
           {/* <Route path="/login" component={Login} /> */}
           <Layout>
-            {MENU.map(item => (
+            {consoleUiEnable &&
-              <Route key={item.path} {...item} />
+              consoleUiEnable === 'true' &&
-            ))}
+              MENU.map(item => <Route key={item.path} {...item} />)}
           </Layout>
         </Switch>
       </HashRouter>

console-ui/src/layouts/MainLayout.js

@@ -20,13 +20,13 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { ConfigProvider, Icon, Menu, Message } from '@alifd/next';
 import Header from './Header';
-import { getState, getNotice } from '../reducers/base';
+import { getState, getNotice, getGuide } from '../reducers/base';
 import getMenuData from './menu';
 
 const { SubMenu, Item } = Menu;
 
 @withRouter
-@connect(state => ({ ...state.locale, ...state.base }), { getState, getNotice })
+@connect(state => ({ ...state.locale, ...state.base }), { getState, getNotice, getGuide })
 @ConfigProvider.config
 class MainLayout extends React.Component {
   static displayName = 'MainLayout';
@@ -42,11 +42,15 @@ class MainLayout extends React.Component {
     children: PropTypes.array,
     getNotice: PropTypes.func,
     notice: PropTypes.string,
+    consoleUiEnable: PropTypes.string,
+    getGuide: PropTypes.func,
+    guideMsg: PropTypes.string,
   };
 
   componentDidMount() {
     this.props.getState();
     this.props.getNotice();
+    this.props.getGuide();
   }
 
   goBack() {
@@ -87,7 +91,7 @@ class MainLayout extends React.Component {
   }
 
   render() {
-    const { locale = {}, version, functionMode, authEnabled } = this.props;
+    const { locale = {}, version, functionMode, authEnabled, consoleUiEnable } = this.props;
     const MenuData = getMenuData(functionMode);
     return (
       <section
@@ -117,7 +121,9 @@ class MainLayout extends React.Component {
                       className="next-nav next-normal next-active next-right next-no-arrow next-nav-embeddable"
                       openMode="single"
                     >
-                      {MenuData.map((subMenu, idx) => {
+                      {consoleUiEnable &&
+                        consoleUiEnable === 'true' &&
+                        MenuData.map((subMenu, idx) => {
                           if (subMenu.children) {
                             return (
                               <SubMenu key={String(idx)} label={locale[subMenu.key]}>
@@ -151,11 +157,16 @@ class MainLayout extends React.Component {
               </div>
             </div>
             <div className="right-panel next-shell-sub-main">
-              {authEnabled === 'false' ? (
+              {authEnabled === 'false' && consoleUiEnable === 'true' ? (
                 <Message type="notice">
                   <div dangerouslySetInnerHTML={{ __html: this.props.notice }} />
                 </Message>
               ) : null}
+              {consoleUiEnable === 'false' && (
+                <Message type="notice">
+                  <div dangerouslySetInnerHTML={{ __html: this.props.guideMsg }} />
+                </Message>
+              )}
               {this.props.children}
             </div>
           </div>

console-ui/src/pages/Login/Login.jsx

@@ -21,7 +21,7 @@ import { withRouter } from 'react-router-dom';
 import './index.scss';
 import Header from '../../layouts/Header';
 import PropTypes from 'prop-types';
-import { login } from '../../reducers/base';
+import { login, guide, state } from '../../reducers/base';
 
 const FormItem = Form.Item;
 
@@ -37,6 +37,10 @@ class Login extends React.Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      consoleUiEnable: true,
+      guideMsg: '',
+    };
     this.field = new Field(this);
   }
 
@@ -45,8 +49,22 @@ class Login extends React.Component {
       const [baseUrl] = location.href.split('#');
       location.href = `${baseUrl}#/`;
     }
+    this.handleSearch();
   }
 
+  handleSearch = () => {
+    state().then(res => {
+      if (res?.console_ui_enabled === 'false') {
+        this.setState({ consoleUiEnable: true });
+        guide().then(res => {
+          this.setState({ guideMsg: res?.data });
+        });
+      } else {
+        this.setState({ consoleUiEnable: false });
+      }
+    });
+  };
+
   handleSubmit = () => {
     const { locale = {} } = this.props;
     this.field.validate((errors, values) => {
@@ -77,6 +95,7 @@ class Login extends React.Component {
 
   render() {
     const { locale = {} } = this.props;
+    const { consoleUiEnable, guideMsg } = this.state;
 
     return (
       <div className="home-page">
@@ -103,6 +122,7 @@ class Login extends React.Component {
               <div>{locale.internalSysTip1}</div>
               <div>{locale.internalSysTip2}</div>
             </div>
+            {!consoleUiEnable && (
               <Form className="login-form" field={this.field}>
                 <FormItem>
                   <Input
@@ -137,6 +157,12 @@ class Login extends React.Component {
                   <Form.Submit onClick={this.handleSubmit}>{locale.submit}</Form.Submit>
                 </FormItem>
               </Form>
+            )}
+            {consoleUiEnable && (
+              <Message type="notice" style={{ marginTop: 30 }}>
+                <div dangerouslySetInnerHTML={{ __html: guideMsg }} />
+              </Message>
+            )}
           </Card>
         </section>
       </div>

console-ui/src/reducers/base.js

@@ -15,7 +15,7 @@
  */
 
 import request from '../utils/request';
-import { GET_STATE, LOGINPAGE_ENABLED, GET_NOTICE } from '../constants';
+import { GET_STATE, LOGINPAGE_ENABLED, GET_NOTICE, SERVER_GUIDE } from '../constants';
 
 const initialState = {
   version: null,
@@ -24,6 +24,8 @@ const initialState = {
   loginPageEnabled: '',
   authEnabled: '',
   notice: '',
+  consoleUiEnable: '',
+  guideMsg: '',
 };
 
 /**
@@ -32,6 +34,16 @@ const initialState = {
  */
 const login = user => request.post('v1/auth/users/login', user);
 
+/**
+ * 单独在login处调用 获取提示信息
+ */
+const guide = () => request.get('v1/console/server/guide');
+
+/**
+ * 单独在login调用 判断是否可以登陆
+ */
+const state = () => request.get('v1/console/server/state');
+
 const getState = () => dispatch =>
   request
     .get('v1/console/server/state')
@@ -45,6 +57,7 @@ const getState = () => dispatch =>
           functionMode: res.function_mode,
           loginPageEnabled: res.login_page_enabled,
           authEnabled: res.auth_enabled,
+          consoleUiEnable: res.console_ui_enabled,
         },
       });
     })
@@ -57,6 +70,7 @@ const getState = () => dispatch =>
           functionMode: null,
           loginPageEnabled: null,
           authEnabled: null,
+          consoleUiEnable: null,
         },
       });
     });
@@ -81,15 +95,37 @@ const getNotice = () => dispatch =>
       });
     });
 
+const getGuide = () => dispatch =>
+  request
+    .get('v1/console/server/guide')
+    .then(res => {
+      dispatch({
+        type: SERVER_GUIDE,
+        data: {
+          guideMsg: res.data,
+        },
+      });
+    })
+    .catch(() => {
+      dispatch({
+        type: SERVER_GUIDE,
+        data: {
+          guideMsg: '',
+        },
+      });
+    });
+
 export default (state = initialState, action) => {
   switch (action.type) {
     case GET_STATE:
       return { ...state, ...action.data };
     case GET_NOTICE:
       return { ...state, ...action.data };
+    case SERVER_GUIDE:
+      return { ...state, ...action.data };
     default:
       return state;
   }
 };
 
-export { getState, login, getNotice };
+export { getState, login, getNotice, getGuide, guide, state };