Feat: add plugin enable/disable sub-page

.eslintrc.js

@@ -39,7 +39,7 @@ module.exports = {
       },
     ],
     'no-duplicate-imports': 'off',
-    '@typescript-eslint/no-duplicate-imports': 'warn',
+    "import/no-duplicates": "warn",
     'react/no-deprecated': 'off',
     'react/no-unknown-property': 'off',
     '@typescript-eslint/explicit-member-accessibility': 'off',

.github/dependabot.yml

@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"

.gitignore

@@ -42,4 +42,5 @@ tsconfig.tsbuildinfo
 
 e2e-plugins
 
-npm-artifacts
+npm-artifacts
+bin

e2e-test/plugin_test.go

@@ -17,6 +17,8 @@ limitations under the License.
 package e2e_test
 
 import (
+	"fmt"
+
 	"cuelang.org/go/pkg/strings"
 	. "github.com/onsi/ginkgo"
 	. "github.com/onsi/gomega"
@@ -26,6 +28,13 @@ import (
 	"github.com/kubevela/velaux/pkg/server/utils/bcode"
 )
 
+func enablePlugin(id string) {
+	res := post(fmt.Sprintf("/manage/plugins/%s/enable", id), nil)
+	var dto apisv1.PluginDTO
+	Expect(decodeResponseBody(res, &dto)).Should(Succeed())
+	Expect(dto.ID).Should(Equal(id))
+}
+
 var _ = Describe("Test the plugin rest api", func() {
 	Context("Test manage plugin API", func() {
 		By("Request to /manage/plugins")
@@ -114,11 +123,7 @@ var _ = Describe("Test the plugin rest api", func() {
 			Expect(strings.Contains(err.Error(), "the plugin is not enabled")).Should(BeTrue())
 
 			By("After enable the plugin, request the plugin API should return 200")
-
-			res = post("/manage/plugins/node-dashboard/enable", nil)
-			var dto apisv1.PluginDTO
-			Expect(decodeResponseBody(res, &dto)).Should(Succeed())
-			Expect(dto.ID).Should(Equal("node-dashboard"))
+			enablePlugin("node-dashboard")
 
 			res = get(baseDomain + "/proxy/plugins/node-dashboard/api/v1/nodes")
 			Expect(decodeResponseBody(res, &nodeList)).Should(Succeed())

package.json

@@ -28,6 +28,7 @@
         ]
     },
     "dependencies": {
+        "@alifd/next": "^1.26.15",
         "history": "4.10.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.0",

packages/velaux-ui/src/interface/addon.ts → packages/velaux-data/src/api/addon.ts

@@ -1,5 +1,6 @@
 import type { ApplicationStatus, UIParam } from './application';
 import type { NameAlias } from './env';
+import { KeyValue } from "../types";
 
 export interface Addon {
   name: string;
@@ -20,6 +21,7 @@ export interface Addon {
     vela?: string;
     kubernetes?: string;
   };
+  uxPlugins?: KeyValue<string>
 }
 
 export interface AddonStatus {

packages/velaux-data/src/api/index.ts

@@ -1 +1,16 @@
+export * from './addon';
+export * from './application';
 export * from './cluster';
+export * from './component';
+export * from './configs';
+export * from './definitions';
+export * from './env';
+export * from './kubernetes';
+export * from './observation';
+export * from './project';
+export * from './pipeline';
+export * from './repository';
+export * from './roles';
+export * from './system';
+export * from './target';
+export * from './user';

packages/velaux-ui/src/interface/pipeline.ts → packages/velaux-data/src/api/pipeline.ts

@@ -1,5 +1,6 @@
 import type { Condition, InputItem, OutputItem, WorkflowMode, WorkflowStepStatus } from './application';
 import type { NameAlias } from './env';
+import { KeyValue } from "../types";
 
 export interface CreatePipelineRequest {
   name: string;
@@ -75,11 +76,6 @@ export interface PipelineRunBase extends PipelineRunMeta {
   spec: PipelineRunSpec;
 }
 
-export interface KeyValue {
-  key: string;
-  value: string;
-}
-
 export interface PipelineRunBriefing {
   pipelineRunName: string;
   finished: boolean;

packages/velaux-data/src/plugins/app.ts

@@ -1,6 +1,6 @@
 import { ComponentType } from 'react';
-import { PluginMeta, VelaUXPlugin } from '.';
-import { KeyValue } from '../types/data';
+import { PluginMeta, VelaUXPlugin } from './types';
+import { KeyValue } from '../types';
 
 export interface AppPluginMeta<T extends KeyValue = KeyValue> extends PluginMeta<T> {
   // TODO anything specific to apps?

packages/velaux-data/src/plugins/types.ts

@@ -1,10 +1,12 @@
 import { ComponentType } from 'react';
 import { KeyValue, MenuType, ResourceAction, Workspace } from '..';
+import { Addon } from '../api'
 
 export enum PluginType {
   PageApp = 'page-app',
   Definition = 'definition',
 }
+
 interface PluginMetaInfoLink {
   name: string;
   url: string;
@@ -50,7 +52,7 @@ export interface PluginInclude {
   catalog?: string;
 }
 
-export interface PluginMeta<T extends KeyValue = {}> {
+export interface PluginMeta<T extends KeyValue = {}> extends PluginLink, SourceAddon {
   id: string;
   name: string;
   type: PluginType;
@@ -67,7 +69,7 @@ export interface PluginMeta<T extends KeyValue = {}> {
   includes?: PluginInclude[];
 
   // Filled in by the backend
-  jsonData?: T;
+  jsonSetting?: T;
   secureJsonData?: KeyValue;
   secureJsonFields?: KeyValue<boolean>;
   enabled?: boolean;
@@ -78,9 +80,27 @@ export interface PluginMeta<T extends KeyValue = {}> {
   live?: boolean;
 }
 
+/**
+ * Represents a plugin and link to get plugin tarball
+ */
+export interface PluginLink {
+  name: string
+  url: string
+}
+
+/**
+ * Represents a plugin linked to
+ */
+export interface SourceAddon {
+  addon: Addon
+}
+
+
 export interface PluginConfigPageProps<T extends PluginMeta> {
   plugin: VelaUXPlugin<T>;
   query: KeyValue; // The URL query parameters
+  onJSONDataChange: (key: string, value: any) => void;
+  onSecureJSONDataChange: (key: string, value: any) => void;
 }
 
 export interface PluginConfigPage<T extends PluginMeta> {
@@ -100,18 +120,31 @@ export class VelaUXPlugin<T extends PluginMeta = PluginMeta> {
   loadError?: boolean;
 
   // Show configuration tabs on the plugin page
-  configPages?: Array<PluginConfigPage<T>>;
+  configPages?: PluginConfigPage<T>;
 
   // Tabs on the plugin page
   addConfigPage(tab: PluginConfigPage<T>) {
-    if (!this.configPages) {
-      this.configPages = [];
-    }
-    this.configPages.push(tab);
+    this.configPages = tab;
     return this;
   }
 
   constructor() {
     this.meta = {} as T;
   }
 }
+
+export type PluginEnableRequest = {
+  id: string
+  jsonData: KeyValue
+  secureJsonData: KeyValue
+}
+
+export type PluginInstallRequest = {
+  id: string
+  url: string
+}
+
+export type UXPlugin = {
+  id: string
+  url: string
+}

packages/velaux-data/src/types/data.ts

@@ -1 +1,9 @@
 export type KeyValue<T = any> = Record<string, T>;
+
+export function unmarshal<T>(kv: KeyValue): T {
+  return kv as T;
+}
+
+export function marshal<T>(obj: T): KeyValue {
+  return obj as KeyValue;
+}

packages/velaux-data/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "baseUrl": "./src",
     "declarationDir": "./compiled",
     "emitDeclarationOnly": true,
     "isolatedModules": true,
@@ -14,4 +15,4 @@
   "include": [
     "src/**/*.ts*",
   ]
-}
+}

packages/velaux-ui/src/api/addons.ts

@@ -1,4 +1,4 @@
-import type { EnableAddonRequest } from '../interface/addon';
+import type { EnableAddonRequest } from '@velaux/data';
 import { getDomain } from '../utils/common';
 
 import { addons, addonRegistries, enabledAddon } from './productionLink';

packages/velaux-ui/src/api/application.ts

@@ -9,7 +9,7 @@ import type {
   UpdatePolicyRequest,
   UpdateTriggerRequest,
   CreateTriggerRequest,
-} from '../interface/application';
+} from '@velaux/data';
 import { getDomain } from '../utils/common';
 
 import { application } from './productionLink';

packages/velaux-ui/src/api/cluster.ts

@@ -1,4 +1,4 @@
-import type { CreateCluster } from '../interface/cluster';
+import type { CreateCluster } from '@velaux/data';
 import { getDomain } from '../utils/common';
 
 import {

packages/velaux-ui/src/api/config.ts

@@ -3,8 +3,7 @@ import type {
   CreateConfigRequest,
   NamespacedName,
   UpdateConfigRequest,
-} from '../interface/configs';
-import type { ProjectName } from '../interface/project';
+ ProjectName } from '@velaux/data';
 import { getDomain } from '../utils/common';
 
 import { configs, configTemplates, project } from './productionLink';

packages/velaux-ui/src/api/definitions.ts

@@ -1,4 +1,4 @@
-import type { UIParam } from '../interface/application';
+import type { UIParam } from '@velaux/data';
 import { getDomain } from '../utils/common';
 
 import { definition } from './productionLink';

packages/velaux-ui/src/api/env.ts

@@ -1,4 +1,4 @@
-import type { CreateEnvRequest } from '../interface/env';
+import type { CreateEnvRequest } from '@velaux/data';
 import type { QueryTarget } from '../model/target';
 import { getDomain } from '../utils/common';
 

packages/velaux-ui/src/api/index.ts

@@ -0,0 +1,2 @@
+export * from './plugin';
+export * from './pipeline';

packages/velaux-ui/src/api/pipeline.ts

@@ -1,4 +1,4 @@
-import type { CreatePipelineRequest } from '../interface/pipeline';
+import type { CreatePipelineRequest } from '@velaux/data';
 import { getDomain } from '../utils/common';
 
 import { get, post, put, rdelete } from './request';

packages/velaux-ui/src/api/plugin.ts

@@ -0,0 +1,36 @@
+import { getDomain } from '../utils/common';
+
+import { managePlugin } from './productionLink';
+import { get, post } from './request';
+import { PluginEnableRequest, PluginInstallRequest } from "@velaux/data";
+
+const baseURLOject = getDomain();
+const base = baseURLOject.MOCK || baseURLOject.APIBASE;
+
+export function getPluginList(params: any) {
+  return get(base + managePlugin, { params: params }).then((res) => res);
+}
+
+export function detailPlugin(params: { id: string }) {
+  return get(`${base + managePlugin}/${params.id}`, { params: params }).then((res) => res);
+}
+
+export function enablePlugin(params: PluginEnableRequest) {
+  return post(`${base + managePlugin}/${params.id}/enable`, params);
+}
+
+export function disablePlugin(params: { id: string }) {
+  return post(`${base + managePlugin}/${params.id}/disable`, params);
+}
+
+export function setPlugin(params: PluginEnableRequest) {
+  return post(`${base + managePlugin}/${params.id}/setting`, params);
+}
+
+export function installPlugin(params: PluginInstallRequest) {
+  return post(`${base + managePlugin}/${params.id}/install`, { url: params.url });
+}
+
+export function uninstallPlugin(params: { id: string }) {
+  return post(`${base + managePlugin}/${params.id}/uninstall`, {});
+}

packages/velaux-ui/src/api/productionLink.ts

@@ -23,3 +23,5 @@ export const platformPermissions = `/api/v1/permissions`;
 export const configs = `/api/v1/configs`;
 export const configTemplates = `/api/v1/config_templates`;
 export const cloudShell = `/api/v1/cloudshell`;
+export const plugin = `/api/v1/plugins`;
+export const managePlugin = `/api/v1/manage/plugins`;

packages/velaux-ui/src/api/project.ts

@@ -7,7 +7,7 @@ import type {
   ProjectRole,
   ProjectUserCreate,
   ProjectUserQuery,
-} from '../interface/project';
+} from '@velaux/data';
 import { getDomain } from '../utils/common';
 
 import { project_mock } from './devLink';

packages/velaux-ui/src/api/roles.ts

@@ -1,4 +1,4 @@
-import { RolesCreateBase } from '../interface/roles';
+import { RolesCreateBase } from '@velaux/data';
 import { getDomain } from '../utils/common';
 
 import { project_mock } from './devLink';

packages/velaux-ui/src/api/system_config.ts

@@ -1,4 +1,4 @@
-import type { UpdateSystemInfo } from '../interface/system';
+import type { UpdateSystemInfo } from '@velaux/data';
 import { getDomain } from '../utils/common';
 
 import { get, put } from './request';

packages/velaux-ui/src/api/target.ts

@@ -1,4 +1,4 @@
-import type { Target } from '../interface/target';
+import type { Target } from '@velaux/data';
 import type { QueryTarget } from '../model/target';
 import { getDomain } from '../utils/common';
 

packages/velaux-ui/src/api/users.ts

@@ -1,4 +1,4 @@
-import type { User } from '../interface/user';
+import type { User } from '@velaux/data';
 
 import { users, cloudShell } from './productionLink';
 import { post, get, rdelete, put } from './request';

packages/velaux-ui/src/api/workflows.ts

@@ -1,4 +1,4 @@
-import type { UpdateWorkflowRequest } from '../interface/application';
+import type { UpdateWorkflowRequest } from '@velaux/data';
 import { getDomain } from '../utils/common';
 
 import { application, definition } from './productionLink';

packages/velaux-ui/src/components/ApplicationDiff/index.tsx

@@ -1,7 +1,7 @@
 import { Button, Dialog, Message } from '@alifd/next';
 import * as React from 'react';
 
-import type { ApplicationCompareResponse } from '../../interface/application';
+import type { ApplicationCompareResponse } from '@velaux/data';
 import './index.less';
 import { DiffEditor } from '../DiffEditor';
 import { If } from '../If';