Qlkube add merge schema

.github/workflows/lint.yml

@@ -131,7 +131,7 @@ jobs:
       - name: Setup nodeJS
         uses: actions/setup-node@v4
         with:
-          node-version: 14
+          node-version: 18
 
       - name: Install the packages necessary for lint checking
         working-directory: ./frontend
@@ -156,7 +156,7 @@ jobs:
       - name: Setup nodeJS
         uses: actions/setup-node@v4
         with:
-          node-version: 14
+          node-version: 18
 
       - name: Install the packages necessary for lint checking
         working-directory: ./qlkube

deploy/crownlabs/values.yaml

@@ -28,6 +28,7 @@ qlkube:
   rbacResourcesName: crownlabs-qlkube
   ingress:
     hostname: qlkube.crownlabs.example.com
+  harborToken: {}
   configuration:
     exposedAPIs:
       apis:

frontend/Dockerfile

@@ -1,5 +1,5 @@
 # Builder image for the frontend
-FROM node:14-alpine as builder
+FROM node:18-alpine as builder
 
 ## Switch to an unprivileged user (avoids problems with npm)
 USER node

frontend/codegen.ts

@@ -0,0 +1,27 @@
+import { CodegenConfig } from '@graphql-codegen/cli';
+
+const schemaUrl =
+  (process.env.GRAPHQL_URL || 'https://graphql.preprod.crownlabs.polito.it') +
+  '/schema';
+
+const config: CodegenConfig = {
+  schema: {
+    [schemaUrl]: { handleAsSDL: true },
+  },
+  documents: ['./src/**/*.{graphql,ts}'],
+  generates: {
+    './src/generated-types.tsx': {
+      config: {
+        preResolveTypes: true,
+      },
+      plugins: [
+        'typescript',
+        'typescript-operations',
+        'typescript-react-apollo',
+      ],
+    },
+  },
+  config: {},
+};
+
+export default config;

frontend/package.json

@@ -5,7 +5,6 @@
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
     "@apollo/client": "^3.3.20",
-    "@apollo/react-hooks": "^4.0.0",
     "@craco/craco": "^6.1.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
@@ -18,32 +17,28 @@
     "@types/react-router-dom": "^5.1.7",
     "antd": "^4.15.2",
     "antd-button-color": "^1.0.4",
-    "apollo-cache-inmemory": "^1.6.6",
-    "apollo-client": "^2.6.10",
-    "apollo-link": "^1.2.14",
-    "apollo-link-http": "^1.5.17",
-    "apollo-link-ws": "^1.0.20",
     "craco-less": "^1.17.1",
     "graphql": "^15.5.1",
     "graphql-tag": "^2.12.5",
+    "graphql-ws": "^5.16.0",
     "keycloak-js": "12.0.4",
     "papaparse": "^5.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
-    "typescript": "^4.1.2",
+    "typescript": "^5.6.3",
     "web-vitals": "^1.0.1",
     "ws": "^8.2.2"
   },
   "scripts": {
-    "start": "craco start",
-    "build-app": "craco build",
+    "start": "craco --openssl-legacy-provider start",
+    "build-app": "craco --openssl-legacy-provider build",
     "test": "craco test",
     "prepare": "cd .. && husky install frontend/.husky",
     "check-format-lint": "prettier --check **/*.{ts,tsx,js,jsx,json,css,graphql} && eslint . --ext .ts --ext .tsx --ext .js --ext .jsx --max-warnings=0",
     "pre-commit": "lint-staged",
-    "generate": "curl https://graphql.preprod.crownlabs.polito.it/schema -o schema.graphql && graphql-codegen --config codegen.yml ; rm -f schema.graphql"
+    "generate": "graphql-codegen"
   },
   "eslintConfig": {
     "extends": [
@@ -100,11 +95,10 @@
     ]
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "1.21.6",
-    "@graphql-codegen/introspection": "1.18.2",
-    "@graphql-codegen/typescript": "1.22.4",
-    "@graphql-codegen/typescript-operations": "1.18.3",
-    "@graphql-codegen/typescript-react-apollo": "2.2.8",
+    "@graphql-codegen/cli": "^5.0.3",
+    "@graphql-codegen/typescript": "^4.1.1",
+    "@graphql-codegen/typescript-operations": "^4.3.1",
+    "@graphql-codegen/typescript-react-apollo": "^4.3.2",
     "@tailwindcss/postcss7-compat": "npm:@tailwindcss/postcss7-compat",
     "autoprefixer": "^9",
     "eslint-config-prettier": "^8.3.0",
@@ -135,4 +129,4 @@
       "eslint --max-warnings=0 --ignore-pattern=!.storybook"
     ]
   }
-}
+}

frontend/src/components/activePage/TableInstance/RowInstanceActions/RowInstanceActionsDropdown.tsx

@@ -71,12 +71,12 @@ const RowInstanceActionsDropdown: FC<IRowInstanceActionsDropdownProps> = ({
   };
 
   const statusComponents = {
-    Ready: {
+    [Phase.Ready]: {
       menuKey: 'stop',
       menuIcon: <PoweroffOutlined style={font20px} />,
       menuText: 'Stop',
     },
-    Off: {
+    [Phase.Off]: {
       menuKey: 'start',
       menuIcon: <CaretRightOutlined style={font20px} />,
       menuText: 'Start',

frontend/src/components/activePage/TableInstance/RowInstanceStatus/RowInstanceStatus.tsx

@@ -18,26 +18,36 @@ const RowInstanceStatus: FC<IRowInstanceStatusProps> = ({ ...props }) => {
 
   const font20px = { fontSize: '20px' };
   const statusIcon = {
-    Unknown: <WarningOutlined className="warning-color-fg" style={font20px} />,
-    CreationLoopBackoff: (
+    [Phase.Empty]: (
       <WarningOutlined className="warning-color-fg" style={font20px} />
     ),
-    Running: <LoadingOutlined className="warning-color-fg" style={font20px} />,
-    Importing: (
+    [Phase.CreationLoopBackoff]: (
+      <WarningOutlined className="warning-color-fg" style={font20px} />
+    ),
+    [Phase.Running]: (
       <LoadingOutlined className="warning-color-fg" style={font20px} />
     ),
-    ResourceQuotaExceeded: (
+    [Phase.Importing]: (
+      <LoadingOutlined className="warning-color-fg" style={font20px} />
+    ),
+    [Phase.ResourceQuotaExceeded]: (
       <CloseCircleOutlined className="danger-color-fg" style={font20px} />
     ),
-    Ready: (
+    [Phase.Ready]: (
       <CheckCircleOutlined className="success-color-fg" style={font20px} />
     ),
-    Failed: (
+    [Phase.Failed]: (
       <CloseCircleOutlined className="danger-color-fg" style={font20px} />
     ),
-    Off: <PauseCircleOutlined className="warning-color-fg" style={font20px} />,
-    Starting: <LoadingOutlined className="warning-color-fg" style={font20px} />,
-    Stopping: <LoadingOutlined className="warning-color-fg" style={font20px} />,
+    [Phase.Off]: (
+      <PauseCircleOutlined className="warning-color-fg" style={font20px} />
+    ),
+    [Phase.Starting]: (
+      <LoadingOutlined className="warning-color-fg" style={font20px} />
+    ),
+    [Phase.Stopping]: (
+      <LoadingOutlined className="warning-color-fg" style={font20px} />
+    ),
   };
 
   return (

frontend/src/components/activePage/TableInstance/RowInstanceTitle/RowInstanceTitle.tsx

@@ -1,6 +1,6 @@
 import { CodeOutlined, DesktopOutlined } from '@ant-design/icons';
 import { Checkbox, Space, Typography } from 'antd';
-import { ApolloError } from 'apollo-client';
+import { ApolloError } from '@apollo/client';
 import { FC, useContext, useEffect, useState } from 'react';
 import { ErrorContext } from '../../../../errorHandling/ErrorContext';
 import { useApplyInstanceMutation } from '../../../../generated-types';
@@ -80,7 +80,7 @@ const RowInstanceTitle: FC<IRowInstanceTitleProps> = ({ ...props }) => {
     <>
       <div className="w-full flex justify-start items-center pl-2">
         <Space size="middle">
-          {viewMode === 'manager' &&
+          {viewMode === WorkspaceRole.manager &&
             selectiveDestroy &&
             selectToDestroy &&
             showCheckbox && (
@@ -94,7 +94,7 @@ const RowInstanceTitle: FC<IRowInstanceTitleProps> = ({ ...props }) => {
             )}
           <RowInstanceStatus status={status} />
 
-          {viewMode === 'manager' ? (
+          {viewMode === WorkspaceRole.manager ? (
             <div className="flex items-center gap-4">
               <Text className="w-32">{tenantId}</Text>
               <Text className="hidden w-max lg:w-32 2xl:w-40 md:block" ellipsis>

frontend/src/components/activePage/TableInstance/TableInstance.tsx

@@ -93,7 +93,7 @@ const TableInstance: FC<ITableInstanceProps> = ({ ...props }) => {
     <>
       <div
         className={`rowInstance-bg-color ${
-          viewMode === 'user' && extended
+          viewMode === WorkspaceRole.user && extended
             ? 'cl-table-instance flex-grow flex-wrap content-between py-0 overflow-auto scrollbar'
             : ''
         }`}
@@ -133,7 +133,9 @@ const TableInstance: FC<ITableInstanceProps> = ({ ...props }) => {
           pagination={false}
           size="middle"
           rowClassName={
-            viewMode === 'user' && extended ? '' : 'rowInstance-bg-color'
+            viewMode === WorkspaceRole.user && extended
+              ? ''
+              : 'rowInstance-bg-color'
           }
           rowKey={record => record.id + (record.templateId || '')}
         >

frontend/src/components/activePage/TableInstance/TableInstanceLogic.tsx

@@ -1,4 +1,3 @@
-import { FetchPolicy } from '@apollo/client';
 import { Empty, Spin } from 'antd';
 import Button from 'antd-button-color';
 import { FC, useContext, useEffect, useState } from 'react';
@@ -13,7 +12,7 @@ import {
 import { updatedOwnedInstances } from '../../../graphql-components/subscription';
 import { TenantContext } from '../../../contexts/TenantContext';
 import { matchK8sObject, replaceK8sObject } from '../../../k8sUtils';
-import { Instance, User, WorkspaceRole } from '../../../utils';
+import { Instance, JSONDeepCopy, User, WorkspaceRole } from '../../../utils';
 import {
   getSubObjTypeK8s,
   makeGuiInstance,
@@ -30,8 +29,6 @@ export interface ITableInstanceLogicProps {
   user: User;
 }
 
-const fetchPolicy_networkOnly: FetchPolicy = 'network-only';
-
 const TableInstanceLogic: FC<ITableInstanceLogicProps> = ({ ...props }) => {
   const { viewMode, extended, showGuiIcon, user } = props;
   const { makeErrorCatcher, apolloErrorCatcher, errorsQueue } =
@@ -53,9 +50,10 @@ const TableInstanceLogic: FC<ITableInstanceLogicProps> = ({ ...props }) => {
     error: errorInstances,
     subscribeToMore: subscribeToMoreInstances,
   } = useOwnedInstancesQuery({
+    skip: !tenantId,
     variables: { tenantNamespace },
     onCompleted: setDataInstances,
-    fetchPolicy: fetchPolicy_networkOnly,
+    fetchPolicy: 'network-only',
     onError: apolloErrorCatcher,
   });
 
@@ -73,13 +71,14 @@ const TableInstanceLogic: FC<ITableInstanceLogicProps> = ({ ...props }) => {
 
           const { instance, updateType } = data?.updateInstance;
           let notify = false;
-          let newItem = prev;
+          let newItem = JSONDeepCopy(prev);
           let objType;
 
-          if (prev.instanceList?.instances) {
-            let instances = [...prev.instanceList.instances];
+          if (newItem.instanceList?.instances) {
+            let { instances } = newItem.instanceList;
             const found = instances.find(matchK8sObject(instance, false));
             objType = getSubObjTypeK8s(found, instance, updateType);
+
             switch (objType) {
               case SubObjType.Deletion:
                 instances = instances.filter(matchK8sObject(instance, true));
@@ -103,14 +102,14 @@ const TableInstanceLogic: FC<ITableInstanceLogicProps> = ({ ...props }) => {
               default:
                 break;
             }
-            prev.instanceList.instances = [...instances];
+            newItem.instanceList.instances = instances;
           }
 
-          if (notify)
+          if (notify) {
             notifyStatus(instance.status?.phase, instance, updateType);
+          }
 
           if (objType !== SubObjType.Drop) {
-            newItem = { ...prev };
             setDataInstances(newItem);
           }
           return newItem;

frontend/src/components/activePage/TableWorkspaceLogic/TableWorkspaceLogic.tsx

@@ -17,7 +17,12 @@ import {
   useInstancesLabelSelectorQuery,
 } from '../../../generated-types';
 import { matchK8sObject, replaceK8sObject } from '../../../k8sUtils';
-import { multiStringIncludes, User, Workspace } from '../../../utils';
+import {
+  JSONDeepCopy,
+  multiStringIncludes,
+  User,
+  Workspace,
+} from '../../../utils';
 import {
   getManagerInstances,
   getSubObjTypeK8s,
@@ -119,12 +124,12 @@ const TableWorkspaceLogic: FC<ITableWorkspaceLogicProps> = ({ ...props }) => {
           const { instance, updateType } = data?.updateInstanceLabelSelector;
           const { namespace: ns } = instance.metadata!;
           let notify = false;
-          let newItem = prev;
+          let newItem = JSONDeepCopy(prev);
           let objType;
           const matchNS = ns === tenantNamespace;
 
-          if (prev.instanceList?.instances) {
-            let instances = [...prev.instanceList.instances];
+          if (newItem.instanceList?.instances) {
+            let { instances } = newItem.instanceList;
             const found = instances.find(matchK8sObject(instance, false));
             objType = getSubObjTypeK8s(found, instance, updateType);
 
@@ -151,14 +156,14 @@ const TableWorkspaceLogic: FC<ITableWorkspaceLogicProps> = ({ ...props }) => {
               default:
                 break;
             }
-            prev.instanceList.instances = [...instances];
+            newItem.instanceList.instances = instances;
           }
 
-          if (notify && matchNS)
+          if (notify && matchNS) {
             notifyStatus(instance.status?.phase, instance, updateType);
+          }
 
           if (objType !== SubObjType.Drop) {
-            newItem = { ...prev };
             setDataInstances(newItem);
           }
           return prev;