fix: truncate long labels in nodes

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

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { ServerIcon } from "@heroicons/react/outline";
 import { truncateStr } from "../../utils";
 import { IServiceNodeItem, CallbackFunction } from "../../types";
 import eventBus from "../../events/eventBus";
@@ -53,19 +54,21 @@ export default function ServiceNode(props: INodeProps) {
           }}
         ></Popover>
       )}
-      <div className="node-label w-full py-2 px-4">
+      <div className="relative node-label w-full py-2 px-4">
         <>
           {node.canvasConfig.service_name && (
             <div className="text-sm font-semibold overflow-x-hidden">
-              {truncateStr(node.canvasConfig.service_name, 10)}
+              {truncateStr(node.canvasConfig.service_name, 12)}
             </div>
           )}
 
           {node.serviceConfig.container_name && (
             <div className="text-xs text-gray-500 overflow-x-hidden">
-              {truncateStr(node.serviceConfig.container_name, 10)}
+              {truncateStr(node.serviceConfig.container_name, 20)}
             </div>
           )}
+
+          <ServerIcon className="w-3 h-3 text-gray-600 absolute top-2 right-2" />
         </>
       </div>
     </div>

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

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { DatabaseIcon } from "@heroicons/react/outline";
 import { truncateStr } from "../../utils";
 import { IVolumeNodeItem, CallbackFunction } from "../../types";
 import eventBus from "../../events/eventBus";
@@ -53,13 +54,15 @@ export default function VolumeNode(props: INodeProps) {
           }}
         ></Popover>
       )}
-      <div className="node-label w-full py-2 px-4">
+      <div className="relative node-label w-full py-2 px-4">
         <>
           {node.volumeConfig.name && (
             <div className="text-sm font-semibold overflow-x-hidden">
-              {truncateStr(node.volumeConfig.name, 10)}
+              {truncateStr(node.volumeConfig.name, 20)}
             </div>
           )}
+
+          <DatabaseIcon className="w-3 h-3 text-gray-600 absolute top-2 right-2" />
         </>
       </div>
     </div>