refactor: Remove model in d2

packages/refine/src/Dovetail.tsx

@@ -5,6 +5,7 @@ import {
   liveProvider,
   GlobalStore,
   GlobalStoreInitParams,
+  ProviderPlugins,
 } from 'k8s-api-provider';
 import React, { useMemo } from 'react';
 import { Router } from 'react-router-dom';
@@ -32,14 +33,13 @@ export const Dovetail: React.FC<Props> = props => {
   const {
     resourcesConfig,
     urlPrefix = '',
-    useHashUrl,
     Layout,
     history,
     globalStoreParams,
   } = props;
 
   const globalStore = useMemo(() => {
-    return new GlobalStore(globalStoreParams);
+    return new GlobalStore(globalStoreParams, ProviderPlugins);
   }, [globalStoreParams]);
 
   const notCustomResources = useMemo(() => {

packages/refine/src/components/ConditionsTable/ConditionsTable.tsx

@@ -3,8 +3,8 @@ import { Condition } from 'kubernetes-types/meta/v1';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { addId } from '../../utils/addId';
-import Time from '../Time';
 import ErrorContent from '../Table/ErrorContent';
+import Time from '../Time';
 
 type Props = {
   conditions: Condition[];

packages/refine/src/components/CronJobDropdown/index.tsx

@@ -4,9 +4,10 @@ import {
   VmResume16Icon,
 } from '@cloudtower/icons-react';
 import { useResource, useUpdate } from '@refinedev/core';
+import { CronJobModel } from 'k8s-api-provider';
+import { CronJob } from 'kubernetes-types/batch/v1';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { CronJobModel } from '../../model';
 import { pruneBeforeEdit } from '../../utils/k8s';
 import K8sDropdown from '../K8sDropdown';
 
@@ -16,19 +17,20 @@ type Props<Model extends CronJobModel> = {
 
 export function CronJobDropdown<Model extends CronJobModel>(props: Props<Model>) {
   const { data } = props;
+  const { spec } = data as CronJob;
   const kit = useUIKit();
   const { resource } = useResource();
   const { mutate } = useUpdate();
   const { t } = useTranslation();
 
-  const suspended = Boolean(data.spec?.suspend);
+  const suspended = Boolean(spec?.suspend);
 
   return (
     <K8sDropdown data={data}>
       <kit.menu.Item
         onClick={() => {
           const v = suspended ? data.resume() : data.suspend();
-          const id = v.id;
+          const id = data.id;
           pruneBeforeEdit(v);
           mutate({
             id,

packages/refine/src/components/CronjobJobsTable/index.tsx

@@ -1,10 +1,9 @@
 import { useUIKit } from '@cloudtower/eagle';
 import { css } from '@linaria/core';
 import { useList } from '@refinedev/core';
-import { Job } from 'kubernetes-types/batch/v1';
+import { JobModel, ResourceModel } from 'k8s-api-provider';
 import { OwnerReference } from 'kubernetes-types/meta/v1';
 import React, { useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import {
   AgeColumnRenderer,
   CompletionsCountColumnRenderer,
@@ -14,8 +13,6 @@ import {
   PhaseColumnRenderer,
   WorkloadImageColumnRenderer,
 } from '../../hooks/useEagleTable/columns';
-import { JobModel } from '../../model';
-import { WithId } from '../../types';
 import Table, { Column } from '../Table';
 import { TableToolBar } from '../Table/TableToolBar';
 
@@ -42,32 +39,29 @@ export const CronjobJobsTable: React.FC<{
   owner?: OwnerReference & { namespace: string };
 }> = ({ owner }) => {
   const kit = useUIKit();
-  const { i18n } = useTranslation();
   const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
   const [currentPage, setCurrentPage] = useState<number>(1);
 
-  const { data } = useList({
+  const { data } = useList<JobModel>({
     resource: 'jobs',
     meta: { resourceBasePath: '/apis/batch/v1', kind: 'Job' },
   });
 
   const dataSource = useMemo(() => {
-    return data?.data
-      .map(p => new JobModel(p as WithId<Job>))
-      .filter(p => {
-        return owner ? matchOwner(p, owner) : true;
-      });
+    return data?.data.filter(p => {
+      return owner ? matchOwner(p, owner) : true;
+    });
   }, [data?.data, owner]);
 
-  const columns: Column<JobModel>[] = [
+  const columns = [
     PhaseColumnRenderer(),
     NameColumnRenderer('jobs'),
     NameSpaceColumnRenderer(),
     WorkloadImageColumnRenderer(),
     CompletionsCountColumnRenderer(),
     DurationColumnRenderer(),
     AgeColumnRenderer(),
-  ];
+  ] as Column<ResourceModel>[];
 
   return (
     <kit.space

packages/refine/src/components/DrawerShow/DrawerShow.tsx

@@ -1,18 +1,17 @@
 import { useUIKit } from '@cloudtower/eagle';
 import { useNavigation, useParsed, useShow } from '@refinedev/core';
 import { Drawer } from 'antd';
+import { ResourceModel } from 'k8s-api-provider';
 import React from 'react';
-import { ResourceModel } from '../../model';
-import { Resource } from '../../types';
 import { ShowField, ShowContent } from '../ShowContent';
 
-type Props<Raw extends Resource, Model extends ResourceModel> = {
+type Props<Model extends ResourceModel> = {
   fieldGroups: ShowField<Model>[][];
-  formatter: (r: Raw) => Model;
+  formatter?: (r: Model) => Model;
 };
 
-export const DrawerShow = <Raw extends Resource, Model extends ResourceModel>(
-  props: Props<Raw, Model>
+export const DrawerShow = <Model extends ResourceModel>(
+  props: Props<Model>
 ) => {
   const kit = useUIKit();
   const parsed = useParsed();

packages/refine/src/components/EventsTable/EventsTable.tsx

@@ -1,36 +1,25 @@
-import { Icon, RequiredColumnProps, useUIKit } from '@cloudtower/eagle';
-import {
-  CheckmarkDoneSuccessCorrect16BoldGreenIcon,
-  XmarkFailed16BoldRedIcon,
-} from '@cloudtower/icons-react';
-import { Event } from 'kubernetes-types/core/v1';
+import { useList, useParsed } from '@refinedev/core';
+import { ResourceModel } from 'k8s-api-provider';
 import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   AgeColumnRenderer,
   CommonSorter,
   NameSpaceColumnRenderer,
 } from '../../hooks/useEagleTable/columns';
-import { WithId } from '../../types';
 import { addId } from '../../utils/addId';
-import { StateTag } from '../StateTag';
-import Time from '../Time';
-import { useList, useParsed, useShow } from '@refinedev/core';
-import { ResourceModel } from '../../model';
 import Table from '../Table';
 
-type Props = {};
-
-export const EventsTable: React.FC<Props> = ({}) => {
-  const kit = useUIKit();
+export const EventsTable: React.FC = ({}) => {
   const { i18n } = useTranslation();
   const [currentPage, setCurrentPage] = useState<number>(1);
-  const parsed = useParsed();
 
-  const { data, isLoading } = useList({
+  const { data, isLoading } = useList<ResourceModel>({
     resource: 'events',
     meta: { resourceBasePath: '/apis/events.k8s.io/v1', kind: 'Event' },
   });
+  const parsed = useParsed();
+
   const columns = useMemo(
     () => [
       NameSpaceColumnRenderer(),
@@ -71,14 +60,12 @@ export const EventsTable: React.FC<Props> = ({}) => {
     [i18n]
   );
 
-  const dataSource = useMemo(
+  const dataSource = useMemo<ResourceModel[]>(
     () =>
-      addId(data?.data || [], 'metadata.uid')
-        .filter(d => {
-          const objectId = `${d.regarding.namespace}/${d.regarding.name}`;
-          return objectId === parsed.id;
-        })
-        .map(d => new ResourceModel(d)),
+      addId(data?.data || [], 'metadata.uid' as any).filter((d: any) => {
+        const objectId = `${d.regarding.namespace}/${d.regarding.name}`;
+        return objectId === parsed.id;
+      }) as ResourceModel[],
     [data?.data, parsed]
   );
 

packages/refine/src/components/Form/KeyValueListWidget.tsx

@@ -29,7 +29,6 @@ function KeyValueInput(props: KeyValueInputProps) {
   );
   const onValueChange = useCallback(
     (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-      console.log(event);
       const value = event.target.value;
 
       props.onChange?.({
@@ -97,7 +96,6 @@ export function KeyValueListWidget(props: KeyValueListWidgetProps) {
             key={index}
             item={item}
             onChange={newItem => {
-              console.log(newItem);
               const temp = [...items];
 
               temp.splice(index, 1, newItem);

packages/refine/src/components/K8sDropdown/index.tsx

@@ -6,12 +6,12 @@ import {
   Download16GradientBlueIcon,
 } from '@cloudtower/icons-react';
 import { useResource } from '@refinedev/core';
+import { ResourceModel } from 'k8s-api-provider';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDeleteModal } from 'src/hooks/useDeleteModal';
 import { useDownloadYAML } from 'src/hooks/useDownloadYAML';
 import { useEdit } from 'src/hooks/useEdit';
-import { ResourceModel } from '../../model';
 
 interface K8sDropdownProps {
   data: ResourceModel;
@@ -56,7 +56,7 @@ function K8sDropdown(props: React.PropsWithChildren<K8sDropdownProps>) {
                 if (data.id) {
                   download({
                     name: data.metadata?.name || data.kind || '',
-                    item: data,
+                    item: data.restore(),
                   });
                 }
               }}

packages/refine/src/components/ListPage/index.tsx

@@ -1,9 +1,9 @@
 import { css } from '@linaria/core';
+import { ResourceModel } from 'k8s-api-provider';
 import React from 'react';
 import Table from 'src/components/Table';
 import { TableProps } from 'src/components/Table';
 import { TableToolBar } from 'src/components/Table/TableToolBar';
-import { ResourceModel } from 'src/model';
 
 const ListPageStyle = css`
   width: 100%;

packages/refine/src/components/PageShow/PageShow.tsx

@@ -1,18 +1,15 @@
 import { useUIKit } from '@cloudtower/eagle';
 import { useParsed, useShow } from '@refinedev/core';
+import { ResourceModel } from 'k8s-api-provider';
 import React from 'react';
-import { ResourceModel } from '../../model';
-import { Resource } from '../../types';
 import { ShowContent, ShowField } from '../ShowContent';
 
-type Props<Raw extends Resource, Model extends ResourceModel> = {
+type Props<Model extends ResourceModel> = {
   fieldGroups: ShowField<Model>[][];
-  formatter: (r: Raw) => Model;
+  formatter?: (r: Model) => Model;
   Dropdown?: React.FC<{ data: Model }>;
 };
-export const PageShow = <Raw extends Resource, Model extends ResourceModel>(
-  props: Props<Raw, Model>
-) => {
+export const PageShow = <Model extends ResourceModel>(props: Props<Model>) => {
   const kit = useUIKit();
   const parsed = useParsed();
   const { queryResult } = useShow({ id: parsed?.params?.id });

packages/refine/src/components/PodLog/index.tsx

@@ -1,16 +1,16 @@
 import { useUIKit } from '@cloudtower/eagle';
+import {
+  Resume24Icon,
+  SuspendedPause24GradientOrangeIcon,
+} from '@cloudtower/icons-react';
+import { css } from '@linaria/core';
 import { LogViewer } from '@patternfly/react-log-viewer';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { PodModel } from '../../model';
 import { useDataProvider } from '@refinedev/core';
+import { PodModel } from 'k8s-api-provider';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { css } from '@linaria/core';
 
 import '@patternfly/react-core/dist/styles/base-no-reset.css';
-import {
-  Resume24Icon,
-  SuspendedPause24GradientOrangeIcon,
-} from '@cloudtower/icons-react';
 
 const ToolbarStyle = css`
   margin-bottom: 8px;
@@ -31,7 +31,8 @@ export const PodLog: React.FC<{ pod: PodModel }> = ({ pod }) => {
   const [selectedContainer, setSelectedContainer] = useState(
     pod.spec?.containers[0]?.name || ''
   );
-  const [follow, setFollow] = useState(true);
+  // const [follow, setFollow] = useState(true);
+  const follow = true;
   const [logs, setLogs] = useState<string[]>([]);
   const [currentItemCount, setCurrentItemCount] = useState(0);
   const [paused, setPaused] = useState(false);

packages/refine/src/components/ResourceCRUD/ResourceCRUD.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Route } from 'react-router-dom';
-import { ResourceModel } from '../../model';
-import { ResourceConfig, Resource } from '../../types';
+import { ResourceConfig } from '../../types';
 import { ResourceForm } from './create';
 import { ResourceList } from './list';
 import { ResourceShow } from './show';
@@ -14,20 +13,19 @@ export const ResourceCRUD: React.FC<Props> = props => {
   return (
     <>
       {configs.map(config => {
-        const formatter = config.formatter || ((v: Resource) => new ResourceModel(v));
         return (
           <React.Fragment key={config.name}>
             <Route path={`${urlPrefix}/${config.name}`} exact>
               <ResourceList
                 name={config.kind}
-                formatter={formatter}
+                formatter={config.formatter}
                 columns={config.columns?.(i18n) || []}
                 Dropdown={config.Dropdown}
               />
             </Route>
             <Route path={`${urlPrefix}/${config.name}/show`}>
               <ResourceShow
-                formatter={formatter}
+                formatter={config.formatter}
                 filedGroups={config.showFields?.(i18n) || []}
                 Dropdown={config.Dropdown}
               />

packages/refine/src/components/ResourceCRUD/create/index.tsx

@@ -1,17 +1,14 @@
-import { FormProps } from 'antd/lib/form';
+import { ResourceModel } from 'k8s-api-provider';
 import React from 'react';
 import YamlForm from 'src/components/YamlForm';
 import { BASE_INIT_VALUE } from 'src/constants/k8s';
-import { Resource, ResourceConfig } from '../../../types';
-import { ResourceModel } from '../../../model';
+import { ResourceConfig } from '../../../types';
 
-type Props<Raw extends Resource, Model extends ResourceModel> = {
-  config: ResourceConfig<Raw, Model>;
+type Props<Model extends ResourceModel> = {
+  config: ResourceConfig<Model>;
 };
 
-export function ResourceForm<Raw extends Resource, Model extends ResourceModel>(
-  props: Props<Raw, Model>
-) {
+export function ResourceForm<Model extends ResourceModel>(props: Props<Model>) {
   const { config } = props;
   return (
     <YamlForm