problems panel: narrow layout for details

src/panel-triggers/components/Problems.tsx

@@ -12,6 +12,13 @@ export interface ProblemListProps {
 }
 
 export class ProblemList extends PureComponent<ProblemListProps, any> {
+  rootWidth: number;
+  rootRef: any;
+
+  setRootRef = ref => {
+    this.rootRef = ref;
+  }
+
   buildColumns() {
     const result = [];
     const options = this.props.panelOptions;
@@ -41,17 +48,18 @@ export class ProblemList extends PureComponent<ProblemListProps, any> {
   }
 
   render() {
-    console.log(this.props.problems, this.props.panelOptions);
+    // console.log(this.props.problems, this.props.panelOptions);
     const columns = this.buildColumns();
-    // const data = this.props.problems.map(p => [p.host, p.description]);
+    this.rootWidth = this.rootRef && this.rootRef.clientWidth;
+
     return (
-      <div className="panel-problems">
+      <div className="panel-problems" ref={this.setRootRef}>
         <ReactTable
           data={this.props.problems}
           columns={columns}
           defaultPageSize={10}
           loading={this.props.loading}
-          SubComponent={props => <ProblemDetails {...props} />}
+          SubComponent={props => <ProblemDetails rootWidth={this.rootWidth} {...props} />}
         />
       </div>
     );
@@ -244,7 +252,7 @@ function ProblemStatusBar(props: ProblemStatusBarProps) {
       <ProblemStatusBarItem icon="tag" fired={closeByTag} tooltip={`OK event closes problems matched to tag: ${problem.correlation_tag}`} />
       <ProblemStatusBarItem icon="question-circle" fired={stateUnknown} tooltip="Current trigger state is unknown" />
       <ProblemStatusBarItem icon="warning" fired={error} tooltip={problem.error} />
-      <ProblemStatusBarItem icon="window-close-o" fired={manualClose} tooltip="Manual close event" />
+      <ProblemStatusBarItem icon="window-close-o" fired={manualClose} tooltip="Manual close problem" />
     </div>
   );
 }
@@ -289,11 +297,10 @@ class ProblemDetails extends PureComponent<any, any> {
 
   render() {
     const problem = this.props.original as Trigger;
+    const rootWidth = this.props.rootWidth;
     const displayClass = this.state.show ? 'show' : '';
-    let groups = "";
-    if (problem && problem.groups) {
-      groups = problem.groups.map(g => g.name).join(', ');
-    }
+    const wideLayout = rootWidth > 1000;
+
     return (
       <div className={`problem-details-container ${displayClass}`}>
         <div className="problem-details">
@@ -317,8 +324,14 @@ class ProblemDetails extends PureComponent<any, any> {
           <div className="problem-tags">
             {problem.tags && problem.tags.map(tag => <EventTag key={tag.tag + tag.value} tag={tag} />)}
           </div>
+          {problem.acknowledges && !wideLayout &&
+            <div className="problem-ack-container">
+              <h6><FAIcon icon="reply-all" /> Acknowledges</h6>
+              <AcknowledgesList acknowledges={problem.acknowledges} />
+            </div>
+          }
         </div>
-        {problem.acknowledges &&
+        {problem.acknowledges && wideLayout &&
           <div className="problem-details-middle">
             <h6><FAIcon icon="reply-all" /> Acknowledges</h6>
             <AcknowledgesList acknowledges={problem.acknowledges} />

src/sass/_panel-problems.scss

@@ -167,6 +167,7 @@
       .problem-details-row {
         display: flex;
         margin-bottom: 0.6rem;
+        min-height: 3rem;
 
         .problem-value-container {
           flex: 1 0 auto;
@@ -176,7 +177,7 @@
       .problem-details {
         position: relative;
         flex: 10 0 auto;
-        padding: 0.5rem 1rem;
+        padding: 0.5rem 1rem 0.5rem 1.2rem;
         display: flex;
         flex-direction: column;
       }
@@ -193,7 +194,7 @@
 
       .problem-tags {
         padding-top: 0.6rem;
-        padding-bottom: 0.6rem;
+        padding-bottom: 0.8rem;
         margin-top: auto;
       }
 
@@ -243,7 +244,7 @@
 
       .problem-details-middle {
         flex: 1 0 auto;
-        padding: 0.5rem 1rem;
+        padding: 0.6rem 1rem;
         // border: 1px solid $dark-4;
         border-width: 0 1px;
         border-style: solid;
@@ -251,6 +252,12 @@
         overflow: auto;
       }
 
+      .problem-ack-container {
+        padding: 0.8rem 0;
+        border-top: 2px solid $dark-4;
+        overflow: auto;
+      }
+
       .problem-ack-list {
         display: flex;
         overflow: auto;