1 files changed, 46 insertions, 9 deletions

diff --git a/ui/app/components/main_panel/section_layout.js b/ui/app/components/main_panel/section_layout.js
index e7c6f2ab..10c1bc1d 100644
--- a/ui/app/components/main_panel/section_layout.js
+++ b/ui/app/components/main_panel/section_layout.js
@@ -4,13 +4,18 @@
 //
 
 import React from 'react'
+import { Button, Glyphicon } from 'react-bootstrap'
 
 export default class SectionLayout extends React.Component {
 
   static get defaultProps() {return{
-    icon: null,
-    buttons: null,
-    status: null,
+    icon: null,       // icon name
+    buttons: null,    // button content
+    status: null,     // must be one of: on, off, unknown, wait, disabled
+    header: null,     // the first line content
+    body: null,       // expanded content
+    message: null,    // alert content
+    onExpand: null,   // callback
     className: "",
     style: {}
   }}
@@ -24,7 +29,21 @@ export default class SectionLayout extends React.Component {
     let status = null
     let icon = null
     let buttons = null
+    let expander = null
+    let body = null
 
+    if (this.props.onExpand) {
+      let glyph = this.props.body ? 'triangle-top' : 'triangle-bottom'
+      expander = (
+        <div className="expander clickable" onClick={this.props.onExpand}>
+          <Glyphicon glyph={glyph} />
+        </div>
+      )
+    } else {
+      expander = (
+        <div className="expander" />
+      )
+    }
     if (this.props.status) {
       status = (
         <div className="status">
@@ -39,20 +58,38 @@ export default class SectionLayout extends React.Component {
         </div>
       )
     }
-    if (this.props.buttons)
+    if (this.props.buttons) {
       buttons = (
         <div className="buttons">
           {this.props.buttons}
         </div>
       )
+    }
+    if (this.props.body || this.props.message) {
+      body = (
+        <div className="body-row">
+          {this.props.message}
+          {this.props.body}
+        </div>
+      )
+    }
+
     return(
       <div className={className} style={this.props.style}>
-        {icon}
-        <div className="body">
-          {this.props.children}
+        {expander}
+        <div className="shade">
+          {icon}
+          <div className="inner">
+            <div className="header-row">
+              <div className="header">
+                {this.props.header}
+              </div>
+              {buttons}
+            </div>
+            {body}
+          </div>
+          {status}
         </div>
-        {buttons}
-        {status}
       </div>
     )
   }