chore: rename IClientNodeItem -> IServiceNodeItem

services/frontend/src/components/Canvas/index.tsx

@@ -2,14 +2,14 @@ import { FC, useState, useEffect } from "react";
 import { Dictionary, values } from "lodash";
 import { v4 as uuidv4 } from "uuid";
 import eventBus from "../../events/eventBus";
-import { IGraphData, CallbackFunction, IClientNodeItem } from "../../types";
+import { IGraphData, CallbackFunction, IServiceNodeItem } from "../../types";
 import { useJsPlumb } from "../useJsPlumb";
 import Node from "./node";
 
 const CANVAS_ID: string = "canvas-container-" + uuidv4();
 
 interface ICanvasProps {
-  nodes: Dictionary<IClientNodeItem>;
+  nodes: Dictionary<IServiceNodeItem>;
   connections: any;
   canvasPosition: any;
   onNodeUpdate: CallbackFunction;

services/frontend/src/components/Canvas/node.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react";
-import { IClientNodeItem, CallbackFunction } from "../../types";
+import { IServiceNodeItem, CallbackFunction } from "../../types";
 import eventBus from "../../events/eventBus";
 import { Popover } from "./Popover";
 
 interface INodeProps {
-  node: IClientNodeItem;
+  node: IServiceNodeItem;
   setNodeForEdit: CallbackFunction;
   setNodeForDelete: CallableFunction;
 }

services/frontend/src/components/Modal/Service/Edit.tsx

@@ -9,7 +9,7 @@ import { canvasConfigInitialValues } from "../../../utils";
 import {
   CallbackFunction,
   ICanvasConfig,
-  IClientNodeItem,
+  IServiceNodeItem,
   IService
 } from "../../../types";
 
@@ -22,7 +22,7 @@ interface IModalServiceProps {
 const ModalServiceEdit = (props: IModalServiceProps) => {
   const { node, onHide, onUpdateEndpoint } = props;
   const [openTab, setOpenTab] = useState("General");
-  const [selectedNode, setSelectedNode] = useState<IClientNodeItem>();
+  const [selectedNode, setSelectedNode] = useState<IServiceNodeItem>();
   const formik = useFormik({
     initialValues: {
       canvasConfig: {

services/frontend/src/components/Project/index.tsx

@@ -5,7 +5,7 @@ import YAML from "yaml";
 import { PlusIcon } from "@heroicons/react/solid";
 import {
   IProjectPayload,
-  IClientNodeItem,
+  IServiceNodeItem,
   IServiceNodePosition,
   IProject
 } from "../../types";
@@ -41,7 +41,7 @@ export default function Project() {
   const { uuid } = useParams<{ uuid: string }>();
   const { height } = useWindowDimensions();
   const { data, error, isFetching } = useProject(uuid);
-  const stateNodesRef = useRef<Dictionary<IClientNodeItem>>();
+  const stateNodesRef = useRef<Dictionary<IServiceNodeItem>>();
   const stateConnectionsRef = useRef<[[string, string]] | []>();
 
   const [generatedCode, setGeneratedCode] = useState<string>();
@@ -49,8 +49,8 @@ export default function Project() {
   const [showModalCreateService, setShowModalCreateService] = useState(false);
   const [showVolumesModal, setShowVolumesModal] = useState(false);
   const [showNetworksModal, setShowNetworksModal] = useState(false);
-  const [nodeForEdit, setNodeForEdit] = useState<IClientNodeItem | null>(null);
+  const [nodeForEdit, setNodeForEdit] = useState<IServiceNodeItem | null>(null);
-  const [nodeForDelete, setNodeForDelete] = useState<IClientNodeItem | null>(
+  const [nodeForDelete, setNodeForDelete] = useState<IServiceNodeItem | null>(
     null
   );
   const [language, setLanguage] = useState("yaml");
@@ -216,7 +216,7 @@ export default function Project() {
     setNodes({ ...nodes, [clientNodeItem.key]: clientNodeItem });
   };
 
-  const onUpdateEndpoint = (nodeItem: IClientNodeItem) => {
+  const onUpdateEndpoint = (nodeItem: IServiceNodeItem) => {
     setNodes({ ...nodes, [nodeItem.key]: nodeItem });
   };
 
@@ -255,7 +255,7 @@ export default function Project() {
     }
   };
 
-  const onRemoveEndpoint = (node: IClientNodeItem) => {
+  const onRemoveEndpoint = (node: IServiceNodeItem) => {
     setNodes({ ...omit(nodes, node.key) });
     eventBus.dispatch("NODE_DELETED", { message: { node: node } });
   };
@@ -434,10 +434,10 @@ export default function Project() {
                     onConnectionDetached={(connectionData: any) =>
                       onConnectionDetached(connectionData)
                     }
-                    setNodeForEdit={(node: IClientNodeItem) =>
+                    setNodeForEdit={(node: IServiceNodeItem) =>
                       setNodeForEdit(node)
                     }
-                    setNodeForDelete={(node: IClientNodeItem) =>
+                    setNodeForDelete={(node: IServiceNodeItem) =>
                       setNodeForDelete(node)
                     }
                   />

services/frontend/src/components/useJsPlumb.ts

@@ -28,12 +28,12 @@ import {
 } from "../utils/options";
 import eventBus from "../events/eventBus";
 import { getConnections } from "../utils";
-import { IClientNodeItem } from "../types";
+import { IServiceNodeItem } from "../types";
 import { Dictionary, isEqual } from "lodash";
 import { IAnchor, CallbackFunction } from "../types";
 
 export const useJsPlumb = (
-  nodes: Dictionary<IClientNodeItem>,
+  nodes: Dictionary<IServiceNodeItem>,
   connections: Array<[string, string]>,
   onGraphUpdate: CallbackFunction,
   onNodeUpdate: CallbackFunction,
@@ -43,11 +43,11 @@ export const useJsPlumb = (
   (containerElement: HTMLDivElement) => void,
   (zoom: number) => void,
   (style: any) => void,
-  (node: IClientNodeItem) => void
+  (node: IServiceNodeItem) => void
 ] => {
   const [instance, setInstance] = useState<BrowserJsPlumbInstance>(null as any);
   const containerRef = useRef<HTMLDivElement>();
-  const stateRef = useRef<Dictionary<IClientNodeItem>>();
+  const stateRef = useRef<Dictionary<IServiceNodeItem>>();
   const instanceRef = useRef<BrowserJsPlumbInstance>();
   stateRef.current = nodes;
   instanceRef.current = instance;

services/frontend/src/types/index.ts

@@ -68,7 +68,7 @@ export interface ICanvasConfig {
 }
 
 export interface IGraphData {
-  nodes: IClientNodeItem[];
+  nodes: IServiceNodeItem[];
   connections: Dictionary<IFlatConnection>;
 }
 
@@ -329,7 +329,7 @@ export interface IDockerCompose {
   services: IService[];
 }
 
-export interface IClientNodeItem extends INodeItem {
+export interface IServiceNodeItem extends INodeItem {
   outputs: string[];
   canvasConfig: ICanvasConfig;
   serviceConfig: Partial<IService>;

services/frontend/src/utils/generators.ts

@@ -1,8 +1,12 @@
-import { IClientNodeItem, IGeneratePayload, ISaturatedService } from "../types";
+import {
+  IServiceNodeItem,
+  IGeneratePayload,
+  ISaturatedService
+} from "../types";
 import { Dictionary } from "lodash";
 
 const getServices = (
-  graphNodes: Dictionary<IClientNodeItem>
+  graphNodes: Dictionary<IServiceNodeItem>
 ): ISaturatedService[] => {
   const ret: ISaturatedService[] = [];
   for (const [, value] of Object.entries(graphNodes)) {

services/frontend/src/utils/index.ts

@@ -12,7 +12,7 @@ import {
 } from "lodash";
 import { LOCAL_STORAGE } from "../constants";
 import {
-  IClientNodeItem,
+  IServiceNodeItem,
   INodeLibraryItem,
   INodeGroup,
   ICanvasConfig,
@@ -31,8 +31,8 @@ export function ensure<T>(
   return argument;
 }
 
-export const parseSingleNode = (configurationStr: string): IClientNodeItem => {
+export const parseSingleNode = (configurationStr: string): IServiceNodeItem => {
-  let node: IClientNodeItem = {} as IClientNodeItem;
+  let node: IServiceNodeItem = {} as IServiceNodeItem;
   const configurationObj = JSON.parse(configurationStr);
 
   if (isPlainObject(configurationObj)) {
@@ -49,8 +49,8 @@ export const formatName = (name: string): string => {
 
 export const parseConfiguration = (
   configurationStr: string
-): IClientNodeItem[] => {
+): IServiceNodeItem[] => {
-  let nodes: IClientNodeItem[] = [];
+  let nodes: IServiceNodeItem[] = [];
   const configurationObj = JSON.parse(configurationStr);
 
   if (isPlainObject(configurationObj)) {
@@ -107,9 +107,9 @@ export const attachUUID = (key: string): string => {
 };
 
 export const getClientNodeItem = (
-  nodeItem: IClientNodeItem,
+  nodeItem: IServiceNodeItem,
   library: INodeLibraryItem
-): IClientNodeItem => {
+): IServiceNodeItem => {
   const uniqueKey = attachUUID(nodeItem.key);
 
   return {
@@ -151,9 +151,9 @@ export const getConnections = (
 };
 
 export const getClientNodesAndConnections = (
-  nodeItems: IClientNodeItem[],
+  nodeItems: IServiceNodeItem[],
   sections: INodeGroup[]
-): Dictionary<IClientNodeItem> => {
+): Dictionary<IServiceNodeItem> => {
   if (!Array.isArray(nodeItems) || !Array.isArray(sections)) {
     return {};
   }

services/frontend/src/utils/position.ts

@@ -1,8 +1,8 @@
 import * as d3 from "d3";
-import { IClientNodeItem } from "../types";
+import { IServiceNodeItem } from "../types";
 import { getNodeKeyFromConnectionId } from "./index";
 
-interface INodeItemWithParent extends IClientNodeItem {
+interface INodeItemWithParent extends IServiceNodeItem {
   parent: string;
 }
 
@@ -10,7 +10,7 @@ const nodeWidth = 150;
 const nodeHeight = 60;
 
 export const getHierarchyTree = (
-  nodes: IClientNodeItem[]
+  nodes: IServiceNodeItem[]
 ): d3.HierarchyPointNode<INodeItemWithParent> => {
   const data = nodes.map((node): INodeItemWithParent => {
     return {
@@ -48,9 +48,9 @@ export const getHierarchyTree = (
 };
 
 export const getNodesPositions = (
-  nodes: IClientNodeItem[]
+  nodes: IServiceNodeItem[]
-): [IClientNodeItem[], number, number] => {
+): [IServiceNodeItem[], number, number] => {
-  const nodeWithPosition: IClientNodeItem[] = [];
+  const nodeWithPosition: IServiceNodeItem[] = [];
   const tree = getHierarchyTree(nodes);
   let x0 = Infinity;
   let x1 = -x0;