Helm Releases from {props.name}
13 || plex | bjw-s/app-template | 35 | 16 | // check if table has plex, parse count value and check if it is above 15 17 | // first select row with plex 18 | const rows = await page.locator('table tbody tr:has(a:has-text("plex"))').all(); 19 | // at least one row should be found 20 | await expect(rows.length).toBeGreaterThan(0); 21 | // get the count value 22 | const count = await rows[0].locator('td:nth-of-type(3)').innerText(); 23 | // check if count is above or equal to 5 24 | await expect(parseInt(count)).toBeGreaterThan(4); 25 | 26 | // click on first cell of first row 27 | await rows[0].locator('td:nth-of-type(1) a').click(); 28 | 29 | // check url, it must be either of the two (OCI vs non-OCI) 30 | try { 31 | await expect(page).toHaveURL('/hr/bjw-s-labs.github.io-helm-charts-app-template-plex'); 32 | } catch (e) { 33 | await expect(page).toHaveURL('/hr/ghcr.io-bjw-s-labs-helm-app-template-plex'); 34 | } 35 | }); 36 | -------------------------------------------------------------------------------- /web/e2e/dynamic.spec.ts: -------------------------------------------------------------------------------- 1 | import { test, expect } from '@playwright/test'; 2 | 3 | test('test dynamic page', async ({ page }) => { 4 | await page.goto('.'); 5 | 6 | 7 | // Click [placeholder="search a chart"] 8 | await expect(page.locator('[placeholder="Search for a helm release..."]')).toBeFocused(); 9 | // Fill [placeholder="search a chart"] 10 | await page.locator('[placeholder="Search for a helm release..."]').type('istio'); 11 | // await expect(page).toHaveURL('#/istio'); 12 | 13 | 14 | // code to check if the search results are correct 15 | //plex | bjw-s/app-template | 35 | 16 | // check if table has plex, parse count value and check if it is above 15 17 | // first select row with plex 18 | const rows = await page.locator('table tbody tr:has(a:has-text("istio"))').all(); 19 | // at least one row should be found 20 | await expect(rows.length).toBeGreaterThan(0); 21 | // get the count value 22 | const lastRow = rows[rows.length - 1]; 23 | const count = await lastRow.locator('td:nth-of-type(3)').innerText(); 24 | // count < 3 25 | await expect(parseInt(count)).toBeLessThanOrEqual(3); 26 | 27 | const name = await lastRow.locator('td:nth-of-type(1) a').innerText(); 28 | 29 | await expect(name).toContain('istio'); 30 | 31 | // click on first cell of first row 32 | await lastRow.locator('td:nth-of-type(1) a').click(); 33 | 34 | // check url, /.*${name}/ 35 | await expect(page).toHaveURL(new RegExp(`.*${name}(#hr)?$`)); 36 | 37 | await expect(page.getByText(/All\s*Repositories/)).toBeVisible() 38 | 39 | }); 40 | -------------------------------------------------------------------------------- /flake.nix: -------------------------------------------------------------------------------- 1 | { 2 | inputs = { 3 | nixpkgs.url = "github:NixOS/nixpkgs/nixos-24.11"; 4 | devshell.url = "github:numtide/devshell"; 5 | 6 | }; 7 | 8 | outputs = inputs@{ flake-parts, ... }: 9 | flake-parts.lib.mkFlake { inherit inputs; } { 10 | imports = [ 11 | inputs.devshell.flakeModule 12 | ]; 13 | systems = [ "x86_64-linux" "x86_64-darwin" "aarch64-linux" "aarch64-darwin" ]; 14 | 15 | perSystem = { config, self', inputs', pkgs, lib, system, ... }: 16 | let 17 | nodejs = pkgs.nodejs_23; 18 | python = pkgs.python3; 19 | in 20 | { 21 | devshells.default = { 22 | env = [ 23 | { 24 | name = "BROWSER_PATH"; 25 | value = pkgs.playwright-driver.browsers; 26 | } 27 | { 28 | name = "PLAYWRIGHT_SKIP_VALIDATE_HOST_REQUIREMENTS"; 29 | value = "true"; 30 | } 31 | ]; 32 | commands = [ 33 | { 34 | help = "download repos"; 35 | name = "download"; 36 | command = "./scripts/download.mjs"; 37 | } 38 | { 39 | help = "run frontend"; 40 | name = "run"; 41 | command = "cd web/; yarn run dev"; 42 | } 43 | ]; 44 | packages = [ 45 | (python.withPackages (p: with p; [ 46 | requests 47 | ruamel-yaml 48 | pydantic 49 | ])) 50 | pkgs.sqlite 51 | pkgs.curl 52 | pkgs.playwright-driver 53 | pkgs.nodePackages.zx 54 | pkgs.nodePackages.npm 55 | pkgs.nodePackages.yarn 56 | ]; 57 | }; 58 | }; 59 | }; 60 | } 61 | -------------------------------------------------------------------------------- /web/tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | // darkMode: ["class"], 4 | content: [ 5 | "./index.html", 6 | "./src/**/*.{js,ts,jsx,tsx,md,html}", 7 | ], 8 | theme: { 9 | extend: { 10 | borderRadius: { 11 | lg: 'var(--radius)', 12 | md: 'calc(var(--radius) - 2px)', 13 | sm: 'calc(var(--radius) - 4px)' 14 | }, 15 | colors: { 16 | background: 'hsl(var(--background))', 17 | foreground: 'hsl(var(--foreground))', 18 | card: { 19 | DEFAULT: 'hsl(var(--card))', 20 | foreground: 'hsl(var(--card-foreground))' 21 | }, 22 | popover: { 23 | DEFAULT: 'hsl(var(--popover))', 24 | foreground: 'hsl(var(--popover-foreground))' 25 | }, 26 | primary: { 27 | DEFAULT: 'hsl(var(--primary))', 28 | foreground: 'hsl(var(--primary-foreground))' 29 | }, 30 | secondary: { 31 | DEFAULT: 'hsl(var(--secondary))', 32 | foreground: 'hsl(var(--secondary-foreground))' 33 | }, 34 | muted: { 35 | DEFAULT: 'hsl(var(--muted))', 36 | foreground: 'hsl(var(--muted-foreground))' 37 | }, 38 | accent: { 39 | DEFAULT: 'hsl(var(--accent))', 40 | foreground: 'hsl(var(--accent-foreground))' 41 | }, 42 | destructive: { 43 | DEFAULT: 'hsl(var(--destructive))', 44 | foreground: 'hsl(var(--destructive-foreground))' 45 | }, 46 | border: 'hsl(var(--border))', 47 | input: 'hsl(var(--input))', 48 | ring: 'hsl(var(--ring))', 49 | chart: { 50 | '1': 'hsl(var(--chart-1))', 51 | '2': 'hsl(var(--chart-2))', 52 | '3': 'hsl(var(--chart-3))', 53 | '4': 'hsl(var(--chart-4))', 54 | '5': 'hsl(var(--chart-5))' 55 | } 56 | } 57 | } 58 | }, 59 | plugins: [ 60 | require('@tailwindcss/typography'), 61 | require("tailwindcss-animate") 62 | ], 63 | } 64 | -------------------------------------------------------------------------------- /scripts/download.mjs: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env zx 2 | 3 | $.verbose = false; 4 | 5 | let date = null; 6 | 7 | // if argument, then it is a date 8 | if (process.argv[3]) { 9 | date = process.argv[3]; 10 | console.log("using date", date); 11 | } 12 | 13 | 14 | // download latest releases from github 15 | const repo = 'whazor/k8s-at-home-search'; 16 | // use $`curl` for download 17 | const { stdout } = await $`curl -s https://api.github.com/repos/${repo}/releases?per_page=100`; 18 | 19 | const sortedReleases = JSON.parse(stdout).map(r => r.name).sort(); 20 | const firstName = sortedReleases[0]; 21 | const lastName = sortedReleases[sortedReleases.length - 1]; 22 | const monthOldName = sortedReleases.length > 33 && sortedReleases[sortedReleases.length - 32]; 23 | 24 | const releases = JSON.parse(stdout); 25 | // print first and last release 26 | console.log(`from release: ${firstName}, to latest release: ${lastName}, one month ago: ${monthOldName}`); 27 | 28 | 29 | 30 | let release; 31 | if (date) { 32 | release = releases.find(({ name }) => name.includes(date)); 33 | } else { 34 | release = releases.find(({ name }) => name === lastName); 35 | } 36 | if (!release) { 37 | console.error("no release found"); 38 | process.exit(1); 39 | } 40 | console.log(`found release: ${release.name}`); 41 | 42 | // parse json 43 | const { assets } = release; 44 | 45 | const repos = assets.find(({ name }) => name === 'repos.db')["browser_download_url"]; 46 | const reposExtended = assets.find(({ name }) => name === 'repos-extended.db')["browser_download_url"]; 47 | 48 | console.log(`curl -s -L ${repos} -o ./web/repos${ 49 | date ? `-${date}` : "" 50 | }.db`); 51 | console.log(`curl -s -L ${reposExtended} -o ./web/repos-extended${ 52 | date ? `-${date}` : "" 53 | }.db`); 54 | 55 | // download files 56 | await $`curl -s -L ${repos} -o ./web/repos${ 57 | date ? `-${date}` : "" 58 | }.db`; 59 | await $`curl -s -L ${reposExtended} -o ./web/repos-extended${ 60 | date ? `-${date}` : "" 61 | }.db`; -------------------------------------------------------------------------------- /web/src/components/ui/tabs.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as TabsPrimitive from "@radix-ui/react-tabs" 3 | 4 | import { cn } from "@/lib/utils" 5 | 6 | const Tabs = TabsPrimitive.Root 7 | 8 | const TabsList = React.forwardRef< 9 | React.ElementRef
9 |
10 | 
11 |
12 | ## development
13 | Overview:
14 | ```mermaid
15 | graph LR
16 | I[interesting.py]
17 | I-->|repos.json|Init[init-db.py]
18 | Init-->|repos.db: repos|download[download.py]
19 | Init-->|repos.db: repos|search
20 | download-->|repos/ submodules|search[search.py]
21 | search-->|repos.db: repos,charts|frontend
22 | ```
23 |
24 | **To build repos.db (optional for frontend, check step below)**
25 |
26 | Python requirements: `pip install -r requirements.txt`
27 |
28 | Updating `repos.json` (can be skipped, already included in source):
29 | ```
30 | python3 interesting.py
31 | ```
32 |
33 | Setting up `repos.db` repos table (requires `repos.json`):
34 | ```
35 | python3 init-db.py
36 | ```
37 |
38 | Download repos into `repos/` (requires repo.db):
39 | ```
40 | python3 download.py
41 | ```
42 |
43 | Setting up `repos.db` charts table:
44 | ```
45 | python3 search.py
46 | ```
47 |
48 | **Setting up the frontend**
49 |
50 | ```
51 | wget https://github.com/Whazor/k8s-at-home-search/releases/latest/download/repos.db.zz -P frontend/public/
52 | wget https://github.com/Whazor/k8s-at-home-search/releases/latest/download/repos-extended.db.zz -P frontend/public/
53 |
54 | cd frontend/
55 | yarn install
56 | yarn run dev
57 | ```
58 |
59 | ### tables
60 |
61 | **repo**
62 | | **column name** | repo_name | url | branch | stars |
63 | |-----------------|------------------|------------------------------------|-----------------|---------|
64 | | **value** | text primary key | text | text | integer |
65 | | **example** | user-reponame | "https://github.com/user/reponame" | main/master/... | 42 |
66 |
67 | **flux_helm_release**
68 | | **column name** | chart_name | repo_name | url | hajimari_icon | timestamp |
69 | |-----------------|------------|---------------|---------------------------------------------------------------------|---------------|------------|
70 | | **value** | text | text | text | text null | integer |
71 | | **example** | plex | user-reponame | "https://github.com/user/reponame/.../../traefik/helm-release.yaml" | tv | 1644404532 |
72 |
--------------------------------------------------------------------------------
/web/src/generators/helm-release/models.ts:
--------------------------------------------------------------------------------
1 |
2 | export type ReleaseInfoCompressed = [
3 | string, // release
4 | string, // chart
5 | string, // name
6 | string, // key
7 | number, // chartsUrl
8 | number, // count,
9 | string|undefined, // icon
10 | string|undefined, // group
11 | ]
12 |
13 | export interface RepoAlsoHas {
14 | interestingIdToName: Record| Release | 85 |Chart | 86 |Count | 87 |
|---|---|---|
| {simplifyURL(chartsUrl) + '/' + chart} | 94 |{count} | 95 ||
| {simplifyURL(chartsUrl) + '/' + chart} | 101 |{count} | 102 |
114 |
115 |
135 |
180 | )
181 | }
182 |
--------------------------------------------------------------------------------
/web/public/k8s-search.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
31 |
--------------------------------------------------------------------------------
/web/src/generators/helm-release/generator.ts:
--------------------------------------------------------------------------------
1 | import fs from 'node:fs'
2 | import path from 'node:path'
3 | import { Database } from "sqlite";
4 | import sqlite3 from "sqlite3";
5 | import { marked } from 'marked';
6 |
7 | import { dirname } from 'path';
8 | import { fileURLToPath } from 'url';
9 |
10 | const __dirname = dirname(fileURLToPath(import.meta.url));
11 |
12 | // const createDOMPurify = require('dompurify');
13 | // const { JSDOM } = require('jsdom');
14 | import createDOMPurify from 'dompurify';
15 | import { JSDOM } from 'jsdom';
16 | import { CollectorData, ReleaseInfo, RepoInfo, ValuesData, PageData, MINIMUM_COUNT, ValueTree, ReleaseInfoCompressed, AppData, RepoPageData, RepoReleaseInfo, denormalize, GrepData, ImagePageData } from './models';
17 | import { mode, simplifyURL } from '../../utils';
18 |
19 | const window = new JSDOM('').window;
20 | // @ts-expect-error
21 | const DOMPurify = createDOMPurify(window);
22 |
23 |
24 | // When looking at a certain release,
25 | // we want to offer users the ability to filter
26 | // repos that also have the following releases.
27 | //
28 | // Add more if you want via PR. The idea is to have releases
29 | // that divide the community into groups, such as nginx vs traefik.
30 | const INTERESTING = [
31 | 'authelia',
32 | 'authentik',
33 | 'nfs-subdir-external-provisioner',
34 | 'cloudnative-pg',
35 | 'csi-driver-nfs',
36 | 'external-dns',
37 | 'ingress-nginx',
38 | 'longhorn',
39 | 'rook-ceph-cluster',
40 | 'traefik',
41 | 'velero',
42 | 'volsync',
43 | ];
44 |
45 | function mergeHelmURL(url: string) {
46 | // wrap http to known oci registries
47 | const mapping: Record
136 |
146 |
178 |
179 |
137 | childRef.current!.onEnter()}
140 | mode={mode} setMode={setMode}
141 | />
142 | {mode === "hr" &&
145 | 47 | 48 | )} 49 | } 50 | const [valueMode, valueCount] = modeCount(values?.map(v => v[1]) || []) 51 | return ( 52 |
53 | setShow(!show)} title={`List all values from ${name}`}>
54 | {name} ({values?.length || 0})
55 |
56 | {(valueCount >= 3 || props.showMin) && ({
63 | key: "show-values" + props.name + url,
64 | data: [
65 |
57 |
}
59 | {show && values && (
60 | {valueToText("show-values" + props.name, valueMode)}
58 |