mirror of https://github.com/lukechilds/polar.git
jamaljsr
5 years ago
13 changed files with 343 additions and 15 deletions
@ -0,0 +1,103 @@ |
|||
import React from 'react'; |
|||
import { DeleteOutlined, FormOutlined } from '@ant-design/icons'; |
|||
import styled from '@emotion/styled'; |
|||
import { Button, Table } from 'antd'; |
|||
import { usePrefixedTranslation } from 'hooks'; |
|||
import { CustomNode } from 'types'; |
|||
import { dockerConfigs } from 'utils/constants'; |
|||
import { getPolarPlatform } from 'utils/system'; |
|||
|
|||
const Styled = { |
|||
Table: styled(Table)` |
|||
margin: 20px 0; |
|||
`,
|
|||
Logo: styled.img` |
|||
width: 24px; |
|||
height: 24px; |
|||
margin-right: 10px; |
|||
`,
|
|||
DeleteButton: styled(Button)` |
|||
color: #a61d24; |
|||
&:hover { |
|||
color: #800f19; |
|||
} |
|||
`,
|
|||
}; |
|||
|
|||
interface NodeInfo { |
|||
id: string; |
|||
name: string; |
|||
dockerImage: string; |
|||
logo: string; |
|||
command: string; |
|||
} |
|||
|
|||
interface Props { |
|||
nodes: CustomNode[]; |
|||
} |
|||
|
|||
const CustomNodesTable: React.FC<Props> = ({ nodes }) => { |
|||
const { l } = usePrefixedTranslation('cmps.nodes.CustomNodesTable'); |
|||
const currPlatform = getPolarPlatform(); |
|||
|
|||
const handleEdit = (node: NodeInfo) => { |
|||
console.warn(node); |
|||
}; |
|||
|
|||
const handleDelete = (node: NodeInfo) => { |
|||
console.warn(node); |
|||
}; |
|||
|
|||
if (!nodes.length) { |
|||
return null; |
|||
} |
|||
|
|||
const customNodes: NodeInfo[] = []; |
|||
nodes.forEach(({ id, implementation, dockerImage, command }) => { |
|||
const { name, logo, platforms } = dockerConfigs[implementation]; |
|||
if (!platforms.includes(currPlatform)) return; |
|||
customNodes.push({ id, name, dockerImage, logo, command }); |
|||
}); |
|||
|
|||
return ( |
|||
<Styled.Table |
|||
dataSource={customNodes} |
|||
title={() => l('title')} |
|||
pagination={false} |
|||
rowKey="id" |
|||
emptyText={<>There are no custom images.</>} |
|||
> |
|||
<Table.Column |
|||
title={l('implementation')} |
|||
dataIndex="name" |
|||
key="name" |
|||
render={(name: string, node: NodeInfo) => ( |
|||
<span key="name"> |
|||
<Styled.Logo src={node.logo} /> |
|||
{name} |
|||
</span> |
|||
)} |
|||
/> |
|||
<Table.Column title={l('dockerImage')} dataIndex="dockerImage" key="imageName" /> |
|||
<Table.Column |
|||
title="" |
|||
width={200} |
|||
align="right" |
|||
render={(_, node: NodeInfo) => ( |
|||
<span key="edit"> |
|||
<Button type="link" icon={<FormOutlined />} onClick={() => handleEdit(node)}> |
|||
{l('edit')} |
|||
</Button> |
|||
<Styled.DeleteButton |
|||
type="link" |
|||
icon={<DeleteOutlined />} |
|||
onClick={() => handleDelete(node)} |
|||
></Styled.DeleteButton> |
|||
</span> |
|||
)} |
|||
/> |
|||
</Styled.Table> |
|||
); |
|||
}; |
|||
|
|||
export default CustomNodesTable; |
|||
@ -0,0 +1,86 @@ |
|||
import React from 'react'; |
|||
import { FormOutlined } from '@ant-design/icons'; |
|||
import styled from '@emotion/styled'; |
|||
import { Button, Table } from 'antd'; |
|||
import { usePrefixedTranslation } from 'hooks'; |
|||
import { ManagedNode } from 'types'; |
|||
import { dockerConfigs } from 'utils/constants'; |
|||
import { getPolarPlatform } from 'utils/system'; |
|||
|
|||
const Styled = { |
|||
Table: styled(Table)` |
|||
margin: 20px 0; |
|||
`,
|
|||
Logo: styled.img` |
|||
width: 24px; |
|||
height: 24px; |
|||
margin-right: 10px; |
|||
`,
|
|||
}; |
|||
|
|||
interface NodeInfo { |
|||
index: number; |
|||
name: string; |
|||
imageName: string; |
|||
logo: string; |
|||
version: string; |
|||
command: string; |
|||
} |
|||
|
|||
interface Props { |
|||
nodes: ManagedNode[]; |
|||
} |
|||
|
|||
const ManagedNodesTable: React.FC<Props> = ({ nodes }) => { |
|||
const { l } = usePrefixedTranslation('cmps.nodes.ManagedNodesTable'); |
|||
const currPlatform = getPolarPlatform(); |
|||
|
|||
const handleCustomize = (node: NodeInfo) => { |
|||
console.warn(node); |
|||
}; |
|||
|
|||
const managedNodes: NodeInfo[] = []; |
|||
nodes.forEach(({ implementation, version, command }, index) => { |
|||
const { name, imageName, logo, platforms } = dockerConfigs[implementation]; |
|||
if (!platforms.includes(currPlatform)) return; |
|||
managedNodes.push({ index, name, imageName, logo, version, command }); |
|||
}); |
|||
|
|||
return ( |
|||
<Styled.Table |
|||
dataSource={managedNodes} |
|||
title={() => l('title')} |
|||
pagination={false} |
|||
rowKey="index" |
|||
> |
|||
<Table.Column |
|||
title={l('implementation')} |
|||
dataIndex="name" |
|||
render={(name: string, node: NodeInfo) => ( |
|||
<span key="name"> |
|||
<Styled.Logo src={node.logo} /> |
|||
{name} |
|||
</span> |
|||
)} |
|||
/> |
|||
<Table.Column title={l('dockerImage')} dataIndex="imageName" /> |
|||
<Table.Column title={l('version')} dataIndex="version" /> |
|||
<Table.Column |
|||
title="" |
|||
width={150} |
|||
align="right" |
|||
render={(_, node: NodeInfo) => ( |
|||
<Button |
|||
type="link" |
|||
icon={<FormOutlined />} |
|||
onClick={() => handleCustomize(node)} |
|||
> |
|||
{l('customize')} |
|||
</Button> |
|||
)} |
|||
/> |
|||
</Styled.Table> |
|||
); |
|||
}; |
|||
|
|||
export default ManagedNodesTable; |
|||
@ -0,0 +1,49 @@ |
|||
import React, { useEffect } from 'react'; |
|||
import { info } from 'electron-log'; |
|||
import { PlusOutlined } from '@ant-design/icons'; |
|||
import styled from '@emotion/styled'; |
|||
import { Button, PageHeader } from 'antd'; |
|||
import { usePrefixedTranslation } from 'hooks'; |
|||
import { useTheme } from 'hooks/useTheme'; |
|||
import { useStoreActions, useStoreState } from 'store'; |
|||
import { ThemeColors } from 'theme/colors'; |
|||
import { HOME } from 'components/routing'; |
|||
import { CustomNodesTable, ManagedNodesTable } from './'; |
|||
|
|||
const Styled = { |
|||
PageHeader: styled(PageHeader)<{ colors: ThemeColors['pageHeader'] }>` |
|||
border: 1px solid ${props => props.colors.border}; |
|||
border-radius: 2px; |
|||
background-color: ${props => props.colors.background}; |
|||
margin-bottom: 10px; |
|||
flex: 0; |
|||
`,
|
|||
}; |
|||
|
|||
const NodesView: React.FC = () => { |
|||
useEffect(() => info('Rendering NodesView component'), []); |
|||
const { l } = usePrefixedTranslation('cmps.nodes.NodesView'); |
|||
|
|||
const theme = useTheme(); |
|||
const { managedNodes, settings } = useStoreState(s => s.app); |
|||
const { navigateTo } = useStoreActions(s => s.app); |
|||
|
|||
return ( |
|||
<> |
|||
<Styled.PageHeader |
|||
title={l('title')} |
|||
colors={theme.pageHeader} |
|||
onBack={() => navigateTo(HOME)} |
|||
extra={ |
|||
<Button type="primary" icon={<PlusOutlined />}> |
|||
{l('addBtn')} |
|||
</Button> |
|||
} |
|||
/> |
|||
<CustomNodesTable nodes={settings.nodes.custom} /> |
|||
<ManagedNodesTable nodes={managedNodes} /> |
|||
</> |
|||
); |
|||
}; |
|||
|
|||
export default NodesView; |
|||
@ -0,0 +1,3 @@ |
|||
export { default as CustomNodesTable } from './CustomNodesTable'; |
|||
export { default as ManagedNodesTable } from './ManagedNodesTable'; |
|||
export { default as NodesView } from './NodesView'; |
|||
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 44 KiB |
Loading…
Reference in new issue