Fix docker image

Dockerfile

@@ -1,5 +1,6 @@
 FROM node:10
 WORKDIR /usr/src/skydive-ui
+COPY package.json /usr/src/skydive-ui
 RUN npm install
 COPY . .
 CMD [ "/usr/src/skydive-ui/node_modules/webpack-dev-server/bin/webpack-dev-server.js", "--host", "0.0.0.0" ]

README.md

@@ -5,9 +5,20 @@ Not all the features of the legacy version are implemented yet.
 
 ![](https://raw.githubusercontent.com/skydive-project/skydive-ui/master/screenshot.png)
 
+## Quick start
+
+A docker image is available with the latest version. Please note that this image
+is currently provided for testing purpose.
+
+```
+docker run -p 8080:8080 skydive/skydive-ui
+```
+
 ## Dev mode
 
 ```
 npm install
 npm start
 ```
+
+

src/CaptureForm.tsx

@@ -28,10 +28,14 @@ import { styles } from './CaptureFormStyles'
 
 interface Props {
     classes: any
+    defaultName: string
     gremlinExpr: string
 }
 
 interface State {
+    name: string
+    description: string
+    bpf: string
 }
 
 class CaptureForm extends React.Component<Props, State> {
@@ -42,6 +46,9 @@ class CaptureForm extends React.Component<Props, State> {
         super(props)
 
         this.state = {
+            name: "",
+            description: "",
+            bpf: ""
         }
     }
 
@@ -66,6 +73,7 @@ class CaptureForm extends React.Component<Props, State> {
                         label="Name"
                         margin="normal"
                         fullWidth
+                        value={this.props.defaultName}
                     />
                     <TextField
                         id="standard-basic"

src/SelectionPanel.tsx

@@ -81,23 +81,23 @@ class SelectionPanel extends React.Component<Props, State> {
   }
 
   private renderTabs(classes: any) {
-    return this.props.selection.map((d: Node | Link, i: number) => {
+    return this.props.selection.map((el: Node | Link, i: number) => {
       var className = classes.tabIconFree
 
-      if (d.type === 'node') {
-        if (config.nodeAttrs(d).iconClass === "font-brands") {
+      if (el.type === 'node') {
+        if (config.nodeAttrs(el).iconClass === "font-brands") {
           className = classes.tabIconBrands
         }
 
-        var icon = config.nodeAttrs(d).icon
-        var title = config.nodeTabTitle(d)
+        var icon = config.nodeAttrs(el).icon
+        var title = config.nodeTabTitle(el)
       } else {
-        if (config.linkAttrs(d).iconClass === "font-brands") {
+        if (config.linkAttrs(el).iconClass === "font-brands") {
           className = classes.tabIconBrands
         }
 
-        var icon = config.linkAttrs(d).icon
-        var title = config.linkTabTitle(d)
+        var icon = config.linkAttrs(el).icon
+        var title = config.linkTabTitle(el)
       }
 
       return (
@@ -131,6 +131,14 @@ class SelectionPanel extends React.Component<Props, State> {
     }
   }
 
+  private dataAttrs(el: Node | Link): any {
+    if (el.type === 'node') {
+      return config.nodeAttrs(el)
+    } else {
+      return config.linkAttrs(el)
+    }
+  }
+
   renderTabPanels(classes: any) {
     const dataByPath = (data: any, path: string): any => {
       for (let key of path.split(".")) {
@@ -194,7 +202,7 @@ class SelectionPanel extends React.Component<Props, State> {
             } />
           </Collapse>
           <Collapse in={this.state.captureForm} timeout="auto" unmountOnExit className={classes.actionPanel}>
-            <CaptureForm gremlinExpr={`G.V().Has('TID', '${el.data.TID}')`} />
+            <CaptureForm defaultName={this.dataAttrs(el).name} gremlinExpr={`G.V().Has('TID', '${el.data.TID}')`} />
           </Collapse>
           <TabPanel key={"tabpanel-" + el.id} value={this.state.tab} index={i}>
             {this.dataFields(el).map(entry => {