Skip to content

Commit

Permalink
Merge pull request #38 from jairuigou/main
Browse files Browse the repository at this point in the history
feat: Add plugin management
  • Loading branch information
chenz24 authored Oct 26, 2022
2 parents 92b0496 + 6174aa0 commit 8f9580c
Show file tree
Hide file tree
Showing 24 changed files with 5,305 additions and 2,556 deletions.
2 changes: 1 addition & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ module.exports = {
commonjs: true,
browser: true,
},
extends: ['airbnb-typescript', 'plugin:prettier/recommended', 'prettier/react'],
extends: ['airbnb-typescript','prettier/react','prettier/@typescript-eslint','plugin:prettier/recommended'],
plugins: ['prettier', '@typescript-eslint', 'react', 'babel', 'promise', 'import'],
settings: {
'import/resolver': {
Expand Down
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,6 @@
# vendor/

.idea
.vscode
node_modules
dist
9 changes: 9 additions & 0 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom',
transform :{
'^.+\\.(ts|tsx)?$': 'ts-jest',
},
transformIgnorePatterns: ['<rootDir>/node_modules/'],
};
19 changes: 14 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"dev": "NODE_ENV=development webpack-dev-server --config ./scripts/webpack.dev.conf.js",
"dev:server": "cross-env NODE_ENV=development nodemon -w ./common -w ./server -e js,yaml server/server.js",
"start": "NODE_ENV=production nodemon -w ./server -e js server/server.js",
"test": "echo \"Error: no test specified\" && exit 1"
"test": "jest"
},
"browserslist": [
"> 1%",
Expand Down Expand Up @@ -45,9 +45,11 @@
"@babel/polyfill": "^7.12.1",
"@babel/preset-env": "^7.15.8",
"@babel/preset-react": "^7.14.5",
"@babel/runtime": "^7.15.4",
"@babel/runtime": "7.19.0",
"@kubed/stook-devtools": "^0.0.1",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "12.1.5",
"@types/lodash": "^4.14.176",
"@types/qs": "^6.9.7",
"@types/react": "^16.9.56",
Expand Down Expand Up @@ -90,7 +92,11 @@
"html-webpack-plugin": "^5.5.0",
"http-proxy-middleware": "^1.0.3",
"ip": "^1.1.5",
"jest": "^29.0.3",
"jest-environment-jsdom": "^29.0.3",
"jest-websocket-mock": "^2.4.0",
"mini-css-extract-plugin": "^2.4.2",
"msw": "^0.47.3",
"no-case": "3.0.4",
"nodemon": "^2.0.7",
"opn": "^6.0.0",
Expand All @@ -103,10 +109,12 @@
"systemjs-webpack-interop": "^2.3.7",
"terser": "^5.9.0",
"terser-webpack-plugin": "^5.2.4",
"ts-jest": "^29.0.1",
"ts-loader": "^9.2.6",
"typescript": "^4.4.4",
"typescript-plugin-styled-components": "^2.0.0",
"url-loader": "^4.0.0",
"uvu": "^0.5.0",
"webpack": "^5.58.2",
"webpack-assets-manifest": "^5.0.6",
"webpack-bundle-analyzer": "^4.5.0",
Expand All @@ -117,10 +125,11 @@
"webpackbar": "^5.0.0-3"
},
"dependencies": {
"@kubed/components": "^0.0.35",
"@kubed/hooks": "^0.0.9",
"@kubed/icons": "^0.0.2",
"@kubed/components": "0.0.44",
"@kubed/hooks": "0.0.10",
"@kubed/icons": "^0.0.4",
"@kubed/stook": "^0.0.4",
"axios": "^0.27.2",
"classnames": "^2.2.6",
"dayjs": "^1.10.7",
"lodash": "^4.17.20",
Expand Down
6 changes: 5 additions & 1 deletion scripts/webpack.dev.conf.js
Original file line number Diff line number Diff line change
Expand Up @@ -91,9 +91,13 @@ const webpackDevConfig = merge(baseConfig, {
// stats: 'errors-only',
proxy: {
'/apis': {
target: 'ws://103.61.38.113:9088',
target: 'ws://localhost:9088',
ws: true,
changeOrigin: true,
},
'/api': {
target: 'http://localhost:9088',
changeOrigin: true,
}
}
},
Expand Down
31 changes: 31 additions & 0 deletions src/components/DropdownMenu/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React from 'react';
import { Dropdown, Menu, MenuItem, Button } from '@kubed/components';
import { Trash, Success, More } from '@kubed/icons';

type Props = {
triggerAuditHandler: () => void;
uninstallHandler: () => void;
};

const DropdownMenu = ({ triggerAuditHandler, uninstallHandler }: Props) => {
const menu = (
<Menu style={{ width: '200px' }}>
<MenuItem icon={<Success />} onClick={triggerAuditHandler}>
启动巡检
</MenuItem>
<MenuItem icon={<Trash />} onClick={uninstallHandler}>
卸载
</MenuItem>
</Menu>
);

return (
<Dropdown content={menu} placement="bottom-end">
<Button variant="text" radius="lg" size="sm">
<More size={16} />
</Button>
</Dropdown>
);
};

export default DropdownMenu;
43 changes: 43 additions & 0 deletions src/components/Image/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React, { useState } from 'react';
import styled from 'styled-components';

interface Props {
src?: string;
iconLetter: string;
iconSize: number;
}

const DefaultImgIcon = styled.span<Props>`
display: flex;
align-items: center;
justify-content: center;
background-color: #eff4f9;
border-radius: 4px;
font-weight: bold;
width: ${({ iconSize }) => iconSize}px;
height: ${({ iconSize }) => iconSize}px;
font-size: ${({ iconSize }) => iconSize / 2}px;
padding: ${({ iconSize }) => iconSize / 4}px;
line-height: ${({ iconSize }) => (iconSize / 2 > 12 ? iconSize / 2 : 12)}px;
`;

const Image = ({ src, iconLetter, iconSize }: Props) => {
const [loadError, setLoadError] = useState(false);
if (loadError || !src) {
return (
<DefaultImgIcon iconLetter={iconLetter} iconSize={iconSize}>
{iconLetter.substring(0, 1).toLocaleUpperCase()}
</DefaultImgIcon>
);
}
return (
<img
src={src}
onError={() => {
setLoadError(true);
}}
/>
);
};

export default Image;
53 changes: 53 additions & 0 deletions src/components/InstallSwitch/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import React from 'react';
import { Button } from '@kubed/components';
import { Download, Trash } from '@kubed/icons';
import { InstallState } from '../../libs/types';

type Props = {
state: InstallState;
onClick: () => void;
};

const InstallSwitch = ({ state, onClick }: Props) => {
let loading: boolean;
let content: string;
let color: string;
let icon = <Download color="white" size="13px" />;

if (state === 'installing') {
loading = true;
content = '安装中';
color = 'secondary';
icon = <Download color="white" size="13px" />;
} else if (state == 'uninstalling') {
loading = true;
content = '卸载中';
color = 'error';
icon = <Trash color="white" size="13px" />;
} else if (state === 'installed') {
loading = false;
content = '卸载';
color = 'error';
icon = <Trash color="white" size="13px" />;
} else {
loading = false;
content = '安装';
color = 'secondary';
icon = <Download color="white" size="13px" />;
}

return (
<Button
variant="filled"
color={color}
leftIcon={icon}
loading={loading}
shadow
onClick={onClick}
>
{content}
</Button>
);
};

export default InstallSwitch;
61 changes: 53 additions & 8 deletions src/components/Navbar/index.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,16 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { Earth, CaretDown } from '@kubed/icons';
import { Link, useNavigate, useLocation } from 'react-router-dom';
import { Earth } from '@kubed/icons';
import { Dropdown, Menu, MenuItem } from '@kubed/components';
import { NavbarWrapper, LogoWrapper, NavbarRight, ProfileMenu } from './styles';
import {
NavbarWrapper,
LogoWrapper,
NavbarRight,
NavbarCenter,
NavWrapper,
NavItem,
Indicator,
} from './styles';

const langMenu = (
<Menu>
Expand All @@ -19,19 +27,56 @@ const langMenu = (
// );

const Navbar = () => {
const navigate = useNavigate();
const location = useLocation();
let activeKey = 'one';
let activePosition = '0px';
if (location.pathname.includes('/plugins')) {
activeKey = 'two';
activePosition = '110px';
}

return (
<NavbarWrapper>
<LogoWrapper>
<Link to="/">
<img src="../../assets/logo.svg" alt="KubeEye" />
</Link>
</LogoWrapper>

<NavbarCenter>
<NavWrapper>
<Indicator position={activePosition}></Indicator>
<NavItem
activeKey={activeKey}
itemKey="one"
onClick={() => {
navigate('/');
}}
>
概览
</NavItem>
<NavItem
activeKey={activeKey}
itemKey="two"
onClick={() => {
navigate('/plugins');
}}
style={{ marginLeft: '52px' }}
>
插件管理
</NavItem>
</NavWrapper>
</NavbarCenter>

<NavbarRight>
<Dropdown content={langMenu}>
<div className="language-switcher">
<Earth size={16} />
</div>
</Dropdown>
<div className="right">
<Dropdown content={langMenu}>
<div className="language-switcher">
<Earth size={16} />
</div>
</Dropdown>
</div>
{/*<ProfileMenu>*/}
{/* <Dropdown content={userMenu}>*/}
{/* <div className="user">*/}
Expand Down
53 changes: 51 additions & 2 deletions src/components/Navbar/styles.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
import styled from 'styled-components';

interface NavItemProps {
activeKey: string;
itemKey: string;
}
interface IndicatorProps {
position: string;
}

export const NavbarWrapper = styled.div`
position: fixed;
top: 0;
Expand All @@ -8,15 +16,16 @@ export const NavbarWrapper = styled.div`
align-items: center;
justify-content: space-between;
width: 100vw;
z-index: 200;
z-index: 9999;
min-width: 1164px;
height: 68px;
height: 84px;
background-color: ${({ theme }) => theme.palette.background};
padding: 0 32px;
box-shadow: 4px 0 16px rgba(36, 46, 66, 0.08);
`;

export const LogoWrapper = styled.div`
flex: 1;
display: flex;
img {
width: 156px;
Expand All @@ -25,6 +34,11 @@ export const LogoWrapper = styled.div`

export const NavbarRight = styled.div`
display: flex;
flex: 1;
.right {
margin-left: auto;
}
.language-switcher {
display: flex;
Expand Down Expand Up @@ -54,3 +68,38 @@ export const ProfileMenu = styled.div`
}
}
`;

export const NavbarCenter = styled.div`
flex: 1;
display: flex;
justify-content: center;
height: 100%;
`;

export const NavWrapper = styled.div`
position: relative;
`;

export const NavItem = styled.span<NavItemProps>`
display: inline-block;
font-weight: 600;
font-size: 20px;
color: ${props => (props.activeKey === props.itemKey ? '#404F68' : '#79879C')};
cursor: pointer;
padding-top: 28px;
:hover {
color: #404f68;
}
`;

export const Indicator = styled.span<IndicatorProps>`
height: 3px;
width: 40px;
background-color: #242e42;
border-radius: 6px 6px 0px 0px;
margin-top: 25px;
position: absolute;
left: ${props => props.position};
bottom: 0;
transition: 0.3s;
`;
Loading

0 comments on commit 8f9580c

Please sign in to comment.