feat: support swapping direction of truncation on resource names (#8671)

Signed-off-by: Regina Scott <[email protected]> Co-authored-by: Michael Crenshaw <[email protected]>
argoproj · Apr 9, 2022 · 60eb2af · 60eb2af
1 parent 6b783af
commit 60eb2af
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 7 deletions.
diff --git a/ui/src/app/applications/components/application-details/application-details.tsx b/ui/src/app/applications/components/application-details/application-details.tsx
@@ -35,6 +35,7 @@ interface ApplicationDetailsState {
     groupedResources?: ResourceStatus[];
     slidingPanelPage?: number;
     filteredGraph?: any[];
+    truncateNameOnRight?: boolean;
 }
 
 interface FilterInput {
@@ -69,7 +70,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{nam
 
     constructor(props: RouteComponentProps<{name: string}>) {
         super(props);
-        this.state = {page: 0, groupedResources: [], slidingPanelPage: 0, filteredGraph: []};
+        this.state = {page: 0, groupedResources: [], slidingPanelPage: 0, filteredGraph: [], truncateNameOnRight: false};
     }
 
     private get showOperationState() {
@@ -225,6 +226,9 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{nam
                             const setFilterGraph = (filterGraph: any[]) => {
                                 this.setState({filteredGraph: filterGraph});
                             };
+                            const toggleNameDirection = () => {
+                                this.setState({truncateNameOnRight: !this.state.truncateNameOnRight});
+                            };
                             return (
                                 <div className='application-details'>
                                     <Page
@@ -289,6 +293,19 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{nam
                                             {((pref.view === 'tree' || pref.view === 'network') && (
                                                 <Filters pref={pref} tree={tree} resourceNodes={this.state.filteredGraph} onSetFilter={setFilter} onClearFilter={clearFilter}>
                                                     <div className='graph-options-panel'>
+                                                        <a
+                                                            className={`group-nodes-button`}
+                                                            onClick={() => {
+                                                                toggleNameDirection();
+                                                            }}
+                                                            title={this.state.truncateNameOnRight ? 'Truncate resource name right' : 'Truncate resource name left'}>
+                                                            <i
+                                                                className={classNames({
+                                                                    'fa fa-align-right': this.state.truncateNameOnRight,
+                                                                    'fa fa-align-left': !this.state.truncateNameOnRight
+                                                                })}
+                                                            />
+                                                        </a>
                                                         {pref.view === 'tree' && (
                                                             <a
                                                                 className={`group-nodes-button group-nodes-button${!pref.groupNodes ? '' : '-on'}`}
@@ -322,6 +339,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{nam
                                                         onClearFilter={clearFilter}
                                                         onGroupdNodeClick={groupdedNodeIds => openGroupNodeDetails(groupdedNodeIds)}
                                                         zoom={pref.zoom}
+                                                        nameDirection={this.state.truncateNameOnRight}
                                                         filters={pref.resourceFilter}
                                                         setTreeFilterGraph={setFilterGraph}
                                                     />

diff --git a/ui/src/app/applications/components/application-resource-tree/application-resource-tree.scss b/ui/src/app/applications/components/application-resource-tree/application-resource-tree.scss
@@ -168,12 +168,20 @@
     }
 
     &__node-content {
-        padding: 10px;
+        padding: 10px 20px 10px 10px;
         line-height: 0.95;
+        display: flex;
+        flex-direction: column;
     }
 
     &__node-title {
         font-size: 0.8em;
+        padding-bottom: 5px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        text-align: left;
+
     }
 
     &__node-status-icon {
@@ -182,4 +190,11 @@
             margin-right: 2px;
         }
     }
+    &__direction-left {
+        direction: ltl;
+    }
+    &__direction-right {
+        direction: rtl;
+    }
+
 }
diff --git a/ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx b/ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx
@@ -46,6 +46,7 @@ export interface ApplicationResourceTreeProps {
     zoom: number;
     filters?: string[];
     setTreeFilterGraph?: (filterGraph: any[]) => void;
+    nameDirection: boolean;
 }
 
 interface Line {
@@ -329,7 +330,12 @@ function renderResourceNode(props: ApplicationResourceTreeProps, id: string, nod
                 'application-resource-tree__node--orphaned': node.orphaned
             })}
             title={describeNode(node)}
-            style={{left: node.x, top: node.y, width: node.width, height: node.height}}>
+            style={{
+                left: node.x,
+                top: node.y,
+                width: node.width,
+                height: node.height
+            }}>
             {!appNode && <NodeUpdateAnimation resourceVersion={node.resourceVersion} />}
             <div
                 className={classNames('application-resource-tree__node-kind-icon', {
@@ -340,9 +346,14 @@ function renderResourceNode(props: ApplicationResourceTreeProps, id: string, nod
                 {!rootNode && <div className='application-resource-tree__node-kind'>{ResourceLabel({kind: node.kind})}</div>}
             </div>
             <div className='application-resource-tree__node-content'>
-                <span className='application-resource-tree__node-title'>{node.name}</span>
-                <br />
-                <span
+                <div
+                    className={classNames('application-resource-tree__node-title', {
+                        'application-resource-tree__direction-right': props.nameDirection,
+                        'application-resource-tree__direction-left': !props.nameDirection
+                    })}>
+                    {node.name}
+                </div>
+                <div
                     className={classNames('application-resource-tree__node-status-icon', {
                         'application-resource-tree__node-status-icon--offset': rootNode
                     })}>
@@ -359,7 +370,7 @@ function renderResourceNode(props: ApplicationResourceTreeProps, id: string, nod
                         </Consumer>
                     )}
                     <ApplicationURLs urls={rootNode ? extLinks : node.networkingInfo && node.networkingInfo.externalURLs} />
-                </span>
+                </div>
             </div>
             <div className='application-resource-tree__node-labels'>
                 {node.createdAt || rootNode ? (