External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-13 11:00:03 -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
Show Stats 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 Tooltip from './Tooltip';
import ContentLoading from '../../components/ContentLoading';
import { truncateString } from '../../util/strings';
const Loader = styled(ContentLoading)`
height: 100%;
@ -75,6 +76,7 @@ function MeshGraph({ showLegend, zoom }) {
const defaultNodeHighlightColor = '#16407C';
const defaultNodeLabelColor = 'white';
const defaultFontSize = '12px';
const labelMaxLen = 15;
const getWidth = () => {
let width;
// This is in an a try/catch due to an error from jest.
@ -245,7 +247,7 @@ function MeshGraph({ showLegend, zoom }) {
healthy: '\u2713',
error: '\u0021',
};
return `${stateKey[nodeState]} ${name}`;
return `${stateKey[nodeState]} ${truncateString(name, labelMaxLen)}`;
}
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(
value
);
export const truncateString = (str, num) => {
if (str.length <= num) {
return str;
}
return `${str.slice(0, num)}...`;
};