Develop in Kitematic (work on an issue)

Estimated reading time: 2 minutes

For this tutorial, we will work on issue https://github.com/docker/kitematic/issues/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:

    Javascript to display container id in kitematic

  5. Save the code changes, and restart Kitematic.

    $ npm start
    

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

    Container ID

    Note: 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 the general guidelines on coding style in Contribute to the Moby project.

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.

Kitematic, open source, contribute, contributor, tour, development