De Hacker News API visualiseren met HCL en SQL

De Hacker News API visualiseren met HCL en SQL

In de laatste aflevering hebben we gekeken naar een Steampipe-dashboard dat zoekresultaten van verschillende API’s samenvoegt. Dat metasearch-dashboard is volledig gedefinieerd in code die twee talen combineert: SQL om de API’s te doorzoeken en HCL (HashiCorp Configuration Language) om resultaten naar een dashboardtabel te stromen.

Deze dashboards-as-code-aanpak leunt aan bij de infrastructuur-as-code-filosofie. Wij zijn van mening dat dashboards een ander soort infrastructuur zijn die in software moet worden gedefinieerd, moet worden beheerd in versiegecontroleerde opslagplaatsen en moet worden geïmplementeerd vanuit opslagplaatsen.

In deze aflevering zullen we kijken naar een dashboard dat items verkent die op Hacker News zijn gepost. Het illustreert verschillende manieren waarop Steampipe kan deelnemen aan softwaregedefinieerde workflows.

Hier is het dashboard in actie.

En hier is de snelle start om het zelf uit te voeren.

De visualisaties beslaan sinds 21 juni meer dan 15.000 verhalen. Dat is veel meer geschiedenis dan je gemakkelijk in één teug uit de Hacker News API kunt slurpen. Dus waar komen de historische gegevens vandaan? Het staat in de repo!

Geschiedenis

Op uurbasis controleert een GitHub-actie de repo, voert Steampipe uit, zoekt naar nieuwe items, exporteert ze naar een CSV-bestand, legt dat bestand vast en pusht naar de oorsprong. Dus wanneer u de repo kloont of bijwerkt, krijgt u nieuwe gegevens. Met Steampipe en de CSV-plug-in geïnstalleerd, bekijk je het dashboard als volgt.

cd ~/steampipe-samples/all/hackernews
./update.sh
steampipe dashboard

En dan bezoek https://localhost:9194. Herhalen ./update.sh om op elk moment actuele gegevens op te halen en op te nemen. De GitHub-actie, die elk uur wordt uitgevoerd, doet het volgende.

  • Bekijk de repo
  • Installeer Steampipe in de GitHub-runner
  • Installeer de Hacker News-plug-in
  • Vraag de laatste verhalen op en stuur de uitvoer naar een CSV-bestand
  • Leg het nieuwe CSV-bestand vast en druk op de wijzigingen

Ik was te laat op het GitHub Actions-feest, maar ik ben er nu. Dit is zo’n leuke manier om duurzaam kleine snapshots te verzamelen!

Voor degenen die de score bijhouden, er zijn drie instanties van Steampipe in deze workflow:

#1 maakt de snapshots in een GitHub-actie met behulp van de Hacker News-plug-in.
#2 bouwt de tabel in uw lokale Steampipe-database, met behulp van de CSV-plug-in.
#3 start de lokale dashboardserver waarmee uw browser verbinding maakt.

HCL+SQL

Het paneel Bronnen biedt een keuzelijst met domeinen en vindt verhalen waarvan de URL’s overeenkomen met een geselecteerd domein. Hier is de SQL-query die alle URL’s leest en hun domeinen extraheert. Het lastigste is de reguliere expressie, maar dat geldt voor regexes in alle talen. De SQL zelf is eenvoudig en gemakkelijk te begrijpen.

with domains as (
  select distinct
    substring(url from 'http[s]*://([^/$]+)') as domain
  from
    hn_items_all
)
select
  domain as label,
  domain as value
from
  domains
order by
  domain

De HCL die de keuzelijst maakt, is eveneens eenvoudig en gemakkelijk te begrijpen.

input "domain" {
  width = 3
  sql = <

Dat is overal het patroon: SQL om de gegevens te krijgen, een dunne HCL-wrapper om de resultaten in een widget te laten vloeien. Deze twee soorten code, die samen het dashboard definiëren, worden geboren in een repo, evolueren daar en worden van daaruit geïmplementeerd. In systemen met weinig of geen code leeft dezelfde informatie in een gegevensopslag die wordt beheerd door een app. Het kan zijn dat (ik heb het ooit gedaan) die informatie moet exporteren om de evolutie van het systeem in een repo vast te leggen. Het is beter om het er altijd te hebben.

Het punt van low-of-no-code systemen is natuurlijk om code te verpakken in tooling die de creativiteit ontsluit van mensen die niet coderen. Er is nog niet zo'n tooling voor deze HCL + SQL-combo, maar die kan er zijn. Systemen die in code zijn gedefinieerd, zijn inherent vriendelijk voor tools die die code lezen en schrijven. De Hacker News-repo bevat bijvoorbeeld een grillig voorbeeld dat een grafiek animeert door programmatisch een dashboardbestand te bewerken en bepaalde HCL-waarden te wijzigen.

Hoewel ik voor dat voorbeeld geen parser heb gebruikt, zijn er natuurlijk HCL- en SQL-parsers die code als gegevens weergeven. In een eerdere aflevering hebben we laten zien hoe een andere Steampipe-plug-in Terraform-bestanden omzet in Steampipe-tabellen, waardoor een nalevingscontrole mogelijk wordt gemaakt die de Terraform-definities valideert. Terwijl u dashboards bouwt en ontwikkelt, zou u ze dan niet op dezelfde manier willen valideren? Een as-code architectuur garandeert dat het kan.

Dat gezegd hebbende, het coderen van Steampipe-dashboards in pure HCL + SQL is eenvoudig, leuk en enorm productief. Hier zijn twee van mijn favoriete dingen die het zo maken.

Live-editing

Wanneer u dashboardcode bewerkt in een editor die automatisch opslaat, reageert het dashboard onmiddellijk. Zoals hier wordt weergegeven, geldt dat voor wijzigingen in zowel de HCL-code die de gegevens orkestreert als de SQL-code die deze ophaalt.

Dit is een soort directe manipulatie-interface: "een benadering van interfaces die een continue weergave van interessante objecten omvat, samen met snelle, omkeerbare en incrementele acties en feedback." (Wikipedia)

Bret Victor is een groot voorvechter van deze aanpak. In dit deel van Inventing on Principle pakt hij het probleem aan dat directe manipulatie aanpakt.

Ik heb deze code, en ik heb deze foto hier, en ik moet de mapping tussen de twee in mijn hoofd onderhouden.

Hoe langer het duurt om de resultaten van codewijzigingen te zien, hoe moeilijker het is om die toewijzing te behouden. Onmiddellijke feedback is van onschatbare waarde en te vaak niet beschikbaar. We namen het als vanzelfsprekend aan bij het coderen van het vroege web, maar nu is er vaak een bouwstap die directe manipulatie dwarsboomt.

Bij het coderen van een Steampipe-dashboard krijg je direct feedback van zowel HCL als SQL. Ik heb de afgelopen jaren veel Postgres-query's geschreven. Het schrijven ervan in een omgeving die queryresultaten ververst terwijl ik typ, of Postgres-foutmeldingen weergeeft wanneer ik fouten maak, heeft een transformatie ondergaan.

web-gevoeligheid

Het coderen van Steampipe-dashboards doet me ook op andere manieren denken aan het vroege web. Links zijn bijvoorbeeld eersteklas burgers van Steampipe-dashboards, en dat is tegenwoordig niet altijd waar. Het deelvenster Inzendingen koppelt gebruikersnamen aan een ander dashboard dat alle inzendingen van een geselecteerde gebruiker verkent. Het werkt allemaal zoals een webontwikkelaar zou verwachten.

Er is ook een knop Bron bekijken. Onthoud Bron bekijken? Vroeger was het belangrijk op internet. Tegenwoordig laat het meestal alleen maar geminimaliseerde lijnruis zien. Maar de HCL + SQL-combo doet me denken aan de vroege HTML + JS-combo - op een goede manier! Hier is een kijkje in de bronnen achter een van de dashboardpanelen.

Samen met directe feedback hielp dit soort waarneembaarheid het vroege web van de grond. Je zou iets zien, je afvragen hoe het werd gedaan, de bron bekijken, leren en imiteren. Beginnende webbouwers kunnen niet langer deelnemen aan zo'n vicieuze cirkel. Newbie Steampipe-dashboardbouwers kunnen dat, en dat is een goed voorteken voor een bloeiend ecosysteem.

Gegevens visualiseren met de snelheid van het denken

Omdat Steampipe Postgres uitbreidt, kun je elke tool gebruiken om dashboards te maken die worden ondersteund door Steampipe-gegevens. Als je bedreven bent met Metabase, Tableau of een andere tool die verbinding maakt met Postgres, zal Steampipe's API-naar-database-tabel superkracht je vermogen versnellen om gegevens uit verschillende bronnen in die omgevingen te visualiseren. Maar als je de Steampipe-manier probeert te dashboarden, laat me dan weten hoe het gaat. In mijn eigen ervaring is het de snelste en leukste manier om een ​​idee om te zetten in een handig dashboard.

Copyright © 2022 IDG Communications, Inc.

Leave a Reply

Your email address will not be published.