Skip to content

Commit

Permalink
update readme (#158)
Browse files Browse the repository at this point in the history
Co-authored-by: Kris Stern <[email protected]>
  • Loading branch information
shlomomdahan and krisstern authored Aug 25, 2024
1 parent a12f171 commit 499b202
Showing 1 changed file with 76 additions and 31 deletions.
107 changes: 76 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,71 +1,109 @@
# React + TypeScript + Vite
# Jenkins Infra Statistics

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Welcome to the `stats.jenkins.io` project! This repository contains the source code and resources for generating and displaying statistics related to Jenkins infrastructure. The project uses modern web technologies, including React, TypeScript, and Vite, to build a fast and responsive web interface for viewing Jenkins stats.

Currently, two official plugins are available:
## Table of Contents

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
1. [Project Overview](#project-overview)
2. [Technologies Used](#technologies-used)
3. [Getting Started](#getting-started)
4. [Development Workflow](#development-workflow)
5. [Building the Website Locally](#building-the-website-locally)
6. [Testing](#testing)
7. [Contributing](#contributing)
8. [Inspiration and References](#inspiration-and-references)

## Expanding the ESLint configuration
## Project Overview

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
The `stats.jenkins.io` project aims to provide an intuitive and efficient way to visualize and analyze various statistics related to Jenkins infrastructure. These statistics help the Jenkins community monitor and manage the infrastructure more effectively.

- Configure the top-level `parserOptions` property like this:
This project is part of the Jenkins Infra team’s efforts to improve transparency and operational efficiency by making infrastructure data accessible and understandable to all contributors and users.

```js
export default {
// other rules...
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
}
```
## Previous Version and GSoC 2024 Contribution

This website was built as part of Google Summer of Code (GSoC) 2024. The goal was to modernize and enhance the Jenkins infrastructure statistics site, providing a more intuitive and responsive interface for visualizing Jenkins usage stats.

### Previous Version of the Site

Before GSoC 2024, the Jenkins infrastructure statistics were displayed on a different site, which can still be accessed at the following repository:

- **[Old Site Repository (infra-statistics)](https://github.com/jenkins-infra/infra-statistics/tree/gh-pages)**

The old site remains as a submodule in this new project. We retrieve the data from the old site and display it on the new site, ensuring that the statistics are always up to date.

### Usage Stats Generation

The statistics displayed on this site are generated by the Jenkins usage stats project, which the old site automatiallcy pulls in on a monthly schedule.

- **[Jenkins Usage Stats Repository](https://github.com/jenkins-infra/jenkins-usage-stats)**

## Note for Future Contributors and GSoC 2025 Project Idea

One of the goals for future development, potentially as a project for Google Summer of Code (GSoC) 2025, would be to remove the dependency on the old site. Currently, the usage stats are generated and updated on the old site, and each time the new site is built, it pulls the old site as a submodule to retrieve the data.

A valuable enhancement would be to develop a method that allows the usage stats to automatically update directly on the new site, eliminating the need to rely on the old site as an intermediary. This would streamline the data retrieval process, reduce dependencies, and improve the overall efficiency and maintainability of the project.

- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
This could be a significant improvement for future contributors to consider, aligning with the ongoing goal of modernizing and optimizing the Jenkins infrastructure statistics site.

## Local Development
## Technologies Used

### Building the Website Locally
- **React:** A JavaScript library for building user interfaces.
- **TypeScript:** A typed superset of JavaScript that compiles to plain JavaScript.
- **Vite:** A next-generation front-end tool that provides fast builds and instant Hot Module Replacement (HMR).
- **ECharts:** A powerful, interactive charting and visualization library.
- **Jenkins CI/CD:** Automated testing and deployment pipelines.
- **Markdown:** For writing documentation.

To build the website locally, follow these steps:
## Getting Started

1. **Clone the repository and retrieve data from infra-statistics:**
### Prerequisites

To get started with this project, you will need the following installed on your machine:

- **Node.js** (LTS version recommended)
- **npm** (latest stable version)
- **Git:** For cloning the repository and version control.

### Installation

1. **Clone the repository:**

```sh
git clone https://github.com/jenkins-infra/stats.jenkins.io.git
cd stats.jenkins.io
```

2. **Retrieve data from infra-statistics:**

```sh
./retrieve-infra-statistics-data.sh
```

2. **Install dependencies:**
3. **Install dependencies:**

```sh
npm install
```

3. **Run the development server:**
## Building the Website Locally

1. **Run the development server:**

```sh
npm run dev
```

This will start the development server and open the website in your default browser. Any changes you make to the code will be automatically reflected in the browser thanks to Vite's HMR.
4. **Build for production:**
2. **Build for production:**
```sh
npm run build
```
This will create an optimized production build of your application in the `dist` directory.
5. **Preview the build locally:**
3. **Preview the build locally:**
After building the site, you can preview it locally to ensure everything is working as expected. Run the following command:
Expand All @@ -75,11 +113,18 @@ To build the website locally, follow these steps:
This will start a local static web server that serves the files from the `dist` directory. Open your browser and navigate to the provided URL to see the preview.
### Inspiration and References
## Contributing
Contributions to the `stats.jenkins.io` project are welcome! Please see the [CONTRIBUTING.md](./CONTRIBUTING.md) file for more information on how to get involved.
## Inspiration and References
For additional inspiration and detailed instructions, refer to the following documentation and resources:
- [Vite Documentation](https://vitejs.dev/guide/)
- [React Documentation](https://reactjs.org/docs/getting-started.html)
- [TypeScript Documentation](https://www.typescriptlang.org/docs/)
- [Previous Issues and Pull Requests](https://github.com/jenkins-infra/stats.jenkins.io/issues)
- [Jenkins Community - Connect](https://www.jenkins.io/participate/connect/)
---

0 comments on commit 499b202

Please sign in to comment.