From cf49dfb15cf0c57a2ad470e1f70bfa2a2d2e2978 Mon Sep 17 00:00:00 2001
From: Artem Golub <artemgolub@gmail.com>
Date: Sun, 17 Jul 2022 11:03:45 +0300
Subject: [PATCH] fix: truncate long labels in nodes

---
 services/frontend/src/components/Canvas/ServiceNode.tsx | 9 ++++++---
 services/frontend/src/components/Canvas/VolumeNode.tsx  | 7 +++++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/services/frontend/src/components/Canvas/ServiceNode.tsx b/services/frontend/src/components/Canvas/ServiceNode.tsx
index 2bedfbe..cbd3d71 100644
--- a/services/frontend/src/components/Canvas/ServiceNode.tsx
+++ b/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>
diff --git a/services/frontend/src/components/Canvas/VolumeNode.tsx b/services/frontend/src/components/Canvas/VolumeNode.tsx
index 6551be2..759f2dd 100644
--- a/services/frontend/src/components/Canvas/VolumeNode.tsx
+++ b/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>