feat：console&login demand (#11045)

2023-08-30 15:21:15 +08:00 · 2023-08-30 15:21:15 +08:00 · e4190a8c86
commit e4190a8c86
parent 2428a503e4
5 changed files with 148 additions and 71 deletions
--- a/console-ui/src/constants.js
+++ b/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';
--- a/console-ui/src/index.js
+++ b/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 => (
-              <Route key={item.path} {...item} />
-            ))}
+            {consoleUiEnable &&
+              consoleUiEnable === 'true' &&
+              MENU.map(item => <Route key={item.path} {...item} />)}
          </Layout>
        </Switch>
      </HashRouter>
--- a/console-ui/src/layouts/MainLayout.js
+++ b/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,45 +121,52 @@ 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) => {
-                        if (subMenu.children) {
+                      {consoleUiEnable &&
+                        consoleUiEnable === 'true' &&
+                        MenuData.map((subMenu, idx) => {
+                          if (subMenu.children) {
+                            return (
+                              <SubMenu key={String(idx)} label={locale[subMenu.key]}>
+                                {subMenu.children.map((item, i) => (
+                                  <Item
+                                    key={[idx, i].join('-')}
+                                    onClick={() => this.navTo(item.url)}
+                                    className={this.isCurrentPath(item.url)}
+                                  >
+                                    {locale[item.key]}
+                                  </Item>
+                                ))}
+                              </SubMenu>
+                            );
+                          }
                          return (
-                            <SubMenu key={String(idx)} label={locale[subMenu.key]}>
-                              {subMenu.children.map((item, i) => (
-                                <Item
-                                  key={[idx, i].join('-')}
-                                  onClick={() => this.navTo(item.url)}
-                                  className={this.isCurrentPath(item.url)}
-                                >
-                                  {locale[item.key]}
-                                </Item>
-                              ))}
-                            </SubMenu>
+                            <Item
+                              key={String(idx)}
+                              className={['first-menu', this.isCurrentPath(subMenu.url)]
+                                .filter(c => c)
+                                .join(' ')}
+                              onClick={() => this.navTo(subMenu.url)}
+                            >
+                              {locale[subMenu.key]}
+                            </Item>
                          );
-                        }
-                        return (
-                          <Item
-                            key={String(idx)}
-                            className={['first-menu', this.isCurrentPath(subMenu.url)]
-                              .filter(c => c)
-                              .join(' ')}
-                            onClick={() => this.navTo(subMenu.url)}
-                          >
-                            {locale[subMenu.key]}
-                          </Item>
-                        );
-                      })}
+                        })}
                    </Menu>
                  </>
                )}
              </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>
--- a/console-ui/src/pages/Login/Login.jsx
+++ b/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,40 +122,47 @@ class Login extends React.Component {
              <div>{locale.internalSysTip1}</div>
              <div>{locale.internalSysTip2}</div>
            </div>
-            <Form className="login-form" field={this.field}>
-              <FormItem>
-                <Input
-                  {...this.field.init('username', {
-                    rules: [
-                      {
-                        required: true,
-                        message: locale.usernameRequired,
-                      },
-                    ],
-                  })}
-                  placeholder={locale.pleaseInputUsername}
-                  onKeyDown={this.onKeyDown}
-                />
-              </FormItem>
-              <FormItem>
-                <Input
-                  htmlType="password"
-                  placeholder={locale.pleaseInputPassword}
-                  {...this.field.init('password', {
-                    rules: [
-                      {
-                        required: true,
-                        message: locale.passwordRequired,
-                      },
-                    ],
-                  })}
-                  onKeyDown={this.onKeyDown}
-                />
-              </FormItem>
-              <FormItem label=" ">
-                <Form.Submit onClick={this.handleSubmit}>{locale.submit}</Form.Submit>
-              </FormItem>
-            </Form>
+            {!consoleUiEnable && (
+              <Form className="login-form" field={this.field}>
+                <FormItem>
+                  <Input
+                    {...this.field.init('username', {
+                      rules: [
+                        {
+                          required: true,
+                          message: locale.usernameRequired,
+                        },
+                      ],
+                    })}
+                    placeholder={locale.pleaseInputUsername}
+                    onKeyDown={this.onKeyDown}
+                  />
+                </FormItem>
+                <FormItem>
+                  <Input
+                    htmlType="password"
+                    placeholder={locale.pleaseInputPassword}
+                    {...this.field.init('password', {
+                      rules: [
+                        {
+                          required: true,
+                          message: locale.passwordRequired,
+                        },
+                      ],
+                    })}
+                    onKeyDown={this.onKeyDown}
+                  />
+                </FormItem>
+                <FormItem label=" ">
+                  <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>
--- a/console-ui/src/reducers/base.js
+++ b/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 };