Skip to content

Commit bdf62a0

Browse files
committed
ui update and build
1 parent 0b48313 commit bdf62a0

File tree

4 files changed

+277
-2
lines changed

4 files changed

+277
-2
lines changed

.github/workflows/electron-build.yml

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
name: Build and Publish Electron App
2+
3+
on:
4+
push:
5+
tags:
6+
- 'v*.*.*'
7+
8+
jobs:
9+
build:
10+
runs-on: ubuntu-latest
11+
strategy:
12+
matrix:
13+
os: [ubuntu-latest, macos-latest, windows-latest]
14+
15+
steps:
16+
- name: Checkout code
17+
uses: actions/checkout@v3
18+
19+
- name: Set up Node.js
20+
uses: actions/setup-node@v3
21+
with:
22+
node-version: '18'
23+
24+
- name: Set up Python
25+
uses: actions/setup-python@v4
26+
with:
27+
python-version: '3.9'
28+
29+
- name: Install Pipenv
30+
run: pip install pipenv
31+
32+
- name: Install dependencies
33+
run: npm install
34+
35+
- name: Build backend
36+
run: |
37+
cd backend
38+
pipenv install
39+
cd ..
40+
npm run backendBuild
41+
42+
- name: Build Electron App for ${{ matrix.os }}
43+
run: |
44+
if [[ "${{ matrix.os }}" == 'ubuntu-latest' ]]; then
45+
npm run build:linux
46+
elif [[ "${{ matrix.os }}" == 'macos-latest' ]]; then
47+
npm run build:mac
48+
elif [[ "${{ matrix.os }}" == 'windows-latest' ]]; then
49+
npm run build:win
50+
fi
51+
52+
- name: Upload artifact
53+
uses: actions/upload-artifact@v3
54+
with:
55+
name: ${{ matrix.os }}-electron-app
56+
path: dist/*
57+
58+
create_release:
59+
needs: build
60+
runs-on: ubuntu-latest
61+
steps:
62+
- name: Checkout code
63+
uses: actions/checkout@v3
64+
65+
- name: Create Release
66+
id: create_release
67+
uses: actions/create-release@v1
68+
env:
69+
GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
70+
with:
71+
tag_name: ${{ github.ref }}
72+
release_name: Release ${{ github.ref }}
73+
draft: false
74+
prerelease: false
75+
76+
- name: Download artifacts
77+
uses: actions/download-artifact@v3
78+
with:
79+
name: ${{ matrix.os }}-electron-app
80+
path: ./dist
81+
82+
- name: Upload Release Asset
83+
uses: actions/upload-release-asset@v1
84+
env:
85+
GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
86+
with:
87+
upload_url: ${{ steps.create_release.outputs.upload_url }}
88+
asset_path: ./dist
89+
asset_name: electron-app-${{ matrix.os }}.zip
90+
asset_content_type: application/zip

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"postinstall": "electron-builder install-app-deps",
1919
"build:unpack": "npm run build && electron-builder --dir",
2020
"build:win": "npm run build && electron-builder --win",
21-
"build:mac": "npm run backendBuild && electron-vite build && electron-builder --mac",
21+
"build:mac": "electron-vite build && electron-builder --mac",
2222
"build:linux": "electron-vite build && electron-builder --linux"
2323
},
2424
"dependencies": {

src/renderer/src/components/project/build-image/BuildImageTab.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
22
import useSocket from '@utils/hooks/useSocket'
33
import TheEnvironment from './TheEnvironment'
44
import TheBuilder from './TheBuilder'
5+
import TheRegistry from './TheRegistry'
56
import { useAppSelector } from '@utils/redux/kit'
67

78
function BuildImageTab(): JSX.Element {
@@ -77,7 +78,7 @@ function BuildImageTab(): JSX.Element {
7778

7879
{selectedMenu === 'registry' && (
7980
<>
80-
<p>{selectedMenu} coming soon</p>
81+
<TheRegistry />
8182
</>
8283
)}
8384
</div>
Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
'use client'
2+
3+
import { useState } from 'react'
4+
import { Radio, RadioGroup } from '@headlessui/react'
5+
import { CheckCircleIcon } from '@heroicons/react/20/solid'
6+
7+
const container_registry_lists = [
8+
{
9+
id: 1,
10+
registry_name: 'docker hub',
11+
registry_slug: 'docker-hub',
12+
registry_description: 'Public container registry by Docker'
13+
},
14+
{
15+
id: 2,
16+
registry_name: 'azure acr',
17+
registry_slug: 'azure-acr',
18+
registry_description: 'Azure Container Registry by Microsoft'
19+
},
20+
{
21+
id: 3,
22+
registry_name: 'aws ecr',
23+
registry_slug: 'aws-ecr',
24+
registry_description: 'Amazon Elastic Container Registry by AWS'
25+
}
26+
];
27+
28+
export default function TheRegistry(): JSX.Element {
29+
const [selectedRegistry, setSelectedRegistry] = useState(container_registry_lists[0])
30+
const [dockerHubToken, setDockerHubToken] = useState('')
31+
const [awsPublicKey, setAwsPublicKey] = useState('')
32+
const [awsSecretKey, setAwsSecretKey] = useState('')
33+
const [acrUsername, setAcrUsername] = useState('')
34+
const [acrPassword, setAcrPassword] = useState('')
35+
36+
const handleSave = () => {
37+
const registryData = {
38+
registry: selectedRegistry,
39+
credentials: {}
40+
}
41+
42+
if (selectedRegistry.registry_slug === 'docker-hub') {
43+
registryData.credentials = { token: dockerHubToken }
44+
} else if (selectedRegistry.registry_slug === 'aws-ecr') {
45+
registryData.credentials = { publicKey: awsPublicKey, secretKey: awsSecretKey }
46+
} else if (selectedRegistry.registry_slug === 'azure-acr') {
47+
registryData.credentials = { username: acrUsername, password: acrPassword }
48+
}
49+
50+
console.log('Saved registry data:', registryData)
51+
// Here you can send `registryData` to your backend or handle it as needed.
52+
}
53+
54+
return (
55+
<div className="flex bg-white shadow mt-2 ml-4 min-h-[70vh] rounded">
56+
<div className="w-full">
57+
<div className="mt-2 pl-6 pr-6 mb-4">
58+
<p>Container Registry</p>
59+
</div>
60+
<div className="pl-6 pr-6">
61+
<fieldset>
62+
<legend className="text-sm font-semibold leading-6 text-gray-900">
63+
Select registry
64+
</legend>
65+
<RadioGroup
66+
value={selectedRegistry}
67+
onChange={setSelectedRegistry}
68+
className="mt-6 grid grid-cols-1 gap-y-6 sm:grid-cols-3 sm:gap-x-4"
69+
>
70+
{container_registry_lists.map((registry) => (
71+
<Radio
72+
key={registry.id}
73+
value={registry}
74+
aria-label={registry.registry_name}
75+
aria-description={registry.registry_description}
76+
className="group relative flex cursor-pointer rounded-lg border border-gray-300 bg-white p-4 shadow-sm focus:outline-none data-[focus]:border-teal-600 data-[focus]:ring-2 data-[focus]:ring-teal-600"
77+
>
78+
<span className="flex flex-1">
79+
<span className="flex flex-col">
80+
<span className="block text-sm font-medium text-gray-900">
81+
{registry.registry_name}
82+
</span>
83+
<span className="mt-1 flex items-center text-sm text-gray-500">
84+
{registry.registry_description}
85+
</span>
86+
</span>
87+
</span>
88+
<CheckCircleIcon
89+
aria-hidden="true"
90+
className="h-5 w-5 text-teal-600 [.group:not([data-checked])_&]:invisible"
91+
/>
92+
<span
93+
aria-hidden="true"
94+
className="pointer-events-none absolute -inset-px rounded-lg border-2 border-transparent group-data-[focus]:border group-data-[checked]:border-teal-600"
95+
/>
96+
</Radio>
97+
))}
98+
</RadioGroup>
99+
</fieldset>
100+
</div>
101+
<div className="pl-6 pr-6">
102+
{selectedRegistry.registry_slug === 'docker-hub' && (
103+
<div className="mt-4">
104+
<label htmlFor="docker-hub-token" className="block text-sm font-medium text-gray-700">
105+
Docker Hub Token
106+
</label>
107+
<input
108+
type="password"
109+
id="docker-hub-token"
110+
value={dockerHubToken}
111+
onChange={(e) => setDockerHubToken(e.target.value)}
112+
className="block w-full border border-gray-300 rounded-md shadow-sm py-1.5 px-3 focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm"
113+
/>
114+
</div>
115+
)}
116+
{selectedRegistry.registry_slug === 'aws-ecr' && (
117+
<>
118+
<div className="mt-4">
119+
<label htmlFor="aws-public-key" className="block text-sm font-medium text-gray-700">
120+
AWS Public Key
121+
</label>
122+
<input
123+
type="text"
124+
id="aws-public-key"
125+
value={awsPublicKey}
126+
onChange={(e) => setAwsPublicKey(e.target.value)}
127+
className="block w-full border border-gray-300 rounded-md shadow-sm py-1.5 px-3 focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm"
128+
/>
129+
</div>
130+
<div className="mt-4">
131+
<label htmlFor="aws-secret-key" className="block text-sm font-medium text-gray-700">
132+
AWS Secret Key
133+
</label>
134+
<input
135+
type="password"
136+
id="aws-secret-key"
137+
value={awsSecretKey}
138+
onChange={(e) => setAwsSecretKey(e.target.value)}
139+
className="block w-full border border-gray-300 rounded-md shadow-sm py-1.5 px-3 focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm"
140+
/>
141+
</div>
142+
</>
143+
)}
144+
{selectedRegistry.registry_slug === 'azure-acr' && (
145+
<>
146+
<div className="mt-4">
147+
<label htmlFor="acr-username" className="block text-sm font-medium text-gray-700">
148+
ACR Username
149+
</label>
150+
<input
151+
type="text"
152+
id="acr-username"
153+
value={acrUsername}
154+
onChange={(e) => setAcrUsername(e.target.value)}
155+
className="block w-full border border-gray-300 rounded-md shadow-sm py-1.5 px-3 focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm"
156+
/>
157+
</div>
158+
<div className="mt-4">
159+
<label htmlFor="acr-password" className="block text-sm font-medium text-gray-700">
160+
ACR Password
161+
</label>
162+
<input
163+
type="password"
164+
id="acr-password"
165+
value={acrPassword}
166+
onChange={(e) => setAcrPassword(e.target.value)}
167+
className="block w-full border border-gray-300 rounded-md shadow-sm py-1.5 px-3 focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm"
168+
/>
169+
</div>
170+
</>
171+
)}
172+
</div>
173+
<div className="pl-6 pr-6 mt-4">
174+
<button
175+
onClick={handleSave}
176+
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500"
177+
>
178+
Save
179+
</button>
180+
</div>
181+
</div>
182+
</div>
183+
)
184+
}

0 commit comments

Comments
 (0)