[Mold][랙 시각화] 1차 UX 개선 및 버그 수정

engine/schema/src/main/resources/META-INF/db/schema-Diplo-After.sql

@@ -55,14 +55,20 @@ CREATE TABLE IF NOT EXISTS `rackml_config` (
     `id` bigint unsigned NOT NULL AUTO_INCREMENT COMMENT 'primary key',
     `zone_id` bigint unsigned NOT NULL COMMENT 'foreign key to data_center.id',
     `name` varchar(100) NOT NULL COMMENT 'config name (e.g. default)',
-    `content` text NOT NULL COMMENT 'RackML content',
+    `content` mediumtext NOT NULL COMMENT 'RackML content',
     `updated_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 'last update time',
 PRIMARY KEY (`id`),
 UNIQUE KEY `uc_rackml_zone_name` (`zone_id`, `name`),
 CONSTRAINT `fk_rackml__zone` FOREIGN KEY (`zone_id`) REFERENCES `data_center` (`id`)
                                                           ON DELETE RESTRICT
                                                           ON UPDATE CASCADE
 ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb3;
+CALL `cloud`.`IDEMPOTENT_CHANGE_COLUMN`(
+    'cloud.rackml_config',
+    'content',
+    'content',
+    'MEDIUMTEXT NOT NULL COMMENT ''RackML content'''
+);
 CALL `cloud`.`IDEMPOTENT_ADD_COLUMN`('cloud.host', 'migration_ip', 'VARCHAR(45)');
 
 -- backup offering table update

plugins/integrations/rack-management/src/main/java/com/cloud/rack/RackLayoutVO.java

@@ -44,7 +44,7 @@ public class RackLayoutVO implements InternalIdentity {
     @Column(name = "name")
     private String name;
 
-    @Column(name = "content", length = 65535)
+    @Column(name = "content", length = 1048576)
     private String content;
 
     @Temporal(TemporalType.TIMESTAMP)
@@ -70,4 +70,4 @@ public RackLayoutVO(Long zoneId, String name, String content) {
     public String getContent() { return content; }
     public void setContent(String content) { this.content = content; }
     public Date getUpdatedAt() { return updatedAt; }
-}
+}

plugins/integrations/rack-management/src/main/java/org/apache/cloudstack/api/command/admin/rack/UpdateRackLayoutCmd.java

@@ -56,8 +56,8 @@ public class UpdateRackLayoutCmd extends BaseCmd {
             description = "name of the layout. Defaults to 'default' if not specified.")
     private String name;
 
-    // JSON 길이가 길 수 있으므로 length를 넉넉히 잡아줍니다.
-    @Parameter(name = "content", type = CommandType.STRING, required = true, length = 65535,
+    // Keep the API below the MEDIUMTEXT capacity while allowing multi-rack layouts.
+    @Parameter(name = "content", type = CommandType.STRING, required = true, length = 1048576,
             description = "JSON string representing the rack diagram layout")
     private String content;
 
@@ -98,4 +98,4 @@ public void execute() throws ServerApiException {
         response.setResponseName(getCommandName());
         setResponseObject(response);
     }
-}
+}

ui/public/locales/en.json

@@ -5285,6 +5285,8 @@
 "rackDiagram.msg.noChangesToSave": "No changes to save.",
 "rackDiagram.msg.rackSaved": "Rack layout saved.",
 "rackDiagram.msg.rackSaveFailed": "Failed to save rack layout.",
+"rackDiagram.msg.rackCountExceeded": "You can create up to {max} racks per zone.",
+"rackDiagram.msg.layoutSizeExceeded": "Rack layout exceeds the maximum save size ({max}). Remove racks or reduce device details.",
 "rackDiagram.msg.noRackToSaveImage": "No rack layout to save.",
 "rackDiagram.msg.exportingImage": "Converting image...",
 "rackDiagram.msg.imageSaved": "Image saved.",
@@ -5344,5 +5346,7 @@
 "rackDiagram.totalFreeU": "Free U",
 "rackDiagram.cardView": "Card",
 "rackDiagram.listView": "List",
-"rackDiagram.countSuffix": ""
+"rackDiagram.countSuffix": "",
+"rackDiagram.expandView": "Expand rack visualization",
+"rackDiagram.restoreSplitView": "Show summary panel"
 }

ui/public/locales/ko_KR.json

@@ -5288,6 +5288,8 @@
 "rackDiagram.msg.noChangesToSave": "\uc800\uc7a5\ud560 \ubcc0\uacbd \uc0ac\ud56d\uc774 \uc5c6\uc2b5\ub2c8\ub2e4.",
 "rackDiagram.msg.rackSaved": "\ub799 \uad6c\uc131\uc774 \uc800\uc7a5\ub418\uc5c8\uc2b5\ub2c8\ub2e4.",
 "rackDiagram.msg.rackSaveFailed": "\ub799 \uad6c\uc131 \uc800\uc7a5\uc5d0 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.rackCountExceeded": "Zone\ub2f9 \ub799\uc740 \ucd5c\ub300 {max}\uac1c\uae4c\uc9c0 \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.",
+"rackDiagram.msg.layoutSizeExceeded": "\ub799 \uad6c\uc131\uc774 \ucd5c\ub300 \uc800\uc7a5 \ud06c\uae30({max})\ub97c \ucd08\uacfc\ud588\uc2b5\ub2c8\ub2e4. \ub799\uc744 \uc0ad\uc81c\ud558\uac70\ub098 \uc7a5\ube44 \uc0c1\uc138 \uc815\ubcf4\ub97c \uc904\uc5ec\uc8fc\uc138\uc694.",
 "rackDiagram.msg.noRackToSaveImage": "\uc800\uc7a5\ud560 \ub799 \uad6c\uc131\uc774 \uc5c6\uc2b5\ub2c8\ub2e4.",
 "rackDiagram.msg.exportingImage": "\uc774\ubbf8\uc9c0 \ubcc0\ud658 \uc911...",
 "rackDiagram.msg.imageSaved": "\uc774\ubbf8\uc9c0 \uc800\uc7a5\uc774 \uc644\ub8cc\ub418\uc5c8\uc2b5\ub2c8\ub2e4.",
@@ -5347,5 +5349,7 @@
 "rackDiagram.totalFreeU": "\uc5ec\uc720 U",
 "rackDiagram.cardView": "\uce74\ub4dc\ud615",
 "rackDiagram.listView": "\ubaa9\ub85d\ud615",
-"rackDiagram.countSuffix": "\uac1c"
+"rackDiagram.countSuffix": "\uac1c",
+"rackDiagram.expandView": "\ub799 \uc2dc\uac01\ud654 \ud655\uc7a5",
+"rackDiagram.restoreSplitView": "\uc694\uc57d \uc601\uc5ed \ud45c\uc2dc"
 }

ui/src/views/infra/InfraSummary.vue

@@ -148,8 +148,8 @@
       </a-card>
     </a-col>
     <a-col :xs="24">
-      <div class="infra-summary-layout">
-        <div class="summary-cards-pane">
+      <div class="infra-summary-layout" :class="{ 'is-rack-expanded': rackVisualizationExpanded }">
+        <div class="summary-cards-pane" :aria-hidden="rackVisualizationExpanded">
           <div
             v-for="group in visibleSummaryGroups"
             :key="group.key"
@@ -181,8 +181,10 @@
         </div>
         <div class="rack-visualization-pane">
           <a-card :bordered="false" class="rack-visualization-card">
-            <template #title>랙 시각화</template>
-            <rack-diagram-tab />
+            <template #title>{{ $t('rackDiagram.title') }}</template>
+            <rack-diagram-tab
+              @toggle-expand="rackVisualizationExpanded = $event"
+            />
           </a-card>
         </div>
       </div>
@@ -211,6 +213,7 @@ export default {
   data () {
     return {
       loading: true,
+      rackVisualizationExpanded: false,
       routes: {},
       sections: ['zones', 'pods', 'clusters', 'hosts', 'storagepools', 'imagestores', 'objectstores', 'systemvms', 'routers', 'cpusockets', 'managementservers', 'alerts', 'ilbvms', 'metrics'],
       summaryGroups: [
@@ -401,15 +404,46 @@ export default {
     display: flex;
     align-items: flex-start;
     gap: 12px;
+    transition: gap 0.28s cubic-bezier(0.22, 1, 0.36, 1);
   }
   .summary-cards-pane {
     width: 34%;
+    max-width: 34%;
     flex: 0 0 34%;
+    max-height: 5000px;
     padding: 10px;
+    overflow: hidden;
     border-radius: 12px;
     border: 1px solid #dfe3e8;
     background: linear-gradient(180deg, #f8f9fb 0%, #f3f5f8 100%);
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
+    transition:
+      width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+      max-width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+      flex-basis 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+      max-height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+      padding 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+      opacity 0.2s ease,
+      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+      visibility 0s linear;
+  }
+
+  .infra-summary-layout.is-rack-expanded {
+    gap: 0;
+  }
+
+  .infra-summary-layout.is-rack-expanded .summary-cards-pane {
+    width: 0;
+    max-width: 0;
+    flex: 0 0 0;
+    max-height: 0;
+    padding: 0;
+    border-width: 0;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transform: translateX(-16px);
+    transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, 0s, 0.28s;
   }
   .summary-group {
     padding: 10px 10px 0;
@@ -481,6 +515,14 @@ export default {
     width: 66%;
     flex: 0 0 66%;
     min-width: 320px;
+    transition:
+      width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+      flex-basis 0.28s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  .infra-summary-layout.is-rack-expanded .rack-visualization-pane {
+    width: 100%;
+    flex: 1 1 100%;
+    min-width: 0;
   }
   .chart-card-inner {
     text-align: center;
@@ -528,10 +570,19 @@ export default {
     .summary-cards-pane,
     .rack-visualization-pane {
       width: 100%;
+      max-width: 100%;
       flex: 1 1 100%;
       min-width: 0;
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .infra-summary-layout,
+    .summary-cards-pane,
+    .rack-visualization-pane {
+      transition: none;
+    }
+  }
   .intermediate-certificate {
     opacity: 1;
     transform: none;