Skip to content

feat(dashboard/redis): syntax-highlight json values and fix inspector display#17

Merged
simota merged 1 commit into
mainfrom
feat/dashboard-redis-json-highlight
May 19, 2026
Merged

feat(dashboard/redis): syntax-highlight json values and fix inspector display#17
simota merged 1 commit into
mainfrom
feat/dashboard-redis-json-highlight

Conversation

@simota
Copy link
Copy Markdown
Owner

@simota simota commented May 19, 2026

Summary

  • Redis Inspector の Hash テーブルで VALUE 列が画面右端で省略表示されていた問題を修正
  • Redshift Inspector のパネルがワークスペース内で狭く詰まっていた問題を修正
  • Redis Inspector の JSON 値(Hash の VALUE、String の Pretty モード)にシンタックスハイライトを追加

Background

Redis Inspector の Hash 表示で長い JSON 値が ,"ses…" の形で省略され、データが確認できない状態だった。原因はグローバル code 要素に効いていた white-space: nowraptext-overflow: ellipsis がテーブルセル内の <code> にも適用され、word-break: break-all 等の上書きでは制御できていなかった点。あわせて、Redshift Inspector が DynamoDB 用の 3 列レイアウト(260〜360px の狭い 3 列目)を流用していたため、SQL エディタや結果テーブルが押し潰されていた。

Changes

  • redshift: dynamodb-workspace から redshift-workspace 専用クラスに分離。Clusters と Catalog を上段、Inspector を下段にフル幅で配置。
  • redis (display fix): .redis-hash-table code でグローバル codenowrap / ellipsis / overflow:hiddennormal / clip / visible で上書き。.redis-hash-tabletable-layout: fixed と Field 列の幅指定を追加。.redis-inspector / .redis-inspector-sectionmin-width: 0 を追加し、flex item の min-width: auto による table-layout: fixed 無効化を抑止。
  • redis (feature): jsonHighlight ユーティリティ(依存追加なし、~60 行の正規表現ベース)を新規追加。Hash の VALUE が JSON ならダーク背景のコードブロックに色付き整形表示。String 値の Pretty モードでも同じハイライタを適用。重複していた tryFormatJSON を整理。

Vite ビルド成果物 (internal/dashboard/assets/react/) も同梱。

Test plan

  • cd web/dashboard && npm run typecheck 通過
  • cd web/dashboard && npm run build 成功(CSS +0.76KB / JS +0.87KB)
  • go test ./internal/dashboard/... 通過
  • go test ./internal/services/redis/... 通過
  • go vet ./... 通過
  • devcloud up で起動して /dashboard/redis を開き、Hash キーの VALUE 列が折り返されて全文が見え、JSON が色付きで表示されることを確認
  • /dashboard/redshift で Inspector がフル幅で表示され、SQL エディタと結果テーブルが収まることを確認

Risk

Low — フロントエンドのみの変更、API 互換性に影響なし、依存追加なし。

… display

Redis Inspector で Hash の VALUE 列が画面右端で省略表示されていた問題を
修正し、JSON 値にシンタックスハイライトを追加。Redshift Inspector の
パネル幅もレイアウト調整で広げる。

- redshift: dynamodb-workspace から redshift-workspace 専用クラスに分離し、
  Clusters と Catalog の下段に Inspector をフル幅で配置。
- redis: グローバル <code> の white-space: nowrap / text-overflow: ellipsis
  をテーブルセル内 <code> で上書きし、長い値がセル内で折り返されるように。
- redis: redis-inspector / redis-inspector-section に min-width: 0 を追加
  し、flex item の min-width: auto による table-layout: fixed 無効化を抑止。
- redis: jsonHighlight ユーティリティを追加し、Hash の VALUE が JSON の
  ときはダーク背景のコードブロックに色付き整形表示。String 値の Pretty
  モードでも同じハイライタを適用。

Vite ビルド成果物 (internal/dashboard/assets/react/) も更新。
@simota simota merged commit 0119a8a into main May 19, 2026
4 checks passed
@simota simota deleted the feat/dashboard-redis-json-highlight branch May 19, 2026 08:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant