Develop in Kitematic (work on an issue)

For this tutorial, we will work on issue #1191 which is a request to display the container id in Kitematic for easy identification. (Currently, Kitematic shows the container name but not the id.)

To do this, edit the container General Settings layout.

1. Open the project in your favorite editor - We recommend using Atom as it’s a full featured editor with great ES lint support to keep your code organized.

2. Open the ContainerSettingsGeneral.react.js file which is found under the src/components/ folder and look for the following piece of code, which is in fact the layout (like HTML in the browser) circa line ~200:

   return (
       <div className="settings-panel">
       ...
   

3. Above this code we will create a javascript variable that will allow us to display our container id:

   let shortId = (
       <div className="settings-section">
           <h3>Container Id</h3>
           <div className="container-name">
               <input id="input-container-name" type="text" className="line" placeholder="Container Id" defaultValue={this.props.container.Id.substr(0, 12)} readOnly></input>
           </div>
       </div>
   );
   

   This snippet has been saved as a GitHub gist.

4. We then need to add the variable to the rendered view, by adding it below the {rename} tag. The new render code should look something like:

   return (
       <div className="settings-panel">
           {rename}
           {shortId}
   

   At this point, the updated code should look similar to this:

   

5. Save the code changes, re-start Kitematic.

   $ npm start
   

   Now, the container ID should show on the General Settings tab, along with the container name.

   

   Note that the container ID in Kitematic matches the ID shown as output to the docker ps command.

6. You can close the Kitematic application now, and kill the running process in the terminal via CTRL+c.

7. Stage your changes by adding them.

   $ git add src/components/ContainerSettingsGeneral.react.js
   

8. Commit your code changes with a comment that explains what this fixes or closes.

   $ git commit -s -m "added container ID to show on settings tab, fixes issue #1191"
   

   (See Coding Style in the general guidelines on Contributing to Docker.)

Where to go next

At this point, you are ready to Review your branch and create a pull request to merge your new feature into Kitematic.

Feedback? Suggestions? Can't find something in the docs?
Edit this page ● Request docs changes ● Get support
Rate this page: