{"data":{"allMarkdownRemark":{"edges":[{"node":{"id":"d980aa96-d832-53e1-a6c2-0f3710beb58a","frontmatter":{"category":"Engineering","title":"Application Cockpit Architecture Overview","date":"2022-02-17","summary":"An overview of AUTO1 Application Cockpit architecture and its most notable features","thumbnail":{"relativePath":"pages/application-cockpit/architecture-intro/thumb.png","childImageSharp":{"resolutions":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAADfUlEQVQ4y61UW2tcVRQ+OyAiiIIRVBRT6UPibmIcze2cOff7LZOZzORq0lorMiQxzjgdxQfFB6VFyJPSWKrRNE2wIW3BovlrHrrZy7X3MJGCjxn4OGuvy7e+tfY5oyjn/dN27hNj55ioP9wnMzePycjX98jQF/vkQvcuudA5IIMbe2Rg/WfywrU98lrzgLzePCSX2ifk3c5DMvrZAzK8cUJeXjsiz1TvEpLvk3MXqOjf741o3/1G3//mDvVvHNDxr+7Q4c5tOtb9hY53f6VvNG9RpXKDksYOHVz/ib5yZZeOb+/TydY9Otrcp8Mf/06fr2JO+CN9NtulinXr8ZPo9inzd0+fvHPzIbv47TF79csjNvj5IXupdche/BSxecTe7Dxgb3UesaHWI3ax/Se71P2LjV0/ZW+3/mZDzcfsuaUTpuR/MGXqw21Qr7Zgcm0TSqub+NyG91a2YHRhA7EFY40tKK+1wb5yHdRlzF1ugbrUgpnFFmhLbVAXEQttmJ5vw0i0BUpkWzwLPB6YOne1ae7pM2cIDJX7psotdZK7aEeuwV30W+oEt7UpbmmTEnZZYIp7xjRXoiSB+UYDstkK2K7Xg+Oe2Y7lgWFYkOWzsLL6AURJCkmagReE4MUBxHh2vQAckYtQgiCAWq0GYRiC67oQRREIn7Bdz4VwIwY7tiHAojRN0OdBks/1YnkEOTbyfR8cx5E1im3bkkw4+nYcx9IWPm/RB9M1ZXKC03hYnGaZjAtyz0d1ji3PAopIStMUTNOUDsuyzmwJ3QZd16Xqer0u1YgcERN5Av2zJIzSCsS4kzCKIUxyqeopuA6YlimJxDrkKhCeGB3FiIn665Iju54PPnYXCX7QC4gEUdwfXxALW6jsNxKjr1++Cg280KcIsYDHUcRRLsddcCTm1WqVY3eJLMs4JnLXcbjvudw0DG6aBrctiyMZxyZc18vcskwJRexPSO93Ft1E1/5OhA8J5OtRqTVQGY4Yp4gMLFvcbG+yIIxxLQEoWPAPKijwWSBBgR0LVCVt4ceCAlUVUV4vVj/pFrXlj4q5xctFbeVakVbqRZxXi3SuUVQW1opkdr5QNE0bx1sqCSBJqVwulyYmJqSNNyj9hmGgXyvp2rT06WW1VFaFbci4eBqGLmPn//eFrAOoZgA7/S9EDBVK4Kc1gJ8lwukBYz38dz53gf8CwA4PmL99534AAAAASUVORK5CYII=","width":325,"height":325,"src":"/static/b08a403a7e9534ad64f67f1ad61141df/b3029/thumb.png","srcSet":"/static/b08a403a7e9534ad64f67f1ad61141df/b3029/thumb.png 1x,\n/static/b08a403a7e9534ad64f67f1ad61141df/8d141/thumb.png 1.5x,\n/static/b08a403a7e9534ad64f67f1ad61141df/ee72c/thumb.png 2x,\n/static/b08a403a7e9534ad64f67f1ad61141df/5dfa8/thumb.png 3x"}}},"authorName":"Przemyslaw Walat","authorDescription":"Przemyslaw is an Expert Software Engineer based in our Szczecin office","authorAvatar":null,"headerImage":{"relativePath":"pages/application-cockpit/architecture-intro/1.png","childImageSharp":{"resolutions":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAACaUlEQVQoz0VSS08TURSelQtXrkhI1JjYhQuIIZEC7bzuvTN3bjtDH5TSQlqUBGGlKOGZCOnWP0Di2oAJCTHEgH9O5/Oca6csvsy55/Gdc74zTnjx60/y7Teii/t87utPlEbXmD6+wtTBJab2r/DkwyUe737H9N41nn+6wbOPNyh9vsXM4R1mD+7xau8OT9/f4lH3Gk76A86b3ROUd0/z8s4pZreO8HrrBDObxyitH+Bl/xCl3hHmt85Q3R6h/PYLyptnmB+eY35wjsXhCAsD8m+MMLd2jhe1EziJknlmEqjAy4VbQRR4UH4VEUGHHmLhQrhLiMnWMoDwKggqCwiriwiqCxMIdxHSX4JjanV0VrvIlpcRCkkQCEIxsUNXwnV9JKaG7lrPfqM4hlQRpI4Q6wRCqnG+hBNTsN1uQ2sNKSWSJAH72JZKQu8kCHSIOIpRr9fJr5BmTahIQTcSNBpNRFEEQWRc4wiagkn4wRMxsTEGgqbkWDSM4SvfEmZZRsX0bbQQhiE1VDSttnkFnGRM4PsegsAnBGT7tsCiGsKtuig2iYikiHEeg2sKn2No/HqakRYaupaNO8mHrjS5T42YsFarQREh+/lbpzdvNJGIV5a0ApOx0JE25BQ2gRMZLAd3LgqZjAsVHaW/McDKSmcimSU0JsnHRbmgQkUCt1otewBGmqZ2GiZVdCQrC60pRIher2/JXNe1cV7d4SJaJS9W5Ek6nc5EE/Z5nke/i0G63LRy8CEUoYjz5flA/1eW8i8bFMg5gdfiaz4kk4aeiyRrY317H43uEI3VAVq9dzBpE9qkMFkLWbtv3/8ADCO9cUtyqcEAAAAASUVORK5CYII=","width":1280,"height":786,"src":"/static/477fbbb52f4a6b56a8627202336a0dce/26421/1.png","srcSet":"/static/477fbbb52f4a6b56a8627202336a0dce/26421/1.png 1x"}}}},"html":"<p>Hello fellow concerned developers, or, if you are not yet concerned, while it is not the crux of today’s entry, I hope\nthat by the end of it, you might get interested in becoming one and/or find out how you could do that on your own and\nwhat it actually means for us. Still, the focal point of this post is to fill you in on the architecture of Application\nCockpit (or “App Cockpit”, as we call it in private), the newest tool AUTO1 has brought in for its concerned developers.</p>\n<p><strong>The “why”</strong></p>\n<p>However, before dwelling on the “how” too much, let us pay homage to propriety and start with the ‘why’ of the whole\nmatter. The main reason for the emergence of the Cockpit stems from the plethora of tools AUTO1 has adopted to help us\ntrace, measure and monitor our services, not to mention alerting us when things go south. This opulence often means that\nif you are looking for a specific bit of information, whatever the reason, chances are the data is there somewhere, but\nyou need to make a significant effort finding out where to look for it first.</p>\n<p><a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/7913f56e8ec1a8e1392f735128cb79a1/ea190/2.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 590px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 37.099494097807764%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsSAAALEgHS3X78AAABLklEQVQoz12P626CQBSE9xlUKO+g9YJGQRFhuUbFhED7/q/RNDnTnZPSH/1xwpyZ2W8XMw7D9ziOsDYXay04RVEgz3MdanrUUzb1mqZB27Yoy1KqqoKbLzN+fOLx7KQoK9zvd5p6mLrrOtX0Xq+XAggihB7h7P36wt2UbSf1Y0Ca0bC4XC44nU6o61qL1GmaKvh8PiOKIoURzOx2u6Hve8myjJmYrGiQla0Lj3+/xSILk06SRIeaQILjONb9er3qBQQzM0XzFFs/WNInTwE1h5ovpE8IYbyYIO68yOXC3P2dmP0xxiFK5H29xn4fYrvdYrlcYrfbYbPZqOY3DEOsVisd7mvXn3qEO7DQM54fiPcWYD6fi+d5WCwWmM1moPZ9XzU9juvo/M+CINCzZPwA2yvoGlsGHf4AAAAASUVORK5CYII='); background-size: cover; display: block;\"\n    ></span>\n    <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\"\n        alt=\"2\"\n        title=\"\"\n        src=\"/static/7913f56e8ec1a8e1392f735128cb79a1/40fad/2.png\"\n        srcset=\"/static/7913f56e8ec1a8e1392f735128cb79a1/707e9/2.png 148w,\n/static/7913f56e8ec1a8e1392f735128cb79a1/649e0/2.png 295w,\n/static/7913f56e8ec1a8e1392f735128cb79a1/40fad/2.png 590w,\n/static/7913f56e8ec1a8e1392f735128cb79a1/b3fef/2.png 885w,\n/static/7913f56e8ec1a8e1392f735128cb79a1/301c0/2.png 1180w,\n/static/7913f56e8ec1a8e1392f735128cb79a1/ea190/2.png 1186w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n      />\n  </span>\n  </a></p>\n<p>Once you have figured it out, more often than not, you are invited to dance your way around Kibana, GitHub and Grafana,\ncorrelating your findings, perhaps with a touch of Consul and AWS Event Log to help you along the way, sprinkled with a\nChronograph query here and there to spice things up. Neither is it fast, nor easy, nor pretty. What’s worse, we have\nnoticed, that as our ecosystem grows, it gradually becomes harder to know what to look for and where to find it and the\nlearning curve for new hires has started growing ever steeper.</p>\n<p><strong>…. and the “what”</strong></p>\n<p>Enter the App Cockpit. In short, the Cockpit is meant as THE tool which lets concerned developers quickly find their\nbearings and gather relevant information pertaining to a particular service running in our ecosystem. Being concerned,\nactually, for us means that you care about your services and the ecosystem as a whole and you want to keep your\napplications in tip-top shape as well as you feel responsible for troubleshooting them when needed.</p>\n<p>Keeping that in mind, we’ve designed the App Cockpit to be the first place you check when you want to find out who owns\nthe service, what other services or resources it relies on, is it healthy or not and what its main software dependencies\nare. It is also meant to be the place you visit first when a service starts misbehaving to be presented with quick\ntroubleshooting aids, or, if you are the owner, to perhaps bask in glory when everything runs smoothly.</p>\n<p><a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/819dad8db10b5028167d822d8695e0db/a1751/3.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 590px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 53.18118948824343%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAB8klEQVQoz1VSy47aMBTNBgYJ6I8gpFJAIkBC4tjOO6GESqxowqKfMMNuRuq0/zq7foFPr02CmMXRffjc63t9bHmeBy5CxblAEAQGvu+Dc27Q+YwxaG6H3W4H13U7qDb+Z+33e5UXBRG8R8IdO/dWaNs2lsvlHeaMmjxAbTYbWGEYQkqpWMDgBz4CFoC1k2rf574pqH/WuF6vuL5c8fzyDBlKM72pY77iAcd2u1WWJz1KMDjCAQsZmM8M0YAu4Ckz69a/Grz+ecX7+2+8/X1DkiRwmANxCCATAY972Gz1hHGIUErwkCOOYwgh9MQQGqFAksYm73Ja3Xex3thYbVeIoggiEoj2IeI8pqYSjuvAKrICUfYdaZpAxIJsijiJkWUZ+YQsN7mSbJkXyPMcUkgztXkesxFDuzIsMw0RHhXU0Ct7Pvnt+rqBhn4eX5+3nEcYUQpSuCToRKdc9y06XxNXq5VR2taWYpumMXGL9XptYB1/HEmxWOl31Ip3f0/7+j11w9PphMvlgrqu0ZBtKG6ormmaW65p1Pl8huM4pHJaqenXb/S3FmaKxWKB6XSK+XyO2WyGyWRimldVhcPhgOp4REUKH+iye45sWZZKc63hcIgv47EajUbQvrbj8fiTPxgM0Ov10O/3b/bpCf3POaUt8T/+A9K1gDWcRDsxAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n    ></span>\n    <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\"\n        alt=\"3\"\n        title=\"\"\n        src=\"/static/819dad8db10b5028167d822d8695e0db/40fad/3.png\"\n        srcset=\"/static/819dad8db10b5028167d822d8695e0db/707e9/3.png 148w,\n/static/819dad8db10b5028167d822d8695e0db/649e0/3.png 295w,\n/static/819dad8db10b5028167d822d8695e0db/40fad/3.png 590w,\n/static/819dad8db10b5028167d822d8695e0db/b3fef/3.png 885w,\n/static/819dad8db10b5028167d822d8695e0db/301c0/3.png 1180w,\n/static/819dad8db10b5028167d822d8695e0db/a1751/3.png 1446w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n      />\n  </span>\n  </a></p>\n<p>To achieve all that, the Cockpit needs to pull data from multiple sources, aggregate it and present it in a comfortable\nand meaningful manner to the users, not to mention being fast and efficient about it, which leads us to the heart of the\nmatter - the architecture of App Cockpit.</p>\n<p><strong>Finally, the “how”….</strong></p>\n<p>When designing App Cockpit, we were striving for what probably every software engineer worth his hide can recite even\nwhen woken up at 4 am in the morning - we wanted the architecture to be “open and easily extensible, yet simple and\nrobust at the same time\", preferably allowing polyglot extensions to let every team in the company contribute and share\nwith others if they came up with a cool feature. In order to achieve this, we have split the Cockpit into 5 logical\ncomponents distributed in 3 different layers, as depicted below, with the descriptions to follow.</p>\n<p><a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/a5fde0a614ee1d33cf9b3d2224330a72/b6c2c/diag-1.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 382px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 178.79581151832463%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,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'); background-size: cover; display: block;\"\n    ></span>\n    <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\"\n        alt=\"diag 1\"\n        title=\"\"\n        src=\"/static/a5fde0a614ee1d33cf9b3d2224330a72/b6c2c/diag-1.png\"\n        srcset=\"/static/a5fde0a614ee1d33cf9b3d2224330a72/a384c/diag-1.png 148w,\n/static/a5fde0a614ee1d33cf9b3d2224330a72/9ca5b/diag-1.png 295w,\n/static/a5fde0a614ee1d33cf9b3d2224330a72/b6c2c/diag-1.png 382w\"\n        sizes=\"(max-width: 382px) 100vw, 382px\"\n      />\n  </span>\n  </a></p>\n<ul>\n<li>\n<p><strong>Data Collector</strong> - the component responsible for fetching data from multiple external sources, parsing, aggregating,\ntransforming and sending it on its way to the data sink with a tiny stretch it might be called the ETL of App Cockpit</p>\n</li>\n<li>\n<p><strong>Data Sink</strong> - a simplistic component with a one-track mind, whose only job is to receive data in a well-defined\nformat from the Collector, occasionally perform some simple and generic operations on it (like basic validation and\nparent id resolution) and persisting it in the data storage</p>\n</li>\n<li>\n<p><strong>Data Storage</strong> - a simple storage that holds the current snapshot of App Cockpit data</p>\n</li>\n<li>\n<p><strong>Data Provider</strong> (aka Backend For Frontend) - exposes an interface to serve everything our UI needs, both serving the\ndata “as-is” from the storage as well as applying some additional logic to further aggregate and transform it for\nspecial purposes</p>\n</li>\n<li>\n<p><strong>UI</strong> - yer plain old Front-end - by design contains no logic, it only displays the data as provided</p>\n</li>\n</ul>\n<p><strong>Sweet, but how about a model?</strong></p>\n<p>The specifics of the model run outside of our scope, however, getting it wrong could severely hobble the architecture,\nso it is a story in and of itself, which will have to wait its turn to be told in another blog entry. For our purposes,\nwe will only briefly touch upon it, mainly to establish the domain.</p>\n<p>Truth be told, App Cockpit is pretty much a simpleton, since its world consists of only two kinds of things: Readings\nand Resources and everything it does revolves around the pair.</p>\n<p><a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/620475cb60f40b22eca2eb0e91489dcd/bdb41/4.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 590px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 60.852459016393446%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsSAAALEgHS3X78AAABtUlEQVQoz3VSbZabMAzkGkl+5ZVDYMDG+AvsBBfSvf9F+mpVEssub7v9MRGRRiONoLrf77/ruob6R11utxscuF6vcLlcOJ7xb4655brn/1TBB1jyUkKawBoLxhiw1sI8z5BSAu89OGc5hhA4RzXnHPMs8qdphpieRY8jkGDZXhv44EvOmUnc+HggaUd6ZliWhUVJ8PV68WDKEbCn/Hp7g2EYSqWUYhEpJU8l4oiTDG4rlQY1aNDGgdaaOVQj4aOPeiQ+O+9AYb2i9WnKuq5shYg4iaE5qncMHzhzjmeKNLAiC9u2QUQxEqTpZ0zTxCdYlifWJ97oK4dAveSCLcfHAi7M0Pc9TyFQvus6vGViUa1HeOQNBowH5wBtmH9m7qmk7GH0CbSbQTQNCCF2tAIa/D9aw1u1KO7iCqOLn5wPbgshTrtl+jEBBU3AYgMtFg+IRoD1lg/e9/jSYgaJL+nMYeCwOeH9JW8oCwmOPpYWp/1PsMNz+LTCYDzWxDeCcRdU+4bFoG3xRZAskyAdvet6sHNGYclOzpaJG+awW1ZKltF6MH4qdNQz+Bx4Q/o2z5/Hd6Aa8f8CyFeeSMaQMngAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n    ></span>\n    <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\"\n        alt=\"4\"\n        title=\"\"\n        src=\"/static/620475cb60f40b22eca2eb0e91489dcd/40fad/4.png\"\n        srcset=\"/static/620475cb60f40b22eca2eb0e91489dcd/707e9/4.png 148w,\n/static/620475cb60f40b22eca2eb0e91489dcd/649e0/4.png 295w,\n/static/620475cb60f40b22eca2eb0e91489dcd/40fad/4.png 590w,\n/static/620475cb60f40b22eca2eb0e91489dcd/b3fef/4.png 885w,\n/static/620475cb60f40b22eca2eb0e91489dcd/301c0/4.png 1180w,\n/static/620475cb60f40b22eca2eb0e91489dcd/bdb41/4.png 1525w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n      />\n  </span>\n  </a></p>\n<p>Accordingly, a Reading is a piece of data that describes a Resource in some way, e.g. a metric value, service name,\nowning team, the version of Docker image it currently runs etc.</p>\n<p>In complement, a Resource is a concrete entity for which Readings can be collected and then served; it can be a physical\nentity, e.g. an instance of a service or a logical one (e.g. a definition of a service, e.g. “authentication-service”, a\nsoftware dependency e.g. ‘log4j”, etc). In addition, Resources can form hierarchies, since they support a\nparent-children relationship.</p>\n<p>Given all the above, the main purpose of the App Cockpit is to collect Readings for tracked Resources and present them\nto the users.</p>\n<p><strong>Getting physical.</strong></p>\n<p>Having established all the basics, we can now shift our focus to the physical application of the architecture. We will\ngo over logical components one by one and discuss how we have decided to implement it, to finally sum it all up with a\nfull diagram illustrating the complete solution.</p>\n<p><strong>UI</strong> - we have chosen to implement it using a customized version of Backstage app, built using React JS and available\nat <a href=\"https://backstage.io/\">backstage.io</a>. Since it provides many handy features readily out of the box, it has greatly\nstreamlined the UI development process. Provides a web interface for the users, communicates with Data Provider over\nHTTP via REST endpoints.</p>\n<p><strong>Data Provider</strong> - a simple, easily scalable service built in Java using Spring Boot, exposes REST endpoints for UI\nwhile fetching data from the datasource over JDBC; Apart from serving Readings and Resources it also has a concept of\n“calculations”, which come into play when returning plain entities is not enough to present the user with the desired\ndata. Calculations encapsulate any form of additional aggregation, correlation and transformation logic that is\nperformed on the data in order to enable the UI to present more complex views without placing actual logic in the UI\nitself.</p>\n<p><strong>Data Storage</strong> - nothing fancy there, while we have briefly considered using a temporal db, we have decided to fall\nback to plain old PostgreSQL, since the Cockpit is operating on relational data; the decision has paid off, though,\nsince we were able to leverage the built-in JSONB type to store heterogeneous Reading data in a single column. It is a\nsimple, yet powerful mechanism, which makes the system extremely pluggable. Since a Reading is actually a free-form JSON\nobject, all throughout the ecosystem, the only components that need to know its exact model are the Collector\nimplementation that is going to publish it and the actual UI component that is going to display it. Every other piece of\nthe system can be safely kept in the dark and will be more than happy about it.</p>\n<p><strong>Data Sink</strong> - implemented as a simple lambda function, it has a well-defined job to do; it listens to SNS (AWS'\nmessaging product) events published by the Collectors to its proprietary topic, extracts the payloads, performs simple\nvalidation logic and persists them in the storage. In addition, it is also responsible for properly resolving parent\nResources for incoming children. This piece of logic would fit in the Collectors as well, however since we have decided\nto make them stateless, it has inevitably found its way to the Data Sink.</p>\n<p><strong>Data Collector</strong> - it is the only component for which the logical diagram differs from the physical one, albeit by\ndesign. This stems from the fact that the Collector has been meant as the main extension point that other teams,\npossibly using disparate stacks, can easily plug into when adding new features. By all means, a Collector, as previously\nstated, is any component that fetches data from an arbitrary source, transforms it into Resources and/or Readings and\npushes it to the Data Sink SNS topic.</p>\n<p>In consequence, when you want to start collecting a new type of data or start collecting it from a different source, you\nhave two options - either add your implementation in one of already existing collector services, or write your own new\none, and the only requirement we superimpose on you is that when you publish to the Data Sink, you follow the format we\nhave specified. At the time this post is being written, we have 3 distinct Data Collector implementations:</p>\n<ul>\n<li>\n<p><strong>Main Collector</strong>  - a general-purpose collector, written in Java and providing data for cross-platform features,\ne.g.:</p>\n<ul>\n<li>\n<p>service ownership</p>\n</li>\n<li>\n<p>incidents</p>\n</li>\n<li>\n<p>Docker images used and their vulnerabilities</p>\n</li>\n<li>\n<p>service health and deployments</p>\n</li>\n<li>\n<p>currently running instances</p>\n</li>\n<li>\n<p>code insights (quality, PRs, contributors etc)</p>\n</li>\n</ul>\n</li>\n</ul>\n<ul>\n<li>\n<p><strong>Java Collector</strong> - yet another service written in Java, as the name suggests it collects data strictly related to\nservices written in Java, e.g.:</p>\n<ul>\n<li>\n<p>runtime information like JVM and GC being used</p>\n</li>\n<li>\n<p>selective list of JVM parameters passed to the instances</p>\n</li>\n<li>\n<p>egress dependencies for Java services (in this context, the upstream services)</p>\n</li>\n</ul>\n</li>\n<li>\n<p><strong>PHP/Golang collector</strong> - the first contribution coming from outside the original App Cockpit team, written in\nGolang, it is going to provision data for PHP and Golang services, e.g.:</p>\n<ul>\n<li>\n<p>egress dependencies</p>\n</li>\n<li>\n<p>vulnerabilities</p>\n</li>\n<li>\n<p>possibly many more to come</p>\n</li>\n</ul>\n</li>\n</ul>\n<p>With a picture being worth a thousand words, let’s have a look at a diagram that gathers all of this in one place:</p>\n<p><br><a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/f576711fa336eca6db48f2c1cb19c47c/b2341/diag-2.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 531px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 161.5819209039548%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,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'); background-size: cover; display: block;\"\n    ></span>\n    <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\"\n        alt=\"diag 2\"\n        title=\"\"\n        src=\"/static/f576711fa336eca6db48f2c1cb19c47c/b2341/diag-2.png\"\n        srcset=\"/static/f576711fa336eca6db48f2c1cb19c47c/85b06/diag-2.png 148w,\n/static/f576711fa336eca6db48f2c1cb19c47c/75500/diag-2.png 295w,\n/static/f576711fa336eca6db48f2c1cb19c47c/b2341/diag-2.png 531w\"\n        sizes=\"(max-width: 531px) 100vw, 531px\"\n      />\n  </span>\n  </a><br></p>\n<p>Obviously, the actual process of data collection, as it is currently implemented, is a whole story in and of itself,\ndeserving yet another dedicated blog post, especially since we have elected to make all the collectors stateless, which\nhad its numerous consequences and challenges so keep your eye out for the next entry which is bound to come shortly.</p>\n<p><strong>Closing words and … we will be back</strong></p>\n<p>Having said, or rather written all the above, we sincerely hope that we have managed to pique your interest. Not only in\nour solution but also in actually getting “concerned” about your ecosystem, because it does not necessarily have to be\nboring, especially when you have the right tools to make your life easier. On top of that, you can have your fun\nbuilding the actual tools, deftly combining business with pleasure for a change of the usual pace.</p>\n<p>As hinted numerous times, this is only the preliminary article, meant to lay the groundwork for future additions\nexploring individual pieces in more depth… We are already looking forward to writing those, so keep your eye out!</p>","fields":{"slug":"/application-cockpit/architecture-intro/","tags":["auto1","engineering","architecture","cockpit"]}}}]}},"pageContext":{"slug":"/tags/architecture","tag":"architecture","categories":["Architecture","Coding","DevOps","Engineering","ProjectManagement","QA","Social","TechRadar"]}}