github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-08-18 11:56:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #429 from weaveworks/413-418-trim

Browse Source 
Trim long container names and labels in details
This commit is contained in:
David
2015-09-02 18:54:29 +02:00
parent fa05e9bb9e e08d533b72
commit 37e11d32d6
3 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/app/scripts/components/node-details-table.js
+9 -5
View File
@@ -7,18 +7,22 @@ const NodeDetailsTable = React.createClass({
return (
<div className="node-details-table">
<h4 className="node-details-table-title">
<h4 className="node-details-table-title truncate" title={this.props.title}>
{this.props.title}
</h4>
{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={row.key + row.value_major}>
<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>
);
})}
client/app/scripts/components/node-details.js
+8 -4
View File
@@ -1,3 +1,4 @@
const _ = require('lodash');
const React = require('react');
const NodeDetailsTable = require('./node-details-table');
@@ -28,7 +29,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,15 +65,18 @@ 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">
{details.tables.map(function(table) {
return <NodeDetailsTable title={table.title} rows={table.rows} isNumeric={table.numeric} />;
const key = _.snakeCase(table.title);
return <NodeDetailsTable title={table.title} key={key} rows={table.rows} isNumeric={table.numeric} />;
})}
</div>
</div>
client/app/styles/main.less
+3 -1
View File
@@ -310,7 +310,9 @@ body {
&-table {
margin-bottom: 8px;
&:last-child {
margin-bottom: 1em;
}
&-title {
text-transform: uppercase;