github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-07-28 01:31:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Trim long container names and labels in details

Browse Source 
fixes #418
This commit is contained in:
David Kaltschmidt
2015-09-02 17:45:07 +02:00
parent e8ec3ed5fc
commit 9b8a314742
3 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
client/app/scripts/components/node-details-table.js
View File

@@ -14,11 +14,15 @@ const NodeDetailsTable = React.createClass({
{this.props.rows.map(function(row) {
return (
<div className="node-details-table-row">
<div className="node-details-table-row-key">{row.key}</div>
<div className="node-details-table-row-key truncate" title={row.key}>{row.key}</div>
{isNumeric && <div className="node-details-table-row-value-scalar">{row.value_major}</div>}
{isNumeric && <div className="node-details-table-row-value-unit">{row.value_minor}</div>}
{!isNumeric && <div className="node-details-table-row-value-major truncate">{row.value_major}</div>}
{!isNumeric && row.value_minor && <div className="node-details-table-row-value-minor truncate">{row.value_minor}</div>}
{!isNumeric && <div className="node-details-table-row-value-major truncate" title={row.value_major}>
{row.value_major}
</div>}
{!isNumeric && row.value_minor && <div className="node-details-table-row-value-minor truncate" title={row.value_minor}>
{row.value_minor}
</div>}
</div>
);
})}

8
client/app/scripts/components/node-details.js
View File

@@ -28,7 +28,7 @@ const NodeDetails = React.createClass({
return (
<div className="node-details">
<div className="node-details-header node-details-header-notavailable">
<h2 className="node-details-header-label truncate">
<h2 className="node-details-header-label">
n/a
</h2>
<div className="node-details-header-label-minor truncate">
@@ -64,10 +64,12 @@ const NodeDetails = React.createClass({
return (
<div className="node-details">
<div className="node-details-header" style={style}>
<h2 className="node-details-header-label truncate">
<h2 className="node-details-header-label truncate" title={details.label_major}>
{details.label_major}
</h2>
<div className="node-details-header-label-minor truncate">{details.label_minor}</div>
<div className="node-details-header-label-minor truncate" title={details.label_minor}>
{details.label_minor}
</div>
</div>
<div className="node-details-content">

7
client/app/styles/main.less
View File

@@ -310,13 +310,16 @@ body {
&-table {
margin-bottom: 8px;
&:last-child {
margin-bottom: 1em;
}
&-title {
text-transform: uppercase;
margin-bottom: 0;
margin-bottom: 0.25em;
color: @text-secondary-color;
font-size: 100%;
line-height: 125%;
}
&-row {