From 81264bfbe7a2a88000d367baf53645ceb3a713f6 Mon Sep 17 00:00:00 2001 From: Qiaozp Date: Thu, 4 May 2023 17:08:03 +0800 Subject: [PATCH] Remove hack Remove icon test remove checkimage Signed-off-by: Qiaozp --- packages/velaux-data/src/api/addon.ts | 2 +- .../src/layout/AppRootPage/index.tsx | 133 +++++++++--------- packages/velaux-ui/src/model/addons.js | 4 - packages/velaux-ui/src/model/plugins.js | 1 - .../Addons/components/plugin-card/index.tsx | 65 +++------ .../pages/Addons/components/plugin/index.tsx | 44 ------ .../velaux-ui/src/services/MenuService.tsx | 2 +- packages/velaux-ui/src/utils/icon.tsx | 54 +++---- packages/velaux-ui/src/utils/utils.ts | 4 +- pkg/server/server.go | 9 ++ .../src/components/AppConfig/index.tsx | 14 +- 11 files changed, 123 insertions(+), 209 deletions(-) diff --git a/packages/velaux-data/src/api/addon.ts b/packages/velaux-data/src/api/addon.ts index ee4d73916..0318498ac 100644 --- a/packages/velaux-data/src/api/addon.ts +++ b/packages/velaux-data/src/api/addon.ts @@ -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; diff --git a/packages/velaux-ui/src/layout/AppRootPage/index.tsx b/packages/velaux-ui/src/layout/AppRootPage/index.tsx index 4d9ac34ce..324f85890 100644 --- a/packages/velaux-ui/src/layout/AppRootPage/index.tsx +++ b/packages/velaux-ui/src/layout/AppRootPage/index.tsx @@ -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; @@ -41,8 +41,6 @@ enum types { } function ConfigPage({ pluginId, dispatch, pluginList, loading }: Props) { - - const [valid, setValid] = React.useState(false) const [app, setApp] = React.useState(); const _meta = pluginList.filter(item => item.id === pluginId)[0] const updateMeta = (previousState: any, action: any) => { @@ -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: { @@ -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 ( - <> + - + + - {renderIcon(meta.id, valid, meta.info?.logos.large)} + {renderIcon(meta.id, meta.info?.logos.large, "80px")} - -

{ - <> - Plugins / {meta.name} - - }

- - -
Version
-
{meta.info.version}
- - - - - - -
Author
-
{meta.info.author?.name ?? "Unknown"}
- - - - - - -
Status
-
{ - meta.enabled ? Enabled : Disabled - }
- - -

{meta.info.description ?? "No descriptions"}

- - - - {isInstalled && !isEnabled && + +

{ + <> + Plugins / {meta.name} + + }

+ +

{meta.info.description ?? "No descriptions"}

+ + + + - +
Version
+
{meta.info.version}
- } - {isEnabled && - + - } - { - isEnabled && - + +
Author
+
{meta.info.author?.name ?? "Unknown"}
+ - } - { - !isEnabled && isInstalled && - + - } - + +
Status
+
{ + meta.enabled ? Enabled : + Disabled + }
+ + + + {isInstalled && !isEnabled && + + } + {isEnabled && + + } + { + isEnabled && + + } + { + !isEnabled && isInstalled && + + } + + + - - - - - - + + + + + + + + + + + ) } @@ -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) => { diff --git a/packages/velaux-ui/src/model/addons.js b/packages/velaux-ui/src/model/addons.js index c93474e0f..136c2166b 100644 --- a/packages/velaux-ui/src/model/addons.js +++ b/packages/velaux-ui/src/model/addons.js @@ -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}) diff --git a/packages/velaux-ui/src/model/plugins.js b/packages/velaux-ui/src/model/plugins.js index b07f5cd17..062c95eef 100644 --- a/packages/velaux-ui/src/model/plugins.js +++ b/packages/velaux-ui/src/model/plugins.js @@ -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}); } diff --git a/packages/velaux-ui/src/pages/Addons/components/plugin-card/index.tsx b/packages/velaux-ui/src/pages/Addons/components/plugin-card/index.tsx index 544a61bb6..f4d4d5a1b 100644 --- a/packages/velaux-ui/src/pages/Addons/components/plugin-card/index.tsx +++ b/packages/velaux-ui/src/pages/Addons/components/plugin-card/index.tsx @@ -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 @@ -54,13 +54,11 @@ class PluginCard extends React.Component { componentDidMount() { if (this.props.icon) { - checkImage(this.props.icon, this.setValid) } } componentDidUpdate(prevProps: Readonly) { if (prevProps.icon !== this.props.icon && this.props.icon) { - checkImage(this.props.icon, this.setValid) } } @@ -91,42 +89,6 @@ class PluginCard extends React.Component { 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 ; - } else { - return ( -
- {nameUpper(name)} -
- ); - } - } function getTags() { let ts = [...tags, ...(sourceAddon?.tags ?? [])] @@ -137,9 +99,21 @@ class PluginCard extends React.Component { } return ( -
- this.handleGoToPluginConfig(id)}> - + + - ); + ) + ; } } diff --git a/packages/velaux-ui/src/pages/Addons/components/plugin/index.tsx b/packages/velaux-ui/src/pages/Addons/components/plugin/index.tsx index f1ad3d5b9..7c25949c3 100644 --- a/packages/velaux-ui/src/pages/Addons/components/plugin/index.tsx +++ b/packages/velaux-ui/src/pages/Addons/components/plugin/index.tsx @@ -107,54 +107,10 @@ class Plugin extends React.Component { 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) { - 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 diff --git a/packages/velaux-ui/src/services/MenuService.tsx b/packages/velaux-ui/src/services/MenuService.tsx index 365aebc29..4e5e4827e 100644 --- a/packages/velaux-ui/src/services/MenuService.tsx +++ b/packages/velaux-ui/src/services/MenuService.tsx @@ -96,7 +96,7 @@ const defaultWorkspaceMenus: Menu[] = [ type: MenuTypes.Workspace, to: '/addons', icon: , - label: 'Addons & Plugins', + label: 'Addons', name: 'addon-list', permission: { resource: 'addon:*', action: 'list' }, relatedRoute: ['/addons', '/plugins'], diff --git a/packages/velaux-ui/src/utils/icon.tsx b/packages/velaux-ui/src/utils/icon.tsx index 98327ce8f..64160336e 100644 --- a/packages/velaux-ui/src/utils/icon.tsx +++ b/packages/velaux-ui/src/utils/icon.tsx @@ -1,20 +1,4 @@ import React from 'react'; -type validSetter = (valid: boolean) => void - -export const checkImage = (icon: string, setValid: validSetter) => { - if (icon !== 'none' && icon !== '') { - const img = new Image(); - img.src = icon; - img.onload = () => { - setValid(true) - } - img.onerror = () => { - setValid(false) - } - } else { - setValid(false) - } -}; const nameUpper = (name: string) => { return name @@ -29,26 +13,30 @@ const nameUpper = (name: string) => { .replace(',', ''); }; -export const renderIcon = (name: string, valid: boolean,icon?: string,) => { - if (valid) { - return ; +export const renderIcon = (name: string, icon?: string, size?: string) => { + console.log(icon) + if (icon!=="" && icon!=="null" && icon!==undefined) { + if (!icon.startsWith("/")){ + icon = "/"+icon + } + return ; } else { return (
- {nameUpper(name)} -
- ); + display: 'inline-block', + verticalAlign: 'middle', + padding: `2px 4px`, + width: '60px', + height: '60px', + borderRadius: '50%', + backgroundColor: '#fff', + textAlign: 'center', + lineHeight: '60px', + }} + > + {nameUpper(name)} +
+ ); } } diff --git a/packages/velaux-ui/src/utils/utils.ts b/packages/velaux-ui/src/utils/utils.ts index a7f3c8c22..ed038e793 100644 --- a/packages/velaux-ui/src/utils/utils.ts +++ b/packages/velaux-ui/src/utils/utils.ts @@ -1,8 +1,6 @@ import _ from 'lodash'; -import type { ComponentDefinitionsBase } from '../../../velaux-data/src/api/application'; -import type { Endpoint } from '../../../velaux-data/src/api/observation'; - +import type { ComponentDefinitionsBase,Endpoint } from '@velaux/data/src'; type SelectGroupType = Array<{ label: string; diff --git a/pkg/server/server.go b/pkg/server/server.go index 6badd913c..55f91316e 100644 --- a/pkg/server/server.go +++ b/pkg/server/server.go @@ -406,6 +406,15 @@ func (s *restServer) getPluginAssets(req *http.Request, res http.ResponseWriter) bcode.ReturnHTTPError(req, res, err) return } + setting, err := s.PluginService.GetPluginSetting(req.Context(), pluginID) + if err != nil { + bcode.ReturnHTTPError(req, res, err) + return + } + if !setting.Enabled { + bcode.ReturnHTTPError(req, res, bcode.ErrPluginNotEnabled) + return + } // Generate the static file path path, err := utils.CleanRelativePath(pathInfo[1]) if err != nil { diff --git a/plugins/node-dashboard/src/components/AppConfig/index.tsx b/plugins/node-dashboard/src/components/AppConfig/index.tsx index 63eaadf9f..5ac4582a6 100644 --- a/plugins/node-dashboard/src/components/AppConfig/index.tsx +++ b/plugins/node-dashboard/src/components/AppConfig/index.tsx @@ -1,15 +1,13 @@ import * as React from 'react'; -import { Button } from '@velaux/ui'; -import { PluginConfigPageProps, AppPluginMeta, PluginMeta } from '@velaux/data'; -import { enablePlugin } from "@velaux/ui"; -import { PluginEnableRequest } from "@velaux/data"; +import { Button ,enablePlugin } from '@velaux/ui'; +import { PluginConfigPageProps, AppPluginMeta, PluginMeta ,PluginEnableRequest } from '@velaux/data'; export type AppPluginSettings = {}; export interface AppConfigProps extends PluginConfigPageProps> {} export const AppConfig = ({ plugin }: AppConfigProps) => { - const { enabled, jsonData } = plugin.meta; + const { enabled, jsonSetting } = plugin.meta; return (
@@ -24,7 +22,7 @@ export const AppConfig = ({ plugin }: AppConfigProps) => { onClick={() => updatePluginAndReload(plugin.meta.id, { enabled: true, - jsonData, + jsonSetting }) } > @@ -42,7 +40,7 @@ export const AppConfig = ({ plugin }: AppConfigProps) => { onClick={() => updatePluginAndReload(plugin.meta.id, { enabled: false, - jsonData, + jsonSetting }) } > @@ -59,7 +57,7 @@ const updatePluginAndReload = async (pluginId: string, data: Partial try { const params: PluginEnableRequest = { id: pluginId, - jsonData: data.jsonData? data.jsonData : {}, + jsonData: data.jsonSetting? data.jsonSetting : {}, secureJsonData: data.secureJsonData? data.secureJsonData : {}, } await enablePlugin(params).then((res) => {