10 |
11 |
12 |
13 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/public/close.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/hooks/queries/useGithub.ts:
--------------------------------------------------------------------------------
1 | import { useQuery } from "@tanstack/react-query";
2 | import { ApiError, GithubResponse } from "@/lib/types";
3 |
4 | export default function useGithub() {
5 | return useQuery({
6 | queryKey: ["github"],
7 | queryFn: () => {
8 | return fetch("https://api.github.com/repos/last9/awesome-prometheus-toolkit")
9 | .then((res) => res.json())
10 | .then((response: GithubResponse) => response)
11 | .catch((error: ApiError) => {
12 | throw new Error(error.reason, { cause: error.code });
13 | });
14 | },
15 | refetchOnWindowFocus: false,
16 | staleTime: Infinity,
17 | });
18 | }
19 |
--------------------------------------------------------------------------------
/components/AlertGroup.tsx:
--------------------------------------------------------------------------------
1 | import { AlertComponent } from "@/components/AlertComponent";
2 | import { Alert } from "@/lib/types";
3 |
4 | export const AlertGroup = ({ group, components }: Alert) => {
5 | return (
6 |
7 |
19 | );
20 | };
21 |
--------------------------------------------------------------------------------
/components/ExternalLink.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Image from "next/image";
4 |
5 | interface ExternalLinkProps {
6 | image: string;
7 | link?: string;
8 | title: string;
9 | }
10 |
11 | export const ExternalLink = ({ image, link, title }: ExternalLinkProps) => {
12 | const handleClick = () => {
13 | if (link) {
14 | window.open(link, "_blank");
15 | }
16 | };
17 |
18 | return (
19 | {group.toUpperCase()}
8 | 9 |
10 | {components.map((component, index) => (
11 |
18 |
20 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/components/AllRulesApplied.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 |
3 | export const AllRulesApplied = () => {
4 | return (
5 | {title}
22 |
6 |
21 | );
22 | };
23 |
--------------------------------------------------------------------------------
/public/search.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/hooks/queries/useAlerts.ts:
--------------------------------------------------------------------------------
1 | import { useQuery } from "@tanstack/react-query";
2 | import { ApiError, UseAlertsResponse } from "@/lib/types";
3 |
4 | export default function useAlerts() {
5 | return useQuery({
6 | queryKey: ["alerts"],
7 | queryFn: () => {
8 | return fetch("/api/alerts")
9 | .then((res) => res.json())
10 | .then((response: UseAlertsResponse) => {
11 | if (response.status === "error") {
12 | throw response;
13 | }
14 | return response.data.alerts;
15 | })
16 | .catch((error: ApiError) => {
17 | throw new Error(error.reason, { cause: error.code });
18 | });
19 | },
20 | refetchOnWindowFocus: false,
21 | staleTime: Infinity,
22 | });
23 | }
24 |
--------------------------------------------------------------------------------
/components/Tab.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 |
3 | interface TabProps {
4 | active: boolean;
5 | onClick: () => void;
6 | title: string;
7 | textClassName?: string;
8 | }
9 |
10 | export const Tab = ({ active, title, onClick, textClassName }: TabProps) => {
11 | return (
12 |
16 |
20 | 17 | {"Looks like all our recommendations have\nbeen applied! No new ones as of now."} 18 |
19 |
13 |
26 | );
27 | };
28 |
--------------------------------------------------------------------------------
/prometheus-server/prometheus/prometheus.yml:
--------------------------------------------------------------------------------
1 | global:
2 | scrape_interval: 15s
3 |
4 | rule_files:
5 | - "/etc/prometheus/rules.yml"
6 |
7 | scrape_configs:
8 | - job_name: "clickhouse"
9 | static_configs:
10 | - targets: ["clickhouse:9363"]
11 |
12 | - job_name: "elasticsearch"
13 | static_configs:
14 | - targets: ["elasticsearch-exporter:9114"]
15 |
16 | - job_name: "haproxy"
17 | static_configs:
18 | - targets: ["haproxy:8404"]
19 |
20 | - job_name: "nginx"
21 | static_configs:
22 | - targets: ["nginx-exporter:9113"]
23 |
24 | - job_name: "postgres"
25 | static_configs:
26 | - targets: ["postgres_exporter:9187"]
27 |
28 | - job_name: "prometheus"
29 | static_configs:
30 | - targets: ["prometheus:9090"]
31 |
--------------------------------------------------------------------------------
/components/NoAppliedRules.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 |
3 | export const NoAppliedRules = () => {
4 | return (
5 | 21 | {title} 22 |
23 | 24 | 25 |
6 |
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": [
4 | "dom",
5 | "dom.iterable",
6 | "esnext"
7 | ],
8 | "allowJs": true,
9 | "skipLibCheck": true,
10 | "strict": true,
11 | "noEmit": true,
12 | "esModuleInterop": true,
13 | "module": "esnext",
14 | "moduleResolution": "bundler",
15 | "resolveJsonModule": true,
16 | "isolatedModules": true,
17 | "jsx": "preserve",
18 | "incremental": true,
19 | "plugins": [
20 | {
21 | "name": "next"
22 | }
23 | ],
24 | "paths": {
25 | "@/*": [
26 | "./*"
27 | ]
28 | }
29 | },
30 | "include": [
31 | "next-env.d.ts",
32 | "**/*.ts",
33 | "**/*.tsx",
34 | ".next/types/**/*.ts"
35 | ],
36 | "exclude": [
37 | "node_modules"
38 | ]
39 | }
--------------------------------------------------------------------------------
/public/github.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/components/Loader.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 |
3 | interface LoaderProps {
4 | className?: string;
5 | mode?: "dark" | "light";
6 | size?: "xs" | "sm" | "md" | "lg" | "xl";
7 | }
8 |
9 | export const Loader = ({ className, mode = "dark", size = "md" }: LoaderProps) => {
10 | const getSize = () => {
11 | if (size === "xs") return "h-2 w-2";
12 | else if (size === "sm") return "h-4 w-4";
13 | else if (size === "md") return "h-6 w-6";
14 | else if (size === "lg") return "h-8 w-8";
15 | else if (size === "xl") return "h-10 w-10";
16 | };
17 |
18 | return (
19 |
27 | );
28 | };
29 |
--------------------------------------------------------------------------------
/hooks/useAuth.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { useLocalStorage } from "@/hooks/useLocalStorage";
3 |
4 | export default function useAuth() {
5 | const [ready, setReady] = useState(false);
6 | const [loggedIn, setLoggedIn] = useState
9 |
17 | 10 | {"No rules for this component\nwere found in the config."} 11 |
12 | 13 |14 | {"Apply rules from the Recommended\nsection and they’ll start showing up here."} 15 |
16 |
19 |
30 | );
31 | };
32 |
--------------------------------------------------------------------------------
/public/zap.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/components/Button.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react";
2 | import { LoadingDots } from "@/components/LoadingDots";
3 | import { cn } from "@/lib/utils";
4 |
5 | interface ButtonProps {
6 | className?: string;
7 | children?: ReactNode;
8 | disabled?: boolean;
9 | icon?: ReactNode;
10 | loading?: boolean;
11 | onClick: () => void;
12 | }
13 |
14 | export const Button = ({
15 | className,
16 | children,
17 | disabled = false,
18 | icon,
19 | loading = false,
20 | onClick,
21 | }: ButtonProps) => {
22 | return (
23 |
36 | );
37 | };
38 |
--------------------------------------------------------------------------------
/components/ServiceIcon.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Image from "next/image";
4 | import { useMemo, useState } from "react";
5 | import { cn } from "@/lib/utils";
6 |
7 | interface ServiceIcon {
8 | color?: string | null;
9 | className?: string;
10 | name: string;
11 | }
12 |
13 | const errored: string[] = [];
14 |
15 | export const ServiceIcon = ({ color, className, name }: ServiceIcon) => {
16 | const [error, setError] = useState(false);
17 |
18 | const imageUrl = useMemo(() => {
19 | const serviceName = name.split(" ")[0].toLowerCase();
20 |
21 | if (color) {
22 | return `https://cdn.simpleicons.org/${serviceName}/${color}`;
23 | }
24 |
25 | return `https://cdn.simpleicons.org/${serviceName}`;
26 | }, [color, name]);
27 |
28 | return (
29 | 27 | {name} 28 |
29 |
31 | {children}
33 |
34 |
35 |
24 | {left ? left : null}
25 |
26 | setFocused(true)}
34 | onBlur={() => setFocused(false)}
35 | ref={ref}
36 | {...props}
37 | />
38 |
39 | {right ? right : null}
40 |
41 | );
42 | },
43 | );
44 | Input.displayName = "Input";
45 |
--------------------------------------------------------------------------------
/public/fire.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/file.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/components/Sidebar.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import { useRouter } from "next/navigation";
3 | import { Button } from "@/components/Button";
4 | import { SideBarComponent } from "@/components/SideBarComponent";
5 | import { Component } from "@/lib/types";
6 |
7 | interface SidebarProps {
8 | components: Component[];
9 | onSelect: (index: number) => void;
10 | selected: number;
11 | }
12 |
13 | export const Sidebar = ({ components, onSelect, selected }: SidebarProps) => {
14 | const router = useRouter();
15 |
16 | return (
17 |
18 |
49 | );
50 | };
51 |
--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "tailwindcss";
2 | import defaultTheme from "tailwindcss/defaultTheme";
3 |
4 | const config = {
5 | darkMode: "class",
6 | content: ["./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}"],
7 | theme: {
8 | fontFamily: {
9 | sans: [
10 | ["Inter", ...defaultTheme.fontFamily.sans],
11 | { fontFeatureSettings: '"ss04", "ss01", "cpsp"' },
12 | ],
13 | mono: ["JetBrains Mono", ...defaultTheme.fontFamily.mono],
14 | },
15 | extend: {
16 | colors: {
17 | "yaml-key": "rgba(34, 134, 58, 1)",
18 | "yaml-value": "rgba(3, 47, 98, 1)",
19 | overlay: "rgba(39, 55, 71, 0.5)",
20 | },
21 | keyframes: {
22 | "accordion-down": {
23 | from: { height: "0" },
24 | to: { height: "var(--radix-accordion-content-height)" },
25 | },
26 | "accordion-up": {
27 | from: { height: "var(--radix-accordion-content-height)" },
28 | to: { height: "0" },
29 | },
30 | "loading-dots": {
31 | "0%": {
32 | transform: "translate(0, 0)",
33 | },
34 | "50%": {
35 | transform: "translate(0, 6px)",
36 | },
37 | "100%": {
38 | transform: "translate(0, 0)",
39 | },
40 | },
41 | },
42 | animation: {
43 | "accordion-down": "accordion-down 0.2s ease-out",
44 | "accordion-up": "accordion-up 0.2s ease-out",
45 | "loading-dots": "loading-dots 1s ease-in-out infinite",
46 | },
47 | },
48 | },
49 | plugins: [require("tailwindcss-animate")],
50 | } satisfies Config;
51 |
52 | export default config;
53 |
--------------------------------------------------------------------------------
/app/api/rules/route.ts:
--------------------------------------------------------------------------------
1 | import { NextRequest, NextResponse } from "next/server";
2 | import { PrometheusQueryProps, PrometheusRulesResponse } from "@/lib/types";
3 |
4 | export async function POST(req: NextRequest) {
5 | try {
6 | const headers = new Headers();
7 | const { url, username, password }: PrometheusQueryProps = await req.json();
8 | const queryUrl = `${url}/api/v1/rules`;
9 |
10 | if (username && password) {
11 | headers.set(
12 | "Authorization",
13 | "Basic " + Buffer.from(username + ":" + password).toString("base64"),
14 | );
15 | }
16 |
17 | const response = await fetch(queryUrl, { headers });
18 |
19 | if (!response.ok) {
20 | throw response.status;
21 | }
22 |
23 | const { data, status }: PrometheusRulesResponse = await response.json();
24 |
25 | if (status !== "success") {
26 | throw 500;
27 | }
28 |
29 | return NextResponse.json({
30 | status: "success",
31 | data: { groups: data.groups },
32 | });
33 | } catch (error) {
34 | let code;
35 | let reason;
36 |
37 | if (typeof error !== "number") {
38 | code = 500;
39 | } else {
40 | code = error;
41 | }
42 |
43 | if (code === 404) {
44 | reason = "APT was not able to connect to your Prometheus. Please try again.";
45 | } else if (code === 401) {
46 | reason = "Unauthorized: Prometheus server requires username and password";
47 | } else if (code === 500) {
48 | reason = "Something went wrong. Please try again later.";
49 | }
50 |
51 | return NextResponse.json(
52 | {
53 | code,
54 | reason,
55 | status: "error",
56 | },
57 | { status: code },
58 | );
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/app/api/prometheus/route.ts:
--------------------------------------------------------------------------------
1 | import { NextRequest, NextResponse } from "next/server";
2 | import { PrometheusQueryProps, PrometheusQueryResponse } from "@/lib/types";
3 |
4 | export async function POST(req: NextRequest) {
5 | try {
6 | const headers = new Headers();
7 | const { url, query, username, password }: PrometheusQueryProps = await req.json();
8 | const queryUrl = `${url}/api/v1/query?query=${encodeURIComponent(query)}`;
9 |
10 | if (username && password) {
11 | headers.set(
12 | "Authorization",
13 | "Basic " + Buffer.from(username + ":" + password).toString("base64"),
14 | );
15 | }
16 |
17 | const response = await fetch(queryUrl, { headers });
18 |
19 | if (!response.ok) {
20 | throw response.status;
21 | }
22 |
23 | const { data, status }: PrometheusQueryResponse = await response.json();
24 |
25 | if (status !== "success") {
26 | throw 500;
27 | }
28 |
29 | return NextResponse.json({
30 | status: "success",
31 | data: { result: data.result },
32 | });
33 | } catch (error) {
34 | let code;
35 | let reason;
36 |
37 | if (typeof error !== "number") {
38 | code = 500;
39 | } else {
40 | code = error;
41 | }
42 |
43 | if (code === 404) {
44 | reason = "APT was not able to connect to your Prometheus. Please try again.";
45 | } else if (code === 401) {
46 | reason = "Unauthorized: Invalid username/password";
47 | } else if (code === 500) {
48 | reason = "APT was not able to connect to your Prometheus. Please try again.";
49 | }
50 |
51 | return NextResponse.json(
52 | {
53 | code,
54 | reason,
55 | status: "error",
56 | },
57 | { status: code },
58 | );
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/components/RuleCard.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import { YamlView } from "@/components/YamlView";
3 | import { RuleDetails } from "@/lib/types";
4 | import { cn } from "@/lib/utils";
5 |
6 | interface RuleCardProps {
7 | applied?: boolean;
8 | number: number;
9 | rule: RuleDetails;
10 | }
11 |
12 | export const RuleCard = ({ applied = false, number, rule }: RuleCardProps) => {
13 | const formattedNumber = number < 10 ? `0${number}` : number;
14 |
15 | return (
16 |
19 |
21 |
22 | DISCOVERED
20 |
23 | {components.map((component, index) => (
24 | onSelect(index)}
29 | />
30 | ))}
31 |
32 |
33 |
43 | }
44 | onClick={() => router.push("/library")}
45 | >
46 | View more
47 |
48 |
17 |
53 | );
54 | };
55 |
--------------------------------------------------------------------------------
/public/green-tick.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/prometheus-server/docker-compose.yml:
--------------------------------------------------------------------------------
1 | services:
2 | clickhouse:
3 | image: clickhouse/clickhouse-server
4 | ports:
5 | - "8123:8123"
6 | - "9000:9000"
7 | - "9363:9363"
8 | volumes:
9 | - clickhouse-data:/var/lib/clickhouse
10 | - ./clickhouse/config.xml:/etc/clickhouse-server/config.d/config.xml
11 |
12 | elasticsearch:
13 | image: docker.elastic.co/elasticsearch/elasticsearch:8.14.1
14 | ports:
15 | - "9200:9200"
16 | - "9300:9300"
17 | environment:
18 | - discovery.type=single-node
19 | volumes:
20 | - es-data:/usr/share/elasticsearch/data
21 |
22 | elasticsearch-exporter:
23 | image: prometheuscommunity/elasticsearch-exporter
24 | ports:
25 | - "9114:9114"
26 | environment:
27 | - ES_URI=http://elasticsearch:9200
28 | - ES_ALL=true
29 |
30 | haproxy:
31 | image: haproxy
32 | ports:
33 | - "8404:8404"
34 | volumes:
35 | - ./haproxy/haproxy.cfg:/usr/local/etc/haproxy/haproxy.cfg
36 |
37 | nginx:
38 | image: nginx
39 | ports:
40 | - "8080:80"
41 | volumes:
42 | - ./nginx/nginx.conf:/etc/nginx/nginx.conf
43 |
44 | nginx-exporter:
45 | image: nginx/nginx-prometheus-exporter
46 | ports:
47 | - "9113:9113"
48 | command: ["-nginx.scrape-uri", "http://nginx:8080/stub_status"]
49 |
50 | postgres:
51 | image: postgres
52 | ports:
53 | - "5432:5432"
54 | environment:
55 | - POSTGRES_USER=myuser
56 | - POSTGRES_PASSWORD=mypassword
57 | - POSTGRES_DB=mydb
58 | volumes:
59 | - pg-data:/var/lib/postgresql/data
60 |
61 | postgres_exporter:
62 | image: prometheuscommunity/postgres-exporter
63 | ports:
64 | - "9187:9187"
65 | environment:
66 | DATA_SOURCE_NAME: "postgresql://myuser:mypassword@postgres:5432/mydb?sslmode=disable"
67 | depends_on:
68 | - postgres
69 |
70 | prometheus:
71 | image: prom/prometheus
72 | ports:
73 | - "9090:9090"
74 | volumes:
75 | - ./prometheus:/etc/prometheus
76 |
77 | volumes:
78 | clickhouse-data:
79 | es-data:
80 | pg-data:
81 |
--------------------------------------------------------------------------------
/app/api/discovery/route.ts:
--------------------------------------------------------------------------------
1 | import { NextRequest, NextResponse } from "next/server";
2 | import { ComponentExpressionList } from "@/lib/discovery";
3 | import { PrometheusQueryProps, PrometheusQueryResponse } from "@/lib/types";
4 |
5 | export async function POST(req: NextRequest) {
6 | try {
7 | const headers = new Headers();
8 | const { url, username, password }: PrometheusQueryProps = await req.json();
9 |
10 | if (username && password) {
11 | headers.set(
12 | "Authorization",
13 | "Basic " + Buffer.from(username + ":" + password).toString("base64"),
14 | );
15 | }
16 |
17 | const discovery = await Promise.all(
18 | Object.entries(ComponentExpressionList).map(async ([component, expr]) => {
19 | const queryUrl = `${url}/api/v1/query?query=${encodeURIComponent(expr)}`;
20 | const response = await fetch(queryUrl, { headers });
21 |
22 | if (!response.ok) {
23 | return null;
24 | }
25 |
26 | const { data, status }: PrometheusQueryResponse = await response.json();
27 |
28 | if (status !== "success") {
29 | return null;
30 | }
31 |
32 | return {
33 | component: component,
34 | exists: data.result.length > 0,
35 | };
36 | }),
37 | );
38 |
39 | const discovered = discovery.filter((component) => component && component.exists);
40 |
41 | if (discovered.length === 0) {
42 | throw 404;
43 | }
44 |
45 | return NextResponse.json({
46 | status: "success",
47 | data: { discovered },
48 | });
49 | } catch (error) {
50 | let code;
51 | let reason;
52 |
53 | if (typeof error !== "number") {
54 | code = 500;
55 | } else {
56 | code = error;
57 | }
58 |
59 | if (code === 404) {
60 | reason = "No components were discovered on this Prometheus server.";
61 | } else if (code === 401) {
62 | reason = "Unauthorized: Prometheus server requires username and password";
63 | } else if (code === 500) {
64 | reason = "Something went wrong. Please try again later.";
65 | }
66 |
67 | return NextResponse.json(
68 | {
69 | code,
70 | reason,
71 | status: "error",
72 | },
73 | { status: code },
74 | );
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/lib/types.ts:
--------------------------------------------------------------------------------
1 | export interface Alert {
2 | group: string;
3 | components: Component[];
4 | }
5 |
6 | export interface Component {
7 | name: string;
8 | rules: RuleDetails[];
9 | }
10 |
11 | export interface RuleDetails {
12 | summary: string;
13 | description: string;
14 | yml: Rule;
15 | }
16 |
17 | export interface Rule {
18 | alert: string;
19 | expr: string;
20 | for: string;
21 | labels: {
22 | severity: string;
23 | };
24 | annotations: {
25 | summary: string;
26 | description: string;
27 | };
28 | }
29 |
30 | export interface MappingRule {
31 | name: string;
32 | description: string;
33 | query: string;
34 | severity: string;
35 | for: string;
36 | }
37 |
38 | export interface MappingFile {
39 | groups: Group[];
40 | }
41 |
42 | export interface RuleFile {
43 | groups: {
44 | name: string;
45 | rules: Rule[];
46 | }[];
47 | }
48 |
49 | export interface Group {
50 | name: string;
51 | services: Service[];
52 | }
53 |
54 | export interface Service {
55 | name: string;
56 | exporters: Exporter[];
57 | }
58 |
59 | export interface Exporter {
60 | name: string;
61 | slug: string;
62 | rules: MappingRule[];
63 | }
64 | export interface ApiError {
65 | code: number;
66 | reason: string;
67 | status: string;
68 | }
69 |
70 | export interface UseAlertsResponse {
71 | data: { alerts: Alert[] };
72 | status: string;
73 | }
74 |
75 | export interface Discovery {
76 | component: string;
77 | exists: boolean;
78 | }
79 |
80 | export interface RuleGroup {
81 | name: string;
82 | file: string;
83 | rules: PrometheusRule[];
84 | }
85 |
86 | export interface PrometheusRule {
87 | name: string;
88 | query: string;
89 | labels: {
90 | severity: string;
91 | };
92 | annotations: {
93 | summary: string;
94 | description: string;
95 | };
96 | }
97 |
98 | export interface UseDiscoveryResponse {
99 | data: { discovered: Discovery[] };
100 | status: string;
101 | }
102 |
103 | export interface UseRulesResponse {
104 | data: { groups: RuleGroup[] };
105 | status: string;
106 | }
107 |
108 | export interface PrometheusQueryResponse {
109 | data: {
110 | result: object[];
111 | resultType: string;
112 | };
113 | isPartial?: boolean;
114 | status: string;
115 | }
116 |
117 | export interface PrometheusQueryProps {
118 | url: string;
119 | query: string;
120 | username?: string | null;
121 | password?: string | null;
122 | }
123 |
124 | export interface PrometheusRulesResponse {
125 | data: {
126 | groups: RuleGroup[];
127 | };
128 | status: string;
129 | }
130 |
131 | export interface GithubResponse {
132 | stargazers_count: number;
133 | }
134 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
18 |
43 |
44 |
24 | {applied ? (
25 |
37 |
38 | {formattedNumber}
35 | )} 36 |
39 |
42 | {rule.summary}
40 |{rule.description}
41 |
45 |
52 |
46 |
49 |
50 | {rule.summary}
47 |{rule.description}
48 |
2 |
3 | # Awesome Prometheus Toolkit
4 |
5 | _The most apt toolkit for your Prometheus setup._
6 |
7 | Kickstarting your monitoring journey with Prometheus is a broken experience and one struggles with a standardized set of components, alerting rules, and dashboards to use. APT aims to build a standardized resource across the instrumentation, query, and alerting pipelines.
8 |
9 | With the v0.1 of Awesome Prometheus Toolkit, we are setting a foundation for an amazing Prometheus developer experience we want:
10 |
11 | 1. You point APT to your running Prometheus server
12 | 2. APT identifies which components are sending metrics to Prometheus
13 | 3. APT gives recommendations on what alert rules (sourced from [awesome-prometheus-alerts](https://github.com/samber/awesome-prometheus-alerts)) should be applied
14 |
15 | Read our launch blog post [here](https://last9.io/blog/announcing-awesome-prometheus-toolkit).
16 |
17 | [](https://www.youtube.com/watch?v=yFqCdkc23Gc)
18 |
19 | Currently, APT gives you recommendations and tracks which rules are already applied for the following components:
20 |
21 | 1. Clickhouse
22 | 2. Elasticsearch
23 | 3. HaProxy
24 | 4. Kubernetes
25 | 5. Nginx
26 | 6. PostgreSQL
27 |
28 | ## 💻 Getting Started
29 |
30 | 1. Run `npm install` to install the dependencies
31 | 2. Run `npm run dev` to run the dev server
32 | 3. Open `localhost:3000` in your browser
33 | 4. Enter the URL of your local/test/production Prometheus server, and click Connect
34 | - You can also set the auth, if your server requires it
35 | 5. Once APT identifies the supported components in your emitted metrics, you can view the recommendations. You can simply copy the recommended rules and apply them in your Prometheus’ `rules.yml`
36 | 6. If you have any additional components, you can also use the Browse Library section to find and copy those rules
37 |
38 | ## 🔧 Setup Demo Prometheus Server (Optional)
39 |
40 | If you don’t have a Prometheus server handy but still want to play around with APT, you can also use the demo setup provided in the repo to generate metrics for the supported components (except Kubernetes).
41 |
42 | 1. Run `cd prometheus-server`
43 | 2. Run `docker compose up` to start the local server
44 | 3. Use `localhost:9090` as the source URL on the APT home screen, without any required auth
45 |
46 | ## About Last9
47 |
48 | [Last9](https://last9.io) builds reliability tools for SRE and DevOps.
49 |
50 | 
51 |
--------------------------------------------------------------------------------
/app/api/alerts/route.ts:
--------------------------------------------------------------------------------
1 | import { NextResponse } from "next/server";
2 | import yaml from "js-yaml";
3 | import { Alert, MappingFile, RuleFile } from "@/lib/types";
4 |
5 | const FILE_BASE = "https://raw.githubusercontent.com/samber/awesome-prometheus-alerts/master";
6 |
7 | // To fetch yml file from a given url
8 | async function fetchYml(url: string) {
9 | const response = await fetch(url);
10 |
11 | if (!response.ok) {
12 | throw 404;
13 | }
14 |
15 | return await response.text();
16 | }
17 |
18 | // Refactoring data to serve it on the frontend
19 | export async function GET() {
20 | try {
21 | const mappingYaml: string = await fetchYml(`${FILE_BASE}/_data/rules.yml`);
22 | const mappings = yaml.load(mappingYaml) as MappingFile;
23 |
24 | const alerts: Alert[] = await Promise.all(
25 | mappings.groups.map(async (group) => {
26 | const components = await Promise.all(
27 | group.services.map(async (service) => {
28 | const name = service.name.replaceAll(" ", "-").toLowerCase().trim();
29 |
30 | return await Promise.all(
31 | service.exporters.flatMap(async (exporter) => {
32 | const ruleYml = await fetchYml(
33 | `${FILE_BASE}/dist/rules/${name}/${exporter.slug}.yml`,
34 | );
35 |
36 | const ruleJson = yaml.load(ruleYml) as RuleFile;
37 |
38 | const rules = ruleJson.groups
39 | .flatMap((group) => group.rules)
40 | .filter((rule) => rule !== null)
41 | .map((rule, index) => ({
42 | summary: exporter.rules[index].name,
43 | description: exporter.rules[index].description,
44 | yml: rule,
45 | }));
46 |
47 | return {
48 | name:
49 | service.exporters.length > 1
50 | ? `${service.name} (${exporter.name})`
51 | : service.name,
52 | rules,
53 | };
54 | }),
55 | );
56 | }),
57 | );
58 |
59 | return {
60 | group: group.name,
61 | components: components.flat(),
62 | };
63 | }),
64 | );
65 |
66 | return NextResponse.json({
67 | status: "success",
68 | data: { alerts },
69 | });
70 | } catch (error) {
71 | let code;
72 | let reason;
73 |
74 | if (typeof error !== "number") {
75 | code = 500;
76 | } else {
77 | code = error;
78 | }
79 |
80 | if (code === 404) {
81 | reason = "Failed to fetch repository contents";
82 | } else if (code === 500) {
83 | reason = "Something went wrong. Please try again later.";
84 | }
85 |
86 | return NextResponse.json(
87 | {
88 | code,
89 | reason,
90 | status: "error",
91 | },
92 | { status: code },
93 | );
94 | }
95 | }
96 |
--------------------------------------------------------------------------------
/components/Header.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { usePathname, useRouter } from "next/navigation";
4 | import useGithub from "@/hooks/queries/useGithub";
5 | import useAuth from "@/hooks/useAuth";
6 | import { useQueryClient } from "@tanstack/react-query";
7 | import AptLogo from "@/components/AptLogo";
8 | import { Divider } from "@/components/Divider";
9 | import { ExternalLink } from "@/components/ExternalLink";
10 | import { Page } from "@/components/Page";
11 | import {
12 | Tooltip,
13 | TooltipArrow,
14 | TooltipContent,
15 | TooltipProvider,
16 | TooltipTrigger,
17 | } from "@/components/ui/tooltip";
18 | import { cn } from "@/lib/utils";
19 |
20 | export const Header = () => {
21 | const router = useRouter();
22 | const { data } = useGithub();
23 | const { promUrl } = useAuth();
24 | const pathname = usePathname();
25 | const queryClient = useQueryClient();
26 |
27 | const changeSourcePath = () => {
28 | queryClient.clear();
29 | localStorage.clear();
30 | router.replace("/");
31 | };
32 |
33 | return (
34 |
36 |
80 |
81 |
39 |
79 |
40 |
43 |
44 |
45 |
46 |
47 |
48 |
50 |
51 |
52 |
67 |
68 |
69 |
70 | {data?.stargazers_count ? (
71 |
78 |
55 |
66 | {promUrl}
56 | 57 | 58 | 59 |63 | Edit 64 |
65 |
13 |
74 | );
75 | };
76 |
--------------------------------------------------------------------------------
/public/last9.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/components/SidebarContent.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo, useState } from "react";
2 | import { AllRulesApplied } from "@/components/AllRulesApplied";
3 | import { Divider } from "@/components/Divider";
4 | import { NoAppliedRules } from "@/components/NoAppliedRules";
5 | import { RuleCard } from "@/components/RuleCard";
6 | import { RulesCount } from "@/components/RulesCount";
7 | import { Tab } from "@/components/Tab";
8 | import { Component, PrometheusRule } from "@/lib/types";
9 | import { cn } from "@/lib/utils";
10 |
11 | interface SidebarContentProps {
12 | component: Component;
13 | rules: PrometheusRule[];
14 | }
15 |
16 | export const SidebarContent = ({ component, rules }: SidebarContentProps) => {
17 | const [tab, setTab] = useState<"recommended" | "applied">("recommended");
18 |
19 | const applied = useMemo(() => {
20 | return component.rules.filter((rule1) => rules.find((rule2) => rule1.yml.alert === rule2.name));
21 | }, [component.rules, rules]);
22 |
23 | const recommended = useMemo(() => {
24 | return component.rules.filter(
25 | (rule1) => !applied.find((rule2) => rule1.yml.alert === rule2.yml.alert),
26 | );
27 | }, [applied, component.rules]);
28 |
29 | return (
30 |
14 |
15 | -
16 | alert:
17 | {rule.alert}
18 |
19 |
20 |
21 |
22 | expr:
23 | {rule.expr}
24 |
25 |
26 |
27 |
28 | for:
29 | {rule.for}
30 |
31 |
32 |
33 |
34 | labels:
35 |
36 |
37 |
38 |
39 | severity:
40 | {rule.labels.severity}
41 |
42 |
43 |
44 |
45 | annotations:
46 |
47 |
48 |
49 |
50 | summary:
51 | {rule.annotations.summary}
52 |
53 |
54 |
55 |
56 | description:
57 |
58 | {sanitiseDescription(rule.annotations.description)}
59 |
60 |
61 |
62 |
63 | {
66 | toast.success("Copied to clipboard");
67 | navigator.clipboard.writeText(getYaml(rule));
68 | }}
69 | >
70 |
73 |
31 |
90 | );
91 | };
92 |
--------------------------------------------------------------------------------
/app/home/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Image from "next/image";
4 | import { useRouter } from "next/navigation";
5 | import { useEffect, useMemo, useState } from "react";
6 | import useAlerts from "@/hooks/queries/useAlerts";
7 | import useDiscovery from "@/hooks/queries/useDiscovery";
8 | import useRules from "@/hooks/queries/useRules";
9 | import useAuth from "@/hooks/useAuth";
10 | import { Button } from "@/components/Button";
11 | import { Container } from "@/components/Container";
12 | import { Loader } from "@/components/Loader";
13 | import { Sidebar } from "@/components/Sidebar";
14 | import { SidebarContent } from "@/components/SidebarContent";
15 | import { Component } from "@/lib/types";
16 |
17 | export default function Home() {
18 | const router = useRouter();
19 | const [selected, setSelected] = useState(0);
20 | const { data: alerts, isLoading: gettingAlerts } = useAlerts();
21 | const { loggedIn, ready, promUrl, promUsername, promPassword } = useAuth();
22 |
23 | const { data: discovery, isLoading: discovering } = useDiscovery({
24 | enabled: true,
25 | url: promUrl,
26 | username: promUsername,
27 | password: promPassword,
28 | });
29 |
30 | const { data: rules, isLoading: gettingRules } = useRules({
31 | enabled: true,
32 | url: promUrl,
33 | username: promUsername,
34 | password: promPassword,
35 | });
36 |
37 | const discovered = useMemo(() => {
38 | const store: Component[] = [];
39 | const components = alerts?.map((alert) => alert.components).flat() || [];
40 |
41 | discovery?.map((discoveredComponent) => {
42 | const foundComponent = components.find(
43 | (component) => component.name === discoveredComponent.component,
44 | );
45 |
46 | if (foundComponent) {
47 | store.push(foundComponent);
48 | }
49 | });
50 |
51 | return store;
52 | }, [alerts, discovery]);
53 |
54 | useEffect(() => {
55 | if (ready && !loggedIn) {
56 | router.replace("/");
57 | }
58 | }, [loggedIn, ready, router]);
59 |
60 | if (gettingAlerts || discovering || gettingRules || !ready) {
61 | return (
62 |
32 |
43 |
44 | {component.name}
33 | 34 |
35 |
42 | 38 | {recommended.length} recommended, 39 | {applied.length} applied 40 |
41 |
45 | setTab("recommended")}
48 | textClassName={cn(
49 | "text-xs font-bold",
50 | tab === "recommended" ? "text-slate-600" : "text-slate-500",
51 | )}
52 | title="Recommended"
53 | />
54 |
55 | setTab("applied")}
60 | textClassName={cn(
61 | "text-xs font-bold",
62 | tab === "applied" ? "text-slate-600" : "text-slate-500",
63 | )}
64 | title="Applied"
65 | />
66 |
67 |
69 |
70 | {tab === "recommended" ? (
71 | recommended.length > 0 ? (
72 |
73 | {recommended.map((rule, index) => (
74 |
77 | ) : (
78 |
82 | {applied.map((rule, index) => (
83 |
86 | ) : (
87 | 81 | No services were discovered on this Prometheus server. 82 |
83 | 84 | 94 | } 95 | onClick={() => router.push("/library")} 96 | > 97 | Browse Library 98 | 99 |Browse Library
80 | 81 | } 85 | right={ 86 |
87 |
89 | }
90 | onChange={(e) => setSearchPattern(e.target.value)}
91 | placeholder="Search for a component"
92 | value={searchPattern}
93 | />
94 |
95 | /
88 |
96 | {alertsList
97 | ? alertsList.map((alert, index) => (
98 |
106 |
17 |
55 |
64 |
66 |
67 |
68 |
85 |
86 |
87 |
88 | );
89 | };
90 |
--------------------------------------------------------------------------------
/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Image from "next/image";
4 | import * as React from "react";
5 | import * as DialogPrimitive from "@radix-ui/react-dialog";
6 | import { Divider } from "@/components/Divider";
7 | import { cn } from "@/lib/utils";
8 |
9 | const Dialog = DialogPrimitive.Root;
10 |
11 | const DialogTrigger = DialogPrimitive.Trigger;
12 |
13 | const DialogPortal = DialogPrimitive.Portal;
14 |
15 | const DialogClose = DialogPrimitive.Close;
16 |
17 | const DialogOverlay = React.forwardRef<
18 | React.ElementRef
18 |
21 |
22 | {name}
20 |
23 |
56 |
57 |
61 |
62 |
63 |
58 |
60 | View Alert Rules
59 |
69 |
76 |
77 |
78 |
79 |
70 | {name}
72 |
73 |
74 |
80 | {rules.map((rule, index) => (
81 |
84 |
58 |
64 | );
65 | DialogHeader.displayName = "DialogHeader";
66 |
67 | const DialogFooter = ({ className, ...props }: React.HTMLAttributes
59 | {children}
60 |
61 |
62 |
114 |
145 |
146 | 115 | {"The most apt alert rules toolkit for\nyour Prometheus setup."} 116 |
117 | 118 |
119 |
137 |
138 |
120 |
124 |
125 | 121 | Get alert rule recommendations. 122 |
123 |
126 |
130 |
131 | 127 | Browse the alert rule library. 128 |
129 |
132 |
136 | 133 | Simplify setting up Prometheus. 134 |
135 |139 | a companion project to{" "} 140 | window.open(sourceUrl, "_blank")}> 141 | awesome-prometheus-alerts 142 | 143 |
144 |
147 |
238 | 157 | {`To get started, provide your local or\nproduction Prometheus read URL.`} 158 |
159 | 160 |
161 | setUrl(e.target.value.replaceAll(" ", ""))}
168 | onKeyDown={onEnter}
169 | />
170 |
171 | {authFields ? (
172 |
231 |
232 | {serverError?.cause || discoveryError?.cause ? (
233 |
173 | setUsername(e.target.value)}
180 | onKeyDown={onEnter}
181 | />
182 |
183 | setPassword(e.target.value)}
191 | onKeyDown={onEnter}
192 | />
193 |
194 | ) : null}
195 |
196 |
202 | setAuthFields(value)}
207 | />
208 |
209 |
212 |
213 |
214 |
230 | 234 | {serverError?.message || discoveryError?.message} 235 |
236 | ) : null} 237 |