Merge pull request #81 from aio-libs/make-demo-more-nice

Make demo more nice

demos/microservices/README.rst

@@ -15,22 +15,28 @@ Clone repository and install library::
     $ cd aiozipkin
     $ pip install -e .
     $ pip install -r requirements-dev.txt
+    $ pip install aiohttp-jinja2
+
 
 Create start zipkin server, make sure you have docker installed::
 
-    make zipkin_start
+    $ make zipkin_start
 
 To stop zipkin server (stop and remove docker container)::
 
-    make zipkin_stop
+    $ make zipkin_stop
+
+To start all service execute following command:::
+
+    $ python demos/microservices/runner.py
 
 Open browser::
 
     http://127.0.0.1:9001
 
 
-Click link on rendered page, as result first service will start chain of
-http calls to other services. You can investigate that chain and timing
+First service will start chain of http calls to other services, and then will
+render page with fetched information. You can investigate that chain and timing
 in Zipkin UI.
 
 Zipkin UI available::

demos/microservices/service_a.py

@@ -1,12 +1,18 @@
 import asyncio
+import pathlib
 import aiohttp
+import jinja2
+import aiohttp_jinja2
 import aiozipkin as az
 
 from aiohttp import web
 
 
 service_b_api = 'http://127.0.0.1:9002/api/v1/data'
 service_e_api = 'http://127.0.0.1:9005/api/v1/data'
+host = '127.0.0.1'
+port = 9001
+zipkin_address = 'http://127.0.0.1:9411'
 
 
 async def index(request):
@@ -27,24 +33,33 @@ async def handler(request):
     await asyncio.sleep(0.01)
     session = request.app['session']
     span = az.request_span(request)
-    ctx = {'span_context': span.context, 'propagate_headers': True}
+    ctx = {'span_context': span.context}
 
     resp = await session.get(service_b_api, trace_request_ctx=ctx)
-    data_b = await resp.text()
+    data_b = await resp.json()
 
     resp = await session.get(service_e_api, trace_request_ctx=ctx)
-    data_e = await resp.text()
+    data_e = await resp.json()
 
-    body = 'service_a ' + data_b + ' ' + data_e
-    return web.Response(text=body)
+    tree = {
+        'name': 'service_a',
+        'host': host,
+        'port': port,
+        'children': [data_b, data_e],
+    }
+    ctx = {
+        'zipkin':  zipkin_address,
+        'service': tree
+    }
+    return aiohttp_jinja2.render_template('index.html', request, ctx)
 
 
 def make_app():
+
     app = web.Application()
     app.router.add_get('/api/v1/data', handler)
     app.router.add_get('/', index)
 
-    zipkin_address = 'http://127.0.0.1:9411'
     endpoint = az.create_endpoint('service_a')
     tracer = az.create(zipkin_address, endpoint, sample_rate=1.0)
 
@@ -53,11 +68,14 @@ def make_app():
     app['session'] = session
 
     az.setup(app, tracer)
+
+    TEMPLATES_ROOT = pathlib.Path(__file__).parent / 'templates'
+    aiohttp_jinja2.setup(
+        app, loader=jinja2.FileSystemLoader(str(TEMPLATES_ROOT)))
+
     return app
 
 
 if __name__ == '__main__':
-    host = '127.0.0.1'
-    port = 9001
     app = make_app()
     web.run_app(app, host=host, port=port)

demos/microservices/service_b.py

@@ -7,6 +7,8 @@
 
 service_c_api = 'http://127.0.0.1:9003/api/v1/data'
 service_d_api = 'http://127.0.0.1:9004/api/v1/data'
+host = '127.0.0.1'
+port = 9002
 
 
 async def handler(request):
@@ -17,13 +19,18 @@ async def handler(request):
     ctx = {'span_context': span.context, 'propagate_headers': True}
 
     resp = await session.get(service_c_api, trace_request_ctx=ctx)
-    data_c = await resp.text()
+    data_c = await resp.json()
 
     resp = await session.get(service_d_api, trace_request_ctx=ctx)
-    data_d = await resp.text()
+    data_d = await resp.json()
 
-    body = 'service_b ' + data_c + ' ' + data_d
-    return web.Response(text=body)
+    payload = {
+        'name': 'service_b',
+        'host': host,
+        'port': port,
+        'children': [data_c, data_d],
+    }
+    return web.json_response(payload)
 
 
 def make_app():
@@ -42,7 +49,5 @@ def make_app():
 
 
 if __name__ == '__main__':
-    host = '127.0.0.1'
-    port = 9001
     app = make_app()
     web.run_app(app, host=host, port=port)

demos/microservices/service_c.py

@@ -4,10 +4,19 @@
 from aiohttp import web
 
 
+host = '127.0.0.1'
+port = 9002
+
+
 async def handler(request):
     await asyncio.sleep(0.01)
-    body = 'servcie_c'
-    return web.Response(text=body)
+    payload = {
+        'name': 'servcie_c',
+        'host': host,
+        'port': port,
+        'children': [],
+    }
+    return web.json_response(payload)
 
 
 def make_app():
@@ -22,7 +31,5 @@ def make_app():
 
 
 if __name__ == '__main__':
-    host = '127.0.0.1'
-    port = 9003
     app = make_app()
     web.run_app(app, host=host, port=port)

demos/microservices/service_d.py

@@ -4,10 +4,19 @@
 from aiohttp import web
 
 
+host = '127.0.0.1'
+port = 9004
+
+
 async def handler(request):
     await asyncio.sleep(0.01)
-    body = 'servcie_d'
-    return web.Response(text=body)
+    payload = {
+        'name': 'servcie_d',
+        'host': host,
+        'port': port,
+        'children': [],
+    }
+    return web.json_response(payload)
 
 
 def make_app():
@@ -22,7 +31,5 @@ def make_app():
 
 
 if __name__ == '__main__':
-    host = '127.0.0.1'
-    port = 9004
     app = make_app()
     web.run_app(app, host=host, port=port)

demos/microservices/service_e.py

@@ -4,10 +4,19 @@
 from aiohttp import web
 
 
+host = '127.0.0.1'
+port = 9005
+
+
 async def handler(request):
     await asyncio.sleep(0.01)
-    body = 'servcie_e'
-    return web.Response(text=body)
+    payload = {
+        'name': 'service_e',
+        'host': host,
+        'port': port,
+        'children': [],
+    }
+    return web.json_response(payload)
 
 
 def make_app():
@@ -22,7 +31,5 @@ def make_app():
 
 
 if __name__ == '__main__':
-    host = '127.0.0.1'
-    port = 9005
     app = make_app()
     web.run_app(app, host=host, port=port)

demos/microservices/templates/index.html

@@ -0,0 +1,53 @@
+{% macro render_service(service) -%}
+<div class="uk-card uk-card-default uk-card-body uk-card-hover">
+    <h3 class="uk-card-title uk-heading-line">
+        <a href="http://{{service.host}}:{{service.port}}/api/v1/data"target="_blank">{{service.name}}</a>
+    </h3>
+    <ul>
+        <li>host: {{service.host}}</li>
+        <li>port: {{service.port}}</li>
+    </ul>
+    <div class="uk-child-width-expand@s uk-grid-small uk-grid-match" uk-grid>
+        {% for s  in service.children %}
+            {{ render_service(s) }}
+        {% endfor %}
+    </div>
+</div>
+{%- endmacro %}
+
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>aiozipkin microservices demo</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.38/css/uikit.min.css" />
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.38/js/uikit.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.38/js/uikit-icons.min.js"></script>
+    </head>
+    <body>
+        <div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom">
+            <hr class="uk-divider-icon">
+            <article class="uk-article">
+                <h1 class="uk-article-title"><a class="uk-link-reset" href="">aiozipkin microservices demo</a></h1>
+                <p class="uk-text-lead">
+                    There is larger micro services example, using <a hre"https://github.com/aio-libs/aiohttp">aiohttp</a>.
+                    This demo consists of five simple services that call each other, as result you can study client
+                    server communication and zipkin integration for large projects. Each
+                    box element of this page rendered with help of different service.
+                </p>
+                <p><span class="uk-label">Zipkin UI</span> <a href="{{zipkin}}" target="_blank">{{zipkin}}</a></p>
+                {{ render_service(service) }}
+
+            </article>
+            <hr class="uk-divider-icon">
+            <h5 class="uk-text-center">
+                <span>
+                    <a hre"https://github.com/aio-libs/aiozipkin">https://github.com/aio-libs/aiozipkin</a>
+                </span>
+            </h5>
+        </div>
+    </body>
+</html>
+
+