Create login to hkube site UI

package.json

@@ -41,6 +41,7 @@
     "express": "^4.17.1",
     "graphql": "^15.5.2",
     "isnumber": "^1.0.0",
+    "keycloak-js": "^25.0.1",
     "qs": "^6.10.1",
     "react-apexcharts": "^1.4.0",
     "react-collapse": "^5.1.0",

src/Routes/Base/Header/HelpBar.react.js

@@ -6,6 +6,7 @@ import { FlexBox, Icons } from 'components/common';
 import styled from 'styled-components';
 import Settings from './Settings/Settings.react';
 import InactiveModeTag from './InactiveMode';
+import IconUser from './IconUser';
 import ExperimentPicker from './ExperimentPicker.react';
 
 const Container = styled(FlexBox.Auto)`
@@ -17,7 +18,7 @@ const HelpBar = () => (
     <InactiveModeTag />
 
     <ExperimentPicker />
-
+    <IconUser name="zivglik" />
     <Popover content={<Settings />} placement="bottomRight" trigger="click">
       <Icons.Hover type={<MenuOutlined title="Settings" />} />
     </Popover>

src/Routes/Base/Header/IconUser.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Avatar, Popover, Tooltip } from 'antd';
+import styled from 'styled-components';
+import MenuUser from '../Login/MenuUser.react';
+
+const CircleInitialWrapper = styled.div``;
+
+const StyledAvatar = styled(Avatar)`
+  background-color: #007bff;
+  color: white;
+  cursor: pointer;
+`;
+// eslint-disable-next-line react/prop-types
+const IconUser = ({ name }) => {
+  const getInitial = nameStr => {
+    if (!nameStr) return '';
+    return nameStr.toString().charAt(0).toUpperCase();
+  };
+
+  const initial = getInitial(name);
+
+  return (
+    <CircleInitialWrapper>
+      <Popover content={<MenuUser />} placement="bottomRight" trigger="click">
+        <Tooltip title={name}>
+          <StyledAvatar>{initial}</StyledAvatar>{' '}
+        </Tooltip>
+      </Popover>
+    </CircleInitialWrapper>
+  );
+};
+
+export default IconUser;

src/Routes/Base/Login/FormLogin.js

@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+import { Button, Form, Input, Typography, Checkbox } from 'antd';
+import { FlexBox } from 'components/common';
+import KeycloakServices from '../../../keycloak';
+
+const { Title } = Typography;
+
+const FormLogin = () => {
+  const { initKeycloak } = KeycloakServices;
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+
+  const onFinishFailed = errorInfo => {
+    // eslint-disable-next-line no-console
+    console.log('Failed:', errorInfo);
+  };
+
+  const onFinish = () => {
+    // event.preventDefault();
+    /* keycloak
+      .init({ onLoad: 'login-required' })
+      .then(authenticated => {
+        // console.log(authenticated);
+        if (authenticated) {
+          keycloak
+            .login({
+              username,
+              password,
+              grantType: 'password',
+              clientId: keycloak.clientId,
+            })
+            .catch(() => {
+              //   console.error('Failed to login:', error);
+            });
+        } else {
+          //  console.log('User not authenticated');
+        }
+      })
+      .catch(error => {
+        console.error('Failed to initialize Keycloak:', error);
+      }); */
+
+    initKeycloak(<>login</>, <>error</>, username, password);
+  };
+
+  return (
+    <FlexBox>
+      <div>
+        <Title level={3} style={{ margin: '0px' }}>
+          Welcome to Hkube
+        </Title>
+        <div
+          style={{
+            fontSize: '11px',
+            paddingBottom: '20px',
+            color: 'GrayText',
+          }}>
+          please enter login details below.
+        </div>
+      </div>
+
+      <Form
+        name="basic"
+        labelCol={{
+          span: 8,
+        }}
+        wrapperCol={{
+          span: 16,
+        }}
+        style={{
+          width: '90%',
+        }}
+        initialValues={{
+          remember: true,
+        }}
+        onFinish={onFinish}
+        onFinishFailed={onFinishFailed}
+        autoComplete="off">
+        <Form.Item
+          label="Username"
+          name="username"
+          rules={[
+            {
+              required: true,
+              message: 'Please input your username!',
+            },
+          ]}>
+          <Input value={username} onChange={e => setUsername(e.target.value)} />
+        </Form.Item>
+
+        <Form.Item
+          label="Password"
+          name="password"
+          rules={[
+            {
+              required: true,
+              message: 'Please input your password!',
+            },
+          ]}>
+          <Input.Password
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+          />
+        </Form.Item>
+
+        <Form.Item
+          name="remember"
+          valuePropName="checked"
+          wrapperCol={{
+            offset: 8,
+            span: 16,
+          }}>
+          <Checkbox>Remember me</Checkbox>
+        </Form.Item>
+
+        <Form.Item
+          wrapperCol={{
+            offset: 8,
+            span: 16,
+          }}>
+          <Button type="primary" htmlType="submit">
+            Login
+          </Button>
+        </Form.Item>
+      </Form>
+    </FlexBox>
+  );
+};
+export default FormLogin;

src/Routes/Base/Login/LoginPage.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import styled from 'styled-components';
+import FormLogin from './FormLogin';
+import bgImage from '../../../images/bgLogin.png';
+
+const BackgroundWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-image: url(${bgImage});
+  background-size: contain;
+  background-position: center;
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: inherit;
+    filter: blur(3px);
+    z-index: 1;
+  }
+`;
+
+const LoginBox = styled.div`
+  width: 20%;
+  padding: 20px;
+  background: rgba(255, 255, 255, 1);
+  border-radius: 10px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  z-index: 2;
+  position: relative;
+  display: flex;
+  margin-top: -240px;
+`;
+/*
+const TitleLogoBox = styled.div`
+  z-index: 3;
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  width: 22%;
+  justify-content: space-evenly;
+  height: 58px;
+`;
+*/
+const LoginPage = () => (
+  <BackgroundWrapper>
+    {/*   <TitleLogoBox>
+      <Fish style={{ width: '57px' }} />
+      <Title style={{ width: '250px', height: 'auto' }} />
+    </TitleLogoBox> */}
+    <LoginBox>
+      <FormLogin />
+    </LoginBox>
+  </BackgroundWrapper>
+);
+
+export default LoginPage;

src/Routes/Base/Login/MenuUser.react.js

@@ -0,0 +1,30 @@
+import React, { useCallback } from 'react';
+import { FlexBox, Icons } from 'components/common';
+import { useNavigate } from 'react-router-dom';
+import { LogoutOutlined } from '@ant-design/icons';
+import styled from 'styled-components';
+import { Typography } from 'antd';
+
+const { Text } = Typography;
+const MenuUser = () => {
+  const navigate = useNavigate();
+
+  const onLogoutClick = useCallback(() => {
+    navigate('/login');
+  }, [navigate]);
+
+  const TextLink = styled(Text)`
+    cursor: pointer;
+  `;
+
+  return (
+    <FlexBox.Auto align="left" direction="column" gutter={[10, 10]}>
+      <FlexBox.Auto>
+        <Icons.Hover type={<LogoutOutlined />} onClick={onLogoutClick} />
+
+        <TextLink onClick={onLogoutClick}>Logout</TextLink>
+      </FlexBox.Auto>
+    </FlexBox.Auto>
+  );
+};
+export default MenuUser;

src/Routes/Tables/Algorithms/index.js

@@ -55,9 +55,11 @@ const AlgorithmsTable = () => {
   */
   const onSubmitFilter = () => {};
 
-  if (query.loading && query.data?.algorithms?.list?.length === 0)
+  if (
+    (query.loading && query.data?.algorithms?.list?.length === 0) ||
+    query.error
+  )
     return <SkeletonLoader />;
-  if (query.error) return `Error! ${query.error.message}`;
 
   const getList = queryVal => {
     const filterValue = instanceFilter.algorithms.qAlgorithmName;

src/Routes/Tables/Pipelines/index.js

@@ -53,8 +53,8 @@ const PipelinesTable = () => {
     onSubmitFilter(instanceFilter.pipelines);
   }, [query.data?.pipelines?.pipelinesCount]);
 
-  if (query.loading && pipelineList.length === 0) return <SkeletonLoader />;
-  if (query.error) return `Error! ${query.error.message}`;
+  if ((query.loading && pipelineList.length === 0) || query.error)
+    return <SkeletonLoader />;
 
   return (
     <>
@@ -77,6 +77,9 @@ const PipelinesTable = () => {
           scroll={{
             y: '80vh',
           }}
+          locale={{
+            emptyText: <SkeletonLoader />,
+          }}
         />
       </Space>
       <Routes>