* refactor: plugin manager page * fix: bug * feat: addByNpm api * fix: improve the addByNpm * feat: improve applicationPlugins:list api * fix: re-download npm package when restart app * fix: plugin delete api * feat: plugin detail api * feat: zipUrl add api * fix: upload api bug * fix: plugin detail info * feat: upgrade api * fix: upload api * feat: handle plugin load error * feat: support authToken * feat: muti lang * fix: build error * fix: self review * Update plugin-manager.ts * fix: bug * fix: bug * fix: bug * fix: bug * fix: bug * fix: bugs * fix: detail click and remove isOfficial * fix: upgrade no refresh * fix: file size and type check * fix: bug * fix: upgrade error * fix: bug * fix: bug * fix: plugin card layout * fix: handling exceptional cases * fix: tgz file support * fix: macos compress file * fix: bug * fix: bug * fix: bug * fix: bug * fix: add upgrade npm type * fix: bugs * fix: bug * fix: change plugins static expose url * fix: api prefix * fix: bug * fix: add nginx `/static/plugin/` path * fix: bugs and pr docker build no dts * fix: bug * fix: build tools bug * fix: improve code * fix: build bug * feat: improve plugin info * fix: ui bug * fix: plugin document bug * feat: improve code * feat: improve code * feat: process dev deps check * feat: improve code * feat: process.env.IS_DEV_CMD * fix: do not delete the plugin package * feat: plugin symlink * fix: tsx watch --ignore=./storage/plugins/** * fix: test error * fix: improve code * fix: improve code * fix: emitStartedEvent * fix: improve code * fix: type error * fix: test error * test: console.log * fix: createStoragePluginSymLink * fix: clientStaticMiddleware rename to clientStaticUtils * feat: build tools support plugins folder * fix: 350px * fix: error * feat: client dev support plugin folder * fix: clear cli options * fix: typeError: Converting circular structure to JSON * fix: plugin name * chore: restart application after command * feat: upgrade error & docs * Update v14-changelog.md * Update v14-changelog.md * Update v14-changelog.md * fix: gateway test * refactor(plugin-workflow): add ready state for gracefully tearing down * Revert "chore: restart application after command" This reverts commit 5015274f8e4e06e506e15754b672330330e8c7f8. * chore: stop application whe restart * T 1218 change plugin folder (#2629) * feat: change folder name * feat: change `pm create` command * feat: revert plugin name change * fix: delete samples * feat: change plugins folder * fix: pm create * feat: update docs * fix: link package error * fix: docs * fix: create command * fix: pm add error * fix: create add build * fix: pm creatre + add * feat: add tar command * fix: docs * fix: bug * fix: docs --------- Co-authored-by: chenos <chenlinxh@gmail.com> * feat: docs * Update your-fisrt-plugin.md * Update your-fisrt-plugin.md * chore: application reload * chore: test * fix: pm add error * chore: preset install skip exists plugin * fix: createIfNotExists --------- Co-authored-by: chenos <chenlinxh@gmail.com> Co-authored-by: chareice <chareice@live.com> Co-authored-by: Zhou <zhou.working@gmail.com> Co-authored-by: mytharcher <mytharcher@gmail.com>
224 lines
8.1 KiB
TypeScript
224 lines
8.1 KiB
TypeScript
import { FormLayout } from '@formily/antd-v5';
|
|
import { Field } from '@formily/core';
|
|
import { RecursionField, Schema, SchemaOptionsContext, observer, useField, useForm } from '@formily/react';
|
|
import {
|
|
APIClientProvider,
|
|
FormDialog,
|
|
FormProvider,
|
|
SchemaComponent,
|
|
SchemaComponentOptions,
|
|
css,
|
|
useAPIClient,
|
|
useCompile,
|
|
useGlobalTheme,
|
|
} from '@nocobase/client';
|
|
import { Card } from 'antd';
|
|
import JSON5 from 'json5';
|
|
import React, { useContext, useEffect, useState } from 'react';
|
|
import { ChartBlockEngineMetaData } from './ChartBlockEngine';
|
|
import { jsonConfigDesc } from './ChartBlockEngineDesigner';
|
|
import { ChartQueryBlockInitializer, ChartQueryMetadata } from './ChartQueryBlockInitializer';
|
|
import DataSetPreviewTable from './DataSetPreviewTable';
|
|
import { lang } from './locale';
|
|
import { templates } from './templates';
|
|
|
|
export const Options = observer(
|
|
(props) => {
|
|
const form = useForm<ChartFormInterface>();
|
|
const field = useField<Field>();
|
|
const [s, setSchema] = useState(new Schema({}));
|
|
const [chartType, setChartType] = useState(form.values.type);
|
|
useEffect(() => {
|
|
// form.clearFormGraph('options.*');
|
|
setChartType(form?.values?.type);
|
|
if (chartType !== form?.values?.type) {
|
|
form.clearFormGraph('options.*');
|
|
}
|
|
if (form.values.type) {
|
|
const template = templates.get(form.values.type);
|
|
setSchema(new Schema(template.configurableProperties || {}));
|
|
}
|
|
}, [form.values.type]);
|
|
return <RecursionField schema={s} />;
|
|
},
|
|
{ displayName: 'Options' },
|
|
);
|
|
|
|
interface ChartFormInterface {
|
|
type: string;
|
|
template: string;
|
|
metric: string;
|
|
dimension: string;
|
|
category?: string;
|
|
|
|
[key: string]: string;
|
|
}
|
|
|
|
export const ChartBlockInitializer = (props) => {
|
|
const { insert } = props;
|
|
const options = useContext(SchemaOptionsContext);
|
|
const api = useAPIClient();
|
|
const compile = useCompile();
|
|
const { theme } = useGlobalTheme();
|
|
|
|
return (
|
|
<ChartQueryBlockInitializer
|
|
{...props}
|
|
componentType={'Charts'}
|
|
onCreateBlockSchema={async ({ item: chartQueryMetadata }: { item: ChartQueryMetadata }) => {
|
|
const dataSource = chartQueryMetadata?.fields.map((field) => {
|
|
return {
|
|
label: field.name,
|
|
value: field.name,
|
|
};
|
|
});
|
|
const values = await FormDialog(
|
|
{
|
|
okText: compile('{{t("Submit")}}'),
|
|
title: lang('Create chart block'),
|
|
width: 1200,
|
|
bodyStyle: { background: 'var(--nb-box-bg)', maxHeight: '65vh', overflow: 'auto' },
|
|
},
|
|
function Com() {
|
|
const form = useForm<ChartFormInterface>();
|
|
const [chartBlockEngineMetaData, setChartBlockEngineMetaData] = useState<ChartBlockEngineMetaData>(null);
|
|
useEffect(() => {
|
|
const chartBlockEngineMetaData = {
|
|
query: {
|
|
id: chartQueryMetadata?.id,
|
|
},
|
|
chart: form.values, //TODO
|
|
};
|
|
setChartBlockEngineMetaData(chartBlockEngineMetaData);
|
|
}, [form.values.type]);
|
|
return (
|
|
<APIClientProvider apiClient={api}>
|
|
<SchemaComponentOptions scope={options.scope} components={{ ...options.components }}>
|
|
<section
|
|
className={css`
|
|
display: flex;
|
|
gap: 24px;
|
|
`}
|
|
>
|
|
{/* left*/}
|
|
<Card
|
|
title={lang('Chart config')}
|
|
size={'default'}
|
|
className={css`
|
|
flex: 1;
|
|
`}
|
|
>
|
|
<FormProvider form={form}>
|
|
<FormLayout layout={'vertical'}>
|
|
<SchemaComponent
|
|
scope={{ dataSource, JSON5, jsonConfigDesc }}
|
|
components={{ Options }}
|
|
schema={{
|
|
properties: {
|
|
// title: {
|
|
// title: lang('Chart title'),
|
|
// 'x-component': 'Input',
|
|
// 'x-decorator': 'FormItem',
|
|
// },
|
|
type: {
|
|
title: lang('Chart type'),
|
|
required: true,
|
|
'x-component': 'CustomSelect',
|
|
'x-decorator': 'FormItem',
|
|
enum: [...templates.values()].map((template) => {
|
|
return {
|
|
title: template.title,
|
|
key: template.type,
|
|
description: template.description,
|
|
group: template.group,
|
|
iconId: template.iconId,
|
|
};
|
|
}),
|
|
},
|
|
options: {
|
|
type: 'void',
|
|
'x-component': 'Options',
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
</FormLayout>
|
|
</FormProvider>
|
|
</Card>
|
|
{/* right*/}
|
|
<div
|
|
className={css`
|
|
flex: 1;
|
|
min-width: 600px;
|
|
`}
|
|
>
|
|
<Card size={'default'} title={lang('Chart preview')}>
|
|
{/* Chart Preview*/}
|
|
{chartBlockEngineMetaData && (
|
|
<>
|
|
<SchemaComponent
|
|
schema={{
|
|
properties: {
|
|
chartPreview: {
|
|
type: 'void',
|
|
'x-decorator': 'CardItem',
|
|
'x-component': 'ChartBlockEngine',
|
|
'x-component-props': {
|
|
chartBlockEngineMetaData,
|
|
},
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
</>
|
|
)}
|
|
</Card>
|
|
<Card
|
|
size={'default'}
|
|
title={lang('Data preview')}
|
|
className={css`
|
|
margin-top: 24px;
|
|
overflow: scroll;
|
|
`}
|
|
>
|
|
{/*Data preview*/}
|
|
{chartBlockEngineMetaData?.query?.id && (
|
|
<DataSetPreviewTable
|
|
queryId={chartBlockEngineMetaData?.query?.id}
|
|
fields={chartQueryMetadata?.fields}
|
|
/>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
</SchemaComponentOptions>
|
|
</APIClientProvider>
|
|
);
|
|
},
|
|
theme,
|
|
).open({
|
|
initialValues: {},
|
|
});
|
|
if (values) {
|
|
const chartBlockEngineMetaData: ChartBlockEngineMetaData = {
|
|
query: {
|
|
id: chartQueryMetadata.id,
|
|
},
|
|
chart: values,
|
|
};
|
|
insert({
|
|
type: 'void',
|
|
title: values?.title,
|
|
'x-designer': 'ChartBlockEngine.Designer',
|
|
'x-decorator': 'CardItem',
|
|
'x-component': 'ChartBlockEngine',
|
|
'x-component-props': {
|
|
chartBlockEngineMetaData,
|
|
},
|
|
});
|
|
}
|
|
}}
|
|
/>
|
|
);
|
|
};
|