docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Formatting fixes

This commit is contained in:
John Mulhausen 2016-10-25 11:50:56 -07:00 committed by GitHub
parent 0604850b1d
commit 7df25569d7
1 changed files with 32 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
opensource/kitematic/work_issue.md
View File

@ -15,18 +15,18 @@ For this tutorial, we will work on issue <a href="https://github.com/docker/kite
To do this, edit the container `General Settings` layout. To do this, edit the container `General Settings` layout.
1. Open the project in your favorite editor - We recommend using <a href="https://atom.io/" target="_blank"> Atom</a> as it's a full featured editor with great <a href="http://eslint.org/" target="_blank"> ES lint</a> support to keep your code organized. 1. Open the project in your favorite editor - We recommend using <a href="https://atom.io/" target="_blank"> Atom</a> as it's a full featured editor with great <a href="http://eslint.org/" target="_blank"> ES lint</a> 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): 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 ( return (
<div className="settings-panel"> <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:
3. Above this code we will create a javascript variable that will allow us to display our container id:
``` ```
let shortId = ( let shortId = (
@ -41,39 +41,47 @@ To do this, edit the container `General Settings` layout.
This snippet has been saved as a <a href="https://gist.github.com/FrenchBen/0f514e7b3c584e8d46b5" target="_blank">GitHub gist</a>. This snippet has been saved as a <a href="https://gist.github.com/FrenchBen/0f514e7b3c584e8d46b5" target="_blank">GitHub gist</a>.
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: 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: 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](images/settings-code-example.png) ![Javascript to display container id in kitematic](images/settings-code-example.png)
5. Save the code changes, re-start Kitematic. 5. Save the code changes, re-start Kitematic.
$ npm start ```
$ npm start
```
Now, the container ID should show on the General Settings tab, along with the container name. Now, the container ID should show on the General Settings tab, along with the container name.
![Container ID](images/kitematic_gui_container_id.png) ![Container ID](images/kitematic_gui_container_id.png)
*Note that the container ID in Kitematic matches the ID shown as output to the `docker ps` command.* *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. 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. 7. Stage your changes by adding them.
$ git add src/components/ContainerSettingsGeneral.react.js ```
$ git add src/components/ContainerSettingsGeneral.react.js
```
8. Commit your code changes with a comment that explains what this fixes or closes. 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" ```
$ git commit -s -m "added container ID to show on settings tab, fixes issue #1191"
```
(See <a href="https://github.com/docker/docker/blob/master/CONTRIBUTING.md#coding-style" target="_blank">Coding Style</a> in the general guidelines on <a href="https://github.com/docker/docker/blob/master/CONTRIBUTING.md" target="_blank">Contributing to Docker</a>.) (See <a href="https://github.com/docker/docker/blob/master/CONTRIBUTING.md#coding-style" target="_blank">Coding Style</a> in the general guidelines on <a href="https://github.com/docker/docker/blob/master/CONTRIBUTING.md" target="_blank">Contributing to Docker</a>.)
## Where to go next ## Where to go next
At this point, you are ready to [Review your branch and create a pull request](create_pr.md) to merge your new feature into Kitematic. At this point, you are ready to [Review your branch and create a pull request](create_pr.md) to merge your new feature into Kitematic.