abrban/cloud-host
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Localize shared resource-field components.

Browse Source 
Add a components.res resource-label set and move the database workload
resources and optional-service resource-field components onto it.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
keyhan
2026-06-11 17:37:26 +03:30
parent fcba1ed93c
commit f64d341c80
5 changed files with 37 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/database-workload-resources.tsx
+9 -7
View File
@@ -1,6 +1,7 @@
'use client';
import { Database } from 'lucide-react';
import { useT } from '@/i18n/I18nProvider';
export interface DatabaseWorkloadValues {
cpuRequest: string;
@@ -16,15 +17,16 @@ export function DatabaseWorkloadResources({
values: DatabaseWorkloadValues;
onChange: (patch: Partial<DatabaseWorkloadValues>) => void;
}) {
const r = useT().components.res;
return (
<div className="p-4 bg-blue-50/50 border border-blue-200 rounded-xl space-y-4">
<div className="flex items-center gap-2">
<Database className="w-5 h-5 text-blue-500" />
<h3 className="text-sm font-semibold text-gray-800">Database resources</h3>
<h3 className="text-sm font-semibold text-gray-800">{r.databaseResources}</h3>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label className="block text-xs text-gray-500 mb-1">CPU request</label>
<label className="block text-xs text-gray-500 mb-1">{r.cpuRequest}</label>
<select
className="input-field text-sm"
value={values.cpuRequest}
@@ -37,7 +39,7 @@ export function DatabaseWorkloadResources({
</select>
</div>
<div>
<label className="block text-xs text-gray-500 mb-1">CPU limit</label>
<label className="block text-xs text-gray-500 mb-1">{r.cpuLimit}</label>
<select
className="input-field text-sm"
value={values.cpuLimit}
@@ -45,12 +47,12 @@ export function DatabaseWorkloadResources({
>
<option value="250m">250m</option>
<option value="500m">500m</option>
<option value="1">1 core</option>
<option value="2">2 cores</option>
<option value="1">{r.oneCore}</option>
<option value="2">{r.twoCores}</option>
</select>
</div>
<div>
<label className="block text-xs text-gray-500 mb-1">Memory request</label>
<label className="block text-xs text-gray-500 mb-1">{r.memoryRequest}</label>
<select
className="input-field text-sm"
value={values.memoryRequest}
@@ -63,7 +65,7 @@ export function DatabaseWorkloadResources({
</select>
</div>
<div>
<label className="block text-xs text-gray-500 mb-1">Memory limit</label>
<label className="block text-xs text-gray-500 mb-1">{r.memoryLimit}</label>
<select
className="input-field text-sm"
value={values.memoryLimit}
frontend/src/components/optional-service-resource-fields.tsx
+7 -5
View File
@@ -1,6 +1,7 @@
'use client';
import { Server } from 'lucide-react';
import { useT } from '@/i18n/I18nProvider';
import type { OptionalServiceResourceConfig } from '@/types';
export function OptionalServiceResourceFields({
@@ -20,6 +21,7 @@ export function OptionalServiceResourceFields({
readOnly?: boolean;
onChange: (patch: Partial<OptionalServiceResourceConfig>) => void;
}) {
const r = useT().components.res;
const storageStr = String(config.storageGi);
const setStorage = (gb: number) => onChange({ storageGi: Math.max(0, gb) });
@@ -31,7 +33,7 @@ export function OptionalServiceResourceFields({
</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label className="block text-xs text-gray-500 mb-1">CPU limit</label>
<label className="block text-xs text-gray-500 mb-1">{r.cpuLimit}</label>
<select
className="input-field text-sm"
disabled={readOnly}
@@ -40,12 +42,12 @@ export function OptionalServiceResourceFields({
>
<option value="200m">200m</option>
<option value="500m">500m</option>
<option value="1">1 core</option>
<option value="2">2 cores</option>
<option value="1">{r.oneCore}</option>
<option value="2">{r.twoCores}</option>
</select>
</div>
<div>
<label className="block text-xs text-gray-500 mb-1">Memory limit</label>
<label className="block text-xs text-gray-500 mb-1">{r.memoryLimit}</label>
<select
className="input-field text-sm"
disabled={readOnly}
@@ -59,7 +61,7 @@ export function OptionalServiceResourceFields({
</select>
</div>
<div className="sm:col-span-2">
<label className="block text-xs text-gray-500 mb-1">Storage (GB)</label>
<label className="block text-xs text-gray-500 mb-1">{r.storageGb}</label>
<div className="flex items-center gap-2">
<button
type="button"