17 | );
18 | };
19 |
20 | export default ErrorElement;
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 OSLabs Beta
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Anago
2 |
3 | 
4 |
5 | Anago is a tool to help developers monitor and visualize their Kubernetes clusters. Team Anago is equipped for monitoring Kubernetes clusters hosted both on local servers and on cloud-based platforms. Anago provides out-of-the-box support for Prometheus and Prometheus’ Alertmanager for scraping metrics and alerts and integrates with Chart.JS for the dashboard graphs.
6 |
7 | The name Anago, originates from Greek, meaning to lead to a higher place, to uplift, and to take to sea. In this spirit, Anago serves as a perfect compass to help you manage your containerized application deployments on the Kubernetes platform.
8 |
9 | Let’s dive into how the features of Anago’s platform can simplify and streamline managing your Kubernetes clusters.
10 |
11 |
16 |
17 | ## Table of Contents
18 |
19 | 1. [Anago](#Anago)
20 | 2. [Features](#features)
21 | 3. [Getting Started with Anago](#Getting-Started-with-Anago)
22 | 4. [Contributing](#Contributing)
23 | 5. [Progress](#Progress)
24 | 6. [Scripts](#Scripts)
25 | 7. [Our Team](#our-team)
26 | 8. [License](#license)
27 |
28 | ## Features
29 |
30 | Anago is a Kubernetes cluster monitoring and visualization tool providing relevant, richly detailed insights into the health of your application deployments with the following useful features:
31 |
32 | 1. **Real-time Data Monitoring**: Anago seamlessly integrates with your cloud-based and/or locally hosted Kubernetes clusters to allow for a real-time analysis of cluster performance.
33 | 
34 | 2. **Customizable Metrics**: Anago harnesses the power of Prometheus to scrape time-series data from your Kubernetes clusters. We offer customized query-building to configure your dashboard to display cluster metrics and data insights relevant to you. We provide the tools for your cluster management, and you decide which direction you want to take them.
35 | 
36 | 3. **Alerts**: Anago displays relevant real-time alerts relating to cluster health concerns, allowing you to address issues with your deployments proactively to combat downtime in production.
37 | 
38 | 4. **Horizontal Pod Autoscaler Monitoring**: Anago allows you to monitor actively deployed Horizontal Pod Autoscalers in real time or connect to your test application to see isolated test results before the rollout of new features or deployment configurations. Anago stores logs of notable historical timestamps for you to reference to not miss meaningful warning signs and/or longer-term trends, diminishing the abstraction of your HPA usage by providing insights into areas lacking efficiency alongside any bottlenecks that can slow your deployed applications and also drive up the cost of your clusters astronomically. Anago will act as an additional set of eyes and devise tailored recommendations on how to optimize your current HPA configurations.
39 | 
40 | 5. **Cluster Visualization**: Anago provides flexible and detailed visualization of your Kubernetes clusters on our ClusterView dashboard. See your clusters in their entirety with all of their nested components, or filter to display specific clusters, nodes, and namespaces that are relevant to your needs. ClusterView provides extremely detailed insights into each component in your cluster with real-time data from Prometheus and the Kubernetes API. Alerts are displayed visually so you can see which parts of your cluster require your attention.
41 | 
42 | 6. **Platform-agnostic**: Anago supports clusters hosted on cloud-computing platforms and local servers. We are flexible and adaptable for your scale and configuration needs and provide tools to help you integrate your clusters with our technology seamlessly. Anago is for everyone.
43 |
44 | ## Getting Started with Anago
45 |
46 | Let’s walk through how to get your cluster [setup with Anago](/SetupREADME.md)
47 |
48 | ## Contributing
49 |
50 | Contributions are part of the foundation of the Open Source Community. They create a space for developers to share, collaborate, learn, and inspire! Any contributions you choose to make are greatly appreciated.
51 |
52 | If you wish to contribute, please follow these guidelines:
53 |
54 | 1. Fork and clone the repository
55 | 2. Branch off of the dev branch to create your own feature branch
56 | - The Feature branch name should start with feat, fix, bug, docs, test, wip, or merge (e.g. feat/database)
57 | - see the [Scripts](##Scripts) section below for additional details
58 | 3. Commit your changes (git commit -m '(feat/bugfix/style/etc.): [commit message here]')
59 | - Please review [conventional commit](https://www.conventionalcommits.org/en/v1.0.0/) standards for more information
60 | 4. Once your new feature is built out, you can submit a pull request to dev
61 |
62 | ## Progress
63 |
64 | | Feature | Status |
65 | | ------------------------------------------------ | ------ |
66 | | HPA Recommendations | ⏳ |
67 | | Integrate CI/CD pipeline | ⏳ |
68 | | Automated Monitoring Tool Deployment & Config | ⏳ |
69 | | Increase Test Coverage | 🙏🏻 |
70 | | Historical data page | 🙏🏻 |
71 | | Ability to export metric data in-app | 🙏🏻 |
72 | | OAuth2.0 with cloud-hosting providers (i.e. AWS) | 🙏🏻 |
73 | | Stress-Test page | 🙏🏻 |
74 |
75 | - ✅ = Ready to use
76 | - ⏳ = In progress
77 | - 🙏🏻 = Looking for contributors
78 |
79 | ## Scripts
80 |
81 | Below are descriptions of each npm script:
82 |
83 | - `npm run dev`: Starts the development server using Nodemon
84 | - `npm run dev:front`: Starts the development for the frontend using Vite
85 | - `npm run dev:back`: Starts the development server for the backend using Nodemon
86 | - `npm run build`: Starts the build mode
87 | - `npm run lint`: Applies standardized linting
88 | - `npm run preview`: Runs a vite preview
89 | - `npm vitest`: Runs tests with vitest
90 |
91 | ## Our Team
92 |
93 |
130 |
131 | ## License
132 |
133 | By contributing, you agree that your contributions will be licensed under Anago's MIT License.
134 |
--------------------------------------------------------------------------------
/SetupREADME.md:
--------------------------------------------------------------------------------
1 | # Setting up Anago
2 |
3 | Welcome to Anago. The first section of this set-up document walks through installing and configuring Anago for an existing cluster with Prometheus available. The rest of the document describes the basic steps of deploying an EKS cluster from scratch, intended for a development or DevOps team newly approaching K8s.
4 |
5 | # Setup for Anago:
6 |
7 | 1. Clone the Anago repository locally and install required modules:
8 |
9 | ```bash
10 | npm install
11 | ```
12 |
13 | 2. Modify the [user-config.ts](/user-config.ts) file to point to access your Prometheus instance and Alertmanager. For example, forward these services to the default ports (9090 and 9093):
14 |
15 | ```bash
16 | kubectl port-forward svc/[service-name] -n [namespace] 9090
17 | kubectl port-forward svc/[service-name] -n [namespace] 9093
18 | ```
19 |
20 | 3. Launch Anago from the command line:
21 |
22 | ```bash
23 | npm run dev
24 | ```
25 |
26 | Navigate to the local access point for Vite (by default, [http://locahost:5173](http://locahost:5173)), and you should see Anago!
27 | Several core metrics are populated by default (or if `NEW_USER=true` in user-config.ts).
28 |
29 | All set? click [here](/README.md) to return to the main README.md
30 |
31 | # New to Kubernetes?
32 |
33 | Teams without an active cluster will have a longer path for initially setting up Kubernetes and then Anago. The following step-by-step guide will move through one use case for deploying and monitoring a simple cluster using the eksctl tool to configure an EKS cluster on EC2 instances with Prometheus. At the end of these steps, you should be ready to use Anago (described above). Depending on your needs, only some of these steps may be necessary.
34 |
35 | NOTE: to deploy K8s cluster locally, consider using [minikube](https://minikube.sigs.k8s.io/docs/)
36 |
37 | ## Table of Contents
38 |
39 | 1. [Prerequisites](#Prerequisites)
40 | 2. [AWS Login and Authentication](#AWS-Login-and-Authentication)
41 | 3. [eksctl Setup](#eksctl-Setup)
42 | 4. [Loading the image to ECR](#Loading-the-image-to-ECR)
43 | 5. [Deployment + Services](#Deployment-+-Services)
44 | 6. [Making the Metrics Available](#Making-the-Metrics-Available)
45 | 7. [Prometheus Setup](#Prometheus-Setup-using-Helm)
46 | 8. [AlertManager Setup](#AlertManager-Setup)
47 |
48 | ## Prerequisites
49 |
50 | 1. For the following setup, the following installations and setups are required:
51 | - [AWS CLI](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html)
52 | - [eksctl](https://docs.aws.amazon.com/eks/latest/userguide/eksctl.html)
53 | - [kubectl](https://kubernetes.io/docs/tasks/tools/)
54 | - [Docker Desktop](https://www.docker.com/products/docker-desktop/)
55 | 1. Fork the Anago repository to your personal GitHub account.
56 | 1. Clone the forked repository to your local computer.
57 | 1. In the Anago folder of your local repository, install all the dependencies
58 |
59 | ```bash
60 | npm install
61 | ```
62 |
63 | DISCLAIMER: this Anago setup describes a cloudhosted deployment
64 |
65 | ## AWS Login and Authentication
66 |
67 | 1. Log in to your personal AWS account as an IAM user
68 | 2. From the command line, run
69 |
70 | ```bash
71 | aws configure
72 | ```
73 |
74 | and when prompted, enter your AWS Access Key ID and AWS Secret Access Key 3. Entering your credentials automatically creates the secret file: ~/.aws/config. You are then able to adjust that information as desired.
75 |
76 | NOTE: Find the hidden file on your local machine by typing 'command-shift-g' within your Finder.
77 |
78 | ## eksctl Setup
79 |
80 | 1. Create a cluster with your desired cluster name, region, node type, and node count
81 |
82 | ```bash
83 | eksctl create cluster --name [test-cluster] --region [us-east-2] --node-type [t2.micro] --nodes [2]
84 | ```
85 |
86 | NOTE: eksctl will add a config file in ~/.kube that directs local kubectl commands to your EKS instance.
87 |
88 | 2. To access this EKS instance elsewhere:
89 |
90 | ```bash
91 | aws eks update-kubeconfig --region [us-east-2] --name [test-cluster]
92 | ```
93 |
94 | ## Loading the image to ECR
95 |
96 | 1. Create an image repo in ECR, if there isn’t one
97 | 2. the software folder should have a Dockerfile
98 | 3. From ECR’s image repo (must be in the right region), click “View Push Commands”
99 | 4. Run these exact commands in order in order to hand amazon auth info to docker (expires after 12 hours), build and tag a docker image, and push it up to amazon
100 |
101 | NOTE: If using an M1 Mac, you MUST modify the docker build command in order to correct the build platform:
102 |
103 | ```bash
104 | docker buildx build --platform linux/amd64 -t [image] .
105 | ```
106 |
107 | ## Deployment + Services
108 |
109 | 1. Use kubectl to deploy deployment(+pods) and services as usual (see KubernetesDeployment doc), using the ECR image link. For example:
110 |
111 | ```bash
112 | kubectl apply -f [yaml file]
113 | ```
114 |
115 | OR
116 |
117 | ```bash
118 | kubectl create deployment [Depl-name] --image=[image]
119 | ```
120 |
121 | 2. To surface the Service's external IP, run this command:
122 |
123 | ```bash
124 | kubectl get svc
125 | ```
126 |
127 | ## Making the Metrics Available
128 |
129 | 1. Connect to your desired EKS cluster:
130 |
131 | ```bash
132 | aws eks --region region update-kubeconfig --name [cluster-name]
133 | ```
134 |
135 | 2. Run the configuration to deploy the metrics server
136 |
137 | ```bash
138 | kubectl apply -f https://github.com/kubernetes-sigs/metrics-server/releases/latest/download/components.yaml
139 | ```
140 |
141 | 3. Check to see that the Metrics Pod is up and running and that the /metrics endpoint is exposed
142 |
143 | ```bash
144 | kubectl get pods -n kube-system
145 | ```
146 |
147 | ## Prometheus Setup (using Helm)
148 |
149 | 1. Add the prometheus-community Helm repo and update Helm:
150 |
151 | ```bash
152 | helm repo add prometheus-community https://prometheus-community.github.io/helm-charts
153 | ```
154 |
155 | ```bash
156 | helm repo update
157 | ```
158 |
159 | 2. Install the prometheus-community Helm repo with a desired release name in a created namespace. Also,
160 | install the alert manager. For example:
161 |
162 | ```bash
163 | helm install [release-name] prometheus-community/kube-prometheus-stack --namespace [namespace] --create-namespace --set alertmanager.persistentVolume.storageClass="gp2",server.persistentVolume.storageClass="gp2"
164 | ```
165 |
166 | NOTE: after the Helm chart has been installed, you should see this:
167 |
168 | > NAME: [release-name] LAST DEPLOYED: [date] NAMESPACE: [namespace] default
169 | > STATUS: deployed REVISION: 1 NOTES: kube-prometheus-stack has beeninstalled.
170 | > Check its status by running: kubectl --namespace default get pods -l
171 | > "release=[namespace]" Refer to
172 | > https://github.com/prometheus-operator/kube-prometheus for instructions on how
173 | > to create and configure Alertmanager and Prometheus instances using the
174 | > Operator.
175 |
176 | 3. use kubectl to see what is installed in the cluster:
177 |
178 | ```bash
179 | kubectl get pod -n [namespace]
180 | ```
181 |
182 | NOTE: you should see all nodes including the prometheus stack operator, the alert manager, and grafana
183 |
184 | 4. use kubectl to see all services:
185 |
186 | ```bash
187 | kubectl get services -n [namespace]
188 | ```
189 |
190 | 5. to access your prometheus instance, use the kubectl port-forward to forward a local port into the Cluster with the service name. Example:
191 |
192 | ```bash
193 | kubectl port-forward svc/[service-name] -n [namespace] 9090
194 | ```
195 |
196 | 6. navigate to http://localhost:9090 in your browser to access the Prometheus web UI.
197 |
198 | NOTE: Click Status, then Targets to see a list of scrape targets configured by Helm.
199 |
200 | NOTE: if you'd like more general information regarding Prometheus, [click here](./dev/prometheusREADME.md)
201 |
202 | ## AlertManager Setup
203 |
204 | NOTE: the prometheus-community/kube-prometheus-stack includes configuration files for AlertManager.
205 |
206 | 1. to access the alertManager UI, use the kubectl port-forward to forward a local port into the Cluster with the service name. Example:
207 |
208 | ```bash
209 | kubectl port-forward svc/[service-name] -n monitoring 9093
210 | ```
211 |
212 | 2. navigate to http://localhost:9093 in your browser to access the AlertManager web UI.
213 |
214 | NOTE: You can see the active alerts configured by Helm. if more customization regarding alerts is needed, the configuration files may be adjusted and applied.
215 |
216 | NOTE: if you'd like more information regarding AlertManager, [click here](./dev/alertManagerInfo.md)
217 |
--------------------------------------------------------------------------------
/client/App.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Route,
3 | createBrowserRouter,
4 | createRoutesFromElements,
5 | RouterProvider,
6 | } from 'react-router-dom';
7 |
8 | //import routes
9 | import Home from './Routes/Home';
10 | import HPADashboard from './Components/HPA Dashboard/HPADashboard';
11 | import Dashboard from './Components/Dashboard/Dashboard';
12 | import ClusterView from './Routes/ClusterView';
13 | import SetUp from './Routes/SetUp';
14 | import ErrorElement from '../ErrorElement';
15 |
16 | //import loaders
17 | import * as loaders from './context/loaders';
18 | import React from 'react';
19 |
20 | //create router to pass into router provider component returned from app. createBrowserRouter recommended for all latest React Router web projects.
21 | const router = createBrowserRouter(
22 | createRoutesFromElements(
23 | }
26 | loader={loaders.userLoader}
27 | id='home'
28 | errorElement={}
29 | >
30 | }
33 | errorElement={}
34 | />
35 | }
38 | errorElement={}
39 | />
40 | }
43 | loader={loaders.clusterLoader}
44 | id='cluster'
45 | errorElement={}
46 | />
47 | } errorElement={} />
48 |
49 | )
50 | );
51 |
52 | //provide router to application
53 | const App = () => {
54 | return ;
55 | };
56 |
57 | export default App;
58 |
--------------------------------------------------------------------------------
/client/Components/Dashboard/Dashboard.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import { Modal } from 'react-responsive-modal';
3 | import MetricDisplay from './MetricDisplay';
4 | import { UserData } from '../../../types';
5 | import { useRouteLoaderData, useParams, Outlet } from 'react-router-dom';
6 | import AddMetric from './AddMetric';
7 | import AlertBar from '../AlertBar';
8 |
9 | const Dashboard = () => {
10 | const userData = useRouteLoaderData('home') as UserData;
11 | const { id } = useParams();
12 |
13 | const [lastUpdate, setLastUpdate] = useState();
14 | const [addMetricModal, setAddMetricModal] = useState(false);
15 | // edit mode to allow deleting metrics
16 | const [editMode, setEditMode] = useState(false);
17 |
18 | useEffect(() => {
19 | setLastUpdate(new Date());
20 | }, []);
21 |
22 | //pithy rendering example
23 | const refresh = () => setLastUpdate(new Date());
24 | const pithy = () => {
25 | try {
26 | fetch('/api/pithy')
27 | .then((res) => res.json())
28 | .then((res) => {
29 | setTimeout(() => pithy(), 700);
30 | });
31 | } catch (err) {
32 | console.log(`failed to fetch pithy: ${err}`);
33 | }
34 | };
35 |
36 | function saveMetricsAndReload() {
37 | setEditMode(false);
38 | setAddMetricModal(false);
39 | window.location.reload();
40 | return;
41 | }
42 |
43 | const metricIds: string[] = userData.dashboards[0].metrics;
44 | return (
45 |
9 | An extensive tutorial for DevOps teams new to Kubernetes can be found
10 | at our GitHub. If
11 | you have an existing cluster with Prometheus available, this set-up
12 | walks through the swift installation and configuration of Anago.
13 |
27 | 2. Modify the{' '}
28 |
29 | user-config.ts
30 | {' '}
31 | file to point to access your Prometheus instance and Alertmanager.
32 | For example, forward these services to the default ports (9090 and
33 | 9093):
34 |
49 | Navigate to the local access point for Vite (by default,{' '}
50 | http://locahost:5173), and you should see a default
51 | Anago dashboard populated with a suite of common metrics!
52 |
11 | 
14 | 
97 | 
101 | 
102 | 
105 | 
113 | 
121 | 
145 | )}
146 | 
11 | 
16 |
17 | 
33 | 
54 | 
98 | 
54 | 
27 | 
43 |