├── .dockerignore ├── .github └── ISSUE_TEMPLATE ├── .gitignore ├── .idea └── uiDesigner.xml ├── CONTRIBUTING.md ├── Dockerfile ├── Dockerfile.windows ├── LICENSE ├── README.md ├── cfg ├── base.js ├── dev.js ├── dist.js └── test.js ├── create-index.js ├── docker-compose.yml ├── healthcheck.js ├── index.tpl ├── karma.conf.js ├── nodes.png ├── package-lock.json ├── package.json ├── samplenode.png ├── server-dev.js ├── server.js ├── src ├── data-provider.js ├── favicon.ico ├── icons │ ├── index.js │ └── svg │ │ ├── Debian.svg │ │ ├── Docker.svg │ │ ├── Drupal.svg │ │ ├── NewRelic.svg │ │ ├── Rabbitmq.svg │ │ ├── angular.svg │ │ ├── bittorrent_sync.svg │ │ ├── cassandra.svg │ │ ├── centos.svg │ │ ├── couch_db.svg │ │ ├── datadog.svg │ │ ├── elastic.svg │ │ ├── fedora.svg │ │ ├── glassfish.svg │ │ ├── haproxy.svg │ │ ├── influx.svg │ │ ├── joomla.svg │ │ ├── mariadb.svg │ │ ├── memcached.svg │ │ ├── mongo.svg │ │ ├── mysql.svg │ │ ├── postgresql.svg │ │ ├── python.svg │ │ ├── redis.svg │ │ ├── riak.svg │ │ ├── tomcat.svg │ │ ├── tutum.svg │ │ ├── ubuntu.svg │ │ ├── wikimedia.svg │ │ └── wordpress.svg ├── images │ ├── sprite160.png │ ├── sprite40.png │ └── sprite80.png ├── main.js ├── main.less ├── stack-header │ ├── index.js │ └── styles.less ├── styles │ └── variables.less ├── utils │ ├── filter-containers.js │ ├── helpers.js │ └── request.js ├── vis-logical │ ├── index.js │ └── styles.less └── vis-physical │ ├── index.js │ └── styles.less └── webpack.config.js /.dockerignore: -------------------------------------------------------------------------------- 1 | .git 2 | node_modules/caniuse-db 3 | *.sh 4 | .idea 5 | *.iml 6 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE: -------------------------------------------------------------------------------- 1 | ** PLEASE ONLY USE THIS ISSUE TRACKER TO SUBMIT ISSUES WITH THE DOCKER SWARM VISUALIZER ** 2 | 3 | * If you have a bug working with Docker itself, not related to these labs, please file the bug on the [Docker repo](https://github.com/moby/moby) * 4 | * If you would like general support figuring out how to do something with Docker, please use the Docker Slack channel. If you're not on that channel, sign up for the [Docker Community](http://dockr.ly/MeetUp) and you'll get an invite. * 5 | * Or go to the [Docker Forums](https://forums.docker.com/) * 6 | 7 | Please provide the following information so we can assess the issue you're having 8 | 9 | **Description** 10 | 11 | 14 | 15 | **Steps to reproduce the issue, if relevant:** 16 | 1. 17 | 2. 18 | 3. 19 | 20 | **Describe the results you received:** 21 | 22 | 23 | **Describe the results you expected:** 24 | 25 | 26 | **Additional information you deem important (e.g. issue happens only occasionally):** 27 | 28 | **Output of `docker version`:** 29 | 30 | ``` 31 | (paste your output here) 32 | ``` 33 | 34 | **Output of `docker info`:** 35 | 36 | ``` 37 | (paste your output here) 38 | ``` 39 | 40 | **Additional environment details (AWS, Docker for Mac, Docker for Windows, VirtualBox, physical, etc.):** 41 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | 39 | # scripts 40 | *.sh 41 | *.iml 42 | 43 | -------------------------------------------------------------------------------- /.idea/uiDesigner.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | Since this project is intended to support a specific use case guide, contributions are limited to bug fixes or security issues. If you have a question, feel free to open an issue! 2 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | #Latest version of node tested on. 2 | FROM node:12-alpine AS dist 3 | 4 | 5 | # Tini is recommended for Node apps https://github.com/krallin/tini 6 | RUN apk add --no-cache tini 7 | ENTRYPOINT ["/sbin/tini", "--"] 8 | 9 | WORKDIR /app 10 | 11 | # Only run npm install if these files change. 12 | COPY package*.json ./ 13 | 14 | # Install dependencies 15 | RUN npm ci 16 | 17 | # Add the rest of the source 18 | COPY . . 19 | 20 | # run webpack 21 | RUN npm run dist 22 | 23 | # MS : Number of milliseconds between polling requests. Default is 1000. 24 | # CTX_ROOT : Context root of the application. Default is / 25 | ENV MS=1000 CTX_ROOT=/ 26 | 27 | EXPOSE 8080 28 | 29 | HEALTHCHECK CMD node /app/healthcheck.js || exit 1 30 | 31 | CMD ["node","server.js"] 32 | -------------------------------------------------------------------------------- /Dockerfile.windows: -------------------------------------------------------------------------------- 1 | FROM stefanscherer/node-windows:6.9.2-nano 2 | 3 | WORKDIR /app 4 | 5 | # Only run npm install if these files change. 6 | ADD ./package.json /app/package.json 7 | 8 | # Install dependencies 9 | RUN npm install --unsafe-perm=true 10 | 11 | # Add the rest of the sources 12 | ADD . /app 13 | 14 | # Build the app 15 | RUN npm run dist 16 | 17 | # Number of milliseconds between polling requests. Default is 200. 18 | ENV MS 200 19 | 20 | EXPOSE 8080 21 | 22 | HEALTHCHECK CMD node healthcheck.js || exit 1 23 | 24 | CMD ["npm.cmd","start"] 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright {yyyy} {name of copyright owner} 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | 203 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ![Sample image of nodes with data](./nodes.png) 4 | 5 | # Docker Swarm Visualizer 6 | *** note *** 7 | _This only works with Docker Swarm Mode in Docker Engine 1.12.0 and later. It does not work with the separate Docker Swarm project_ 8 | > Also this is a sample app meant for learning Docker. Running this app in production is insecure and should be avoided. If you want to run it in production you must take all security precautions, and in particular [Protect the Docker daemon socket](https://docs.docker.com/engine/security/https/) with SSL. 9 | 10 | This project was originally created by [Francisco Miranda](https://github.com/maroshii) for the 2015 DockerCon EU keynote. It was adapted to be used for the 2016 DockerCon US keynote showcasing [Docker swarm mode](https://docs.docker.com/engine/swarm/). Since then the community has generously contributed many updates. Thanks to all the contributors, and a special thanks to [@DovAmir](https://github.com/DovAmir) and [@alexellis](https://github.com/alexellis) for their big contributions. 11 | 12 | Demo container that displays Docker services running on a Docker Swarm in a diagram. 13 | 14 | This works only with [Docker swarm mode](https://docs.docker.com/engine/swarm/) which was introduced in Docker 1.12. These instructions presume you are running on the master node and you already have a Swarm running. 15 | 16 | Each node in the swarm will show all tasks running on it. When a service goes down it'll be removed. When a node goes down it won't, instead the circle at the top will turn red to indicate it went down. Tasks will be removed. 17 | Occasionally the Remote API will return incomplete data, for instance the node can be missing a name. The next time info for that node is pulled, the name will update. 18 | 19 | To run: 20 | 21 | ``` 22 | $ docker run -it -d -p 8080:8080 -v /var/run/docker.sock:/var/run/docker.sock dockersamples/visualizer 23 | ``` 24 | 25 | If port 8080 is already in use on your host, you can specify e.g. `-p [YOURPORT]:8080` instead. Example: 26 | 27 | ``` 28 | $ docker run -it -d -p 5000:8080 -v /var/run/docker.sock:/var/run/docker.sock dockersamples/visualizer 29 | ``` 30 | 31 | To run with a different context root (useful when running behind an external load balancer): 32 | 33 | ```bash 34 | $ docker run -it -d -e CTX_ROOT=/visualizer -v /var/run/docker.sock:/var/run/docker.sock dockersamples/visualizer 35 | ``` 36 | 37 | To run in a docker swarm: 38 | 39 | ``` 40 | $ docker service create \ 41 | --name=viz \ 42 | --publish=8080:8080/tcp \ 43 | --constraint=node.role==manager \ 44 | --mount=type=bind,src=/var/run/docker.sock,dst=/var/run/docker.sock \ 45 | dockersamples/visualizer 46 | ``` 47 | 48 | ## Supported architectures 49 | 50 | The main `dockersamples/visualizer` image supports **linux/amd64**. 51 | 52 | **For armhf**, there is a pre-built image available. See [Running on ARM](#running-on-arm). 53 | 54 | **For Windows**, there is a separate `Dockerfile.windows` and image. See [Running on Windows](#running-on-windows). 55 | 56 | **Missing your architecture?** See [Building a custom image](#building-a-custom-image). 57 | 58 | ## Running on ARM 59 | 60 | [@alexellisuk](https://twitter.com/alexellisuk) has pushed an image to the Docker Hub as `alexellis2/visualizer-arm:latest` it will run the code on an ARMv6 or ARMv7 device such as the Raspberry Pi. 61 | 62 | ``` 63 | $ docker service create \ 64 | --name=viz \ 65 | --publish=8080:8080/tcp \ 66 | --constraint=node.role==manager \ 67 | --mount=type=bind,src=/var/run/docker.sock,dst=/var/run/docker.sock \ 68 | alexellis2/visualizer-arm:latest 69 | ``` 70 | 71 | * Update/rebuild the image: 72 | 73 | If you would like to build the image from source run the following command: 74 | 75 | ``` 76 | $ docker build -t visualizer-arm:latest . 77 | ``` 78 | 79 | > Make sure you do this on a Raspberry Pi directly. 80 | 81 | [View on Docker Hub](https://hub.docker.com/r/alexellis2/visualizer-arm/tags/) 82 | 83 | ## Running on Windows 84 | 85 | [@StefanScherer](https://github.com/StefanScherer) has pushed an image to the 86 | Docker Hub as `stefanscherer/visualizer-windows:latest` it will run the code 87 | in a Windows nanoserver container. 88 | 89 | If you would like to build the image from source run the following command: 90 | 91 | ``` 92 | $ docker build -f Dockerfile.windows -t visualizer-windows:latest . 93 | ``` 94 | 95 | On Windows you cannot use `-v` to bind mount the named pipe into the container. 96 | Your Docker engine has to listen to a TCP port, eg. 2375 and you have to 97 | set the `DOCKER_HOST` environment variable running the container. 98 | 99 | ``` 100 | $ip=(Get-NetIPAddress -AddressFamily IPv4 ` 101 | | Where-Object -FilterScript { $_.InterfaceAlias -Eq "vEthernet (HNS Internal NIC)" } ` 102 | ).IPAddress 103 | 104 | docker run -d -p 8080:8080 -e DOCKER_HOST=${ip}:2375 --name=visualizer stefanscherer/visualizer-windows 105 | ``` 106 | 107 | ### Connect to a TLS secured Docker engine 108 | 109 | To work with a TLS secured Docker engine on Windows, set the environment variable `DOCKER_TLS_VERIFY` and 110 | bind mount the TLS certificates into the container. 111 | 112 | ``` 113 | $ip=(Get-NetIPAddress -AddressFamily IPv4 ` 114 | | Where-Object -FilterScript { $_.InterfaceAlias -Eq "vEthernet (HNS Internal NIC)" } ` 115 | ).IPAddress 116 | 117 | docker run -d -p 8080:8080 -e DOCKER_HOST=${ip}:2376 -e DOCKER_TLS_VERIFY=1 -v "$env:USERPROFILE\.docker:C:\Users\ContainerAdministrator\.docker" --name=visualizer stefanscherer/visualizer-windows 118 | ``` 119 | 120 | ## Building a custom image 121 | *When building for Windows, see [Running on Windows](#running-on-windows)*. 122 | 123 | To build an up-to-date image for any architecture supported by [node:8-alpine](https://hub.docker.com/_/node/) (currently `amd64`, `arm32v6`, `arm32v7`, `arm64v8`, `i386`, `ppc64le` and `s390x`), execute the following command on a device of your target architecture: 124 | ``` 125 | $ docker build -t visualizer-custom:latest . 126 | ``` 127 | 128 | Afterwards you can start visualizer by using any of the commands stated [above](#docker-swarm-visualizer). Just replace `dockersamples/visualizer` with `visualizer-custom`. For example: 129 | ``` 130 | $ docker run -it -d -p 8080:8080 -v /var/run/docker.sock:/var/run/docker.sock visualizer-custom 131 | ``` 132 | 133 | 134 | ## TODO: 135 | * Take out or fix how dist works 136 | * Comment much more extensively 137 | * Create tests and make them work better 138 | * Make CSS more elastic. Currently optimized for 3 nodes on a big screen 139 | -------------------------------------------------------------------------------- /cfg/base.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | var port = 8080; 4 | var srcPath = path.join(__dirname, '/../src'); 5 | var publicPath = '/'; 6 | 7 | module.exports = { 8 | port: port, 9 | debug: true, 10 | output: { 11 | path: path.join(__dirname, '/../dist'), 12 | filename: 'app.js', 13 | publicPath: publicPath 14 | }, 15 | devServer: { 16 | contentBase: './src/', 17 | historyApiFallback: true, 18 | hot: true, 19 | inline: true, 20 | port: port, 21 | publicPath: publicPath, 22 | noInfo: false, 23 | proxy: { 24 | '/api/*': { 25 | target: 'https://dashboard.tutum.co', 26 | secure: false, 27 | }, 28 | }, 29 | }, 30 | module: { 31 | preLoaders: [ 32 | { 33 | test: /\.(js|jsx)$/, 34 | include: path.join(__dirname, 'src'), 35 | loader: 'eslint-loader' 36 | } 37 | ], 38 | loaders: [ 39 | { 40 | test: /\.css$/, 41 | loader: 'style!css' 42 | }, 43 | { 44 | test: /\.sass/, 45 | loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax' 46 | }, 47 | { 48 | test: /\.scss/, 49 | loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded' 50 | }, 51 | { 52 | test: /\.less/, 53 | loader: 'style-loader!css-loader!less-loader' 54 | }, 55 | { 56 | test: /\.styl/, 57 | loader: 'style-loader!css-loader!stylus-loader' 58 | }, 59 | { 60 | test: /\.(png|jpg|gif|woff|woff2)$/, 61 | loader: 'url-loader?limit=8192' 62 | }, 63 | { 64 | test: /\.svg$/, 65 | loader: 'svg-inline' 66 | } 67 | ] 68 | } 69 | }; 70 | -------------------------------------------------------------------------------- /cfg/dev.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | var _ = require('lodash'); 4 | 5 | var baseConfig = require('./base'); 6 | 7 | var config = _.merge({ 8 | entry: [ 9 | 'webpack-dev-server/client?http://127.0.0.1:8080', 10 | 'webpack/hot/only-dev-server', 11 | './src/main' 12 | ], 13 | cache: true, 14 | devtool: 'eval', 15 | plugins: [ 16 | new webpack.HotModuleReplacementPlugin(), 17 | new webpack.NoErrorsPlugin() 18 | ] 19 | }, baseConfig); 20 | 21 | // Add needed loaders 22 | config.module.loaders.push({ 23 | test: /\.(js|jsx)$/, 24 | loader: 'babel-loader', 25 | include: path.join(__dirname, '/../src') 26 | }); 27 | 28 | module.exports = config; 29 | -------------------------------------------------------------------------------- /cfg/dist.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | var _ = require('lodash'); 4 | 5 | var baseConfig = require('./base'); 6 | 7 | var config = _.merge({ 8 | entry: path.join(__dirname, '../src/main'), 9 | cache: false, 10 | devtool: 'sourcemap', 11 | plugins: [ 12 | new webpack.optimize.DedupePlugin(), 13 | new webpack.optimize.UglifyJsPlugin(), 14 | new webpack.optimize.OccurenceOrderPlugin(), 15 | new webpack.optimize.AggressiveMergingPlugin(), 16 | new webpack.NoErrorsPlugin() 17 | ] 18 | }, baseConfig); 19 | 20 | config.module.loaders.push({ 21 | test: /\.(js|jsx)$/, 22 | loader: 'babel', 23 | include: path.join(__dirname, '/../src') 24 | }); 25 | 26 | module.exports = config; 27 | -------------------------------------------------------------------------------- /cfg/test.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var srcPath = path.join(__dirname, '/../src/'); 3 | 4 | module.exports = { 5 | devtool: 'eval', 6 | module: { 7 | loaders: [ 8 | { 9 | test: /\.(png|jpg|gif|woff|woff2|css|sass|scss|less|styl)$/, 10 | loader: 'null-loader' 11 | }, 12 | { 13 | test: /\.(js|jsx)$/, 14 | loader: 'babel-loader', 15 | include: [ 16 | path.join(__dirname, '/../src'), 17 | path.join(__dirname, '/../test') 18 | ] 19 | } 20 | ] 21 | }, 22 | resolve: { 23 | extensions: ['', '.js', '.jsx'], 24 | alias: { 25 | actions: srcPath + 'actions/', 26 | helpers: path.join(__dirname, '/../test/helpers'), 27 | components: srcPath + 'components/', 28 | sources: srcPath + 'sources/', 29 | stores: srcPath + 'stores/', 30 | styles: srcPath + 'styles/' 31 | } 32 | } 33 | }; 34 | -------------------------------------------------------------------------------- /create-index.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var indexFile = require('lodash') 3 | .template(fs.readFileSync('index.tpl'))(require('./credentials')) 4 | 5 | fs.writeFileSync('./src/index.html',indexFile); 6 | process.exit(0); 7 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: "3" 2 | 3 | services: 4 | viz: 5 | build: . 6 | volumes: 7 | - "/var/run/docker.sock:/var/run/docker.sock" 8 | ports: 9 | - "8080:8080" 10 | -------------------------------------------------------------------------------- /healthcheck.js: -------------------------------------------------------------------------------- 1 | const request = require('request') 2 | 3 | request('http://localhost:8080', error => { 4 | if (error) { 5 | throw error 6 | } 7 | }) -------------------------------------------------------------------------------- /index.tpl: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Visualizer 6 | 7 | 8 | 9 | 10 | 13 | 14 | 15 |
16 | 19 | 20 |
21 |
22 | 23 |
24 | 25 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | var webpackCfg = require('./webpack.config'); 2 | 3 | module.exports = function(config) { 4 | config.set({ 5 | basePath: '', 6 | browsers: ['PhantomJS'], 7 | files: [ 8 | 'test/loadtests.js' 9 | ], 10 | port: 8080, 11 | captureTimeout: 60000, 12 | frameworks: ['phantomjs-shim', 'mocha', 'chai'], 13 | client: { 14 | mocha: {} 15 | }, 16 | singleRun: true, 17 | reporters: ['mocha'], 18 | preprocessors: { 19 | 'test/loadtests.js': ['webpack', 'sourcemap'] 20 | }, 21 | webpack: webpackCfg, 22 | webpackServer: { 23 | noInfo: true 24 | } 25 | }); 26 | }; 27 | -------------------------------------------------------------------------------- /nodes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dockersamples/docker-swarm-visualizer/82bd6635313a8f92e50c3283dc7e2948859f3b5a/nodes.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "swarmVisualizer", 3 | "private": true, 4 | "version": "0.0.1", 5 | "description": "YOUR DESCRIPTION - Generated by generator-react-webpack", 6 | "main": "", 7 | "scripts": { 8 | "clean": "rimraf dist/*", 9 | "copy": "copyfiles -f ./src/favicon.ico ./dist", 10 | "dist": "npm run copy & webpack --env=dist", 11 | "lint": "eslint ./src", 12 | "posttest": "npm run lint", 13 | "serve": "npm run serve:dev", 14 | "serve:dev": "node create-index.js && node server-dev.js --env=dev", 15 | "serve:dist": "node create-index.js && node server-dev.js --env=dist", 16 | "start": "node server.js", 17 | "test": "karma start" 18 | }, 19 | "repository": "https://github.com/dockersamples/docker-swarm-visualizer", 20 | "keywords": ["Docker","Swarm","D3","Node Visualization"], 21 | "contributors": [{"name": "Francisco Miranda", "name": "Mano Marks"}], 22 | "devDependencies": { 23 | "babel-core": "^5.8.38", 24 | "babel-loader": "^5.4.2", 25 | "chai": "^3.2.0", 26 | "copyfiles": "^0.2.1", 27 | "css-loader": "^0.16.0", 28 | "eslint": "^7.28.0", 29 | "eslint-plugin-react": "^3.3.0", 30 | "file-loader": "^0.8.4", 31 | "http-proxy-middleware": "^0.9.0", 32 | "minimist": "^1.2.6", 33 | "mocha": "^2.2.5", 34 | "null-loader": "^0.1.1", 35 | "open": "7.0.3", 36 | "react-hot-loader": "^1.2.9", 37 | "rimraf": "^2.4.3", 38 | "string.prototype.padstart": "^3.0.0", 39 | "style-loader": "^0.12.3", 40 | "url-loader": "^0.5.6", 41 | "webpack": "^1.12.0", 42 | "webpack-dev-server": "^1.12.0" 43 | }, 44 | "dependencies": { 45 | "animate.css": "^3.4.0", 46 | "d3": "^3.5.7", 47 | "eventemitter3": "^1.1.1", 48 | "express": "^4.13.3", 49 | "less": "^2.5.3", 50 | "less-loader": "^2.0.0", 51 | "lodash": "^4.17.10", 52 | "normalize.css": "^3.0.3", 53 | "request": "^2.65.0", 54 | "superagent": "3.7.0", 55 | "svg-inline-loader": "^0.3.0", 56 | "ws":"7.4.6", 57 | "express-ws":"2.0.0" 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /samplenode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dockersamples/docker-swarm-visualizer/82bd6635313a8f92e50c3283dc7e2948859f3b5a/samplenode.png -------------------------------------------------------------------------------- /server-dev.js: -------------------------------------------------------------------------------- 1 | /*eslint no-console:0 */ 2 | var url = require('url'); 3 | var webpack = require('webpack'); 4 | var WebpackDevServer = require('webpack-dev-server'); 5 | var config = require('./webpack.config'); 6 | var open = require('open'); 7 | 8 | new WebpackDevServer(webpack(config), config.devServer) 9 | .listen(config.port, 'localhost', function(err) { 10 | if (err) { 11 | console.log(err); 12 | } 13 | console.log('Listening at localhost:' + config.port); 14 | console.log('Opening your system browser...'); 15 | open('http://localhost:' + config.port + '/webpack-dev-server/'); 16 | }); 17 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | var url = require('url') 2 | var fs = require('fs'); 3 | var express = require('express'); 4 | var _ = require('lodash'); 5 | var superagent = require('superagent'); 6 | var net = require('net'); 7 | var http = require('http'); 8 | var https = require('https'); 9 | var WS = require('ws'); 10 | 11 | var WebSocketServer = WS.Server; 12 | var indexData; 13 | var app = express(); 14 | var ms = process.env.MS || 5000; 15 | process.env.MS=ms 16 | 17 | var ctxRoot = process.env.CTX_ROOT || '/'; 18 | 19 | if ( !ctxRoot.startsWith('/') ) { 20 | ctxRoot = '/' + ctxRoot; 21 | } 22 | 23 | if ( !ctxRoot.endsWith('/') ) { 24 | ctxRoot = ctxRoot + '/'; 25 | } 26 | 27 | app.use(ctxRoot, express.static('dist')); 28 | 29 | var server = app.listen(8080, function () { 30 | indexData = _.template(fs.readFileSync('index.tpl'))(process.env); 31 | }); 32 | 33 | app.get(ctxRoot, function(req, res) { 34 | res.send(indexData); 35 | }); 36 | 37 | if (process.env.DOCKER_HOST) { 38 | console.log("Docker Host: " + process.env.DOCKER_HOST) 39 | 40 | try { 41 | dh = process.env.DOCKER_HOST.split(":"); 42 | var docker_host = dh[0]; 43 | var docker_port = dh[1]; 44 | } catch (err) { 45 | console.log(err.stack) 46 | } 47 | } 48 | 49 | var cert_path; 50 | if (process.env.DOCKER_TLS_VERIFY) { 51 | if (process.env.DOCKER_CERT_PATH) { 52 | cert_path = process.env.DOCKER_CERT_PATH; 53 | } else { 54 | cert_path = (process.env.HOME || process.env.USERPROFILE) + "/.docker" 55 | } 56 | } 57 | 58 | var wss = new WebSocketServer({server: server}); 59 | 60 | app.get(ctxRoot + 'apis/*', function(req, response) { 61 | var path = req.params[0]; 62 | var jsonData={}; 63 | var options = { 64 | path: ('/' + path), 65 | method: 'GET' 66 | } 67 | 68 | var request = http.request; 69 | 70 | if (cert_path) { 71 | request = https.request; 72 | options.ca = fs.readFileSync(cert_path + '/ca.pem'); 73 | options.cert = fs.readFileSync(cert_path + '/cert.pem'); 74 | options.key = fs.readFileSync(cert_path + '/key.pem'); 75 | } 76 | 77 | if (docker_host) { 78 | options.host = docker_host; 79 | options.port = docker_port; 80 | } else if (process.platform === 'win32') { 81 | options.socketPath = '\\\\.\\pipe\\docker_engine'; 82 | } else { 83 | options.socketPath = '/var/run/docker.sock'; 84 | } 85 | 86 | var req = request(options, (res) => { 87 | var data = ''; 88 | res.on('data', (chunk) => { 89 | data += chunk; 90 | }); 91 | res.on('end', () => { 92 | jsonData['objects'] = JSON.parse(data.toString()); 93 | response.json(jsonData); 94 | }); 95 | }); 96 | req.on('error', (e) => { 97 | console.log(`problem with request: ${e.message}`); 98 | console.log(e.stack); 99 | }); 100 | req.end(); 101 | }); 102 | -------------------------------------------------------------------------------- /src/data-provider.js: -------------------------------------------------------------------------------- 1 | import EventEmitter from 'eventemitter3'; 2 | import _ from 'lodash'; 3 | import padStart from 'string.prototype.padstart'; 4 | import { uuidRegExp } from './utils/helpers'; 5 | 6 | import { 7 | getUri, 8 | getParallel, 9 | getAllContainers, 10 | getAllNodes, 11 | getAllTasks, 12 | getAllServices, 13 | getAllNodeClusters, 14 | getWebSocket 15 | } from './utils/request'; 16 | 17 | let STARTED = 0; 18 | 19 | let SINGLETON; 20 | let CURRENT_SERVICES_URIS; 21 | 22 | let PHYSICAL_STRUCT; 23 | 24 | let tutumEventHandler = (e) => { 25 | console.log(e); 26 | }; 27 | 28 | let nodeOrContainerExists = (arr, value) => { 29 | 30 | for (var i = 0, iLen = arr.length; i < iLen; i++) { 31 | 32 | if (arr[i].ID == value) return true; 33 | } 34 | return false; 35 | }; 36 | 37 | let strToHash = (str) => { 38 | let hash = 0; 39 | for (let i = 0; i < str.length; i++) { 40 | hash = str.charCodeAt(i) + ((hash << 5) - hash); 41 | } 42 | return hash; 43 | }; 44 | 45 | let hashToHexColor = (hash) => { 46 | let color = "#"; 47 | for (var i = 0; i < 3;) { 48 | color += ("00" + ((hash >> i++ * 8) & 0xFF).toString(16)).slice(-2); 49 | } 50 | return color; 51 | } 52 | 53 | let stringToColor = (str) => { 54 | let hash = strToHash(str); 55 | let color = hashToHexColor(hash); 56 | return color; 57 | }; 58 | 59 | 60 | 61 | let physicalStructProvider = ([initialNodes, initialContainers]) => { 62 | let containers = _.map(initialContainers, _.cloneDeep); 63 | let nodeClusters = [{ uuid: "clusterid", name: "" }]; 64 | let nodes = _.map(initialNodes, _.cloneDeep); 65 | let root = []; 66 | 67 | let addContainer = (container) => { 68 | var cloned = Object.assign({}, container); 69 | let NodeID = cloned.NodeID; 70 | _.find(root, (cluster) => { 71 | var node = _.find(cluster.children, { ID: NodeID }); 72 | if (!node) return; 73 | var dt = new Date(cloned.UpdatedAt); 74 | var color = stringToColor(cloned.ServiceID); 75 | let serviceName = cloned.ServiceName; 76 | let imageNameRegex = /([^/]+?)(\:([^/]+))?$/; 77 | let imageNameMatches = imageNameRegex.exec(cloned.Spec.ContainerSpec.Image); 78 | let tagName = imageNameMatches[3]; 79 | let dateStamp = dt.getDate() + "/" + (dt.getMonth() + 1) + " " + dt.getHours() + ":" + padStart(dt.getMinutes().toString(), 2, "0"); 80 | let startState = cloned.Status.State; 81 | 82 | 83 | 84 | 85 | let imageTag = "
" + 86 | "" + serviceName + "" + 87 | "
image : " + imageNameMatches[0] + 88 | "
tag : " + (tagName ? tagName : "latest") + 89 | "
" + (cloned.Spec.ContainerSpec.Args ? " cmd : " + cloned.Spec.ContainerSpec.Args + "
" : "") + 90 | " updated : " + dateStamp + 91 | "
" + (cloned.Status.ContainerStatus? cloned.Status.ContainerStatus.ContainerID : "null") + 92 | "
state : " + startState + 93 | "
"; 94 | 95 | if (node.Spec.Role == 'manager') { 96 | let containerlink = window.location.href + "apis/containers/" + cloned.Status.ContainerStatus.ContainerID + "/json"; 97 | cloned.link = containerlink; 98 | } 99 | cloned.tag = imageTag; 100 | cloned.state = startState; 101 | 102 | node.children.push(cloned); 103 | return true; 104 | }); 105 | }, 106 | 107 | updateContainer = (container, services) => { 108 | let { uuid, node } = container; 109 | let [nodeUuid] = uuidRegExp.exec(node); 110 | _.find(root, (cluster) => { 111 | let node = _.find(cluster.children, { uuid: nodeUuid }); 112 | if (!node) return; 113 | 114 | let target = _.find(node.children, { uuid }) || {}; 115 | if (!target) return; 116 | 117 | Object.assign(target, container); 118 | return true; 119 | }); 120 | }, 121 | 122 | data = () => { 123 | let clone = _.cloneDeep(root); 124 | _.remove(clone, ({ uuid, children }) => { 125 | return uuid === 'BYON' && !children.length 126 | }); 127 | 128 | return { root: clone }; 129 | }, 130 | 131 | addNodeCluster = (nodeCluster) => { 132 | var cloned = Object.assign({}, nodeCluster); 133 | cloned.children = []; 134 | root.push(cloned); 135 | }, 136 | 137 | removeNodeCluster = (nodeCluster) => { 138 | _.remove(root, { uuid: nodeCluster.uuid }); 139 | }, 140 | 141 | updateNodeCluster = (nodeCluster) => { 142 | var currentCluster = _.find(root, { uuid: nodeCluster.uuid }); 143 | Object.assign(currentCluster, nodeCluster); 144 | }, 145 | 146 | addNode = (node) => { 147 | let cloned = Object.assign({}, node); 148 | cloned.children = []; 149 | let clusterUuid = "clusterid"; 150 | let cluster = _.find(root, { uuid: clusterUuid }); 151 | if (cluster) cluster.children.push(cloned); 152 | }, 153 | updateNode = (node, state, spec) => { 154 | node.state = state; 155 | node.Spec = spec; 156 | }, 157 | updateData = (resources) => { 158 | updateNodes(resources[0]); 159 | 160 | updateContainers(resources[1], resources[2]); 161 | data(); 162 | }, 163 | updateNodes = (nodes) => { 164 | let currentnodelist = root[0].children; 165 | for (let node of nodes) { 166 | if (!nodeOrContainerExists(currentnodelist, node.ID)) { 167 | updateNode(node, 'ready'); 168 | 169 | addNode(node); 170 | } else { 171 | for (let currentnode of currentnodelist) { 172 | if (node.ID == currentnode.ID) { 173 | name = node.Description.Hostname; 174 | if (name.length > 0) { 175 | currentnode.Description.Hostname = name; 176 | currentnode.name = name + "
" + node.Spec.Role + 177 | "
" + (currentnode.Description.Resources.MemoryBytes / 1024 / 1024 / 1024).toFixed(3) + "G RAM
" + 178 | "" + (currentnode.Description.Platform.Architecture) + "/" + (currentnode.Description.Platform.OS) + "" + 179 | "
"; 180 | for (var key in node.Spec.Labels) { 181 | if (node.Spec.Labels[key].length > 0) { 182 | currentnode.name += "
" + key + "=" + node.Spec.Labels[key] + ""; 183 | } else { 184 | currentnode.name += "
" + key + ""; 185 | } 186 | } 187 | currentnode.name += "
" 188 | } 189 | updateNode(currentnode, node.state, node.Spec); 190 | } 191 | } 192 | 193 | } 194 | } 195 | for (let node of currentnodelist) { 196 | if (!nodeOrContainerExists(nodes, node.ID)) { 197 | updateNode(node, 'down'); 198 | } 199 | } 200 | }, 201 | updateContainers = (containers, services) => { 202 | let nodes = root[0].children; 203 | // clearn all current children before rendering 204 | for (let node of nodes) { 205 | node.children = []; 206 | } 207 | 208 | for (let container of containers) { 209 | let contNodeId = container.NodeID; 210 | let service = _.find(services, function(o) { return o.ID == container.ServiceID; }); 211 | 212 | container.ServiceName = service? service.Spec.Name : "null"; 213 | for (var i = 0, iLen = nodes.length; i < iLen; i++) { 214 | if (nodes[i].ID == contNodeId) { 215 | addContainer(container); 216 | } 217 | } 218 | 219 | } 220 | 221 | }; 222 | 223 | nodeClusters.forEach(addNodeCluster); 224 | nodes.forEach(addNode); 225 | 226 | containers.forEach(addContainer); 227 | 228 | return { 229 | addContainer, 230 | updateData, 231 | updateContainer, 232 | data, 233 | addNode, 234 | updateNode, 235 | addNodeCluster, 236 | removeNodeCluster, 237 | updateNodeCluster, 238 | }; 239 | } 240 | 241 | class DataProvider extends EventEmitter { 242 | constructor() { 243 | super() 244 | } 245 | 246 | start() { 247 | STARTED = 1; 248 | //console.log(STARTED); 249 | var clusterInit = Promise.all([ 250 | getAllNodes(), 251 | getAllTasks(), 252 | getAllServices() 253 | ]) 254 | .then((resources) => { 255 | _.remove(resources[1], (nc) => nc.state === 'Empty cluster' || nc.state === 'Terminated'); 256 | return resources; 257 | }); 258 | 259 | Promise.all([clusterInit]) 260 | .then(([resources]) => { 261 | PHYSICAL_STRUCT = physicalStructProvider(resources); 262 | this.emit('infrastructure-data', PHYSICAL_STRUCT.data()); 263 | this.emit('start-reload'); 264 | }); 265 | } 266 | 267 | reload() { 268 | if (STARTED == 0) return; 269 | STARTED++; 270 | 271 | // console.log(STARTED); 272 | var clusterInit = Promise.all([ 273 | getAllNodes(), 274 | getAllTasks(), 275 | getAllServices() 276 | ]) 277 | .then((resources) => { 278 | _.remove(resources[1], (nc) => nc.state === 'Empty cluster' || nc.state === 'Terminated'); 279 | return resources; 280 | }); 281 | 282 | Promise.all([clusterInit]) 283 | .then(([resources]) => { 284 | if (!PHYSICAL_STRUCT) 285 | PHYSICAL_STRUCT = physicalStructProvider(resources); 286 | PHYSICAL_STRUCT.updateData(resources); 287 | this.emit('infrastructure-data', PHYSICAL_STRUCT.data()); 288 | }); 289 | } 290 | } 291 | 292 | export default SINGLETON = new DataProvider(); 293 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dockersamples/docker-swarm-visualizer/82bd6635313a8f92e50c3283dc7e2948859f3b5a/src/favicon.ico -------------------------------------------------------------------------------- /src/icons/index.js: -------------------------------------------------------------------------------- 1 | export const debian = require('./svg/debian.svg'); 2 | export const docker = require('./svg/Docker.svg'); 3 | export const drupal = require('./svg/Drupal.svg'); 4 | export const newrelic_agent = require('./svg/NewRelic.svg'); 5 | export const rabbitmq = require('./svg/Rabbitmq.svg'); 6 | export const angular = require('./svg/angular.svg'); 7 | export const btsync = require('./svg/bittorrent_sync.svg'); 8 | export const cassandra = require('./svg/cassandra.svg'); 9 | export const centos = require('./svg/centos.svg'); 10 | export const couchdb = require('./svg/couch_db.svg'); 11 | export const datadog = require('./svg/datadog.svg'); 12 | export const elastic = require('./svg/elastic.svg'); 13 | export const fedora = require('./svg/fedora.svg'); 14 | export const glassfish = require('./svg/glassfish.svg'); 15 | export const haproxy = require('./svg/haproxy.svg'); 16 | export const influx = require('./svg/influx.svg'); 17 | export const joomla = require('./svg/joomla.svg'); 18 | export const mariadb = require('./svg/mariadb.svg'); 19 | export const memcached = require('./svg/memcached.svg'); 20 | export const mongodb = require('./svg/mongo.svg'); 21 | export const mysql = require('./svg/mysql.svg'); 22 | export const postgresql = require('./svg/postgresql.svg'); 23 | export const python = require('./svg/python.svg'); 24 | export const redis = require('./svg/redis.svg'); 25 | export const riak = require('./svg/riak.svg'); 26 | export const tomcat = require('./svg/tomcat.svg'); 27 | export const tutum = require('./svg/tutum.svg'); 28 | export const ubuntu = require('./svg/ubuntu.svg'); 29 | export const wikimedia = require('./svg/wikimedia.svg'); 30 | -------------------------------------------------------------------------------- /src/icons/svg/Debian.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/Docker.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/Drupal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/NewRelic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/Rabbitmq.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/angular.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/bittorrent_sync.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/cassandra.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/centos.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/couch_db.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/datadog.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/elastic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/fedora.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/glassfish.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/haproxy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/influx.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/joomla.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/mariadb.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/memcached.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/mongo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/mysql.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/postgresql.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/python.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/redis.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/riak.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/tomcat.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/tutum.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/ubuntu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/wikimedia.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/wordpress.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/sprite160.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dockersamples/docker-swarm-visualizer/82bd6635313a8f92e50c3283dc7e2948859f3b5a/src/images/sprite160.png -------------------------------------------------------------------------------- /src/images/sprite40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dockersamples/docker-swarm-visualizer/82bd6635313a8f92e50c3283dc7e2948859f3b5a/src/images/sprite40.png -------------------------------------------------------------------------------- /src/images/sprite80.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dockersamples/docker-swarm-visualizer/82bd6635313a8f92e50c3283dc7e2948859f3b5a/src/images/sprite80.png -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // ORDER MATTERS! 2 | import physicalVisualization from './vis-physical'; 3 | import provider from './data-provider'; 4 | import { hasClass, removeClass, addClass, uuidRegExp } from './utils/helpers'; 5 | let { MS } = window; 6 | 7 | require('normalize.css'); 8 | require('animate.css/animate.css'); 9 | require('./main.less'); 10 | 11 | function parseQuery(qstr) { 12 | var query = {}; 13 | var a = qstr.substr(1).split('&'); 14 | for (var i = 0; i < a.length; i++) { 15 | var b = a[i].split('='); 16 | query[decodeURIComponent(b[0])] = decodeURIComponent(b[1] || ''); 17 | } 18 | return query; 19 | } 20 | 21 | let query = parseQuery(window.location.search); 22 | let tabPhysical = document.getElementById('tab-physical'); 23 | let physical = document.getElementById('vis-physical'); 24 | 25 | tabPhysical.addEventListener('click',() => { 26 | removeClass(physical, 'hidden'); 27 | removeClass(tabPhysical, 'hidden'); 28 | 29 | document.body.className = 'tab2'; 30 | }); 31 | 32 | tabPhysical.addEventListener('click', () => { 33 | let filterDiv = document.querySelector('#filter-wrapper'); 34 | if (filterDiv.classList.value.indexOf('hide') >= 0) { 35 | filterDiv.classList.remove('hide'); 36 | filterDiv.classList.add('show'); 37 | } 38 | else { 39 | filterDiv.classList.add('hide'); 40 | filterDiv.classList.remove('show'); 41 | } 42 | }); 43 | 44 | /* Enable polling */ 45 | function reload(){ 46 | provider.reload(); 47 | setTimeout(reload, MS); 48 | } 49 | 50 | console.log("Polling refresh: " + MS); 51 | 52 | provider.on('infrastructure-data', physicalVisualization.render); 53 | provider.start(); 54 | reload(); 55 | 56 | //TODO: Emit Event that requeries data, removes old data recreates visualizations 57 | -------------------------------------------------------------------------------- /src/main.less: -------------------------------------------------------------------------------- 1 | @import './styles/variables.less'; 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | html,body{ 8 | font-family: @font-family; 9 | background: @gray-darkerr; 10 | overflow-x: hidden; 11 | } 12 | 13 | .tabs{ 14 | width: 100%; 15 | padding: 10px; 16 | text-align: center; 17 | border-bottom: 1px solid @gray-darker; 18 | } 19 | 20 | .tabs-wrapper{ 21 | text-align: center; 22 | margin-left:auto; 23 | } 24 | 25 | .tabs button{ 26 | height: 10px; 27 | background: none; 28 | outline: none; 29 | border:none; 30 | > svg{fill: @gray-lighterr;} 31 | &.hidden { 32 | display: inline; 33 | > svg{fill: @gray-darker;} 34 | } 35 | } 36 | 37 | .labelarea{ 38 | font-size: 45%; 39 | } 40 | 41 | .noderole{ 42 | font-size: 90%; 43 | font-weight: bold; 44 | } 45 | .nodemem{ 46 | font-size: 75%; 47 | } 48 | .nodeplatform{ 49 | font-size: 80%; 50 | } 51 | .nodelabel{ 52 | font-style: italic; 53 | } 54 | 55 | #app { 56 | margin: 0 auto; 57 | } 58 | -------------------------------------------------------------------------------- /src/stack-header/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import './styles.less'; 4 | import d3 from 'd3'; 5 | import _ from 'lodash'; 6 | import { tutum as tutumLogoSVG } from '../icons'; 7 | 8 | var NAME; 9 | var header = d3.select('body').insert('header','.tabs'); 10 | 11 | header 12 | .append('div') 13 | .classed('logo',true) 14 | .html('Tutum Visualizer' + tutumLogoSVG); 15 | 16 | var stack = header 17 | .append('div') 18 | .classed('stack-name',true) 19 | .classed('hidden',true); 20 | 21 | stack.append('span'); 22 | stack.append('div') 23 | .classed('stack-open',true); 24 | 25 | var stackList = header.append('ul') 26 | .classed('hidden',true) 27 | .classed('stack-list',true); 28 | 29 | stack.on('click',() => { 30 | stackList.classed('hidden', function(d) { 31 | return !d3.select(this).classed('hidden'); 32 | }); 33 | }) 34 | 35 | var stackListItems = stackList.selectAll('.stack-list-item'); 36 | 37 | var STACKS = []; 38 | 39 | function render(){ 40 | stackListItems = stackListItems.data(STACKS); 41 | 42 | stackListItems 43 | .enter() 44 | .append('li') 45 | .classed('stack-list-item',true) 46 | .html((d) => d.name) 47 | .on('click',function(d){ 48 | var tab = document.body.className.replace(/\s/g, ''); 49 | window.location = `?uuid=${d.uuid}&tab=${tab}`; 50 | }) 51 | 52 | stackListItems.exit().remove(); 53 | 54 | } 55 | 56 | 57 | 58 | export default { 59 | select({name}){ 60 | NAME = name; 61 | 62 | stack 63 | .classed('hidden',false) 64 | .select('span').html(name); 65 | }, 66 | 67 | add(stacks){ 68 | STACKS.push(...stacks.filter(({name}) => name !== NAME)); 69 | render(); 70 | }, 71 | 72 | remove(stack){ 73 | _.remove(STACKS,({uuid}) => uuid === stack.uuid); 74 | render(); 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /src/stack-header/styles.less: -------------------------------------------------------------------------------- 1 | @import '../styles/variables.less'; 2 | 3 | header{ 4 | height: 50px; 5 | background: @gray-darker; 6 | color: @gray-primary; 7 | text-align: center; 8 | line-height: 50px; 9 | position: relative; 10 | } 11 | 12 | .logo{ 13 | width: 200px; 14 | height: 50px; 15 | position: absolute; 16 | padding-left: 65px; 17 | text-align: left; 18 | color: white; 19 | left: 20px; 20 | svg{ 21 | position: absolute; 22 | width: 50px; 23 | height: 50px; 24 | left: 10px; 25 | } 26 | 27 | } 28 | 29 | .stack-open{ 30 | display: inline-block; 31 | margin-left: 6px; 32 | width: 0; 33 | height: 0; 34 | border-left: 3px solid transparent; 35 | border-right: 3px solid transparent; 36 | border-top: 6px solid @gray-primary; 37 | } 38 | 39 | .stack-name{ 40 | cursor: pointer; 41 | } 42 | 43 | .stack-list{ 44 | position: absolute; 45 | padding: 0; 46 | margin: 0; 47 | margin-top: 1px; 48 | width: 200px; 49 | background: fade(@gray-darker,95%); 50 | color: @gray-primary; 51 | left: 50%; 52 | margin-left: -100px; 53 | border-bottom-right-radius: 2px; 54 | border-bottom-left-radius: 2px; 55 | } 56 | 57 | .stack-list-item{ 58 | cursor: pointer; 59 | text-align: center; 60 | list-style: none; 61 | > a { 62 | text-decoration: none; 63 | color: inherit; 64 | } 65 | 66 | } 67 | -------------------------------------------------------------------------------- /src/styles/variables.less: -------------------------------------------------------------------------------- 1 | @font-family-mono: 'Ubuntu Mono', consolas,monaco,monospace; 2 | @font-family: 'Open Sans', sans-serif; 3 | 4 | @blue-primary : #1AAAF8; 5 | @blue-darker : #1488C6; 6 | @blue-darkerr : #1798DE; 7 | @blue-lighter : #47BBF9; 8 | @blue-lighterr : #75CCFA; 9 | @blue-lighterrr : #A3DDFC; 10 | @blue-lighterrrr : #D1EEFD; 11 | 12 | @red : #FF0000; 13 | 14 | @green : #00FF00; 15 | @green-primary : #00CBCA; 16 | @green-darker : #00A2A1; 17 | @green-darkerr : #00B6B5; 18 | @green-lighter : #33D5D4; 19 | @green-lighterr : #66DFDF; 20 | @green-lighterrr : #99EAE9; 21 | @green-lighterrrr : #CCF4F4; 22 | 23 | 24 | @gray-primary : #8F9EA8; 25 | @gray-darker : #445D6E; 26 | @gray-darkerr : #254356; 27 | @gray-lighter : #C0C9CE; 28 | @gray-lighterr : #E0E4E7; 29 | @gray-lighterrr : #F7F8F9; 30 | @gray-lighterrrr : #FDFDFD; 31 | 32 | @state-0: @blue-primary; 33 | @state-1: @green-primary; 34 | @state-2: #FFB463; 35 | @state-3: #EF4A53; 36 | @state-4: #9967FF; 37 | @state-5: #9EB3D5; 38 | 39 | @max-width: 1024px; 40 | -------------------------------------------------------------------------------- /src/utils/filter-containers.js: -------------------------------------------------------------------------------- 1 | let filterTimeout; 2 | 3 | function filterTimeoutCallback() { 4 | let newHistory = encodeURI(document.querySelector('#filter').value); 5 | history.pushState({}, '', '?filter=' + newHistory); 6 | } 7 | 8 | function filterHistory() { 9 | if (typeof filterTimeout !== 'undefined') { 10 | clearTimeout(filterTimeout); 11 | } 12 | filterTimeout = setTimeout(filterTimeoutCallback, 500); 13 | } 14 | 15 | function filterMap(element) { 16 | let component = element.split('='); 17 | this[component[0]] = component[1]; 18 | return this; 19 | } 20 | 21 | export function filterContainers() { 22 | 23 | // Fetch DOM elements, break each word in input filter. 24 | let filterValues = document.querySelector('#filter').value.trim().split(' '); 25 | let containers = document.querySelectorAll('.container'); 26 | 27 | // Iterate through each container. 28 | for (let i = 0; i < containers.length; i++) { 29 | 30 | // Get container title. 31 | let spanText = containers[i].querySelector('span').innerHTML; 32 | 33 | // Define hidden by default. 34 | let hide = true; 35 | 36 | // Iterate through each word, show if any are found. 37 | for (let j = 0; j < filterValues.length; j++) { 38 | if (spanText.indexOf(filterValues[j]) >= 0) { 39 | hide = false; 40 | break; 41 | } 42 | } 43 | 44 | // Display or hide container, based on filter. 45 | if (hide) { 46 | containers[i].classList.add('hide'); 47 | containers[i].classList.remove('show'); 48 | } 49 | else { 50 | containers[i].classList.remove('hide'); 51 | containers[i].classList.add('show'); 52 | } 53 | } 54 | filterHistory(); 55 | } 56 | 57 | export function filterOnLoad() { 58 | let filterInput = document.querySelector('#filter'); 59 | if (!filterInput) { 60 | setTimeout(filterOnLoad, 1000); 61 | return; 62 | } 63 | let search = decodeURIComponent(location.search); 64 | if (!search) { 65 | return; 66 | } 67 | 68 | let searchObj = search 69 | .substring(1) 70 | .split('&') 71 | .map(filterMap, {})[0]; 72 | 73 | if (searchObj.filter) { 74 | filterInput.value = searchObj.filter; 75 | console.log('about to call filterContainers'); 76 | console.log(typeof filterContainers); 77 | setTimeout(filterContainers, 2000); 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/utils/helpers.js: -------------------------------------------------------------------------------- 1 | export var uuidRegExp = new RegExp('[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}'); 2 | 3 | export function capitalize(string) { 4 | return string.charAt(0).toUpperCase() + string.slice(1); 5 | } 6 | 7 | export function removeClass(el, className){ 8 | el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); 9 | return el; 10 | } 11 | 12 | export function hasClass(el, className){ 13 | return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className); 14 | } 15 | 16 | export function addClass(el, className){ 17 | el.className += ` ${className}`; 18 | return el; 19 | } 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/utils/request.js: -------------------------------------------------------------------------------- 1 | import request from 'superagent'; 2 | import _ from 'lodash'; 3 | 4 | var host = window.location.href.split('?')[0].split('#')[0] + 'apis/'; 5 | var wsHost = ((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + window.location.pathname; 6 | 7 | function asPromise(fn){ 8 | return new Promise((resolve,reject) => fn((err,res) => err ? reject(err) : resolve(res))) 9 | } 10 | 11 | function asPromiseAndJSON (fn) { 12 | return asPromise(fn).then((res) => res.body); 13 | } 14 | 15 | function createAgent(uri){ 16 | var agent = request 17 | .get(uri) 18 | .set('Accept', 'application/json'); 19 | _.bindAll(agent,['end']); 20 | return agent; 21 | } 22 | 23 | 24 | 25 | function filterStoppedTasks (objects) { 26 | let runningTasks = []; 27 | for(let i=0;i"+object.Spec.Role+ 47 | "
"+(object.Description.Resources.MemoryBytes/1000000000).toFixed(3)+"G free"+ 48 | "
"+(object.Spec.Labels); 49 | readyNodes.push(object); 50 | } 51 | readyNodes.sort(function (a, b) { 52 | if (a.Description.Hostname > b.Description.Hostname) { 53 | return 1; 54 | } 55 | if (a.Description.Hostname < b.Description.Hostname) { 56 | return -1; 57 | } 58 | // a must be equal to b 59 | return 0; 60 | }); 61 | return readyNodes; 62 | } 63 | function filterTerminatedObjects (objects) { 64 | return _.filter(objects,({State}) => State !== '"shutdown"'); 65 | } 66 | 67 | 68 | export function getUri(uri){ 69 | return asPromiseAndJSON(createAgent(uri).end); 70 | } 71 | 72 | export function getParallel(uris){ 73 | return Promise.all(uris.map(getUri)) 74 | } 75 | export function getWebSocket(){ 76 | console.log(wsHost); 77 | let ws = new WebSocket(`${wsHost}`); 78 | return ws; 79 | } 80 | 81 | export function getAllContainers(){ 82 | return getUri(host+`containers/json`) 83 | .then(({ objects }) => filterTerminatedObjects(objects)) 84 | } 85 | 86 | export function getAllServices(){ 87 | return getUri(host+`services`) 88 | .then(({ objects }) => filterTerminatedObjects(objects)) 89 | } 90 | export function getAllTasks(){ 91 | return getUri(host+`tasks`).then(({ objects }) => filterStoppedTasks(objects)) 92 | } 93 | 94 | export function getAllNetworks(){ 95 | return getUri(host+`networks`) 96 | .then(({ objects }) => filterTerminatedObjects(objects)) 97 | } 98 | export function getAllNodes(){ 99 | return getUri(host+`nodes`).then(({ objects }) => filterStoppedNodes(objects)) 100 | } 101 | 102 | export function getAllNodeClusters(){ 103 | return filterTerminatedObjects({"meta": {"limit": 25, "next": null, "offset": 0, "previous": null, "total_count": 1}, "objects": [{"availability_zone": "/api/infra/v1/az/aws/ap-southeast-2/ap-southeast-2b/", "cpu": 1, "current_num_containers": 1, "deployed_datetime": "Thu, 10 Mar 2016 00:04:58 +0000", "destroyed_datetime": null, "disk": 60, "docker_execdriver": "native-0.2", "docker_graphdriver": "aufs", "docker_version": "1.9.1-cs2", "external_fqdn": "00cc59e1-c605-403c-a5fb-3269b6a0d6bf.node.dockerapp.io", "last_seen": "Fri, 10 Jun 2016 03:39:54 +0000", "memory": 512, "nickname": "00cc59e1-c605-403c-a5fb-3269b6a0d6bf.node.dockerapp.io", "node_cluster": "/api/infra/v1/nodecluster/32197879-6a60-4e17-9548-8d6f90fd8af2/", "node_type": "/api/infra/v1/nodetype/aws/t2.nano/", "private_ips": [{"cidr": "10.78.112.4/18", "name": "eth0"}], "public_ip": "52.63.118.253", "region": "/api/infra/v1/region/aws/ap-southeast-2/", "resource_uri": "/api/infra/v1/node/00cc59e1-c605-403c-a5fb-3269b6a0d6bf/", "state": "Deployed", "tunnel": null, "uuid": "00cc59e1-c605-403c-a5fb-3269b6a0d6bf"}]}); 104 | } 105 | -------------------------------------------------------------------------------- /src/vis-logical/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import './styles.less'; 4 | import d3 from 'd3'; 5 | import _ from 'lodash'; 6 | 7 | import { uuidRegExp, capitalize } from '../utils/helpers'; 8 | import * as icons from '../icons'; 9 | 10 | var W = window.innerWidth, 11 | H = window.innerHeight - 110, // header, etc 12 | NODE_MIN_RADIUS = 40, 13 | NODE_INCREMENT_RADIUS = 3, 14 | NODES = [], 15 | LINKS = [], 16 | node, 17 | link; 18 | 19 | function calculateLinks(services){ 20 | var serviceLinks = []; 21 | 22 | services.forEach((target) => { 23 | var { linked_from_service:links } = target; 24 | 25 | if(typeof links == 'undefined') return; 26 | 27 | links.forEach((link,i) => { 28 | const [uuid] = uuidRegExp.exec(link.from_service); 29 | const source = _.find(services,{ uuid }); 30 | if(!source) return; 31 | serviceLinks.push({ source,target }); 32 | }); 33 | }); 34 | 35 | return serviceLinks; 36 | } 37 | 38 | var svg = d3.select('#app') 39 | .append('div') 40 | .attr('id','vis-logical') 41 | .append('svg') 42 | .attr('width', W) 43 | .attr('height', H); 44 | 45 | var force = d3.layout.force() 46 | .nodes(NODES) 47 | .links(LINKS) 48 | .size([W, H]) 49 | .charge(-1000) 50 | .linkDistance(function(d){ 51 | const factor = d.source.linked_from_service.length + d.source.linked_to_service.length; 52 | return (H/2) * (1/factor); 53 | }) 54 | .on('tick', tick); 55 | 56 | function tick() { 57 | link 58 | .attr('x1', (d) => d.source.x) 59 | .attr('y1', (d) => d.source.y) 60 | .attr('x2', (d) => d.target.x) 61 | .attr('y2', (d) => d.target.y); 62 | 63 | node.select('circle') 64 | .attr('cx', (d) => d.x) 65 | .attr('cy', (d) => d.y); 66 | 67 | node 68 | .select('.docker-image svg') 69 | .attr('x', (d) => d.x - 15) 70 | .attr('y', (d) => d.y - 32); 71 | 72 | var nodeText = node.select('text'); 73 | 74 | nodeText 75 | .select('.name') 76 | .attr('x', (d) => d.x) 77 | .attr('y', (d) => d.y + 5); 78 | 79 | nodeText 80 | .select('.num-containers') 81 | .attr('x', (d) => d.x) 82 | .attr('y', (d) => d.y + 25); 83 | 84 | } 85 | 86 | function restart(){ 87 | if(node){ 88 | node.on('mousedown',null); 89 | node.on('mouseup',null); 90 | } 91 | 92 | link = svg.selectAll('.link').data(LINKS); 93 | node = svg.selectAll('.service').data(NODES); 94 | 95 | link.enter().insert('line', '.service') 96 | .attr('class', 'link'); 97 | 98 | link.exit().remove(); 99 | 100 | var nodeEnter = node.enter().append('g').call(force.drag); 101 | 102 | nodeEnter 103 | .append('circle') 104 | .attr('r',NODE_MIN_RADIUS); 105 | 106 | nodeEnter.insert('g') 107 | .classed('docker-image',true) 108 | .html((d) => { 109 | console.log(d); 110 | //var image = d.image_name.split(':')[0] || []; 111 | var image = d.image.split(':')[0] || []; 112 | if(image.indexOf('haproxy') > -1){ 113 | return icons.haproxy; 114 | } 115 | else if(image.indexOf('results-demo') > -1){ 116 | return icons.angular; 117 | } 118 | else if(image.indexOf('voting-demo') > -1){ 119 | return icons.python; 120 | } 121 | 122 | var [namespace,imageName] = image.split('/'); 123 | 124 | if(!imageName){ 125 | imageName = namespace; 126 | namespace = 'library'; 127 | } 128 | 129 | if(namespace === 'tutum') return icons.tutum; 130 | 131 | return icons[imageName] || (namespace === 'tutum' ? icons.tutum : icons.docker); 132 | }) 133 | .select('svg') 134 | .attr('width',30) 135 | .attr('height',30) 136 | 137 | var nodeEnterText = nodeEnter.append('text'); 138 | 139 | nodeEnterText 140 | .append('tspan') 141 | .classed('name',true) 142 | .attr('dy', '.35em') 143 | 144 | nodeEnterText 145 | .append('tspan') 146 | .classed('num-containers',true) 147 | .attr('dy', '.35em') 148 | 149 | node.attr('class',(d) => 150 | `service service-${_.kebabCase(d.state)} service-${_.kebabCase(d.name)}`); 151 | 152 | node 153 | .select('circle') 154 | .transition() 155 | .attr('r', (d) => NODE_MIN_RADIUS + d.running_num_containers * 3); 156 | 157 | node.exit().remove(); 158 | 159 | var nodeText = node.select('text'); 160 | 161 | nodeText 162 | .select('.name') 163 | .text((d) => capitalize(d.name)); 164 | 165 | nodeText 166 | .select('.num-containers') 167 | .text((d) => d.running_num_containers); 168 | 169 | node.on('mousedown',function() { 170 | d3.select(this).classed('dragging',true); 171 | }); 172 | 173 | node.on('mouseup',function() { 174 | d3.select(this).classed('dragging',false); 175 | }); 176 | 177 | force.start(); 178 | } 179 | 180 | export default { 181 | add(services){ 182 | console.log('CREATE', _.map(services,'name')); 183 | var newServices = _.filter( 184 | services,({uuid}) => !!!_.find(NODES,{uuid}) 185 | ); 186 | 187 | NODES.push(...newServices); 188 | LINKS = calculateLinks(services); 189 | restart(); 190 | }, 191 | update(service){ 192 | console.log('UPDATE', service.name); 193 | let {uuid} = service; 194 | let target = _.find(NODES,{ uuid }) || {}; 195 | Object.assign(target,service); 196 | LINKS = calculateLinks(NODES); 197 | restart(); 198 | }, 199 | remove(service){ 200 | console.log('DELETE', service.name); 201 | _.remove(NODES,({uuid}) => uuid === service.uuid); 202 | LINKS = calculateLinks(NODES); 203 | restart(); 204 | } 205 | } 206 | -------------------------------------------------------------------------------- /src/vis-logical/styles.less: -------------------------------------------------------------------------------- 1 | @import '../styles/variables.less'; 2 | 3 | #vis-logical{ 4 | z-index: 1; 5 | overflow:hidden; 6 | .link { 7 | stroke: @state-1; 8 | stroke-width: 3px; 9 | } 10 | 11 | .service { 12 | cursor: -webkit-grab; 13 | cursor: -moz-grab; 14 | } 15 | .service.dragging { 16 | cursor: -webkit-grabbing; 17 | cursor: -moz-grabbing; 18 | } 19 | 20 | .service text { 21 | fill: white; 22 | font-size: 11px; 23 | } 24 | .service circle { 25 | fill: @gray-primary; 26 | stroke: @gray-darker; 27 | stroke-width: 3px; 28 | } 29 | .service tspan{ 30 | text-anchor: middle; 31 | } 32 | 33 | .service-running circle{ 34 | stroke: @state-1; 35 | fill: darken(@state-1,10%); 36 | } 37 | .service-not-running circle{ 38 | stroke: @state-0; 39 | fill: darken(@state-0,20%); 40 | } 41 | .service-stopped circle{ 42 | stroke: @state-3; 43 | fill: darken(@state-3,25%); 44 | } 45 | .service-terminated circle{ 46 | stroke: @state-4; 47 | fill: darken(@state-4,10%); 48 | } 49 | 50 | .service-partly-running circle{} 51 | .service-starting circle{} 52 | .service-scaling circle{} 53 | .service-redeploying circle{} 54 | .service-stopping circle{} 55 | .service-terminating circle{} 56 | } 57 | -------------------------------------------------------------------------------- /src/vis-physical/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import './styles.less'; 4 | import d3 from 'd3'; 5 | import _ from 'lodash'; 6 | 7 | import { uuidRegExp, capitalize } from '../utils/helpers'; 8 | import { filterContainers, filterOnLoad } from "../utils/filter-containers"; 9 | 10 | var { innerWidth:W, innerHeight:H } = window; 11 | 12 | var vis = d3.select('#app') 13 | .append('div') 14 | .attr('id','vis-physical'); 15 | 16 | var wrapper = vis.append('div') 17 | .classed('wrapper', true); 18 | 19 | let filterDiv = wrapper.append('div') 20 | .attr('id', 'filter-wrapper'); 21 | 22 | let filterInput = filterDiv.append('input') 23 | .attr('id', 'filter') 24 | .attr('placeholder', 'filter containers'); 25 | 26 | filterInput.on('keyup', filterContainers); 27 | filterOnLoad(); 28 | 29 | function removeVis() { 30 | cluster = wrapper.selectAll('.node-cluster') 31 | cluster.remove(); 32 | } 33 | 34 | let loadScript=(url, callback) =>{ 35 | 36 | var script = document.createElement("script") 37 | script.type = "text/javascript"; 38 | if (script.readyState) { //IE 39 | script.onreadystatechange = function() { 40 | if (script.readyState == "loaded" || script.readyState == "complete") { 41 | script.onreadystatechange = null; 42 | callback(); 43 | } 44 | }; 45 | } else { //Others 46 | script.onload = function() { 47 | callback(); 48 | }; 49 | } 50 | script.src = url; 51 | document.getElementsByTagName("head")[0].appendChild(script); 52 | } 53 | 54 | let showContainer =(url) =>{ 55 | 56 | loadScript("https://code.jquery.com/jquery-3.1.0.min.js", function() { 57 | $.getJSON(url, function(obj) { 58 | 59 | var str = JSON.stringify(obj, undefined, 4); 60 | var myWindow = window.open("data:application/json," + encodeURIComponent(str) , "_blank"); 61 | myWindow.focus(); 62 | }); 63 | }); 64 | }; 65 | 66 | function render ({root}) { 67 | var cluster, node, container, clusterEnter, nodeEnter; 68 | cluster = wrapper.selectAll('.node-cluster').data(root); 69 | 70 | clusterEnter = cluster 71 | .enter() 72 | .append('div') 73 | .classed('node-cluster',true) 74 | .classed('byon',(d) => d.uuid === 'BYON'); 75 | 76 | clusterEnter 77 | .append('div') 78 | .classed('node-cluster-meta',true); 79 | 80 | clusterEnter 81 | .append('div') 82 | .classed('node-cluster-content',true); 83 | 84 | node = cluster 85 | .select('.node-cluster-content') 86 | .selectAll('.node').data((d) => d.children); 87 | 88 | nodeEnter = node.enter() 89 | .append('div') 90 | .classed('node',true) 91 | 92 | nodeEnter.append('div') 93 | .classed('node-meta',true); 94 | 95 | nodeEnter.append('div') 96 | .classed('node-content',true); 97 | 98 | container = node 99 | .select('.node-content') 100 | .selectAll('.container').data((d) => d.children); 101 | 102 | 103 | container.enter() 104 | .append('div') 105 | .classed('container',true); 106 | 107 | cluster 108 | .select('.node-cluster-meta') 109 | .html(({name,state = '', node_type = '', region = ''}) => { 110 | 111 | // This is a HORRIBLE hack 112 | // but I don't wanna fetch nodeTypes from the API as from now 113 | var displayType = node_type.split('/')[4] || ''; // horrible 114 | var displayRegion = region.split('/')[5] || ''; // horrible 115 | 116 | switch(displayType){ 117 | case 'digitalocean': displayType = 'Digital Ocean'; break; 118 | case 'aws': displayType = 'AWS'; break; 119 | } 120 | 121 | return `${name}`; 122 | }); 123 | 124 | node 125 | .select('.node-meta') 126 | .attr('name',(d) => _.kebabCase(d.name)) 127 | .attr('data-state',(d) => _.kebabCase(d.state)) 128 | .html((d) => d.name); 129 | 130 | 131 | container 132 | .classed('foreign', (d) => !d.state) 133 | .attr('tag',(d) => _.kebabCase(d.tag)).html((d) => d.tag) 134 | .attr('data-state',(d) => _.kebabCase(d.state)) 135 | 136 | 137 | container.on('mouseenter',null); 138 | container.on('mouseleave',null); 139 | // container.on('click', function(){ 140 | // if (d3.select(this)[0][0].__data__.link){ 141 | // showContainer(d3.select(this)[0][0].__data__.link) 142 | // } 143 | // }); 144 | 145 | 146 | cluster.exit().remove(); 147 | container.exit().remove(); 148 | node.exit().remove(); 149 | } 150 | 151 | export default { render } 152 | -------------------------------------------------------------------------------- /src/vis-physical/styles.less: -------------------------------------------------------------------------------- 1 | @import '../styles/variables'; 2 | 3 | .clear(){ 4 | &:after { 5 | display: table; 6 | clear: both; 7 | content: " "; 8 | } 9 | } 10 | 11 | .statuscont(){ 12 | &:before{ 13 | display: inline-block; 14 | margin-right: 4px; 15 | content: ''; 16 | width: 8px; 17 | height: 8px; 18 | background: @red; 19 | border-radius: 50%; 20 | } 21 | 22 | } 23 | .statuscontrun(){ 24 | &:before{ 25 | display: inline-block; 26 | margin-right: 4px; 27 | content: ''; 28 | width: 8px; 29 | height: 8px; 30 | background: @green; 31 | border-radius: 50%; 32 | } 33 | 34 | 35 | } 36 | 37 | .status(){ 38 | &:before{ 39 | display: inline-block; 40 | margin-right: 4px; 41 | content: ''; 42 | width: 16px; 43 | height: 16px; 44 | background: @gray-lighter; 45 | border-radius: 50%; 46 | } 47 | 48 | &[data-state='byon']:before{ 49 | height: 0; 50 | width: 0; 51 | margin: 0; 52 | } 53 | 54 | &[data-state='animals']:before{ 55 | background: @state-1; 56 | } 57 | &[data-state='movies']:before{ 58 | background: @state-2; 59 | } 60 | &[data-state='deployed']:before{ 61 | background: @state-1; 62 | } 63 | &[data-state='deploying']:before{ 64 | background: fade(@state-1,25%); 65 | } 66 | &[data-state='partly-deployed']:before{ 67 | background: @state-2; 68 | } 69 | &[data-state='down']:before{ 70 | background: @red; 71 | } 72 | &[data-state='ready']:before{ 73 | background: @green; 74 | } 75 | 76 | &[data-state='terminated']:before, 77 | &[data-state='empty-cluster']:before{ 78 | background: @state-2; 79 | } 80 | } 81 | 82 | #vis-physical{ 83 | text-align: center; 84 | max-width: 90%; 85 | margin: 0 auto; 86 | color: @gray-primary; 87 | 88 | .node-cluster { 89 | //float: left; 90 | display: inline-block; 91 | padding: 15px; 92 | min-width: 80px; 93 | .clear(); 94 | 95 | } 96 | 97 | .node{ 98 | display: flex; 99 | flex-direction: column; 100 | justify-content: space-between; 101 | margin-bottom: 20px; 102 | margin-right: 10px; 103 | &:last-child{ 104 | margin-right: 0; 105 | } 106 | } 107 | 108 | .node-meta{ 109 | //line-height: 0; 110 | font-size: 20pt; 111 | text-align: center; 112 | text-indent: -3px; 113 | padding-bottom:10px; 114 | text-overflow: ellipsis; 115 | overflow: hidden; 116 | white-space: nowrap; 117 | .status(); 118 | &:before{ 119 | position: relative; 120 | top: -1px; 121 | } 122 | } 123 | .node-meta:hover{ 124 | width:auto; 125 | background-color:white; 126 | overflow:visible; 127 | white-space: normal; 128 | word-break: break-word; 129 | z-index:500; 130 | } 131 | 132 | .node-content{ 133 | padding: 0 10px; 134 | display: flex; 135 | flex-wrap: wrap; 136 | background: @gray-darkerr; 137 | border: 2px solid lighten(@gray-darker,8%); 138 | min-height: 200px; 139 | .clear(); 140 | &:last-child{ 141 | margin-bottom: 0; 142 | } 143 | } 144 | 145 | .container { 146 | //height: 152px; 147 | width: 200px; 148 | margin-bottom: 5px; 149 | margin-top: 5px; 150 | border-radius: 3px; 151 | // border: 2px solid white; 152 | font-size: 10px; 153 | line-height: 24px; 154 | text-align: center; 155 | text-overflow: ellipsis; 156 | white-space: nowrap; 157 | overflow: hidden; 158 | .contname{ 159 | .statuscont() 160 | } 161 | &[data-state='running']{ 162 | // border-color: @state-1; 163 | //background-color: fade(@state-1,40%); 164 | 165 | .contname { 166 | .statuscontrun() 167 | } 168 | } 169 | 170 | &.foreign{ 171 | border-color: fade(@gray-primary,30%); 172 | background-color: fade(@gray-primary,25%) !important; 173 | } 174 | &[tag='indent']{ 175 | border-color: fade(@state-1,30%); 176 | background-color: fade(@state-1,10%) !important; 177 | } 178 | &[tag='movies']{ 179 | border-color: fade(@state-2,30%); 180 | background-color: fade(@state-2,10%) !important; 181 | } 182 | 183 | } 184 | 185 | .node-cluster-content { 186 | display: flex; 187 | flex-direction: row; 188 | flex-wrap: wrap; 189 | background: @gray-darker; 190 | border: 2px solid lighten(@gray-darker,8%); 191 | padding: 15px; 192 | display: flex; 193 | .clear(); 194 | } 195 | .node-cluster-content:empty { 196 | display: none; 197 | } 198 | 199 | .node-cluster-meta{ 200 | .clear(); 201 | span{ 202 | display: block; 203 | margin-bottom: 6px; 204 | font-size: 12px; 205 | } 206 | .name{ 207 | .status(); 208 | font-size: 22px; 209 | line-height: 30px; 210 | &:before{ 211 | width: 12px; 212 | height: 12px; 213 | margin-right: 10px; 214 | } 215 | } 216 | 217 | .state{ 218 | clear:both; 219 | } 220 | .state{ 221 | .status(); 222 | } 223 | } 224 | .node-cluster.byon .node-cluster-meta span:not(.name){ 225 | display: none; 226 | } 227 | } 228 | 229 | @keyframes hide { 230 | 0% { opacity: 1; transform: scale(1); max-height: 500px; } 231 | 100% { opacity: 0; transform: scale(0); max-height: 0; margin: 0; } 232 | } 233 | 234 | @keyframes show { 235 | 0% { opacity: 0; transform: scale(0); max-height: 0; margin: 0; } 236 | 100% { opacity: 1; transform: scale(1); max-height: 500px; } 237 | } 238 | 239 | #vis-physical .container.hide { 240 | animation: hide .5s forwards; 241 | } 242 | 243 | #vis-physical .container.show { 244 | animation: show .5s forwards; 245 | } 246 | 247 | #filter-wrapper.hide { 248 | animation: hide .5s forwards; 249 | } 250 | 251 | #filter-wrapper.show { 252 | animation: show .5s forwards; 253 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var args = require('minimist')(process.argv.slice(2)); 5 | 6 | // List of allowed environments 7 | var allowedEnvs = ['dev', 'dist', 'test']; 8 | 9 | // Set the correct environment 10 | var env; 11 | if(args._.length > 0 && args._.indexOf('start') !== -1) { 12 | env = 'test'; 13 | } else if (args.env) { 14 | env = args.env; 15 | } else { 16 | env = 'dev'; 17 | } 18 | 19 | // Get available configurations 20 | var configs = { 21 | base: require(path.join(__dirname, 'cfg/base')), 22 | dev: require(path.join(__dirname, 'cfg/dev')), 23 | dist: require(path.join(__dirname, 'cfg/dist')), 24 | test: require(path.join(__dirname, 'cfg/test')) 25 | }; 26 | 27 | /** 28 | * Get an allowed environment 29 | * @param {String} env 30 | * @return {String} 31 | */ 32 | function getValidEnv(env) { 33 | var isValid = env && env.length > 0 && allowedEnvs.indexOf(env) !== -1; 34 | return isValid ? env : 'dev'; 35 | } 36 | 37 | /** 38 | * Build the webpack configuration 39 | * @param {String} env Environment to use 40 | * @return {Object} Webpack config 41 | */ 42 | function buildConfig(env) { 43 | var usedEnv = getValidEnv(env); 44 | return configs[usedEnv]; 45 | } 46 | 47 | module.exports = buildConfig(env); 48 | --------------------------------------------------------------------------------