qlkube refactor

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

@@ -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;

frontend/src/components/workspaces/Templates/TemplatesEmpty/TemplatesEmpty.tsx

@@ -9,7 +9,7 @@ export interface ITemplatesEmptyProps {
 
 const TemplatesEmpty: FC<ITemplatesEmptyProps> = ({ ...props }) => {
   const { role } = props;
-  return role === 'manager' ? (
+  return role === WorkspaceRole.manager ? (
     <div className="w-full h-full flex-grow flex flex-wrap content-center justify-center py-5 ">
       <div className="w-full pb-10 flex justify-center">
         <p className="text-6xl md:text-7xl text-center mb-0 primary-color-fg">

frontend/src/components/workspaces/Templates/TemplatesTableRow/TemplatesTableRow.tsx

@@ -214,7 +214,7 @@ const TemplatesTableRow: FC<ITemplatesTableRowProps> = ({ ...props }) => {
               Info
             </Button>
           </Tooltip>
-          {role === 'manager' ? (
+          {role === WorkspaceRole.manager ? (
             <TemplatesTableRowSettings
               id={template.id}
               createInstance={createInstance}

frontend/src/graphql-components/apolloClientSetup/ApolloClientSetup.tsx

@@ -1,8 +1,13 @@
 import { getMainDefinition } from '@apollo/client/utilities';
-import { ApolloProvider } from '@apollo/react-hooks';
 import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
 import { createClient } from 'graphql-ws';
-import { ApolloClient, HttpLink, InMemoryCache, split } from '@apollo/client';
+import {
+  ApolloClient,
+  ApolloProvider,
+  HttpLink,
+  InMemoryCache,
+  split,
+} from '@apollo/client';
 import { FC, PropsWithChildren, useContext, useEffect, useState } from 'react';
 import { AuthContext } from '../../contexts/AuthContext';
 import { REACT_APP_CROWNLABS_GRAPHQL_URL } from '../../env';

frontend/src/graphql-components/utils.ts

@@ -1,3 +1,4 @@
+import { DeepPartial } from '@apollo/client/utilities';
 import {
   ItPolitoCrownlabsV1alpha2Tenant,
   ItPolitoCrownlabsV1alpha2Instance,
@@ -35,7 +36,7 @@ function getInstancePatchJson(spec: {
   prettyName?: string;
   running?: boolean;
 }): string {
-  let patchJson: ItPolitoCrownlabsV1alpha2Instance = {
+  let patchJson: DeepPartial<ItPolitoCrownlabsV1alpha2Instance> = {
     kind: 'Instance',
     apiVersion: 'crownlabs.polito.it/v1alpha2',
     spec,
@@ -67,7 +68,7 @@ function getTenantPatchJson(
   },
   name?: string
 ): string {
-  let patchJson: ItPolitoCrownlabsV1alpha2Tenant = {
+  let patchJson: DeepPartial<ItPolitoCrownlabsV1alpha2Tenant> = {
     kind: 'Tenant',
     apiVersion: 'crownlabs.polito.it/v1alpha2',
     spec: {

frontend/src/utilsLogic.tsx

@@ -326,7 +326,7 @@ export const joinInstancesAndTemplates = (
   }));
 
 export const availableWorkspaces = (
-  workspaces: Maybe<ItPolitoCrownlabsV1alpha1Workspace>[],
+  workspaces: Maybe<DeepPartial<ItPolitoCrownlabsV1alpha1Workspace>>[],
   userWorkspaces: Workspace[]
 ) => {
   return workspaces
@@ -360,7 +360,7 @@ export const availableWorkspaces = (
 //Utilities for active page only
 
 export const getManagerInstances = (
-  instance: Nullable<ItPolitoCrownlabsV1alpha2Instance>,
+  instance: Nullable<DeepPartial<ItPolitoCrownlabsV1alpha2Instance>>,
   index: number
 ) => {
   if (!instance) {

qlkube/eslint.config.mjs

@@ -0,0 +1,46 @@
+import globals from 'globals';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [...compat.extends('airbnb-base', 'plugin:node/recommended'), {
+  languageOptions: {
+    globals: {
+      ...globals.commonjs,
+      ...globals.node,
+      Atomics: 'readonly',
+      SharedArrayBuffer: 'readonly',
+    },
+
+    ecmaVersion: 2018,
+    sourceType: 'commonjs',
+    parserOptions: {
+      ecmaVersion: 2020
+    }
+  },
+
+  ignores: ['**/*.mjs'],
+
+  rules: {
+    'no-unused-vars': ['warn', {
+      argsIgnorePattern: '^_',
+      varsIgnorePattern: '^_',
+      caughtErrorsIgnorePattern: '^_',
+    }],
+    'no-restricted-syntax': 'off',
+    'no-param-reassign': 'off',
+    'no-plusplus': 'off',
+    'no-await-in-loop': 'off',
+    'radix': 'off',
+    'class-methods-use-this': 'off',
+  },
+}];

qlkube/package.json

@@ -5,9 +5,9 @@
   "main": "src/index.js",
   "scripts": {
     "start": "node src/index.js",
-    "dev": "IN_CLUSTER=false nodemon src/index.js",
+    "dev": "IN_CLUSTER=false nodemon --inspect src/index.js",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "check-format-lint": "prettier --check **/*.{ts,tsx,js,jsx,json,css}",
+    "check-format-lint": "eslint src",
     "pre-commit": "lint-staged",
     "prepare": "cd .. && husky install qlkube/.husky"
   },
@@ -23,48 +23,44 @@
   },
   "homepage": "https://github.com/netgroup-polito/CrownLabs/qlkube#readme",
   "devDependencies": {
+    "@eslint/js": "^9.15.0",
+    "eslint": "8",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-node": "^11.1.0",
     "husky": "^6.0.0",
     "lint-staged": "15.2.7",
-    "nodemon": "^2.0.7",
-    "prettier": "^2.2.1"
+    "nodemon": "^2.0.7"
+  },
+  "engines": {
+    "node": ">=18.6.0"
   },
   "dependencies": {
     "@apollo/server": "^4.10.4",
     "@graphql-tools/schema": "10.0.4",
     "@graphql-tools/stitch": "^9.2.9",
     "@graphql-tools/wrap": "10.0.5",
-    "@kubernetes/client-node": "^0.21.0",
-    "apollo-link-http": "^1.5.17",
-    "body-parser": "^1.20.2",
+    "@kubernetes/client-node": "^0.22.3",
     "compression": "^1.7.4",
     "cors": "^2.8.5",
     "dotenv": "^9.0.2",
     "express": "^4.19.2",
-    "got": "^12.6.1",
+    "globals": "^15.12.0",
     "graphql": "^16.9.0",
     "graphql-http": "^1.22.1",
     "graphql-subscriptions": "^3.0.0",
     "graphql-tag": "^2.12.6",
     "graphql-tools": "9.0.1",
     "graphql-ws": "^5.16.0",
-    "node-fetch": "^3.3.2",
     "openapi-to-graphql": "^3.0.7",
-    "pino": "^9.2.0",
+    "pino": "^9.5.0",
     "ws": "^8.17.1"
   },
-  "prettier": {
-    "printWidth": 80,
-    "tabWidth": 2,
-    "semi": true,
-    "singleQuote": true,
-    "arrowParens": "avoid",
-    "endOfLine": "lf"
-  },
   "lint-staged": {
-    "*.{ts,tsx,js,jsx,json,css}": "prettier --write"
+    "*.{ts,tsx,js,jsx,json,css}": "eslint"
   },
   "resolutions": {
     "yargs-parser": "21.1.1",
     "ansi-regex": "^5.0.1"
   }
-}
+}