Fix custom toast and add updated helmchart
This commit is contained in:
parent
c0c3c92b55
commit
985993bef2
@ -7,6 +7,7 @@ import Clock from './components/Clock';
|
|||||||
import { ToastContainer, toast } from 'react-toastify';
|
import { ToastContainer, toast } from 'react-toastify';
|
||||||
import 'react-toastify/dist/ReactToastify.css';
|
import 'react-toastify/dist/ReactToastify.css';
|
||||||
import { IoIosAdd } from 'react-icons/io';
|
import { IoIosAdd } from 'react-icons/io';
|
||||||
|
import CustomToast from './components/CustomToast';
|
||||||
import {
|
import {
|
||||||
fetchSections,
|
fetchSections,
|
||||||
addAppToSection,
|
addAppToSection,
|
||||||
@ -48,7 +49,7 @@ function App() {
|
|||||||
section: confirmData.app.section,
|
section: confirmData.app.section,
|
||||||
app: confirmData.app,
|
app: confirmData.app,
|
||||||
});
|
});
|
||||||
toast.error(`App "${confirmData.app.name}" deleted successfully!`);
|
toast(<CustomToast type="delete" message={`App "${confirmData.app.name}" deleted successfully!`} />);
|
||||||
loadSections();
|
loadSections();
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('Failed to delete app:', err);
|
console.error('Failed to delete app:', err);
|
||||||
@ -61,7 +62,7 @@ function App() {
|
|||||||
const handleAddSubmit = async (data) => {
|
const handleAddSubmit = async (data) => {
|
||||||
try {
|
try {
|
||||||
await addAppToSection(data);
|
await addAppToSection(data);
|
||||||
toast.success(`App "${data.app.name}" added successfully!`);
|
toast(<CustomToast type="success" message={`App "${data.app.name}" added successfully!`} />);
|
||||||
setShowAdd(false);
|
setShowAdd(false);
|
||||||
loadSections();
|
loadSections();
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@ -77,7 +78,7 @@ function App() {
|
|||||||
app: data.app,
|
app: data.app,
|
||||||
original_name: data.original_name || data.app.name,
|
original_name: data.original_name || data.app.name,
|
||||||
});
|
});
|
||||||
toast.warning(`App "${data.app.name}" updated successfully!`);
|
toast(<CustomToast type="edit" message={`App "${data.app.name}" updated successfully!`} />);
|
||||||
setEditData(null);
|
setEditData(null);
|
||||||
loadSections();
|
loadSections();
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@ -143,7 +144,17 @@ function App() {
|
|||||||
pauseOnFocusLoss
|
pauseOnFocusLoss
|
||||||
draggable
|
draggable
|
||||||
pauseOnHover
|
pauseOnHover
|
||||||
theme="colored"
|
theme="dark"
|
||||||
|
toastStyle={{
|
||||||
|
backgroundColor: 'black',
|
||||||
|
borderRadius: '12px',
|
||||||
|
minHeight: '110px',
|
||||||
|
padding: '20px',
|
||||||
|
color: '#fff',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
bodyClassName="toast-body"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
17
frontend/src/components/CustomToast.jsx
Normal file
17
frontend/src/components/CustomToast.jsx
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import { FaCheckCircle, FaEdit, FaTrash } from 'react-icons/fa';
|
||||||
|
import '../style/CustomToast.css'; // Ensure you have this CSS file for styling
|
||||||
|
|
||||||
|
const iconMap = {
|
||||||
|
success: <FaCheckCircle color="#00ff00" />,
|
||||||
|
edit: <FaEdit color="#ffa500" />,
|
||||||
|
delete: <FaTrash color="#ff4d4d" />
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function CustomToast({ type, message }) {
|
||||||
|
return (
|
||||||
|
<div className="custom-toast">
|
||||||
|
<span className="icon">{iconMap[type]}</span>
|
||||||
|
<span className="message">{message}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
26
frontend/src/style/CustomToast.css
Normal file
26
frontend/src/style/CustomToast.css
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
.custom-toast {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 14px;
|
||||||
|
font-family: 'Orbitron', sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-toast .icon {
|
||||||
|
font-size: 22px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-toast .message {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Toastify__progress-bar {
|
||||||
|
background: #4e9aff !important;
|
||||||
|
}
|
||||||
27
navix-chart/templates/frontend-deployment.yaml
Normal file
27
navix-chart/templates/frontend-deployment.yaml
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
apiVersion: apps/v1
|
||||||
|
kind: Deployment
|
||||||
|
metadata:
|
||||||
|
name: navix-frontend
|
||||||
|
spec:
|
||||||
|
replicas: 1
|
||||||
|
selector:
|
||||||
|
matchLabels:
|
||||||
|
app: navix-frontend
|
||||||
|
template:
|
||||||
|
metadata:
|
||||||
|
labels:
|
||||||
|
app: navix-frontend
|
||||||
|
spec:
|
||||||
|
containers:
|
||||||
|
- name: frontend
|
||||||
|
image: "{{ .Values.frontend.image.repository }}:{{ .Values.frontend.tag }}"
|
||||||
|
imagePullPolicy: {{ .Values.frontend.image.pullPolicy }}
|
||||||
|
ports:
|
||||||
|
- containerPort: 80
|
||||||
|
env:
|
||||||
|
- name: API_BASE
|
||||||
|
value: {{ .Values.frontend.env.API_BASE | quote }}
|
||||||
|
- name: MINIO_ENDPOINT
|
||||||
|
value: {{ .Values.frontend.env.MINIO_ENDPOINT | quote }}
|
||||||
|
- name: MINIO_BUCKET
|
||||||
|
value: {{ .Values.frontend.env.MINIO_BUCKET | quote }}
|
||||||
@ -1,8 +1,8 @@
|
|||||||
frontend:
|
frontend:
|
||||||
image:
|
image:
|
||||||
repository: harbor.dvirlabs.com/my-apps/navix-frontend
|
repository: harbor.dvirlabs.com/my-apps/navix-front
|
||||||
|
tag: latest
|
||||||
pullPolicy: IfNotPresent
|
pullPolicy: IfNotPresent
|
||||||
tag: master-4fc5494
|
|
||||||
service:
|
service:
|
||||||
type: ClusterIP
|
type: ClusterIP
|
||||||
port: 80
|
port: 80
|
||||||
@ -21,12 +21,12 @@ frontend:
|
|||||||
API_BASE: "https://navix.dvirlabs.com/api"
|
API_BASE: "https://navix.dvirlabs.com/api"
|
||||||
MINIO_ENDPOINT: "s3.dvirlabs.com"
|
MINIO_ENDPOINT: "s3.dvirlabs.com"
|
||||||
MINIO_BUCKET: "navix-icons"
|
MINIO_BUCKET: "navix-icons"
|
||||||
tag: master-4fc5494
|
|
||||||
backend:
|
backend:
|
||||||
image:
|
image:
|
||||||
repository: harbor.dvirlabs.com/my-apps/navix-backend
|
repository: harbor.dvirlabs.com/my-apps/navix-back
|
||||||
|
tag: latest
|
||||||
pullPolicy: IfNotPresent
|
pullPolicy: IfNotPresent
|
||||||
tag: master-4fc5494
|
|
||||||
service:
|
service:
|
||||||
type: ClusterIP
|
type: ClusterIP
|
||||||
port: 8000
|
port: 8000
|
||||||
@ -42,8 +42,7 @@ backend:
|
|||||||
traefik.ingress.kubernetes.io/router.entrypoints: websecure
|
traefik.ingress.kubernetes.io/router.entrypoints: websecure
|
||||||
traefik.ingress.kubernetes.io/router.tls: "true"
|
traefik.ingress.kubernetes.io/router.tls: "true"
|
||||||
hosts:
|
hosts:
|
||||||
- host: api-navix.dvirlabs.com
|
- host: navix.dvirlabs.com
|
||||||
paths:
|
paths:
|
||||||
- path: /api
|
- path: /api
|
||||||
pathType: Prefix
|
pathType: Prefix
|
||||||
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
apiVersion: v1
|
|
||||||
kind: ConfigMap
|
|
||||||
metadata:
|
|
||||||
name: navix-frontend-env
|
|
||||||
data:
|
|
||||||
env.js: |
|
|
||||||
window.ENV = {
|
|
||||||
API_BASE: "{{ .Values.frontend.env.API_BASE }}",
|
|
||||||
MINIO_ENDPOINT: "{{ .Values.frontend.env.MINIO_ENDPOINT }}",
|
|
||||||
MINIO_BUCKET: "{{ .Values.frontend.env.MINIO_BUCKET }}"
|
|
||||||
};
|
|
||||||
@ -1,44 +0,0 @@
|
|||||||
apiVersion: apps/v1
|
|
||||||
kind: Deployment
|
|
||||||
metadata:
|
|
||||||
name: navix-frontend
|
|
||||||
spec:
|
|
||||||
replicas: 1
|
|
||||||
selector:
|
|
||||||
matchLabels:
|
|
||||||
app: navix-frontend
|
|
||||||
template:
|
|
||||||
metadata:
|
|
||||||
labels:
|
|
||||||
app: navix-frontend
|
|
||||||
spec:
|
|
||||||
initContainers:
|
|
||||||
- name: copy-env
|
|
||||||
image: busybox
|
|
||||||
command: ["sh", "-c", "cp /config/env.js /env/env.js"]
|
|
||||||
volumeMounts:
|
|
||||||
- name: env-config
|
|
||||||
mountPath: /config
|
|
||||||
- name: env-volume
|
|
||||||
mountPath: /env
|
|
||||||
|
|
||||||
containers:
|
|
||||||
- name: frontend
|
|
||||||
image: "{{ .Values.frontend.image.repository }}:{{ .Values.frontend.tag }}"
|
|
||||||
imagePullPolicy: {{ .Values.frontend.image.pullPolicy }}
|
|
||||||
ports:
|
|
||||||
- containerPort: 80
|
|
||||||
volumeMounts:
|
|
||||||
- name: env-volume
|
|
||||||
mountPath: /usr/share/nginx/html/env.js
|
|
||||||
subPath: env.js
|
|
||||||
|
|
||||||
volumes:
|
|
||||||
- name: env-volume
|
|
||||||
emptyDir: {}
|
|
||||||
- name: env-config
|
|
||||||
configMap:
|
|
||||||
name: navix-frontend-env
|
|
||||||
items:
|
|
||||||
- key: env.js
|
|
||||||
path: env.js
|
|
||||||
Loading…
x
Reference in New Issue
Block a user