Skip to content

Commit

Permalink
Remove hack
Browse files Browse the repository at this point in the history 
Remove icon test
remove checkimage

Signed-off-by: Qiaozp <[email protected]>
  • Loading branch information
@chivalryq
chivalryq committed May 9, 2023
1 parent bfde81c commit 81264bf
Show file tree
Hide file tree
Showing 11 changed files with 123 additions and 209 deletions.
2 changes: 1 addition & 1 deletion packages/velaux-data/src/api/addon.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { ApplicationStatus, UIParam } from './application';
import type { NameAlias } from './env';
import { KeyValue } from "@velaux/data";
import { KeyValue } from "../types";

export interface Addon {
name: string;
Expand Down
133 changes: 63 additions & 70 deletions packages/velaux-ui/src/layout/AppRootPage/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { getPluginSrv, importAppPagePlugin } from '../../services/PluginService'
import { Box, Button, Divider, Grid, Loading, Message, Tab } from "@alifd/next";
import './index.less'
import { connect } from "dva";
import { checkImage, renderIcon } from "../../utils/icon";
import { renderIcon } from "../../utils/icon";

interface Props {
pluginId: string;
Expand Down Expand Up @@ -41,8 +41,6 @@ enum types {
}

function ConfigPage({ pluginId, dispatch, pluginList, loading }: Props) {

const [valid, setValid] = React.useState(false)
const [app, setApp] = React.useState<AppPagePlugin>();
const _meta = pluginList.filter(item => item.id === pluginId)[0]
const updateMeta = (previousState: any, action: any) => {
Expand All @@ -58,18 +56,15 @@ function ConfigPage({ pluginId, dispatch, pluginList, loading }: Props) {
newJsonData[key] = value
meta.jsonSetting = newJsonData
setApp({ ...app, meta: meta } as AppPagePlugin)
console.log('handleJSONChange', meta)
}
const handleSecureJSONChange = (key: string, value: any) => {
const newSecureJsonData = { ...meta.secureJsonData }
newSecureJsonData[key] = value
meta.secureJsonData = newSecureJsonData
setApp({ ...app, meta: meta } as AppPagePlugin)
console.log('handleSecureJSONChange', meta)
}

const saveSetting = () => {
console.log('saveSetting', meta.jsonSetting, meta.secureJsonData)
dispatch({
type: 'plugins/setPlugin',
payload: {
Expand Down Expand Up @@ -161,85 +156,84 @@ function ConfigPage({ pluginId, dispatch, pluginList, loading }: Props) {
const history = locationService.getHistory()
history.push('/plugins')
}
checkImage(meta.info?.logos.large, (valid) => {
setValid(valid)
})

const AppConfigPage = app.configPages.body

return (
<>
<Box>
<Loading visible={loading.models.plugins ?? false} fullScreen={true} />
<Box className={'page-header'} direction={'row'} spacing={12}>
<Box className={'container'}>
<Box className={'page-header'} direction={'row'} spacing={12}>
<span className={'page-header-logo'}>
{renderIcon(meta.id, valid, meta.info?.logos.large)}
{renderIcon(meta.id, meta.info?.logos.large, "80px")}
</span>
<Box direction={'column'}>
<h1 className={'page-header-title'}>{
<>
<a onClick={handleGotoPlugins}>Plugins</a> / {meta.name}
</>
}</h1>
<Row className={'basic-info font-size-16'}>
<Col>
<div className={'info-item-title'}>Version</div>
<div>{meta.info.version}</div>
</Col>
<Col>
<Divider direction="ver" style={{ height: '100%' }} />
</Col>
<Col>
<Box direction={'column'}>
<div className={'info-item-title'}>Author</div>
<div>{meta.info.author?.name ?? "Unknown"}</div>
</Box>
</Col>
<Col>
<Divider direction="ver" style={{ height: '100%' }} />
</Col>
<Col className={'info-item'}>
<div className={'info-item-title'}>Status</div>
<div>{
meta.enabled ? <Translation className={''}>Enabled</Translation> : <Translation>Disabled</Translation>
}</div>
</Col>
</Row>
<h4 className={'font-size-14'}>{meta.info.description ?? "No descriptions"}</h4>
</Box>
<Box style={{ marginLeft: 'auto' }} align={'flex-end'} direction={'row'} justify={'flex-end'}>
<Row gutter={8}>
{isInstalled && !isEnabled &&
<Box direction={'column'}>
<h1 className={'page-header-title'}>{
<>
<a onClick={handleGotoPlugins}>Plugins</a> / {meta.name}
</>
}</h1>

<h4 className={'font-size-14'}>{meta.info.description ?? "No descriptions"}</h4>
</Box>
<Box style={{ marginLeft: 'auto' }} align={'flex-end'} direction={'row'} justify={'flex-end'}>
<Box justify={"space-between"} style={{ height: '100%' }}>
<Row className={'basic-info font-size-16'} justify={'end'}>
<Col>
<Button type={'primary'} onClick={() => enablePlugin(pluginId)}>Enable</Button>
<div className={'info-item-title'}>Version</div>
<div>{meta.info.version}</div>
</Col>
}
{isEnabled &&
<Col>
<Button type={'primary'} onClick={saveSetting}>Save & Reload</Button>
<Divider direction="ver" style={{ height: '100%' }} />
</Col>
}
{
isEnabled &&
<Col>
<Button warning={true} onClick={() => disablePlugin(pluginId)}>Disable</Button>
<Box direction={'column'}>
<div className={'info-item-title'}>Author</div>
<div>{meta.info.author?.name ?? "Unknown"}</div>
</Box>
</Col>
}
{
!isEnabled && isInstalled &&
<Col>
<Button warning={true} onClick={() => uninstallPlugin(pluginId)}>Uninstall</Button>
<Divider direction="ver" style={{ height: '100%' }} />
</Col>
}
</Row>
<Col className={'info-item'}>
<div className={'info-item-title'}>Status</div>
<div>{
meta.enabled ? <Translation className={''}>Enabled</Translation> :
<Translation>Disabled</Translation>
}</div>
</Col>
</Row>
<Box direction={'row'} justify={"flex-end"} spacing={8}>
{isInstalled && !isEnabled &&
<Button type={'primary'} onClick={() => enablePlugin(pluginId)}>Enable</Button>
}
{isEnabled &&
<Button type={'primary'} onClick={saveSetting}>Save</Button>
}
{
isEnabled &&
<Button warning={true} onClick={() => disablePlugin(pluginId)}>Disable</Button>
}
{
!isEnabled && isInstalled &&
<Button warning={true} onClick={() => uninstallPlugin(pluginId)}>Uninstall</Button>
}
</Box>
</Box>
</Box>
</Box>
</Box>
<Tab>
<Tab.Item title={'Config'}>
<AppConfigPage plugin={app} query={{}} onJSONDataChange={handleJSONChange}
onSecureJSONDataChange={handleSecureJSONChange} />
</Tab.Item>
</Tab>
</>
<Box className={'container'}>
<Tab>
<Tab.Item title={'Config'}>
<Box style={{ backgroundColor: '#FFF',padding: '0 10px'}}>
<AppConfigPage plugin={app} query={{}} onJSONDataChange={handleJSONChange}
onSecureJSONDataChange={handleSecureJSONChange} />
</Box>
</Tab.Item>
</Tab>
</Box>

</Box>
)
}

Expand All @@ -252,7 +246,6 @@ async function loadAppPlugin(
if (app && 'type' in app) {
return importAppPagePlugin(app)
.then((pageApp) => {
console.log('pageApp', pageApp)
setApp(pageApp);
})
.catch((err) => {
Expand Down
4 changes: 0 additions & 4 deletions packages/velaux-ui/src/model/addons.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,6 @@ export default {
yield put({type: 'updateAddonsList', payload: result});
let uxPlugins = []
for (const addon of result.addons) {
// TODO: remove this hack
if (addon.name === 'example' && addon.uxPlugins) {
addon.uxPlugins['node-dashboard'] = "https://kubevela-docs.oss-accelerate.aliyuncs.com/binary/example/node-dashboad.tar.gz"
}
if (addon.uxPlugins && Object.keys(addon.uxPlugins).length > 0) {
for (const [key, value] of Object.entries(addon.uxPlugins)) {
uxPlugins.push({id: key, url: value, addon: addon})
Expand Down
1 change: 0 additions & 1 deletion packages/velaux-ui/src/model/plugins.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,6 @@ export default {
},
* getPluginList(action, {call, put}) {
const res = yield call(getPluginList, action.payload);
console.log(res)
if (res) {
yield put({type: 'addOrUpdateBatchPlugins', payload: res.plugins});
}
Expand Down
65 changes: 21 additions & 44 deletions packages/velaux-ui/src/pages/Addons/components/plugin-card/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import './index.less';

import { Box, Button, Card, Grid, Tag } from '@alifd/next';
import i18n from "i18next";
import { checkImage } from "../../../../utils/icon";
import { If } from '../../../../components/If';
import { Addon } from "@velaux/ui";
import { renderIcon } from "@velaux/ui/src/utils/icon";

type State = {
iconValid: boolean
Expand Down Expand Up @@ -54,13 +54,11 @@ class PluginCard extends React.Component<Props, State> {

componentDidMount() {
if (this.props.icon) {
checkImage(this.props.icon, this.setValid)
}
}

componentDidUpdate(prevProps: Readonly<Props>) {
if (prevProps.icon !== this.props.icon && this.props.icon) {
checkImage(this.props.icon, this.setValid)
}
}

Expand Down Expand Up @@ -91,42 +89,6 @@ class PluginCard extends React.Component<Props, State> {
installed,
url,
} = this.props;
const nameUpper = (name: string) => {
return name
.split('-')
.map((sep) => {
if (sep.length > 0) {
return sep.toUpperCase()[0];
}
return sep;
})
.toString()
.replace(',', '');
};

const renderIcon = (name: string, icon?: string) => {
if (this.state.iconValid) {
return <img src={icon} />;
} else {
return (
<div
style={{
display: 'inline-block',
verticalAlign: 'middle',
padding: `2px 4px`,
width: '60px',
height: '60px',
borderRadius: '50%',
backgroundColor: '#ebf0ff',
textAlign: 'center',
lineHeight: '60px',
}}
>
<span style={{ color: '#1b58f4', fontSize: `2em` }}>{nameUpper(name)}</span>
</div>
);
}
}

function getTags() {
let ts = [...tags, ...(sourceAddon?.tags ?? [])]
Expand All @@ -137,9 +99,21 @@ class PluginCard extends React.Component<Props, State> {
}

return (
<div className={'plugin-card'}>
<a onClick={() => this.handleGoToPluginConfig(id)}>
<Card style={{ border: 'none' }} contentHeight={180}>

<div className={
'plugin-card'
}>
<a onClick={() =>
this
.handleGoToPluginConfig(id)
}>
<Card style={{
border: 'none'
}

} contentHeight={
180
}>
<Box direction={'column'}>
<Box align={"center"} spacing={8} direction={'row'}>
<Box>
Expand All @@ -161,12 +135,14 @@ class PluginCard extends React.Component<Props, State> {
}
</Box>
</Box>
<Box flex={['auto']} className={'plugin-card-content'} direction={'column'} justify={'space-between'}>
<Box className={'plugin-card-content'} direction={'column'} justify={'space-between'} style={{height: '100%'}}>
<Box id={'desc'} className={'plugin-desc'}>
<h4 className={'font-size-14 font-color-keep'}>
{description ?? (sourceAddon?.description ?? "No descriptions")}
</h4>
</Box>
</Box>
<Box className={'plugin-card-footer'}>
<Row id={'tags'} gutter={1}>
<Col span={18}>
<Box direction={'row'} wrap={true} spacing={[4, 4]}>
Expand Down Expand Up @@ -209,7 +185,8 @@ class PluginCard extends React.Component<Props, State> {
</a>
</div>

);
)
;
}
}

Expand Down
44 changes: 0 additions & 44 deletions packages/velaux-ui/src/pages/Addons/components/plugin/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,54 +107,10 @@ class Plugin extends React.Component<Props, State> {

componentDidMount() {
this.getPluginList().then(() => {
const { pluginList } = this.props;
if (pluginList) {
pluginList.forEach((plugin) => {
if (plugin.name && plugin.info?.logos?.small) {
this.checkImage(plugin.name, plugin.info.logos.small);
}
});
}
this.sortedPlugins()
})
}

componentDidUpdate(prevProps: Readonly<Props>) {
const { pluginList } = this.props;
if (pluginList && pluginList !== prevProps.pluginList) {
pluginList.forEach((plugin) => {
if (plugin.name && plugin.info?.logos?.small) {
this.checkImage(plugin.name, plugin.info.logos.small);
}
});
}
}

checkImage = (name: string, icon?: string) => {
if (icon && icon !== 'none' && icon !== '') {
const img = new Image();
img.src = icon;
img.onload = () => {
this.setState((preState) => {
preState.iconValid[name] = true;
return preState;
});
}
img.onerror = () => {
this.setState((preState) => {
preState.iconValid[name] = false;
return preState;
});
}
} else {
this.setState((preState) => {
preState.iconValid[name] = false;
return preState;
});
}
};


sortedPlugins = () => {
// put enabled plugin first, then installed plugin, then others
const { pluginList } = this.props
Expand Down
Loading

0 comments on commit 81264bf

Please sign in to comment.