Skip to content

Commit 09d9142

Browse files
hamidmayelihamidmayeli
authored
Add pie chart (#123)
* Add dev containers * Add PIE Chart
1 parent b2400f6 commit 09d9142

File tree

10 files changed

+443
-3
lines changed

10 files changed

+443
-3
lines changed

‎.github/dependabot.yml‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,19 @@ updates:
2323
frontend-group:
2424
patterns:
2525
- "*"
26+
27+
- package-ecosystem: devcontainers
28+
directory: "/backend/"
29+
schedule:
30+
interval: weekly
31+
day: friday
32+
time: "10:00"
33+
timezone: Europe/London
34+
35+
- package-ecosystem: devcontainers
36+
directory: "/frontend/"
37+
schedule:
38+
interval: weekly
39+
day: friday
40+
time: "10:00"
41+
timezone: Europe/London

‎backend/.devcontainer/README.md‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
# Backend Dev Container
2+
3+
This dev container provides a complete C# .NET 9 development environment for the Outline Config Server backend.
4+
5+
## Features
6+
7+
- .NET 9 SDK (using official Microsoft dev container image)
8+
- Pre-configured with development HTTPS certificates
9+
- Essential VS Code extensions for C# development
10+
- Git and GitHub CLI pre-installed
11+
- All dependencies managed by the official image
12+
13+
## Usage
14+
15+
### Opening in Dev Container
16+
17+
1. **Using VS Code:**
18+
- Open the `backend` folder in VS Code
19+
- Press `F1` or `Ctrl+Shift+P` (or `Cmd+Shift+P` on Mac)
20+
- Select "Dev Containers: Reopen in Container"
21+
- Wait for the container to build and initialize
22+
23+
2. **Using VS Code Remote Containers:**
24+
- Click the green button in the bottom-left corner
25+
- Select "Reopen in Container"
26+
27+
### Running the Application
28+
29+
Once inside the container:
30+
31+
```bash
32+
# Navigate to the API project
33+
cd API
34+
35+
# Run the application
36+
dotnet run
37+
38+
# Or use watch mode for hot reload
39+
dotnet watch run
40+
41+
# Run tests
42+
cd ../
43+
dotnet test
44+
```
45+
46+
### Accessing the Application
47+
48+
- HTTP: http://localhost:5000
49+
- HTTPS: https://localhost:5001
50+
- Swagger UI: https://localhost:5001/swagger
51+
52+
## Volumes
53+
54+
The dev container mounts:
55+
- `backend` folder → `/workspaces/backend` (your source code with cached consistency)
56+
57+
## Customization
58+
59+
Edit `.devcontainer/devcontainer.json` to:
60+
- Add more VS Code extensions
61+
- Change port mappings
62+
- Add environment variables
63+
- Add post-create commands
64+
- Add dev container features (e.g., Docker-in-Docker, Azure CLI, etc.)

‎backend/.devcontainer/devcontainer.json‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"name": "Outline Config Server - Backend (C# .NET 9)",
3+
"image": "mcr.microsoft.com/devcontainers/dotnet:9.0",
4+
"workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
5+
6+
"mounts": [
7+
"source=${localWorkspaceFolder},target=/workspaces/${localWorkspaceFolderBasename},type=bind,consistency=cached"
8+
],
9+
10+
"customizations": {
11+
"vscode": {
12+
"extensions": [
13+
"ms-dotnettools.csharp",
14+
"ms-dotnettools.csdevkit",
15+
"ms-dotnettools.vscode-dotnet-runtime",
16+
"k--kato.docomment",
17+
"jchannon.csharpextensions",
18+
"formulahendry.dotnet-test-explorer",
19+
"ms-azuretools.vscode-docker"
20+
],
21+
"settings": {
22+
"omnisharp.useModernNet": true,
23+
"dotnet.server.useOmnisharp": false
24+
}
25+
}
26+
},
27+
28+
"forwardPorts": [5000, 5001],
29+
"portsAttributes": {
30+
"5000": {
31+
"label": "Backend HTTP",
32+
"onAutoForward": "notify"
33+
},
34+
"5001": {
35+
"label": "Backend HTTPS",
36+
"onAutoForward": "notify"
37+
}
38+
},
39+
40+
"postCreateCommand": "dotnet dev-certs https --trust && dotnet restore",
41+
42+
"remoteUser": "vscode",
43+
44+
"features": {
45+
"ghcr.io/devcontainers/features/git:1": {},
46+
"ghcr.io/devcontainers/features/github-cli:1": {}
47+
}
48+
}

‎backend/API/appsettings.Development.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
{
2+
"DatabasePath": "./data/the.db",
23
"Authentication": {
34
"AccessTokenTimeOut": 60
45
},
56
"Report": {
6-
"IntervalMinutes": 10
7+
"IntervalMinutes": 10,
8+
"LogFileFolders": "./data/logs"
79
}
810
}

‎frontend/.devcontainer/README.md‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
# Frontend Dev Container
2+
3+
This dev container provides a complete Node.js development environment for the Outline Config Server frontend.
4+
5+
## Features
6+
7+
- Node.js 22 with TypeScript (using official Microsoft dev container image)
8+
- npm and yarn pre-installed
9+
- Essential VS Code extensions for React/TypeScript/Vite development
10+
- Git and GitHub CLI pre-installed
11+
- All dependencies managed by the official image
12+
13+
## Usage
14+
15+
### Opening in Dev Container
16+
17+
1. **Using VS Code:**
18+
- Open the `frontend` folder in VS Code
19+
- Press `F1` or `Ctrl+Shift+P` (or `Cmd+Shift+P` on Mac)
20+
- Select "Dev Containers: Reopen in Container"
21+
- Wait for the container to build and initialize
22+
23+
2. **Using VS Code Remote Containers:**
24+
- Click the green button in the bottom-left corner
25+
- Select "Reopen in Container"
26+
27+
### Running the Application
28+
29+
Once inside the container:
30+
31+
```bash
32+
# Start the development server
33+
npm run dev
34+
35+
# Build for production
36+
npm run build
37+
38+
# Preview production build
39+
npm run preview
40+
41+
# Run linting
42+
npm run lint
43+
44+
# Run Cypress tests (E2E)
45+
npm run test-e2e
46+
47+
# Run Cypress tests (Component)
48+
npm run test-component
49+
```
50+
51+
### Accessing the Application
52+
53+
- Development server: http://localhost:5173
54+
- Preview server: http://localhost:4173
55+
56+
## Volumes
57+
58+
The dev container mounts:
59+
- `frontend` folder → `/workspaces/frontend` (your source code with cached consistency)
60+
61+
## Environment Variables
62+
63+
The container sets:
64+
- `NODE_ENV=development`
65+
- `CHOKIDAR_USEPOLLING=true` (for file watching in containers)
66+
67+
## Customization
68+
69+
Edit `.devcontainer/devcontainer.json` to:
70+
- Add more VS Code extensions
71+
- Change port mappings
72+
- Add environment variables
73+
- Add post-create commands
74+
- Add dev container features (e.g., Docker-in-Docker, Python, etc.)
75+
76+
## Notes
77+
78+
- File changes are automatically detected and trigger hot reload
79+
- If you need Cypress for E2E testing, it will be installed via `npm install`
80+
- The cached consistency mount provides good performance for file operations

‎frontend/.devcontainer/devcontainer.json‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
{
2+
"name": "Outline Config Server - Frontend (Node.js)",
3+
"image": "mcr.microsoft.com/devcontainers/typescript-node:22",
4+
"workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
5+
6+
"mounts": [
7+
"source=${localWorkspaceFolder},target=/workspaces/${localWorkspaceFolderBasename},type=bind,consistency=cached"
8+
],
9+
10+
"customizations": {
11+
"vscode": {
12+
"extensions": [
13+
"dbaeumer.vscode-eslint",
14+
"esbenp.prettier-vscode",
15+
"bradlc.vscode-tailwindcss",
16+
"ms-vscode.vscode-typescript-next",
17+
"dsznajder.es7-react-js-snippets",
18+
"formulahendry.auto-rename-tag",
19+
"christian-kohler.path-intellisense",
20+
"ms-azuretools.vscode-docker",
21+
"unifiedjs.vscode-mdx"
22+
],
23+
"settings": {
24+
"editor.formatOnSave": true,
25+
"editor.codeActionsOnSave": {
26+
"source.fixAll.eslint": "explicit"
27+
},
28+
"eslint.validate": [
29+
"javascript",
30+
"javascriptreact",
31+
"typescript",
32+
"typescriptreact"
33+
],
34+
"typescript.tsdk": "node_modules/typescript/lib"
35+
}
36+
}
37+
},
38+
39+
"forwardPorts": [5173, 4173],
40+
"portsAttributes": {
41+
"5173": {
42+
"label": "Vite Dev Server",
43+
"onAutoForward": "notify"
44+
},
45+
"4173": {
46+
"label": "Vite Preview",
47+
"onAutoForward": "notify"
48+
}
49+
},
50+
51+
"postCreateCommand": "npm install",
52+
53+
"remoteUser": "node",
54+
55+
"features": {
56+
"ghcr.io/devcontainers/features/git:1": {},
57+
"ghcr.io/devcontainers/features/github-cli:1": {}
58+
}
59+
}

‎frontend/.env.development‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
VITE_COVERAGE=true
2-
VITE_API_HOST=https://localhost:7217/api
2+
VITE_API_HOST=http://127.0.0.1:5082/api

‎frontend/src/pages/Server.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { baseApi } from "apis/baseApi";
22
import { ServerName } from "components/serverName";
33
import { TextInput } from "components/textInput";
44
import { startTransition, useEffect, useState } from "react";
5-
import { useParams } from "react-router-dom";
5+
import { useParams, Link } from "react-router-dom";
66
import { toHumanReadableBytes } from "tools/misc";
77

88
type SortCriteria = 'name' | 'consumed' | 'limit';
@@ -175,6 +175,12 @@ export default function Server() {
175175
<div className="flex gap-5 mb-5">
176176
<div className="boxed-area text-center grow">{getTotalUsage()}</div>
177177
<div className="boxed-area text-center grow">{keys.length} Keys</div>
178+
<Link to={`/usage/${serverId}`} className="boxed-area text-center grow bg-blue-500 hover:bg-blue-600 text-white font-semibold transition-colors flex items-center justify-center gap-2" title="View Usage Chart">
179+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-8 h-8">
180+
<path d="M11 2v9.5c0 .3.2.5.5.5H21c0 4.4-3.6 8-8 8s-8-3.6-8-8 3.6-8 8-8z"/>
181+
<path d="M13 2c4.4 0 8 3.6 8 8h-8V2z" opacity="0.7"/>
182+
</svg>
183+
</Link>
178184
</div>
179185

180186
{/* Sort Header */}

0 commit comments

Comments
 (0)