Enhancing member view

dashboard/src/deployment/DeploymentDetails.js

@@ -1,59 +1,18 @@
 import React, { Component } from 'react';
 import { apiGet } from '../api/api.js';
-import { Accordion, Header, Icon, List, Segment } from 'semantic-ui-react';
 import Loading from '../util/Loading.js';
-//import CommandInstruction from '../util/CommandInstruction.js';
+import MemberList from './MemberList.js';
 
-const MemberGroupsView = ({member_groups}) => (
+const MemberGroupsView = ({memberGroups, namespace}) => (
   <div>
-    {member_groups.map((item) => <MemberListComponent 
+    {memberGroups.map((item) => <MemberList 
       group={item.group}
       members={item.members}
+      namespace={namespace}
     />)}
   </div>
 );
 
-const MemberListView = ({group, activeMemberID, onClick, members}) => (
-  <Segment>
-    <Header>{group}</Header>
-    <List divided>
-      {members.map((item) => <MemberView memberInfo={item} active={item.id === activeMemberID} onClick={onClick}/>)}
-    </List>
-  </Segment>
-);
-
-const MemberView = ({memberInfo, active, onClick}) => (
-  <List.Item>
-    <Accordion>
-      <Accordion.Title active={active} onClick={() => onClick(memberInfo.id)}>
-        <Icon name='dropdown' /> {memberInfo.id}
-      </Accordion.Title>
-      <Accordion.Content active={active}>
-        <div>Pod: {memberInfo.pod_name}</div>
-        <div>PVC: {memberInfo.pvc_name}</div>
-        <div>PV: {memberInfo.pv_name}</div>
-      </Accordion.Content>
-    </Accordion>
-  </List.Item>
-);
-
-class MemberListComponent extends Component {
-  state = {};
-
-  onClick = (id) => { 
-    this.setState({activeMemberID:(this.state.activeMemberID === id) ? null : id}); 
-  }
-
-  render() {
-    return (<MemberListView 
-      group={this.props.group} 
-      members={this.props.members}
-      activeMemberID={this.state.activeMemberID}
-      onClick={this.onClick}
-    />);
-  }
-}
-
 class DeploymentDetails extends Component {
   state = {};
 
@@ -79,7 +38,7 @@ class DeploymentDetails extends Component {
     }
     return (
       <div>
-        <MemberGroupsView member_groups={d.member_groups}/>
+        <MemberGroupsView memberGroups={d.member_groups} namespace={d.namespace}/>
       </div>
     );
   }

dashboard/src/deployment/MemberList.js

@@ -0,0 +1,123 @@
+import React, { Component } from 'react';
+import styled from 'react-emotion';
+import { Accordion, Header, Icon, List, Segment } from 'semantic-ui-react';
+import CommandInstruction from '../util/CommandInstruction.js';
+
+const Field = styled('div')`
+  padding-top: 0.3em;
+  padding-bottom: 0.3em;
+`;
+
+const FieldLabel = styled('span')`
+  width: 5rem;
+  display: inline-block;
+`;
+
+const FieldIcons = styled('div')`
+  float: right;
+`;
+
+const MemberListView = ({group, activeMemberID, onClick, members, namespace}) => (
+  <Segment>
+    <Header>{group}</Header>
+    <List divided>
+      {members.map((item) => <MemberView key={item.id} memberInfo={item} active={item.id === activeMemberID} onClick={onClick} namespace={namespace}/>)}
+    </List>
+  </Segment>
+);
+
+const MemberView = ({memberInfo, namespace, active, onClick}) => (
+  <List.Item>
+    <Accordion>
+      <Accordion.Title active={active} onClick={() => onClick(memberInfo.id)}>
+        <Icon name='dropdown' /> {memberInfo.id}
+      </Accordion.Title>
+      <Accordion.Content active={active}>
+        <Field>
+          <FieldLabel>Pod:</FieldLabel> 
+          {memberInfo.pod_name || "-"}
+          {(memberInfo.pod_name) ?
+            <FieldIcons>
+              <CommandInstruction 
+                trigger={<Icon link name="file outline alternate"/>}
+                command={createLogPodCommand(memberInfo.pod_name, namespace)}
+                title="Get Pod Logs"
+                description="To get the log output of this pod, run:"
+              />
+              <CommandInstruction 
+                trigger={<Icon link name="zoom"/>}
+                command={createDescribePodCommand(memberInfo.pod_name, namespace)}
+                title="Describe Pod Information"
+                description="To get more information on the state of this pod, run:"
+              />
+            </FieldIcons>
+          : null}
+        </Field>
+        <Field>
+          <FieldLabel>PVC:</FieldLabel> 
+          {memberInfo.pvc_name || "-"}
+          <FieldIcons>
+            {(memberInfo.pvc_name) ?
+              <CommandInstruction 
+                trigger={<Icon link name="zoom"/>}
+                command={createDescribePvcCommand(memberInfo.pvc_name, namespace)}
+                title="Describe PersistentVolumeClaim Information"
+                description="To get more information on the state of this PVC, run:"
+              />
+            : null}
+          </FieldIcons>
+        </Field>
+        <Field>
+          <FieldLabel>PV:</FieldLabel>
+          {memberInfo.pv_name || "-"}
+          <FieldIcons>
+            {(memberInfo.pv_name) ?
+              <CommandInstruction 
+                trigger={<Icon link name="zoom"/>}
+                command={createDescribePvCommand(memberInfo.pv_name)}
+                title="Describe PersistentVolume Information"
+                description="To get more information on the state of this PV, run:"
+              />
+            : null}
+          </FieldIcons>
+        </Field>
+      </Accordion.Content>
+    </Accordion>
+  </List.Item>
+);
+
+function createDescribePodCommand(podName, namespace) {
+  return `kubectl describe pod -n ${namespace} ${podName}`;
+}
+
+function createLogPodCommand(podName, namespace) {
+  return `kubectl logs -n ${namespace} ${podName}`;
+}
+
+function createDescribePvcCommand(pvcName, namespace) {
+  return `kubectl describe pvc -n ${namespace} ${pvcName}`;
+}
+
+function createDescribePvCommand(pvName) {
+  return `kubectl describe pv ${pvName}`;
+}
+
+class MemberList extends Component {
+  state = {};
+
+  onClick = (id) => { 
+    this.setState({activeMemberID:(this.state.activeMemberID === id) ? null : id}); 
+  }
+
+  render() {
+    return (<MemberListView 
+      group={this.props.group} 
+      members={this.props.members}
+      activeMemberID={this.state.activeMemberID}
+      onClick={this.onClick}
+      namespace={this.props.namespace}
+    />);
+  }
+}
+
+export default MemberList;