From 2cc8c39f6b29b807bfc8e4ad1a8573306f5d948a Mon Sep 17 00:00:00 2001
From: Samuel Vandamme <samuel@sava.be>
Date: Thu, 26 Apr 2018 16:42:33 +0200
Subject: [PATCH] Improved design of agent index

---
 _docs_agent/index.md | 108 +++++++++++++++++++++----------------------
 css/main.scss        |  11 +++++
 2 files changed, 65 insertions(+), 54 deletions(-)

diff --git a/_docs_agent/index.md b/_docs_agent/index.md
index ca804fa..2bcc302 100644
--- a/_docs_agent/index.md
+++ b/_docs_agent/index.md
@@ -13,95 +13,95 @@ CoScale gathers data from lots of different orchestrators and application servic
 ### Containers
 
 <div class="row">
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/docker"><img src="/gfx/agent/docker.png" alt="Docker icon"> Docker</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/docker-enterprise"><img src="/gfx/agent/dockerswarm.png" alt="Docker icon"> Docker Enterprise/Swarm</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/kubernetes"><img src="/gfx/agent/kubernetes.png" alt="Kubernetes icon"> Kubernetes</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/openshift"><img src="/gfx/agent/openshift.png" alt="Openshift icon"> Openshift</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/docker"><img src="/gfx/agent/docker.png" alt="Docker icon"> Docker</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/docker-enterprise"><img src="/gfx/agent/dockerswarm.png" alt="Docker icon"> Docker Enterprise / Swarm</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/kubernetes"><img src="/gfx/agent/kubernetes.png" alt="Kubernetes icon"> Kubernetes</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/openshift"><img src="/gfx/agent/openshift.png" alt="Openshift icon"> Openshift</a></div>
 </div>
 
 ### Web
 
 <div class="row">
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/apache"><img src="/gfx/agent/apache.png" alt="Apache icon"> Apache</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/nginx"><img src="/gfx/agent/nginx.png" alt="NGINX icon"> NGINX</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/iis"><img src="/gfx/agent/iis.png" alt="IIS icon"> IIS</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/haproxy"><img src="/gfx/agent/haproxy.png" alt="HAProxy icon"> HAProxy</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/tomcat"><img src="/gfx/agent/tomcat.png" alt="Tomcat icon"> Tomcat</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/varnish"><img src="/gfx/agent/varnish.png" alt="Varnish icon"> Varnish</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/jboss"><img src="/gfx/agent/jboss.png" alt="JBoss icon"> JBoss</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/nodejs"><img src="/gfx/agent/nodejs.png" alt="Nodejs icon"> Nodejs</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/dropwizard"><img src="/gfx/agent/dropwizard.png" alt="Dropwizard icon"> Dropwizard</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/dotnetcore"><img src="/gfx/agent/dotnetcore.png" alt="Dotnetcore icon"> .NET Core</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/spring-boot"><img src="/gfx/agent/spring-boot.png" alt="Spring Boot icon"> Spring Boot</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/apache"><img src="/gfx/agent/apache.png" alt="Apache icon"> Apache</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/nginx"><img src="/gfx/agent/nginx.png" alt="NGINX icon"> NGINX</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/iis"><img src="/gfx/agent/iis.png" alt="IIS icon"> IIS</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/haproxy"><img src="/gfx/agent/haproxy.png" alt="HAProxy icon"> HAProxy</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/tomcat"><img src="/gfx/agent/tomcat.png" alt="Tomcat icon"> Tomcat</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/varnish"><img src="/gfx/agent/varnish.png" alt="Varnish icon"> Varnish</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/jboss"><img src="/gfx/agent/jboss.png" alt="JBoss icon"> JBoss</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/nodejs"><img src="/gfx/agent/nodejs.png" alt="Nodejs icon"> Nodejs</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/dropwizard"><img src="/gfx/agent/dropwizard.png" alt="Dropwizard icon"> Dropwizard</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/dotnetcore"><img src="/gfx/agent/dotnetcore.png" alt="Dotnetcore icon"> .NET Core</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/spring-boot"><img src="/gfx/agent/spring-boot.png" alt="Spring Boot icon"> Spring Boot</a></div>
 </div>
 
 ### Caching
 
 <div class="row">
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/memcached"><img src="/gfx/agent/memcached.png" alt="Memcached icon"> Memcached</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/memcached"><img src="/gfx/agent/memcached.png" alt="Memcached icon"> Memcached</a></div>
 </div>
 
 ### Database
 
 <div class="row">
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/mysql"><img src="/gfx/agent/mysql.png" alt="Mysql icon"> MySQL</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/mssql"><img src="/gfx/agent/mssql.png" alt="Mssql icon"> MSSQL</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/oracle"><img src="/gfx/agent/oracle.png" alt="Oracle icon"> Oracle</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/postgresql"><img src="/gfx/agent/postgresql.png" alt="PostgreSQL icon"> PostgreSQL</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/hana"><img src="/gfx/agent/hanadb.png" alt="Hana icon"> Hana</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/mysql"><img src="/gfx/agent/mysql.png" alt="Mysql icon"> MySQL</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/mssql"><img src="/gfx/agent/mssql.png" alt="Mssql icon"> MSSQL</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/oracle"><img src="/gfx/agent/oracle.png" alt="Oracle icon"> Oracle</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/postgresql"><img src="/gfx/agent/postgresql.png" alt="PostgreSQL icon"> PostgreSQL</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/hana"><img src="/gfx/agent/hanadb.png" alt="Hana icon"> Hana</a></div>
 </div>
 
 ### NoSQL
 
 <div class="row">
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/mongodb"><img src="/gfx/agent/mongodb.png" alt="MongoDB icon"> MongoDB</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/redis"><img src="/gfx/agent/redis.png" alt="Redis icon"> Redis</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/couchbase"><img src="/gfx/agent/couchbase.png" alt="Couchbase icon"> Couchbase</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/couchdb"><img src="/gfx/agent/couchdb.png" alt="CouchDb icon"> CouchDB</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/cassandra"><img src="/gfx/agent/cassandra.png" alt="Cassandra icon"> Cassandra</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/elasticsearch"><img src="/gfx/agent/elasticsearch.png" alt="ElasticSearch icon"> ElasticSearch</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/riak"><img src="/gfx/agent/riak.png" alt="Riak icon"> Riak</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/solr"><img src="/gfx/agent/solr.png" alt="Solr icon"> Solr</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/mongodb"><img src="/gfx/agent/mongodb.png" alt="MongoDB icon"> MongoDB</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/redis"><img src="/gfx/agent/redis.png" alt="Redis icon"> Redis</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/couchbase"><img src="/gfx/agent/couchbase.png" alt="Couchbase icon"> Couchbase</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/couchdb"><img src="/gfx/agent/couchdb.png" alt="CouchDb icon"> CouchDB</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/cassandra"><img src="/gfx/agent/cassandra.png" alt="Cassandra icon"> Cassandra</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/elasticsearch"><img src="/gfx/agent/elasticsearch.png" alt="ElasticSearch icon"> ElasticSearch</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/riak"><img src="/gfx/agent/riak.png" alt="Riak icon"> Riak</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/solr"><img src="/gfx/agent/solr.png" alt="Solr icon"> Solr</a></div>
 </div>
 
 ### Queueing
 
 <div class="row">
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/rabbitmq"><img src="/gfx/agent/rabbitmq.png" alt="RabbitMQ icon"> RabbitMQ</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/activemq"><img src="/gfx/agent/activemq.png" alt="ActiveMQ icon"> ActiveMQ</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/kafka"><img src="/gfx/agent/kafka.png" alt="Kafka icon"> Kafka</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/rabbitmq"><img src="/gfx/agent/rabbitmq.png" alt="RabbitMQ icon"> RabbitMQ</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/activemq"><img src="/gfx/agent/activemq.png" alt="ActiveMQ icon"> ActiveMQ</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/kafka"><img src="/gfx/agent/kafka.png" alt="Kafka icon"> Kafka</a></div>
 </div>
 
 ### Generic monitoring
 
 <div class="row">
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/resources"><img src="/gfx/agent/resources.png" alt="Resources icon"> Resources</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/cron"><img src="/gfx/agent/CRON.png" alt="Cron icon"> Cron</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/custom-metrics/generic-script/index/"><img src="/gfx/agent/genericscript.png" alt="Script icon"> Generic Script</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/log"><img src="/gfx/agent/log_plugin.png" alt="Log icon"> Log</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/collectd"><img src="/gfx/agent/collectd.png" alt="CollectD icon"> CollectD</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/jmx"><img src="/gfx/agent/jmx.png" alt="JMX icon"> JMX</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/jolokia"><img src="/gfx/agent/jolokia.png" alt="Jolokia icon"> Jolokia</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/fluentd"><img src="/gfx/agent/fluentd.png" alt="Fluentd icon"> Fluentd</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/calico"><img src="/gfx/agent/calico.png" alt="Calico icon"> Calico</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/golang"><img src="/gfx/agent/golang.png" alt="Golang icon"> Golang</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/resources"><img src="/gfx/agent/resources.png" alt="Resources icon"> Resources</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/cron"><img src="/gfx/agent/CRON.png" alt="Cron icon"> Cron</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/custom-metrics/generic-script/index/"><img src="/gfx/agent/genericscript.png" alt="Script icon"> Generic Script</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/log"><img src="/gfx/agent/log_plugin.png" alt="Log icon"> Log</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/collectd"><img src="/gfx/agent/collectd.png" alt="CollectD icon"> CollectD</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/jmx"><img src="/gfx/agent/jmx.png" alt="JMX icon"> JMX</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/jolokia"><img src="/gfx/agent/jolokia.png" alt="Jolokia icon"> Jolokia</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/fluentd"><img src="/gfx/agent/fluentd.png" alt="Fluentd icon"> Fluentd</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/calico"><img src="/gfx/agent/calico.png" alt="Calico icon"> Calico</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/golang"><img src="/gfx/agent/golang.png" alt="Golang icon"> Golang</a></div>
 </div>
 
 ### 3rd party integrations
 
 <div class="row">
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/amazoncloudwatch"><img src="/gfx/agent/amazon-aws.png" alt="AWS icon"> Amazon CloudWatch</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/azure"><img src="/gfx/agent/azure.png" alt="Azure icon"> Azure</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/prometheus"><img src="/gfx/agent/prometheus.png" alt="Prometheus icon"> Prometheus</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/pingdom"><img src="/gfx/agent/pingdom.png" alt="Pingdom icon"> Pingdom</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/sentry"><img src="/gfx/agent/sentry.png" alt="Sentry icon"> Sentry</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/rollbar"><img src="/gfx/agent/rollbar.png" alt="Rollbar icon"> Rollbar</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/googleanalytics"><img src="/gfx/agent/google-analytics.png" alt="Google Analytics icon"> Google Analytics</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/magento"><img src="/gfx/agent/magento.png" alt="Magento icon"> Magento</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/aweber"><img src="/gfx/agent/aweber.png" alt="AWeber icon"> AWeber</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/constantcontact"><img src="/gfx/agent/constant-contact.png" alt="Constant Contact icon"> Constant Contact</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/campaignmonitor"><img src="/gfx/agent/campaign-monitor.png" alt="Campaign Monitor icon"> Campaign Monitor</a></div>
-    <div class="col-sm-3"><a href="{{ site.baseurl }}/agent/plugins/mailchimp"><img src="/gfx/agent/mailchimp.png" alt="Mailchimp icon"> Mailchimp</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/amazoncloudwatch"><img src="/gfx/agent/amazon-aws.png" alt="AWS icon"> Amazon CloudWatch</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/azure"><img src="/gfx/agent/azure.png" alt="Azure icon"> Azure</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/prometheus"><img src="/gfx/agent/prometheus.png" alt="Prometheus icon"> Prometheus</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/pingdom"><img src="/gfx/agent/pingdom.png" alt="Pingdom icon"> Pingdom</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/sentry"><img src="/gfx/agent/sentry.png" alt="Sentry icon"> Sentry</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/rollbar"><img src="/gfx/agent/rollbar.png" alt="Rollbar icon"> Rollbar</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/googleanalytics"><img src="/gfx/agent/google-analytics.png" alt="Google Analytics icon"> Google Analytics</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/magento"><img src="/gfx/agent/magento.png" alt="Magento icon"> Magento</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/aweber"><img src="/gfx/agent/aweber.png" alt="AWeber icon"> AWeber</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/constantcontact"><img src="/gfx/agent/constant-contact.png" alt="Constant Contact icon"> Constant Contact</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/campaignmonitor"><img src="/gfx/agent/campaign-monitor.png" alt="Campaign Monitor icon"> Campaign Monitor</a></div>
+    <div class="col-sm-3 technology"><a href="{{ site.baseurl }}/agent/plugins/mailchimp"><img src="/gfx/agent/mailchimp.png" alt="Mailchimp icon"> Mailchimp</a></div>
 </div>
 
 ## GNU Linux / Unix
diff --git a/css/main.scss b/css/main.scss
index 1a1e14c..9e009ea 100755
--- a/css/main.scss
+++ b/css/main.scss
@@ -436,6 +436,17 @@ body {
     }
 }
 
+// Custom for agent/index page
+.row .technology {
+    padding: 10px;
+    img {
+        display: block;
+        margin: 0 auto;
+        padding-bottom: 5px;
+    }
+    text-align: center;
+}
+
 /*
 * Custom for technologies page
 */