feat: add Version Info

README.md

@@ -1,6 +1,6 @@
 # KubeClipper Console
 
-KubeClipper console is the web for [KubeClipper](https://github.com/kubeclipper-labs/kubeclipper).
+KubeClipper console is the web for [KubeClipper](https://github.com/kubeclipper/kubeclipper).
 
 ## Getting Started
 
@@ -62,7 +62,7 @@ docker build -t kubeclipper-console .
 
 ## How to submit a PR
 
-Follow [Contribution Rules](https://github.com/kubeclipper-labs/community) to commit your codes.
+Follow [Contribution Rules](https://github.com/kubeclipper/community) to commit your codes.
 
 ## Others
 

src/components/Tools/index.jsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2021 KubeClipper Authors.
+ *
+ *  Licensed 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 React from 'react';
+import { useVersionInfo } from 'hooks';
+
+import { Button } from 'antd';
+import { InfoCircleFilled } from '@ant-design/icons';
+
+import styles from './index.less';
+
+function Tools() {
+  const [handleVersionClick, Version] = useVersionInfo();
+
+  return (
+    <div className={styles.trigger}>
+      <Button
+        className={styles.button}
+        onClick={handleVersionClick}
+        type="primary"
+        icon={<InfoCircleFilled style={{ fontSize: '16px' }} />}
+        iconType="light"
+      />
+      {Version}
+    </div>
+  );
+}
+
+export default Tools;

src/components/Tools/index.less

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2021 KubeClipper Authors.
+ *
+ *  Licensed 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.
+ */
+
+.trigger {
+  position: fixed;
+  right: -10px;
+  bottom: 64px;
+  width: 50px;
+  transition: right 0.2s ease;
+  background: #26262b;
+  border-color: #26262b;
+  border-radius: 100px 0 0 100px;
+
+  &:hover {
+    right: 0px;
+    background: #26262b !important;
+    border-color: #26262b !important;
+  }
+  :global {
+    .ant-btn-primary:focus {
+      background: #26262b;
+      border-color: #26262b;
+    }
+  }
+}
+
+.button {
+  width: 100%;
+  border-radius: 100px 0 0 100px;
+  background: #26262b;
+  border-color: #26262b;
+}

src/components/VersionInfo/Version.jsx

@@ -0,0 +1,54 @@
+/*
+ * Copyright 2021 KubeClipper Authors.
+ *
+ *  Licensed 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 React from 'react';
+import styles from './index.less';
+import title from 'src/asset/image/title.png';
+import { useRootStore } from 'stores';
+
+function Version() {
+  const { licenseStore: store } = useRootStore();
+
+  return (
+    <div className={styles['version-content']}>
+      <div
+        className={styles.title}
+        style={{
+          backgroundImage: `url(${title})`,
+          backgroundSize: 'cover',
+        }}
+      />
+      <div>
+        <span>kc-console:</span>
+        <span>{process.env?.COMMITHASH}</span>
+      </div>
+      <div>
+        <span>kc-server:</span>
+        <span>{store.versionInfo?.gitVersion}</span>
+      </div>
+      <div>☸️ Manage Kubernetes in the most light and conventient way ☸️</div>
+      <div>
+        Feel free to contribute on{' '}
+        <a href="https://github.com/kubeclipper" target="_blank">
+          Github
+        </a>{' '}
+        🍻{' '}
+      </div>
+    </div>
+  );
+}
+
+export default Version;

src/components/VersionInfo/index.jsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2021 KubeClipper Authors.
+ *
+ *  Licensed 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 React from 'react';
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { useVersionInfo } from 'hooks';
+import styles from './index.less';
+import classNames from 'classnames';
+
+const VersionInfo = (props) => {
+  const { className } = props;
+  const [handleVersionClick, Version] = useVersionInfo();
+
+  return (
+    <div>
+      <span className={classNames(styles.dropDown, className)}>
+        <InfoCircleOutlined onClick={handleVersionClick} />
+      </span>
+      {Version}
+    </div>
+  );
+};
+
+export default VersionInfo;

src/components/VersionInfo/index.less

@@ -0,0 +1,54 @@
+/*
+ * Copyright 2021 KubeClipper Authors.
+ *
+ *  Licensed 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.
+ */
+
+.version-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  // padding: 20px 50px;
+
+  .title {
+    width: 320px;
+    height: 76px;
+    margin: 0 auto;
+  }
+
+  div {
+    span:last-of-type {
+      font-weight: 600;
+      margin-left: 10px;
+    }
+  }
+}
+
+.dropDown {
+  color: white;
+  line-height: 20px;
+  font-size: 16px;
+  vertical-align: top;
+  cursor: pointer;
+  > i {
+    font-size: 16px !important;
+    transform: none !important;
+    svg {
+      position: relative;
+      top: -1px;
+    }
+  }
+
+}

src/hooks/index.js

@@ -26,6 +26,7 @@ import useMergedState from './useMergedState';
 import useRefFunction from './useRefFunction';
 import useQuery from './useQuery';
 import useModal from './useModal';
+import useVersionInfo from './useVersionInfo';
 
 export {
   useDidUpdateEffect,
@@ -40,4 +41,5 @@ export {
   useRefFunction,
   useQuery,
   useModal,
+  useVersionInfo,
 };

src/hooks/useVersionInfo.js

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2021 KubeClipper Authors.
+ *
+ *  Licensed 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 React, { useEffect } from 'react';
+import Version from 'components/VersionInfo/Version';
+import useModal from './useModal';
+import { useRootStore } from 'stores';
+
+export default function useVersionInfo() {
+  const [modal, ModalDOM] = useModal();
+  const { licenseStore: store } = useRootStore();
+
+  useEffect(() => {
+    async function getSourceData() {
+      await store.getVersion();
+    }
+    getSourceData();
+  }, []);
+
+  const handleVersionClick = () => {
+    modal.open({
+      children: <Version />,
+      bodyStyle: { padding: '24px 50px' },
+      footer: null,
+    });
+  };
+
+  return [handleVersionClick, ModalDOM];
+}

src/layouts/Base/Right/index.jsx

@@ -23,6 +23,7 @@ import { useRootStore } from 'stores';
 import Breadcrumbs from './Breadcrumb';
 import { BaseContext } from '..';
 import ErrorBoundary from 'components/ErrorBoundary';
+import Tools from 'components/Tools';
 
 import styles from '../index.less';
 
@@ -94,6 +95,7 @@ function MainContent() {
       }  ${mainTabClass}`}
     >
       <ErrorBoundary>{renderRoutes(routes, extraProps)}</ErrorBoundary>
+      <Tools />
     </div>
   );
 }

src/pages/oauth/containers/Login/index.jsx

@@ -17,6 +17,7 @@ import React, { useState } from 'react';
 import { Form, Input, Button } from 'antd';
 import background from 'src/asset/image/background.png';
 import SelectLang from 'components/SelectLang';
+import VersionInfo from 'components/VersionInfo';
 import { useRootStore } from 'stores';
 import { setLocalStorageItem } from 'utils/localStorage';
 import Notify from 'components/Notify';
@@ -147,7 +148,8 @@ export default function Login(props) {
   return (
     <div className={styles.container}>
       <div className={styles.left}>
-        <SelectLang className={styles.lang} style={{ position: 'absolute' }} />
+        <SelectLang className={styles.lang} />
+        {rootStore.isOpenSource && <VersionInfo className={styles.about} />}
         <div className={styles.header}>
           {`${t('Welcome Login')} ${global_config.title}`}
         </div>

src/pages/oauth/containers/Login/index.less

@@ -34,6 +34,14 @@
     top: 5px;
   }
 
+  .about {
+    color: #0068ff;
+    position: absolute;
+    left: 29%;
+    top: 5px;
+  }
+
+
   input:-webkit-autofill {
     -webkit-box-shadow: 0 0 0px 32px #fff inset;
     -webkit-text-fill-color: #000;

src/stores/index.js

@@ -43,6 +43,8 @@ class RootStore {
     });
   }
 
+  isOpenSource = true;
+
   user = null;
 
   roles = null;

src/stores/license.js

@@ -41,7 +41,13 @@ export default class LicenseStore extends BaseStore {
   }
 
   async getVersion() {
-    const result = await request.get(this.getVersionnUrl());
+    const result = await request.get(
+      this.getVersionnUrl(),
+      {},
+      {
+        withoutToken: true,
+      }
+    );
     this.versionInfo = result || {};
   }