External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-06 11:11:07 -03:30
Code Issues Packages Projects Releases Wiki Activity

Truncate long host names in graph, show full name in tooltip.

Browse Source
This commit is contained in:
Kia Lam
2022-02-08 20:24:42 -08:00
parent a6bc0d4222
commit 4235bf67f8
2 changed files with 10 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
awx/ui/src/screens/TopologyView/MeshGraph.js
View File

@@ -8,6 +8,7 @@ import * as d3 from 'd3';
import Legend from './Legend'; import Legend from './Legend';
import Tooltip from './Tooltip'; import Tooltip from './Tooltip';
import ContentLoading from '../../components/ContentLoading'; import ContentLoading from '../../components/ContentLoading';
import { truncateString } from '../../util/strings';
const Loader = styled(ContentLoading)` const Loader = styled(ContentLoading)`
height: 100%; height: 100%;
@@ -75,6 +76,7 @@ function MeshGraph({ showLegend, zoom }) {
const defaultNodeHighlightColor = '#16407C'; const defaultNodeHighlightColor = '#16407C';
const defaultNodeLabelColor = 'white'; const defaultNodeLabelColor = 'white';
const defaultFontSize = '12px'; const defaultFontSize = '12px';
const labelMaxLen = 15;
const getWidth = () => { const getWidth = () => {
let width; let width;
// This is in an a try/catch due to an error from jest. // This is in an a try/catch due to an error from jest.
@@ -245,7 +247,7 @@ function MeshGraph({ showLegend, zoom }) {
healthy: '\u2713', healthy: '\u2713',
error: '\u0021', error: '\u0021',
}; };
return `${stateKey[nodeState]} ${name}`; return `${stateKey[nodeState]} ${truncateString(name, labelMaxLen)}`;
} }
function renderNodeType(nodeType) { function renderNodeType(nodeType) {

7
awx/ui/src/util/strings.js
View File

@@ -17,3 +17,10 @@ export const stringIsUUID = (value) =>
/^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/gi.test( /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/gi.test(
value value
); );
export const truncateString = (str, num) => {
if (str.length <= num) {
return str;
}
return `${str.slice(0, num)}...`;
};