github/oneuptime
1
1
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-04-06 00:32:12 +02:00
Code Issues 193 Packages Projects Releases Wiki Activity

refactor: Clean up component code and improve formatting across multiple files

Browse Source
This commit is contained in:
Nawaz Dhandala
2026-02-13 17:11:00 +00:00
parent 86edee35c1
commit fc9026a8d8
11 changed files with 214 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
MobileApp/src/components/AlertCard.tsx
View File

@@ -54,80 +54,82 @@ export default function AlertCard({
style={{ width: 3 }}
/>
<View className="flex-1 p-4">
{projectName ? (
<View className="mb-2">
<ProjectBadge name={projectName} />
{projectName ? (
<View className="mb-2">
<ProjectBadge name={projectName} />
</View>
) : null}
<View className="flex-row justify-between items-center mb-2">
<View
className="px-2.5 py-0.5 rounded-full"
style={{ backgroundColor: theme.colors.backgroundTertiary }}
>
<Text className="text-[12px] font-semibold text-text-tertiary">
{alert.alertNumberWithPrefix || `#${alert.alertNumber}`}
</Text>
</View>
<Text className="text-[12px] text-text-tertiary">
{timeString}
</Text>
</View>
) : null}
<View className="flex-row justify-between items-center mb-2">
<View
className="px-2.5 py-0.5 rounded-full"
style={{ backgroundColor: theme.colors.backgroundTertiary }}
<Text
className="text-body-lg text-text-primary font-semibold mt-0.5"
numberOfLines={2}
>
<Text className="text-[12px] font-semibold text-text-tertiary">
{alert.alertNumberWithPrefix || `#${alert.alertNumber}`}
</Text>
</View>
<Text className="text-[12px] text-text-tertiary">{timeString}</Text>
</View>
{alert.title}
</Text>
<Text
className="text-body-lg text-text-primary font-semibold mt-0.5"
numberOfLines={2}
>
{alert.title}
</Text>
<View className="flex-row flex-wrap gap-2 mt-3">
{alert.currentAlertState ? (
<View
className="flex-row items-center px-2.5 py-1 rounded-full"
style={{
backgroundColor: theme.colors.backgroundTertiary,
}}
>
<View className="flex-row flex-wrap gap-2 mt-3">
{alert.currentAlertState ? (
<View
className="w-2 h-2 rounded-full mr-1.5"
style={{ backgroundColor: stateColor }}
/>
<Text className="text-[12px] font-semibold text-text-primary">
{alert.currentAlertState.name}
</Text>
</View>
) : null}
{alert.alertSeverity ? (
<View
className="flex-row items-center px-2.5 py-1 rounded-full"
style={{ backgroundColor: severityColor + "15" }}
>
<Text
className="text-[12px] font-semibold"
style={{ color: severityColor }}
className="flex-row items-center px-2.5 py-1 rounded-full"
style={{
backgroundColor: theme.colors.backgroundTertiary,
}}
>
{alert.alertSeverity.name}
<View
className="w-2 h-2 rounded-full mr-1.5"
style={{ backgroundColor: stateColor }}
/>
<Text className="text-[12px] font-semibold text-text-primary">
{alert.currentAlertState.name}
</Text>
</View>
) : null}
{alert.alertSeverity ? (
<View
className="flex-row items-center px-2.5 py-1 rounded-full"
style={{ backgroundColor: severityColor + "15" }}
>
<Text
className="text-[12px] font-semibold"
style={{ color: severityColor }}
>
{alert.alertSeverity.name}
</Text>
</View>
) : null}
</View>
{alert.monitor ? (
<View className="flex-row items-center mt-3">
<Ionicons
name="desktop-outline"
size={12}
color={theme.colors.textTertiary}
style={{ marginRight: 5 }}
/>
<Text
className="text-[12px] text-text-secondary flex-1"
numberOfLines={1}
>
{alert.monitor.name}
</Text>
</View>
) : null}
</View>
{alert.monitor ? (
<View className="flex-row items-center mt-3">
<Ionicons
name="desktop-outline"
size={12}
color={theme.colors.textTertiary}
style={{ marginRight: 5 }}
/>
<Text
className="text-[12px] text-text-secondary flex-1"
numberOfLines={1}
>
{alert.monitor.name}
</Text>
</View>
) : null}
</View>
</View>
</GlassCard>
</TouchableOpacity>

4
MobileApp/src/components/EmptyState.tsx
View File

@@ -34,9 +34,7 @@ export default function EmptyState({
return (
<View className="flex-1 items-center justify-center px-10 py-28">
{/* Outer gradient glow ring */}
<View
className="w-28 h-28 rounded-full items-center justify-center overflow-hidden"
>
<View className="w-28 h-28 rounded-full items-center justify-center overflow-hidden">
<View
style={{
position: "absolute",

125
MobileApp/src/components/EpisodeCard.tsx
View File

@@ -79,76 +79,79 @@ export default function EpisodeCard(
style={{ width: 3 }}
/>
<View className="flex-1 p-4">
{projectName ? (
<View className="mb-2">
<ProjectBadge name={projectName} />
</View>
) : null}
<View className="flex-row justify-between items-center mb-2">
<View
className="px-2.5 py-0.5 rounded-full"
style={{ backgroundColor: theme.colors.backgroundTertiary }}
>
<Text className="text-[12px] font-semibold text-text-tertiary">
{episode.episodeNumberWithPrefix || `#${episode.episodeNumber}`}
</Text>
</View>
<Text className="text-[12px] text-text-tertiary">{timeString}</Text>
</View>
<Text
className="text-body-lg text-text-primary font-semibold mt-0.5"
numberOfLines={2}
>
{episode.title}
</Text>
<View className="flex-row flex-wrap gap-2 mt-3">
{state ? (
<View
className="flex-row items-center px-2.5 py-1 rounded-full"
style={{
backgroundColor: theme.colors.backgroundTertiary,
}}
>
<View
className="w-2 h-2 rounded-full mr-1.5"
style={{ backgroundColor: stateColor }}
/>
<Text className="text-[12px] font-semibold text-text-primary">
{state.name}
</Text>
{projectName ? (
<View className="mb-2">
<ProjectBadge name={projectName} />
</View>
) : null}
{severity ? (
<View className="flex-row justify-between items-center mb-2">
<View
className="flex-row items-center px-2.5 py-1 rounded-full"
style={{ backgroundColor: severityColor + "15" }}
>
<Text
className="text-[12px] font-semibold"
style={{ color: severityColor }}
>
{severity.name}
</Text>
</View>
) : null}
{childCount > 0 ? (
<View
className="flex-row items-center px-2.5 py-1 rounded-full"
className="px-2.5 py-0.5 rounded-full"
style={{ backgroundColor: theme.colors.backgroundTertiary }}
>
<Text className="text-[12px] font-semibold text-text-secondary">
{childCount} {type === "incident" ? "incident" : "alert"}
{childCount !== 1 ? "s" : ""}
<Text className="text-[12px] font-semibold text-text-tertiary">
{episode.episodeNumberWithPrefix ||
`#${episode.episodeNumber}`}
</Text>
</View>
) : null}
<Text className="text-[12px] text-text-tertiary">
{timeString}
</Text>
</View>
<Text
className="text-body-lg text-text-primary font-semibold mt-0.5"
numberOfLines={2}
>
{episode.title}
</Text>
<View className="flex-row flex-wrap gap-2 mt-3">
{state ? (
<View
className="flex-row items-center px-2.5 py-1 rounded-full"
style={{
backgroundColor: theme.colors.backgroundTertiary,
}}
>
<View
className="w-2 h-2 rounded-full mr-1.5"
style={{ backgroundColor: stateColor }}
/>
<Text className="text-[12px] font-semibold text-text-primary">
{state.name}
</Text>
</View>
) : null}
{severity ? (
<View
className="flex-row items-center px-2.5 py-1 rounded-full"
style={{ backgroundColor: severityColor + "15" }}
>
<Text
className="text-[12px] font-semibold"
style={{ color: severityColor }}
>
{severity.name}
</Text>
</View>
) : null}
{childCount > 0 ? (
<View
className="flex-row items-center px-2.5 py-1 rounded-full"
style={{ backgroundColor: theme.colors.backgroundTertiary }}
>
<Text className="text-[12px] font-semibold text-text-secondary">
{childCount} {type === "incident" ? "incident" : "alert"}
{childCount !== 1 ? "s" : ""}
</Text>
</View>
) : null}
</View>
</View>
</View>
</View>
</GlassCard>
</TouchableOpacity>
);

142
MobileApp/src/components/IncidentCard.tsx
View File

@@ -57,85 +57,87 @@ export default function IncidentCard({
style={{ width: 3 }}
/>
<View className="flex-1 p-4">
{projectName ? (
<View className="mb-2">
<ProjectBadge name={projectName} />
{projectName ? (
<View className="mb-2">
<ProjectBadge name={projectName} />
</View>
) : null}
<View className="flex-row justify-between items-center mb-2">
<View
className="px-2.5 py-0.5 rounded-full"
style={{ backgroundColor: theme.colors.backgroundTertiary }}
>
<Text className="text-[12px] font-semibold text-text-tertiary">
{incident.incidentNumberWithPrefix ||
`#${incident.incidentNumber}`}
</Text>
</View>
<Text className="text-[12px] text-text-tertiary">
{timeString}
</Text>
</View>
) : null}
<View className="flex-row justify-between items-center mb-2">
<View
className="px-2.5 py-0.5 rounded-full"
style={{ backgroundColor: theme.colors.backgroundTertiary }}
<Text
className="text-body-lg text-text-primary font-semibold mt-0.5"
numberOfLines={2}
>
<Text className="text-[12px] font-semibold text-text-tertiary">
{incident.incidentNumberWithPrefix ||
`#${incident.incidentNumber}`}
</Text>
</View>
<Text className="text-[12px] text-text-tertiary">{timeString}</Text>
</View>
{incident.title}
</Text>
<Text
className="text-body-lg text-text-primary font-semibold mt-0.5"
numberOfLines={2}
>
{incident.title}
</Text>
<View className="flex-row flex-wrap gap-2 mt-3">
{incident.currentIncidentState ? (
<View
className="flex-row items-center px-2.5 py-1 rounded-full"
style={{
backgroundColor: theme.colors.backgroundTertiary,
}}
>
<View className="flex-row flex-wrap gap-2 mt-3">
{incident.currentIncidentState ? (
<View
className="w-2 h-2 rounded-full mr-1.5"
style={{ backgroundColor: stateColor }}
/>
<Text className="text-[12px] font-semibold text-text-primary">
{incident.currentIncidentState.name}
</Text>
</View>
) : null}
{incident.incidentSeverity ? (
<View
className="flex-row items-center px-2.5 py-1 rounded-full"
style={{ backgroundColor: severityColor + "15" }}
>
<Text
className="text-[12px] font-semibold"
style={{ color: severityColor }}
className="flex-row items-center px-2.5 py-1 rounded-full"
style={{
backgroundColor: theme.colors.backgroundTertiary,
}}
>
{incident.incidentSeverity.name}
<View
className="w-2 h-2 rounded-full mr-1.5"
style={{ backgroundColor: stateColor }}
/>
<Text className="text-[12px] font-semibold text-text-primary">
{incident.currentIncidentState.name}
</Text>
</View>
) : null}
{incident.incidentSeverity ? (
<View
className="flex-row items-center px-2.5 py-1 rounded-full"
style={{ backgroundColor: severityColor + "15" }}
>
<Text
className="text-[12px] font-semibold"
style={{ color: severityColor }}
>
{incident.incidentSeverity.name}
</Text>
</View>
) : null}
</View>
{monitorCount > 0 ? (
<View className="flex-row items-center mt-3">
<Ionicons
name="desktop-outline"
size={12}
color={theme.colors.textTertiary}
style={{ marginRight: 5 }}
/>
<Text
className="text-[12px] text-text-secondary flex-1"
numberOfLines={1}
>
{incident.monitors
.map((m: NamedEntity) => {
return m.name;
})
.join(", ")}
</Text>
</View>
) : null}
</View>
{monitorCount > 0 ? (
<View className="flex-row items-center mt-3">
<Ionicons
name="desktop-outline"
size={12}
color={theme.colors.textTertiary}
style={{ marginRight: 5 }}
/>
<Text
className="text-[12px] text-text-secondary flex-1"
numberOfLines={1}
>
{incident.monitors
.map((m: NamedEntity) => {
return m.name;
})
.join(", ")}
</Text>
</View>
) : null}
</View>
</View>
</GlassCard>
</TouchableOpacity>

12
MobileApp/src/components/Logo.tsx
View File

@@ -7,14 +7,12 @@ interface LogoProps {
style?: ViewStyle;
}
export default function Logo({ size = 32, style }: LogoProps): React.JSX.Element {
export default function Logo({
size = 32,
style,
}: LogoProps): React.JSX.Element {
return (
<Svg
width={size}
height={size}
viewBox="0 0 24 24"
style={style}
>
<Svg width={size} height={size} viewBox="0 0 24 24" style={style}>
<Path
fill="#c1c0ff"
d="M12,14.19531c-0.17551-0.00004-0.34793-0.04618-0.5-0.13379l-9-5.19726C2.02161,8.58794,1.85779,7.97612,2.13411,7.49773C2.22187,7.34579,2.34806,7.2196,2.5,7.13184l9-5.19336c0.30964-0.17774,0.69036-0.17774,1,0l9,5.19336c0.4784,0.27632,0.64221,0.88814,0.36589,1.36653C21.77813,8.65031,21.65194,8.7765,21.5,8.86426l-9,5.19726C12.34793,14.14913,12.17551,14.19527,12,14.19531z"

6
MobileApp/src/navigation/MainTabNavigator.tsx
View File

@@ -27,11 +27,7 @@ function TabIcon({
}): React.JSX.Element {
return (
<View className="items-center">
<Ionicons
name={focused ? focusedName : name}
size={24}
color={color}
/>
<Ionicons name={focused ? focusedName : name} size={24} color={color} />
{focused ? (
<View
className="w-1 h-1 rounded-full mt-1"

2
MobileApp/src/screens/AlertDetailScreen.tsx
View File

@@ -25,7 +25,7 @@ import { rgbToHex } from "../utils/color";
import { formatDateTime } from "../utils/date";
import type { AlertsStackParamList } from "../navigation/types";
import { QueryClient, useQueryClient } from "@tanstack/react-query";
import type { AlertState, NoteItem } from "../api/types";
import type { AlertState } from "../api/types";
import AddNoteModal from "../components/AddNoteModal";
import FeedTimeline from "../components/FeedTimeline";
import SkeletonCard from "../components/SkeletonCard";

2
MobileApp/src/screens/AlertEpisodeDetailScreen.tsx
View File

@@ -27,7 +27,7 @@ import { rgbToHex } from "../utils/color";
import { formatDateTime } from "../utils/date";
import type { AlertsStackParamList } from "../navigation/types";
import { QueryClient, useQueryClient } from "@tanstack/react-query";
import type { AlertState, NoteItem } from "../api/types";
import type { AlertState } from "../api/types";
import AddNoteModal from "../components/AddNoteModal";
import FeedTimeline from "../components/FeedTimeline";
import SkeletonCard from "../components/SkeletonCard";

1
MobileApp/src/screens/BiometricLockScreen.tsx
View File

@@ -1,6 +1,5 @@
import React, { useEffect } from "react";
import { View, Text } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useTheme } from "../theme";
import * as LocalAuthentication from "expo-local-authentication";
import Logo from "../components/Logo";

7
MobileApp/src/screens/IncidentDetailScreen.tsx
View File

@@ -32,12 +32,7 @@ import SectionHeader from "../components/SectionHeader";
import NotesSection from "../components/NotesSection";
import GlassCard from "../components/GlassCard";
import { useHaptics } from "../hooks/useHaptics";
import type {
IncidentItem,
IncidentState,
NoteItem,
NamedEntity,
} from "../api/types";
import type { IncidentItem, IncidentState, NamedEntity } from "../api/types";
type Props = NativeStackScreenProps<IncidentsStackParamList, "IncidentDetail">;

2
MobileApp/src/screens/IncidentEpisodeDetailScreen.tsx
View File

@@ -26,7 +26,7 @@ import {
import { rgbToHex } from "../utils/color";
import { formatDateTime } from "../utils/date";
import type { IncidentsStackParamList } from "../navigation/types";
import type { IncidentState, NoteItem } from "../api/types";
import type { IncidentState } from "../api/types";
import { useQueryClient } from "@tanstack/react-query";
import AddNoteModal from "../components/AddNoteModal";
import FeedTimeline from "../components/FeedTimeline";