mirror of
https://github.com/9technologygroup/patchmon.net.git
synced 2025-11-08 16:01:59 +00:00
style(frontend): fmt
This commit is contained in:
tigattack
@@ -1,231 +1,266 @@
|
||||
import axios from 'axios'
|
||||
import axios from "axios";
|
||||
|
||||
const API_BASE_URL = import.meta.env.VITE_API_URL || '/api/v1'
|
||||
const API_BASE_URL = import.meta.env.VITE_API_URL || "/api/v1";
|
||||
|
||||
// Create axios instance with default config
|
||||
const api = axios.create({
|
||||
baseURL: API_BASE_URL,
|
||||
timeout: 10000,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
baseURL: API_BASE_URL,
|
||||
timeout: 10000,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
// Request interceptor
|
||||
api.interceptors.request.use(
|
||||
(config) => {
|
||||
// Add auth token if available
|
||||
const token = localStorage.getItem('token')
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`
|
||||
}
|
||||
return config
|
||||
},
|
||||
(error) => {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
(config) => {
|
||||
// Add auth token if available
|
||||
const token = localStorage.getItem("token");
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
},
|
||||
(error) => {
|
||||
return Promise.reject(error);
|
||||
},
|
||||
);
|
||||
|
||||
// Response interceptor
|
||||
api.interceptors.response.use(
|
||||
(response) => response,
|
||||
(error) => {
|
||||
if (error.response?.status === 401) {
|
||||
// Don't redirect if we're on the login page or if it's a TFA verification error
|
||||
const currentPath = window.location.pathname
|
||||
const isTfaError = error.config?.url?.includes('/verify-tfa')
|
||||
|
||||
if (currentPath !== '/login' && !isTfaError) {
|
||||
// Handle unauthorized
|
||||
localStorage.removeItem('token')
|
||||
localStorage.removeItem('user')
|
||||
localStorage.removeItem('permissions')
|
||||
window.location.href = '/login'
|
||||
}
|
||||
}
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
(response) => response,
|
||||
(error) => {
|
||||
if (error.response?.status === 401) {
|
||||
// Don't redirect if we're on the login page or if it's a TFA verification error
|
||||
const currentPath = window.location.pathname;
|
||||
const isTfaError = error.config?.url?.includes("/verify-tfa");
|
||||
|
||||
if (currentPath !== "/login" && !isTfaError) {
|
||||
// Handle unauthorized
|
||||
localStorage.removeItem("token");
|
||||
localStorage.removeItem("user");
|
||||
localStorage.removeItem("permissions");
|
||||
window.location.href = "/login";
|
||||
}
|
||||
}
|
||||
return Promise.reject(error);
|
||||
},
|
||||
);
|
||||
|
||||
// Dashboard API
|
||||
export const dashboardAPI = {
|
||||
getStats: () => api.get('/dashboard/stats'),
|
||||
getHosts: () => api.get('/dashboard/hosts'),
|
||||
getPackages: () => api.get('/dashboard/packages'),
|
||||
getHostDetail: (hostId) => api.get(`/dashboard/hosts/${hostId}`),
|
||||
getRecentUsers: () => api.get('/dashboard/recent-users'),
|
||||
getRecentCollection: () => api.get('/dashboard/recent-collection')
|
||||
}
|
||||
getStats: () => api.get("/dashboard/stats"),
|
||||
getHosts: () => api.get("/dashboard/hosts"),
|
||||
getPackages: () => api.get("/dashboard/packages"),
|
||||
getHostDetail: (hostId) => api.get(`/dashboard/hosts/${hostId}`),
|
||||
getRecentUsers: () => api.get("/dashboard/recent-users"),
|
||||
getRecentCollection: () => api.get("/dashboard/recent-collection"),
|
||||
};
|
||||
|
||||
// Admin Hosts API (for management interface)
|
||||
export const adminHostsAPI = {
|
||||
create: (data) => api.post('/hosts/create', data),
|
||||
list: () => api.get('/hosts/admin/list'),
|
||||
delete: (hostId) => api.delete(`/hosts/${hostId}`),
|
||||
deleteBulk: (hostIds) => api.delete('/hosts/bulk', { data: { hostIds } }),
|
||||
regenerateCredentials: (hostId) => api.post(`/hosts/${hostId}/regenerate-credentials`),
|
||||
updateGroup: (hostId, hostGroupId) => api.put(`/hosts/${hostId}/group`, { hostGroupId }),
|
||||
bulkUpdateGroup: (hostIds, hostGroupId) => api.put('/hosts/bulk/group', { hostIds, hostGroupId }),
|
||||
toggleAutoUpdate: (hostId, autoUpdate) => api.patch(`/hosts/${hostId}/auto-update`, { auto_update: autoUpdate }),
|
||||
updateFriendlyName: (hostId, friendlyName) => api.patch(`/hosts/${hostId}/friendly-name`, { friendly_name: friendlyName })
|
||||
}
|
||||
create: (data) => api.post("/hosts/create", data),
|
||||
list: () => api.get("/hosts/admin/list"),
|
||||
delete: (hostId) => api.delete(`/hosts/${hostId}`),
|
||||
deleteBulk: (hostIds) => api.delete("/hosts/bulk", { data: { hostIds } }),
|
||||
regenerateCredentials: (hostId) =>
|
||||
api.post(`/hosts/${hostId}/regenerate-credentials`),
|
||||
updateGroup: (hostId, hostGroupId) =>
|
||||
api.put(`/hosts/${hostId}/group`, { hostGroupId }),
|
||||
bulkUpdateGroup: (hostIds, hostGroupId) =>
|
||||
api.put("/hosts/bulk/group", { hostIds, hostGroupId }),
|
||||
toggleAutoUpdate: (hostId, autoUpdate) =>
|
||||
api.patch(`/hosts/${hostId}/auto-update`, { auto_update: autoUpdate }),
|
||||
updateFriendlyName: (hostId, friendlyName) =>
|
||||
api.patch(`/hosts/${hostId}/friendly-name`, {
|
||||
friendly_name: friendlyName,
|
||||
}),
|
||||
};
|
||||
|
||||
// Host Groups API
|
||||
export const hostGroupsAPI = {
|
||||
list: () => api.get('/host-groups'),
|
||||
get: (id) => api.get(`/host-groups/${id}`),
|
||||
create: (data) => api.post('/host-groups', data),
|
||||
update: (id, data) => api.put(`/host-groups/${id}`, data),
|
||||
delete: (id) => api.delete(`/host-groups/${id}`),
|
||||
getHosts: (id) => api.get(`/host-groups/${id}/hosts`),
|
||||
}
|
||||
list: () => api.get("/host-groups"),
|
||||
get: (id) => api.get(`/host-groups/${id}`),
|
||||
create: (data) => api.post("/host-groups", data),
|
||||
update: (id, data) => api.put(`/host-groups/${id}`, data),
|
||||
delete: (id) => api.delete(`/host-groups/${id}`),
|
||||
getHosts: (id) => api.get(`/host-groups/${id}/hosts`),
|
||||
};
|
||||
|
||||
// Admin Users API (for user management)
|
||||
export const adminUsersAPI = {
|
||||
list: () => api.get('/auth/admin/users'),
|
||||
create: (userData) => api.post('/auth/admin/users', userData),
|
||||
update: (userId, userData) => api.put(`/auth/admin/users/${userId}`, userData),
|
||||
delete: (userId) => api.delete(`/auth/admin/users/${userId}`),
|
||||
resetPassword: (userId, newPassword) => api.post(`/auth/admin/users/${userId}/reset-password`, { newPassword })
|
||||
}
|
||||
list: () => api.get("/auth/admin/users"),
|
||||
create: (userData) => api.post("/auth/admin/users", userData),
|
||||
update: (userId, userData) =>
|
||||
api.put(`/auth/admin/users/${userId}`, userData),
|
||||
delete: (userId) => api.delete(`/auth/admin/users/${userId}`),
|
||||
resetPassword: (userId, newPassword) =>
|
||||
api.post(`/auth/admin/users/${userId}/reset-password`, { newPassword }),
|
||||
};
|
||||
|
||||
// Permissions API (for role management)
|
||||
export const permissionsAPI = {
|
||||
getRoles: () => api.get('/permissions/roles'),
|
||||
getRole: (role) => api.get(`/permissions/roles/${role}`),
|
||||
updateRole: (role, permissions) => api.put(`/permissions/roles/${role}`, permissions),
|
||||
deleteRole: (role) => api.delete(`/permissions/roles/${role}`),
|
||||
getUserPermissions: () => api.get('/permissions/user-permissions')
|
||||
}
|
||||
getRoles: () => api.get("/permissions/roles"),
|
||||
getRole: (role) => api.get(`/permissions/roles/${role}`),
|
||||
updateRole: (role, permissions) =>
|
||||
api.put(`/permissions/roles/${role}`, permissions),
|
||||
deleteRole: (role) => api.delete(`/permissions/roles/${role}`),
|
||||
getUserPermissions: () => api.get("/permissions/user-permissions"),
|
||||
};
|
||||
|
||||
// Settings API
|
||||
export const settingsAPI = {
|
||||
get: () => api.get('/settings'),
|
||||
update: (settings) => api.put('/settings', settings),
|
||||
getServerUrl: () => api.get('/settings/server-url')
|
||||
}
|
||||
get: () => api.get("/settings"),
|
||||
update: (settings) => api.put("/settings", settings),
|
||||
getServerUrl: () => api.get("/settings/server-url"),
|
||||
};
|
||||
|
||||
// Agent Version API
|
||||
export const agentVersionAPI = {
|
||||
list: () => api.get('/hosts/agent/versions'),
|
||||
create: (data) => api.post('/hosts/agent/versions', data),
|
||||
update: (id, data) => api.put(`/hosts/agent/versions/${id}`, data),
|
||||
delete: (id) => api.delete(`/hosts/agent/versions/${id}`),
|
||||
setCurrent: (id) => api.patch(`/hosts/agent/versions/${id}/current`),
|
||||
setDefault: (id) => api.patch(`/hosts/agent/versions/${id}/default`),
|
||||
download: (version) => api.get(`/hosts/agent/download${version ? `?version=${version}` : ''}`, { responseType: 'blob' })
|
||||
}
|
||||
list: () => api.get("/hosts/agent/versions"),
|
||||
create: (data) => api.post("/hosts/agent/versions", data),
|
||||
update: (id, data) => api.put(`/hosts/agent/versions/${id}`, data),
|
||||
delete: (id) => api.delete(`/hosts/agent/versions/${id}`),
|
||||
setCurrent: (id) => api.patch(`/hosts/agent/versions/${id}/current`),
|
||||
setDefault: (id) => api.patch(`/hosts/agent/versions/${id}/default`),
|
||||
download: (version) =>
|
||||
api.get(`/hosts/agent/download${version ? `?version=${version}` : ""}`, {
|
||||
responseType: "blob",
|
||||
}),
|
||||
};
|
||||
|
||||
// Repository API
|
||||
export const repositoryAPI = {
|
||||
list: () => api.get('/repositories'),
|
||||
getById: (repositoryId) => api.get(`/repositories/${repositoryId}`),
|
||||
getByHost: (hostId) => api.get(`/repositories/host/${hostId}`),
|
||||
update: (repositoryId, data) => api.put(`/repositories/${repositoryId}`, data),
|
||||
toggleHostRepository: (hostId, repositoryId, isEnabled) =>
|
||||
api.patch(`/repositories/host/${hostId}/repository/${repositoryId}`, { isEnabled }),
|
||||
getStats: () => api.get('/repositories/stats/summary'),
|
||||
cleanupOrphaned: () => api.delete('/repositories/cleanup/orphaned')
|
||||
}
|
||||
list: () => api.get("/repositories"),
|
||||
getById: (repositoryId) => api.get(`/repositories/${repositoryId}`),
|
||||
getByHost: (hostId) => api.get(`/repositories/host/${hostId}`),
|
||||
update: (repositoryId, data) =>
|
||||
api.put(`/repositories/${repositoryId}`, data),
|
||||
toggleHostRepository: (hostId, repositoryId, isEnabled) =>
|
||||
api.patch(`/repositories/host/${hostId}/repository/${repositoryId}`, {
|
||||
isEnabled,
|
||||
}),
|
||||
getStats: () => api.get("/repositories/stats/summary"),
|
||||
cleanupOrphaned: () => api.delete("/repositories/cleanup/orphaned"),
|
||||
};
|
||||
|
||||
// Dashboard Preferences API
|
||||
export const dashboardPreferencesAPI = {
|
||||
get: () => api.get('/dashboard-preferences'),
|
||||
update: (preferences) => api.put('/dashboard-preferences', { preferences }),
|
||||
getDefaults: () => api.get('/dashboard-preferences/defaults')
|
||||
}
|
||||
get: () => api.get("/dashboard-preferences"),
|
||||
update: (preferences) => api.put("/dashboard-preferences", { preferences }),
|
||||
getDefaults: () => api.get("/dashboard-preferences/defaults"),
|
||||
};
|
||||
|
||||
// Hosts API (for agent communication - kept for compatibility)
|
||||
export const hostsAPI = {
|
||||
// Legacy register endpoint (now deprecated)
|
||||
register: (data) => api.post('/hosts/register', data),
|
||||
|
||||
// Updated to use API credentials
|
||||
update: (apiId, apiKey, data) => api.post('/hosts/update', data, {
|
||||
headers: {
|
||||
'X-API-ID': apiId,
|
||||
'X-API-KEY': apiKey
|
||||
}
|
||||
}),
|
||||
getInfo: (apiId, apiKey) => api.get('/hosts/info', {
|
||||
headers: {
|
||||
'X-API-ID': apiId,
|
||||
'X-API-KEY': apiKey
|
||||
}
|
||||
}),
|
||||
ping: (apiId, apiKey) => api.post('/hosts/ping', {}, {
|
||||
headers: {
|
||||
'X-API-ID': apiId,
|
||||
'X-API-KEY': apiKey
|
||||
}
|
||||
}),
|
||||
toggleAutoUpdate: (id, autoUpdate) => api.patch(`/hosts/${id}/auto-update`, { auto_update: autoUpdate })
|
||||
}
|
||||
// Legacy register endpoint (now deprecated)
|
||||
register: (data) => api.post("/hosts/register", data),
|
||||
|
||||
// Updated to use API credentials
|
||||
update: (apiId, apiKey, data) =>
|
||||
api.post("/hosts/update", data, {
|
||||
headers: {
|
||||
"X-API-ID": apiId,
|
||||
"X-API-KEY": apiKey,
|
||||
},
|
||||
}),
|
||||
getInfo: (apiId, apiKey) =>
|
||||
api.get("/hosts/info", {
|
||||
headers: {
|
||||
"X-API-ID": apiId,
|
||||
"X-API-KEY": apiKey,
|
||||
},
|
||||
}),
|
||||
ping: (apiId, apiKey) =>
|
||||
api.post(
|
||||
"/hosts/ping",
|
||||
{},
|
||||
{
|
||||
headers: {
|
||||
"X-API-ID": apiId,
|
||||
"X-API-KEY": apiKey,
|
||||
},
|
||||
},
|
||||
),
|
||||
toggleAutoUpdate: (id, autoUpdate) =>
|
||||
api.patch(`/hosts/${id}/auto-update`, { auto_update: autoUpdate }),
|
||||
};
|
||||
|
||||
// Packages API
|
||||
export const packagesAPI = {
|
||||
getAll: (params = {}) => api.get('/packages', { params }),
|
||||
getById: (packageId) => api.get(`/packages/${packageId}`),
|
||||
getCategories: () => api.get('/packages/categories/list'),
|
||||
getHosts: (packageId, params = {}) => api.get(`/packages/${packageId}/hosts`, { params }),
|
||||
update: (packageId, data) => api.put(`/packages/${packageId}`, data),
|
||||
search: (query, params = {}) => api.get(`/packages/search/${query}`, { params }),
|
||||
}
|
||||
getAll: (params = {}) => api.get("/packages", { params }),
|
||||
getById: (packageId) => api.get(`/packages/${packageId}`),
|
||||
getCategories: () => api.get("/packages/categories/list"),
|
||||
getHosts: (packageId, params = {}) =>
|
||||
api.get(`/packages/${packageId}/hosts`, { params }),
|
||||
update: (packageId, data) => api.put(`/packages/${packageId}`, data),
|
||||
search: (query, params = {}) =>
|
||||
api.get(`/packages/search/${query}`, { params }),
|
||||
};
|
||||
|
||||
// Utility functions
|
||||
export const formatError = (error) => {
|
||||
if (error.response?.data?.message) {
|
||||
return error.response.data.message
|
||||
}
|
||||
if (error.response?.data?.error) {
|
||||
return error.response.data.error
|
||||
}
|
||||
if (error.message) {
|
||||
return error.message
|
||||
}
|
||||
return 'An unexpected error occurred'
|
||||
}
|
||||
if (error.response?.data?.message) {
|
||||
return error.response.data.message;
|
||||
}
|
||||
if (error.response?.data?.error) {
|
||||
return error.response.data.error;
|
||||
}
|
||||
if (error.message) {
|
||||
return error.message;
|
||||
}
|
||||
return "An unexpected error occurred";
|
||||
};
|
||||
|
||||
export const formatDate = (date) => {
|
||||
return new Date(date).toLocaleString()
|
||||
}
|
||||
return new Date(date).toLocaleString();
|
||||
};
|
||||
|
||||
// Version API
|
||||
export const versionAPI = {
|
||||
getCurrent: () => api.get('/version/current'),
|
||||
checkUpdates: () => api.get('/version/check-updates'),
|
||||
testSshKey: (data) => api.post('/version/test-ssh-key', data),
|
||||
}
|
||||
getCurrent: () => api.get("/version/current"),
|
||||
checkUpdates: () => api.get("/version/check-updates"),
|
||||
testSshKey: (data) => api.post("/version/test-ssh-key", data),
|
||||
};
|
||||
|
||||
// Auth API
|
||||
export const authAPI = {
|
||||
login: (username, password) => api.post('/auth/login', { username, password }),
|
||||
verifyTfa: (username, token) => api.post('/auth/verify-tfa', { username, token }),
|
||||
signup: (username, email, password, firstName, lastName) => api.post('/auth/signup', { username, email, password, firstName, lastName }),
|
||||
}
|
||||
login: (username, password) =>
|
||||
api.post("/auth/login", { username, password }),
|
||||
verifyTfa: (username, token) =>
|
||||
api.post("/auth/verify-tfa", { username, token }),
|
||||
signup: (username, email, password, firstName, lastName) =>
|
||||
api.post("/auth/signup", {
|
||||
username,
|
||||
email,
|
||||
password,
|
||||
firstName,
|
||||
lastName,
|
||||
}),
|
||||
};
|
||||
|
||||
// TFA API
|
||||
export const tfaAPI = {
|
||||
setup: () => api.get('/tfa/setup'),
|
||||
verifySetup: (data) => api.post('/tfa/verify-setup', data),
|
||||
disable: (data) => api.post('/tfa/disable', data),
|
||||
status: () => api.get('/tfa/status'),
|
||||
regenerateBackupCodes: () => api.post('/tfa/regenerate-backup-codes'),
|
||||
verify: (data) => api.post('/tfa/verify', data),
|
||||
}
|
||||
setup: () => api.get("/tfa/setup"),
|
||||
verifySetup: (data) => api.post("/tfa/verify-setup", data),
|
||||
disable: (data) => api.post("/tfa/disable", data),
|
||||
status: () => api.get("/tfa/status"),
|
||||
regenerateBackupCodes: () => api.post("/tfa/regenerate-backup-codes"),
|
||||
verify: (data) => api.post("/tfa/verify", data),
|
||||
};
|
||||
|
||||
export const formatRelativeTime = (date) => {
|
||||
const now = new Date()
|
||||
const diff = now - new Date(date)
|
||||
const seconds = Math.floor(diff / 1000)
|
||||
const minutes = Math.floor(seconds / 60)
|
||||
const hours = Math.floor(minutes / 60)
|
||||
const days = Math.floor(hours / 24)
|
||||
const now = new Date();
|
||||
const diff = now - new Date(date);
|
||||
const seconds = Math.floor(diff / 1000);
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const days = Math.floor(hours / 24);
|
||||
|
||||
if (days > 0) return `${days} day${days > 1 ? 's' : ''} ago`
|
||||
if (hours > 0) return `${hours} hour${hours > 1 ? 's' : ''} ago`
|
||||
if (minutes > 0) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`
|
||||
return `${seconds} second${seconds > 1 ? 's' : ''} ago`
|
||||
}
|
||||
if (days > 0) return `${days} day${days > 1 ? "s" : ""} ago`;
|
||||
if (hours > 0) return `${hours} hour${hours > 1 ? "s" : ""} ago`;
|
||||
if (minutes > 0) return `${minutes} minute${minutes > 1 ? "s" : ""} ago`;
|
||||
return `${seconds} second${seconds > 1 ? "s" : ""} ago`;
|
||||
};
|
||||
|
||||
export default api
|
||||
export default api;
|
||||
|
||||
@@ -1,65 +1,59 @@
|
||||
import {
|
||||
Monitor,
|
||||
Server,
|
||||
HardDrive,
|
||||
Cpu,
|
||||
Zap,
|
||||
Shield,
|
||||
Globe,
|
||||
Terminal
|
||||
} from 'lucide-react';
|
||||
|
||||
import {
|
||||
Cpu,
|
||||
Globe,
|
||||
HardDrive,
|
||||
Monitor,
|
||||
Server,
|
||||
Shield,
|
||||
Terminal,
|
||||
Zap,
|
||||
} from "lucide-react";
|
||||
import { DiDebian, DiLinux, DiUbuntu, DiWindows } from "react-icons/di";
|
||||
// Import OS icons from react-icons
|
||||
import {
|
||||
SiUbuntu,
|
||||
SiDebian,
|
||||
SiCentos,
|
||||
SiFedora,
|
||||
SiArchlinux,
|
||||
SiAlpinelinux,
|
||||
SiLinux,
|
||||
SiMacos
|
||||
} from 'react-icons/si';
|
||||
|
||||
import {
|
||||
DiUbuntu,
|
||||
DiDebian,
|
||||
DiLinux,
|
||||
DiWindows
|
||||
} from 'react-icons/di';
|
||||
import {
|
||||
SiAlpinelinux,
|
||||
SiArchlinux,
|
||||
SiCentos,
|
||||
SiDebian,
|
||||
SiFedora,
|
||||
SiLinux,
|
||||
SiMacos,
|
||||
SiUbuntu,
|
||||
} from "react-icons/si";
|
||||
|
||||
/**
|
||||
* OS Icon mapping utility
|
||||
* Maps operating system types to appropriate react-icons components
|
||||
*/
|
||||
export const getOSIcon = (osType) => {
|
||||
if (!osType) return Monitor;
|
||||
|
||||
const os = osType.toLowerCase();
|
||||
|
||||
// Linux distributions with authentic react-icons
|
||||
if (os.includes('ubuntu')) return SiUbuntu;
|
||||
if (os.includes('debian')) return SiDebian;
|
||||
if (os.includes('centos') || os.includes('rhel') || os.includes('red hat')) return SiCentos;
|
||||
if (os.includes('fedora')) return SiFedora;
|
||||
if (os.includes('arch')) return SiArchlinux;
|
||||
if (os.includes('alpine')) return SiAlpinelinux;
|
||||
if (os.includes('suse') || os.includes('opensuse')) return SiLinux; // SUSE uses generic Linux icon
|
||||
|
||||
// Generic Linux
|
||||
if (os.includes('linux')) return SiLinux;
|
||||
|
||||
// Windows
|
||||
if (os.includes('windows')) return DiWindows;
|
||||
|
||||
// macOS
|
||||
if (os.includes('mac') || os.includes('darwin')) return SiMacos;
|
||||
|
||||
// FreeBSD
|
||||
if (os.includes('freebsd')) return Server;
|
||||
|
||||
// Default fallback
|
||||
return Monitor;
|
||||
if (!osType) return Monitor;
|
||||
|
||||
const os = osType.toLowerCase();
|
||||
|
||||
// Linux distributions with authentic react-icons
|
||||
if (os.includes("ubuntu")) return SiUbuntu;
|
||||
if (os.includes("debian")) return SiDebian;
|
||||
if (os.includes("centos") || os.includes("rhel") || os.includes("red hat"))
|
||||
return SiCentos;
|
||||
if (os.includes("fedora")) return SiFedora;
|
||||
if (os.includes("arch")) return SiArchlinux;
|
||||
if (os.includes("alpine")) return SiAlpinelinux;
|
||||
if (os.includes("suse") || os.includes("opensuse")) return SiLinux; // SUSE uses generic Linux icon
|
||||
|
||||
// Generic Linux
|
||||
if (os.includes("linux")) return SiLinux;
|
||||
|
||||
// Windows
|
||||
if (os.includes("windows")) return DiWindows;
|
||||
|
||||
// macOS
|
||||
if (os.includes("mac") || os.includes("darwin")) return SiMacos;
|
||||
|
||||
// FreeBSD
|
||||
if (os.includes("freebsd")) return Server;
|
||||
|
||||
// Default fallback
|
||||
return Monitor;
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -67,11 +61,11 @@ export const getOSIcon = (osType) => {
|
||||
* Maps operating system types to appropriate colors (react-icons have built-in brand colors)
|
||||
*/
|
||||
export const getOSColor = (osType) => {
|
||||
if (!osType) return 'text-gray-500';
|
||||
|
||||
// react-icons already have the proper brand colors built-in
|
||||
// This function is kept for compatibility but returns neutral colors
|
||||
return 'text-gray-600';
|
||||
if (!osType) return "text-gray-500";
|
||||
|
||||
// react-icons already have the proper brand colors built-in
|
||||
// This function is kept for compatibility but returns neutral colors
|
||||
return "text-gray-600";
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -79,52 +73,53 @@ export const getOSColor = (osType) => {
|
||||
* Provides clean, formatted OS names for display
|
||||
*/
|
||||
export const getOSDisplayName = (osType) => {
|
||||
if (!osType) return 'Unknown';
|
||||
|
||||
const os = osType.toLowerCase();
|
||||
|
||||
// Linux distributions
|
||||
if (os.includes('ubuntu')) return 'Ubuntu';
|
||||
if (os.includes('debian')) return 'Debian';
|
||||
if (os.includes('centos')) return 'CentOS';
|
||||
if (os.includes('rhel') || os.includes('red hat')) return 'Red Hat Enterprise Linux';
|
||||
if (os.includes('fedora')) return 'Fedora';
|
||||
if (os.includes('arch')) return 'Arch Linux';
|
||||
if (os.includes('suse')) return 'SUSE Linux';
|
||||
if (os.includes('opensuse')) return 'openSUSE';
|
||||
if (os.includes('alpine')) return 'Alpine Linux';
|
||||
|
||||
// Generic Linux
|
||||
if (os.includes('linux')) return 'Linux';
|
||||
|
||||
// Windows
|
||||
if (os.includes('windows')) return 'Windows';
|
||||
|
||||
// macOS
|
||||
if (os.includes('mac') || os.includes('darwin')) return 'macOS';
|
||||
|
||||
// FreeBSD
|
||||
if (os.includes('freebsd')) return 'FreeBSD';
|
||||
|
||||
// Return original if no match
|
||||
return osType;
|
||||
if (!osType) return "Unknown";
|
||||
|
||||
const os = osType.toLowerCase();
|
||||
|
||||
// Linux distributions
|
||||
if (os.includes("ubuntu")) return "Ubuntu";
|
||||
if (os.includes("debian")) return "Debian";
|
||||
if (os.includes("centos")) return "CentOS";
|
||||
if (os.includes("rhel") || os.includes("red hat"))
|
||||
return "Red Hat Enterprise Linux";
|
||||
if (os.includes("fedora")) return "Fedora";
|
||||
if (os.includes("arch")) return "Arch Linux";
|
||||
if (os.includes("suse")) return "SUSE Linux";
|
||||
if (os.includes("opensuse")) return "openSUSE";
|
||||
if (os.includes("alpine")) return "Alpine Linux";
|
||||
|
||||
// Generic Linux
|
||||
if (os.includes("linux")) return "Linux";
|
||||
|
||||
// Windows
|
||||
if (os.includes("windows")) return "Windows";
|
||||
|
||||
// macOS
|
||||
if (os.includes("mac") || os.includes("darwin")) return "macOS";
|
||||
|
||||
// FreeBSD
|
||||
if (os.includes("freebsd")) return "FreeBSD";
|
||||
|
||||
// Return original if no match
|
||||
return osType;
|
||||
};
|
||||
|
||||
/**
|
||||
* OS Icon component with proper styling
|
||||
*/
|
||||
export const OSIcon = ({ osType, className = "h-4 w-4", showText = false }) => {
|
||||
const IconComponent = getOSIcon(osType);
|
||||
const displayName = getOSDisplayName(osType);
|
||||
|
||||
if (showText) {
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<IconComponent className={className} title={displayName} />
|
||||
<span className="text-sm">{displayName}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <IconComponent className={className} title={displayName} />;
|
||||
const IconComponent = getOSIcon(osType);
|
||||
const displayName = getOSDisplayName(osType);
|
||||
|
||||
if (showText) {
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<IconComponent className={className} title={displayName} />
|
||||
<span className="text-sm">{displayName}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <IconComponent className={className} title={displayName} />;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user