Update to [email protected] and [email protected]

README.md

@@ -1,8 +1,17 @@
-# dynamic-cim
-
-1. clone `cim` branch of OpenShift Console https://github.com/rawagner/console/tree/cim
-2. build `console-dynamic-plugin-sdk` https://github.com/rawagner/console/tree/cim/frontend/packages/console-dynamic-plugin-sdk by running `yarn build`
-3. link the build with `dynamic-cim` node_modules
-4. clone & build `assisted-ui-lib` https://github.com/openshift-assisted/assisted-ui-lib#develop - set `ASSISTED_UI_ROOT` to `../dynamic-cim` . Use https://github.com/openshift-assisted/assisted-ui-lib/pull/601 for latest updates with `infra-hosts` branch https://github.com/rawagner/dynamic-cim/tree/infra_hosts
-5. start development server for `dynamic-cim` `yarn dev`
-6. start the OpenShfit Console and enable `dynamic-cim` plugin `source ./contrib/oc-environment.sh && BRIDGE_BRANDING="okd" && ./bin/bridge -plugins console-dynamic-cim=http://127.0.0.1:9001/`
+# Prepare SDK from openshift/console
+
+1. clone `cim2` branch of OpenShift Console https://github.com/rawagner/console/tree/cim2
+2. `cd console`
+3. build `console-dynamic-plugin-sdk` https://github.com/rawagner/console/tree/cim/frontend/packages/console-dynamic-plugin-sdk by running `yarn build`
+4. prepare link for sdk modules `cd frontend/packages/console-dynamic-plugin-sdk/dist/core && yarn link`, `cd frontend/packages/console-dynamic-plugin-sdk/dist/webpack && yarn link`
+
+# Run dynamic cim plugin
+
+1. `cd dynamic-cim`
+2. Link local SDK modules from previous step `yarn link "@openshift-console/dynamic-plugin-sdk" && yarn link "@openshift-console/dynamic-plugin-sdk-webpack"`
+3. clone & build `assisted-ui-lib` https://github.com/openshift-assisted/assisted-ui-lib#develop - set `ASSISTED_UI_ROOT` to `../dynamic-cim` . Use https://github.com/openshift-assisted/assisted-ui-lib/pull/601 for latest updates with `infra-hosts` branch https://github.com/rawagner/dynamic-cim/tree/infra_hosts
+4. start development server for `dynamic-cim` `yarn dev`
+
+# Start OpenShift Console
+
+1. start the OpenShfit Console and enable `dynamic-cim` plugin `source ./contrib/oc-environment.sh && BRIDGE_BRANDING="okd" && ./bin/bridge -plugins console-dynamic-cim=http://127.0.0.1:9001/`

package.json

@@ -55,8 +55,8 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.14.5",
-    "@openshift-console/dynamic-plugin-sdk": "0.0.2",
-    "@openshift-console/dynamic-plugin-sdk-webpack": "^0.0.2",
+    "@openshift-console/dynamic-plugin-sdk": "0.0.3",
+    "@openshift-console/dynamic-plugin-sdk-webpack": "^0.0.3",
     "@types/file-saver": "^2.0.3",
     "@types/js-yaml": "^4.0.1",
     "@types/react": "16.8.13",
@@ -86,7 +86,7 @@
     "ts-loader": "6.2.2",
     "ts-node": "5.0.1",
     "typescript": "3.8.3",
-    "webpack": "5.0.0-beta.16",
+    "webpack": "5.63.0",
     "webpack-cli": "4.5.x"
   },
   "consolePlugin": {

src/components/Agent/actions.ts

@@ -1,13 +1,14 @@
 import { CIM } from 'openshift-assisted-ui-lib';
-import { K8sResourceCommon, k8sPatch } from '@openshift-console/dynamic-plugin-sdk';
+import { k8sPatch } from '@openshift-console/dynamic-plugin-sdk';
 import { ModalDialogsContextType } from '../modals';
+import { AgentK8sResource } from 'openshift-assisted-ui-lib/dist/src/cim/types';
 
 export const onEditHostAction =
   (
     editHostModal: ModalDialogsContextType['editHostModal'],
     agentModel: any,
   ): CIM.ClusterDeploymentHostsTablePropsActions['onEditHost'] =>
-  (agent: K8sResourceCommon) =>
+  (agent: AgentK8sResource) =>
     editHostModal.open({
       agent,
       usedHostnames: [],
@@ -33,7 +34,7 @@ export const onEditHostAction =
 
 export const onEditRoleAction =
   (agentModel: any): CIM.ClusterDeploymentHostsTablePropsActions['onEditRole'] =>
-  async (agent: K8sResourceCommon, role: string) =>
+  async (agent: CIM.AgentK8sResource, role: string) =>
     await k8sPatch({
       model: agentModel,
       resource: agent,

src/components/Infra/InfraEnvForm.tsx

@@ -8,6 +8,11 @@ import {
   CreateResourceComponentProps,
 } from '@openshift-console/dynamic-plugin-sdk';
 import { InfraEnvKind, AgentClusterInstallKind, ClusterDeploymentKind } from '../../kind';
+import {
+  ClusterDeploymentK8sResource,
+  InfraEnvK8sResource,
+  SecretK8sResource,
+} from 'openshift-assisted-ui-lib/dist/src/cim/types';
 
 import '../styles.scss';
 import './infra.scss';
@@ -27,7 +32,7 @@ const InfraEnvWizard: React.FC<CreateResourceComponentProps> = ({ namespace = 'd
   const [secretModel] = useK8sModel('core~v1~Secret');
   const [clusterDepModel] = useK8sModel(ClusterDeploymentKind);
   const [agentClusterInstallModel] = useK8sModel(AgentClusterInstallKind);
-  const [infraEnvs] = useK8sWatchResource<CIM.InfraEnvK8sResource[]>({
+  const [infraEnvs] = useK8sWatchResource<InfraEnvK8sResource[]>({
     kind: InfraEnvKind,
     namespace,
     isList: true,
@@ -37,18 +42,19 @@ const InfraEnvWizard: React.FC<CreateResourceComponentProps> = ({ namespace = 'd
     async (values) => {
       // TODO(mlibra): Secret, clusterDeployment and agentClusterinstall should be removed from here once we have Late Binding
       // TODO(mlibra): We already have, let's do it!
-      const secret = await k8sCreate({
+      const secret = await k8sCreate<SecretK8sResource>({
         model: secretModel,
         data: getSecret(namespace, values),
       });
-      const clusterDeployment = await k8sCreate({
+      const clusterDeployment = await k8sCreate<ClusterDeploymentK8sResource>({
         model: clusterDepModel,
-        data: getClusterDeploymentForInfraEnv(secret.metadata.name, namespace, values),
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        data: getClusterDeploymentForInfraEnv(secret.metadata?.name!, namespace, values),
       });
       await k8sCreate({
         model: agentClusterInstallModel,
         data: getAgentClusterInstall({
-          clusterDeploymentName: clusterDeployment.metadata.name,
+          clusterDeploymentName: clusterDeployment.metadata?.name,
           namespace,
           values,
         }),

src/components/Infra/InfraListPage.tsx

@@ -12,6 +12,10 @@ import {
 } from '@openshift-console/dynamic-plugin-sdk';
 import { CIM } from 'openshift-assisted-ui-lib';
 import { sortable } from '@patternfly/react-table';
+import {
+  AgentK8sResource,
+  InfraEnvK8sResource,
+} from 'openshift-assisted-ui-lib/dist/src/cim/types';
 
 import { AgentKind, InfraEnvKind } from '../../kind';
 import InlineStatusGroup from './InlineStatusGroup';
@@ -23,9 +27,9 @@ const COL_PROJECT = 'namespace';
 const COL_LOCATION = 'infra-envs-table-location';
 const COL_AGENTS = 'infra-envs-table-hosts';
 
-const InfraRow: React.FC<RowProps<CIM.InfraEnvK8sResource>> = ({ obj, activeColumnIDs }) => {
+const InfraRow: React.FC<RowProps<InfraEnvK8sResource>> = ({ obj, activeColumnIDs }) => {
   const agentSelector = obj.status?.agentLabelSelector?.matchLabels;
-  const [infraAgents] = useK8sWatchResource<CIM.AgentK8sResource[]>(
+  const [infraAgents] = useK8sWatchResource<AgentK8sResource[]>(
     agentSelector
       ? {
           kind: AgentKind,
@@ -50,7 +54,7 @@ const InfraRow: React.FC<RowProps<CIM.InfraEnvK8sResource>> = ({ obj, activeColu
         <ResourceLink kind="Project" name={obj.metadata?.namespace} />
       </TableData>
       <TableData id={COL_LOCATION} activeColumnIDs={activeColumnIDs}>
-        {obj.metadata?.labels[AGENT_LOCATION_LABEL_KEY] || 'N/A'}
+        {obj.metadata?.labels?.[AGENT_LOCATION_LABEL_KEY] || 'N/A'}
       </TableData>
       <TableData id={COL_AGENTS} activeColumnIDs={activeColumnIDs}>
         {infraAgents.length ? (

src/components/cluster-deployments/ClusterDeploymentDetailsPage.tsx

@@ -11,7 +11,7 @@ import {
 import { K8sModel } from '@openshift-console/dynamic-plugin-sdk/lib/api/common-types';
 import { KebabOptionsCreatorProps } from '@openshift-console/dynamic-plugin-sdk/lib/extensions/console-types';
 import { CIM } from 'openshift-assisted-ui-lib';
-import { K8sResourceCommon, K8sResourceKindReference } from '@openshift-console/dynamic-plugin-sdk';
+import { K8sResourceKindReference } from '@openshift-console/dynamic-plugin-sdk';
 import {
   AgentClusterInstallKind,
   AgentKind,
@@ -20,6 +20,11 @@ import {
 } from '../../kind';
 import { canEditCluster } from './utils';
 import { SecretModel } from '../../models/ocp';
+import {
+  AgentK8sResource,
+  ClusterDeploymentK8sResource,
+  SecretK8sResource,
+} from 'openshift-assisted-ui-lib/dist/src/cim/types';
 
 const { LoadingState, ClusterDeploymentDetails, getOnFetchEventsHandler } = CIM;
 
@@ -29,12 +34,12 @@ const fetchEvents = (url: string) => consoleFetchJSON(`${backendUrl}${url}`);
 
 type DetailsTabProps =
   React.PropsWithChildren<PageComponentProps /* Should be generic. The DetailsPage API is about to evolve in the SDK: <CIM.ClusterDeploymentK8sResource> */> & {
-    agentClusterInstall: K8sResourceCommon;
+    agentClusterInstall: AgentK8sResource;
   };
 
 const getClusterDeploymentActions =
   (agentClusterInstall?: CIM.AgentClusterInstallK8sResource): KebabOptionsCreatorProps =>
-  (kindObj: K8sModel, clusterDeployment: K8sResourceCommon) => {
+  (kindObj: K8sModel, clusterDeployment: ClusterDeploymentK8sResource) => {
     const { namespace, name } = clusterDeployment.metadata || {};
     return [
       {
@@ -86,7 +91,7 @@ export const ClusterDeploymentOverview = (props: DetailsTabProps) => {
   const fetchSecret: React.ComponentProps<typeof ClusterDeploymentDetails>['fetchSecret'] = (
     name: string,
     namespace: string,
-  ): CIM.SecretK8sResource => k8sGet({ model: SecretModel, name, ns: namespace });
+  ): Promise<SecretK8sResource> => k8sGet({ model: SecretModel, name, ns: namespace });
 
   const onFetchEvents = getOnFetchEventsHandler(
     fetchEvents,

src/components/cluster-deployments/ClusterDeploymentWizard.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
 import { useK8sWatchResource, useK8sModel } from '@openshift-console/dynamic-plugin-sdk';
 import { CIM } from 'openshift-assisted-ui-lib';
+import { ClusterDeploymentK8sResource } from 'openshift-assisted-ui-lib/dist/src/cim/types';
 
 import {
   AgentClusterInstallKind,
@@ -35,12 +36,12 @@ type ClusterDeploymentWizardProps = {
 };
 
 const getUsedClusterNames = (
-  current?: CIM.ClusterDeploymentK8sResource,
-  clusterDeployments: CIM.ClusterDeploymentK8sResource[] = [],
+  current?: ClusterDeploymentK8sResource,
+  clusterDeployments: ClusterDeploymentK8sResource[] = [],
 ): string[] =>
   clusterDeployments
-    .filter((cd) => current?.metadata?.uid !== cd.metadata.uid)
-    .map((cd): string => `${cd.metadata.name}.${cd.spec?.baseDomain}`);
+    .filter((cd) => current?.metadata?.uid !== cd.metadata?.uid)
+    .map((cd): string => `${cd.metadata?.name}.${cd.spec?.baseDomain}`);
 
 const getAgentClusterInstallQuery = (namespace: string, clusterInstallRefName?: string) =>
   clusterInstallRefName

src/components/cluster-deployments/transitionCallbacks.ts

@@ -5,6 +5,11 @@ import { RouteComponentProps } from 'react-router';
 
 import { ClusterDeploymentKind } from '../../kind';
 import { appendPatch, getPullSecretResource, getAgentClusterInstall } from '../../k8s';
+import {
+  AgentClusterInstallK8sResource,
+  AgentK8sResource,
+  ClusterDeploymentK8sResource,
+} from 'openshift-assisted-ui-lib/dist/src/cim/types';
 
 const { getAnnotationsFromAgentSelector, getClusterDeploymentResource } = CIM;
 
@@ -34,19 +39,21 @@ export const getOnClusterCreate =
         data: getPullSecretResource({ namespace, name, pullSecret }),
       });
       const pullSecretName = secret?.metadata?.name || '';
-      const createdClusterDeployment = await k8sCreate({
+      const createdClusterDeployment = await k8sCreate<ClusterDeploymentK8sResource>({
         model: clusterDeploymentModel,
         data: getClusterDeploymentResource({ namespace, annotations, pullSecretName, ...params }),
       });
 
       // keep watching the newly created resource from now on
-      setClusterDeploymentName(createdClusterDeployment.metadata.name);
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      setClusterDeploymentName(createdClusterDeployment.metadata?.name!);
 
-      await k8sCreate({
+      await k8sCreate<AgentClusterInstallK8sResource>({
         model: agentClusterInstallModel,
         data: getAgentClusterInstall({
           name,
-          clusterDeploymentRefName: createdClusterDeployment.metadata.name,
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          clusterDeploymentRefName: createdClusterDeployment.metadata?.name!,
           namespace,
           ocpVersion: openshiftVersion,
           controlPlaneAgents: highAvailabilityMode === 'Full' ? 0 : 1, // set to 1 for SNO (the only indicator of SNO so far)
@@ -61,8 +68,8 @@ export const getOnClusterCreate =
   };
 
 type getOnClusterDetailsUpdateParams = {
-  agentClusterInstall: CIM.AgentClusterInstallK8sResource;
-  clusterDeployment: CIM.ClusterDeploymentK8sResource;
+  agentClusterInstall: AgentClusterInstallK8sResource;
+  clusterDeployment: ClusterDeploymentK8sResource;
   clusterDeploymentModel: K8sModel;
   agentClusterInstallModel: K8sModel;
 };
@@ -101,7 +108,7 @@ export const getOnClusterDetailsUpdate =
         agentClusterInstallPatches,
         '/spec/imageSetRef/name',
         values.openshiftVersion,
-        agentClusterInstall.spec.imageSetRef?.name,
+        agentClusterInstall.spec?.imageSetRef?.name,
       );
 
       if (clusterDeploymentPatches.length > 0) {
@@ -141,7 +148,7 @@ export const getOnSaveDetails =
   };
 
 type getOnSaveNetworkingParams = {
-  agentClusterInstall: CIM.AgentClusterInstallK8sResource;
+  agentClusterInstall: AgentClusterInstallK8sResource;
   agentClusterInstallModel: K8sModel;
 };
 
@@ -155,7 +162,7 @@ export const getOnSaveNetworking =
         agentClusterInstallPatches,
         '/spec/sshPublicKey',
         values.sshPublicKey,
-        agentClusterInstall.spec.sshPublicKey,
+        agentClusterInstall.spec?.sshPublicKey,
       );
 
       appendPatch(
@@ -216,10 +223,10 @@ export const getOnSaveNetworking =
   };
 
 type getOnSaveHostsSelectionParams = {
-  clusterDeployment: CIM.ClusterDeploymentK8sResource;
+  clusterDeployment: ClusterDeploymentK8sResource;
   agentModel: K8sModel;
   clusterDeploymentModel: K8sModel;
-  agents: CIM.AgentK8sResource[];
+  agents: AgentK8sResource[];
 };
 
 export const getOnSaveHostsSelection =
@@ -232,14 +239,17 @@ export const getOnSaveHostsSelection =
   async (values: CIM.ClusterDeploymentHostsSelectionValues) => {
     try {
       const hostIds = values.autoSelectHosts ? values.autoSelectedHostIds : values.selectedHostIds;
-      const name = clusterDeployment.metadata.name;
-      const namespace = clusterDeployment.metadata.namespace;
-      const releasedAgents = agents.filter(
-        (a) =>
-          !hostIds.includes(a.metadata.uid) &&
+      const name = clusterDeployment.metadata?.name;
+      const namespace = clusterDeployment.metadata?.namespace;
+      const releasedAgents = agents.filter((a) => {
+        const agentId = a.metadata?.uid;
+        return (
+          agentId &&
+          !hostIds.includes(agentId) &&
           a.spec?.clusterDeploymentName?.name === name &&
-          a.spec?.clusterDeploymentName?.namespace === namespace,
-      );
+          a.spec?.clusterDeploymentName?.namespace === namespace
+        );
+      });
 
       await Promise.all(
         releasedAgents.map((agent) => {
@@ -256,12 +266,15 @@ export const getOnSaveHostsSelection =
         }),
       );
 
-      const addAgents = agents.filter(
-        (a) =>
-          hostIds.includes(a.metadata.uid) &&
+      const addAgents = agents.filter((a) => {
+        const agentId = a.metadata?.uid;
+        return (
+          agentId &&
+          hostIds.includes(agentId) &&
           (a.spec?.clusterDeploymentName?.name !== name ||
-            a.spec?.clusterDeploymentName?.namespace !== namespace),
-      );
+            a.spec?.clusterDeploymentName?.namespace !== namespace)
+        );
+      });
       await Promise.all(
         addAgents.map((agent) => {
           return k8sPatch({
@@ -282,12 +295,12 @@ export const getOnSaveHostsSelection =
       );
 
       if (clusterDeployment) {
-        await k8sPatch({
+        await k8sPatch<ClusterDeploymentK8sResource>({
           model: clusterDeploymentModel,
           resource: clusterDeployment,
           data: [
             {
-              op: clusterDeployment.metadata.annotations ? 'replace' : 'add',
+              op: clusterDeployment.metadata?.annotations ? 'replace' : 'add',
               path: '/metadata/annotations',
               value: getAnnotationsFromAgentSelector(clusterDeployment, values),
             },

src/components/modals/EditHostModal.tsx

@@ -5,7 +5,7 @@ import { useModalDialogsContext } from './ModalContext';
 const { EditAgentModal } = CIM;
 
 // eslint-disable-next-line
-const onFormSaveError = () => {};
+const onFormSaveError = (e) => {};
 
 const EditHostModal: React.FC = () => {
   const { editHostModal } = useModalDialogsContext();