The Wayback Machine - https://web.archive.org/web/20160305024245/https://docs.docker.com/opensource/kitematic/work_issue/
Get Started
Quickstart containers Understand the architecture
Migrate to Engine 1.10 Breaking changes Deprecated Engine Features FAQ
Release Notes
Learn about Dockerfiles and Docker Cloud Back up data volumes Create a proxy or load balancer Install the Deploy to Docker Cloud button Integrate with Slack Push images to Docker Cloud SSHing into a Docker Cloud-managed node Upgrade Docker Engine on a node Use the Docker Cloud Agent Using the Docker Cloud CLI
API reference
Quickstart contribution FAQ for contributors Where to chat or get help Style guide for Docker documentation

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):

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

    (line ~200)

  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, re-start Kitematic.

    $ npm start
    

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

    Container ID

    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.

Mar 5, 2016 at 2:08am (PST) { "docker/apidocs": { "ref": "master", "repos": [ "[email protected]:docker/dhe-deploy.git" ], "sha": "70ac255c88cde0ea6ecf3fcb812783dea7e09da6" }, "docker/cloud-api-docs": { "ref": "master", "repos": [ "[email protected]:docker/cloud-docs.git" ], "sha": "c0539949c40be9abb193271e46d2ea88196f122d" }, "docker/cloud-api-docs-layout": { "ref": "master", "repos": [ "[email protected]:docker/cloud-docs.git" ], "sha": "c0539949c40be9abb193271e46d2ea88196f122d" }, "docker/compose": { "ref": "docs", "repos": [ "[email protected]:docker/compose.git" ], "sha": "9da9555f10abe628e7742476af3f10bd89f68b75" }, "docker/docker": { "ref": "docs", "repos": [ "[email protected]:docker/docker.git" ], "sha": "0e63b073ac8f33335a4d4df3f2aa22120e0b7f43" }, "docker/docker-cloud": { "ref": "master", "repos": [ "[email protected]:docker/cloud-docs.git" ], "sha": "c0539949c40be9abb193271e46d2ea88196f122d" }, "docker/docker-hub": { "ref": "master", "repos": [ "[email protected]:docker/hub2-demo.git" ], "sha": "73ccb2d678ab0cd83067f0c7ef6f3923d750c7bd" }, "docker/docker-trusted-registry": { "ref": "master", "repos": [ "[email protected]:docker/dhe-deploy.git" ], "sha": "70ac255c88cde0ea6ecf3fcb812783dea7e09da6" }, "docker/docs-base": { "ref": "master", "repos": [ "[email protected]:docker/docs-base.git" ], "sha": "5a4cfac3c4d156eda45080c7dcdd2a4c41e08067" }, "docker/kitematic": { "ref": "docs", "repos": [ "[email protected]:docker/kitematic.git" ], "sha": "856a989d834f7fcbcb9bba687539fb159228f6b8" }, "docker/machine": { "ref": "docs", "repos": [ "[email protected]:docker/machine.git" ], "sha": "21edf30337dc5996b5d785ce54d68b4020242f57" }, "docker/notary": { "ref": "docs", "repos": [ "[email protected]:docker/notary.git" ], "sha": "dfeb51f54f2b0cdf20cb55427b7cc8ea2d1cdd0a" }, "docker/opensource": { "ref": "master", "repos": [ "[email protected]:docker/opensource.git" ], "sha": "b994cdd1f74b0aeb0b51fda1249a0c4c8efbf0d0" }, "docker/registry": { "ref": "master", "repos": [ "[email protected]:docker/distribution.git" ], "sha": "33c4a6522e9247913fa0a9a2d78ef9a7aa98465f" }, "docker/swarm": { "ref": "docs", "repos": [ "[email protected]:docker/swarm.git" ], "sha": "b43a2c21c4017726cd9cb17ef9b16f2eef6d1159" }, "docker/toolbox": { "ref": "master", "repos": [ "[email protected]:docker/toolbox.git" ], "sha": "de267d701f94035549ea03e68047d85534286f85" }, "docker/tutorials": { "ref": "master", "repos": [ "[email protected]:docker/tutorials.git" ], "sha": "7af2622fe68a30684d971e4bf3ca7988902e5e26" }, "docker/ucp": { "ref": "master", "repos": [ "[email protected]:docker/orca.git" ], "sha": "8cd10936a1e063b9be0d5c04de7311a1b2cb25cf" }, "docs.docker.com": { "ref": "refs/heads/v1.10-030316", "repos": [ "[email protected]:moxiegirl/docs.docker.com.git", "[email protected]:docker/docs.docker.com.git" ], "sha": "b43886e4078ce481b06b4cee5c922f5bcc5c629f" } }