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: Simplify JSX structure in multiple components for improved readability

Browse Source
This commit is contained in:
Nawaz Dhandala
2026-02-14 20:00:20 +00:00
parent 8a568e0495
commit dfa7c4875a
6 changed files with 193 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -61,9 +61,7 @@ export default function AlertCard({
<View className="p-4">
<View className="flex-row justify-between items-center mb-2.5">
<View className="flex-row items-center gap-2">
{projectName ? (
<ProjectBadge name={projectName} />
) : null}
{projectName ? <ProjectBadge name={projectName} /> : null}
<Text
className="text-[12px] font-medium"
style={{ color: theme.colors.textTertiary }}
@@ -124,8 +122,12 @@ export default function AlertCard({
</View>
{alert.monitor ? (
<View className="flex-row items-center mt-2.5 pt-2.5"
style={{ borderTopWidth: 1, borderTopColor: theme.colors.borderSubtle }}
<View
className="flex-row items-center mt-2.5 pt-2.5"
style={{
borderTopWidth: 1,
borderTopColor: theme.colors.borderSubtle,
}}
>
<Ionicons
name="desktop-outline"

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

@@ -86,15 +86,12 @@ export default function EpisodeCard(
<View className="p-4">
<View className="flex-row justify-between items-center mb-2.5">
<View className="flex-row items-center gap-2">
{projectName ? (
<ProjectBadge name={projectName} />
) : null}
{projectName ? <ProjectBadge name={projectName} /> : null}
<Text
className="text-[12px] font-medium"
style={{ color: theme.colors.textTertiary }}
>
{episode.episodeNumberWithPrefix ||
`#${episode.episodeNumber}`}
{episode.episodeNumberWithPrefix || `#${episode.episodeNumber}`}
</Text>
</View>
<Text

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

@@ -64,9 +64,7 @@ export default function IncidentCard({
<View className="p-4">
<View className="flex-row justify-between items-center mb-2.5">
<View className="flex-row items-center gap-2">
{projectName ? (
<ProjectBadge name={projectName} />
) : null}
{projectName ? <ProjectBadge name={projectName} /> : null}
<Text
className="text-[12px] font-medium"
style={{ color: theme.colors.textTertiary }}
@@ -128,8 +126,12 @@ export default function IncidentCard({
</View>
{monitorCount > 0 ? (
<View className="flex-row items-center mt-2.5 pt-2.5"
style={{ borderTopWidth: 1, borderTopColor: theme.colors.borderSubtle }}
<View
className="flex-row items-center mt-2.5 pt-2.5"
style={{
borderTopWidth: 1,
borderTopColor: theme.colors.borderSubtle,
}}
>
<Ionicons
name="desktop-outline"

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

@@ -227,8 +227,16 @@ export default function AlertEpisodeDetailScreen({
className="flex-row items-center px-2.5 py-1 rounded-md"
style={{ backgroundColor: stateColor + "14" }}
>
<View className="w-2 h-2 rounded-full mr-1.5" style={{ backgroundColor: stateColor }} />
<Text className="text-[12px] font-semibold" style={{ color: stateColor }}>{episode.currentAlertState.name}</Text>
<View
className="w-2 h-2 rounded-full mr-1.5"
style={{ backgroundColor: stateColor }}
/>
<Text
className="text-[12px] font-semibold"
style={{ color: stateColor }}
>
{episode.currentAlertState.name}
</Text>
</View>
) : null}
{episode.alertSeverity ? (
@@ -236,7 +244,12 @@ export default function AlertEpisodeDetailScreen({
className="flex-row items-center px-2.5 py-1 rounded-md"
style={{ backgroundColor: severityColor + "14" }}
>
<Text className="text-[12px] font-semibold" style={{ color: severityColor }}>{episode.alertSeverity.name}</Text>
<Text
className="text-[12px] font-semibold"
style={{ color: severityColor }}
>
{episode.alertSeverity.name}
</Text>
</View>
) : null}
</View>
@@ -246,7 +259,12 @@ export default function AlertEpisodeDetailScreen({
{episode.description ? (
<View className="mb-6">
<SectionHeader title="Description" iconName="document-text-outline" />
<Text className="text-[14px] leading-[22px]" style={{ color: theme.colors.textPrimary }}>{episode.description}</Text>
<Text
className="text-[14px] leading-[22px]"
style={{ color: theme.colors.textPrimary }}
>
{episode.description}
</Text>
</View>
) : null}
@@ -264,12 +282,32 @@ export default function AlertEpisodeDetailScreen({
>
<View className="p-4">
<View className="flex-row mb-3">
<Text className="text-[13px] w-[90px]" style={{ color: theme.colors.textTertiary }}>Created</Text>
<Text className="text-[13px]" style={{ color: theme.colors.textPrimary }}>{formatDateTime(episode.createdAt)}</Text>
<Text
className="text-[13px] w-[90px]"
style={{ color: theme.colors.textTertiary }}
>
Created
</Text>
<Text
className="text-[13px]"
style={{ color: theme.colors.textPrimary }}
>
{formatDateTime(episode.createdAt)}
</Text>
</View>
<View className="flex-row">
<Text className="text-[13px] w-[90px]" style={{ color: theme.colors.textTertiary }}>Alerts</Text>
<Text className="text-[13px]" style={{ color: theme.colors.textPrimary }}>{episode.alertCount ?? 0}</Text>
<Text
className="text-[13px] w-[90px]"
style={{ color: theme.colors.textTertiary }}
>
Alerts
</Text>
<Text
className="text-[13px]"
style={{ color: theme.colors.textPrimary }}
>
{episode.alertCount ?? 0}
</Text>
</View>
</View>
</View>
@@ -283,13 +321,30 @@ export default function AlertEpisodeDetailScreen({
<TouchableOpacity
className="flex-1 flex-row py-3 rounded-xl items-center justify-center min-h-[48px]"
style={{ backgroundColor: theme.colors.stateAcknowledged }}
onPress={() => { return handleStateChange(acknowledgeState._id, acknowledgeState.name); }}
onPress={() => {
return handleStateChange(
acknowledgeState._id,
acknowledgeState.name,
);
}}
disabled={changingState}
>
{changingState ? (<ActivityIndicator size="small" color="#FFFFFF" />) : (
{changingState ? (
<ActivityIndicator size="small" color="#FFFFFF" />
) : (
<>
<Ionicons name="checkmark-circle-outline" size={17} color="#FFFFFF" style={{ marginRight: 6 }} />
<Text className="text-[14px] font-bold" style={{ color: "#FFFFFF" }}>Acknowledge</Text>
<Ionicons
name="checkmark-circle-outline"
size={17}
color="#FFFFFF"
style={{ marginRight: 6 }}
/>
<Text
className="text-[14px] font-bold"
style={{ color: "#FFFFFF" }}
>
Acknowledge
</Text>
</>
)}
</TouchableOpacity>
@@ -298,13 +353,27 @@ export default function AlertEpisodeDetailScreen({
<TouchableOpacity
className="flex-1 flex-row py-3 rounded-xl items-center justify-center min-h-[48px]"
style={{ backgroundColor: theme.colors.stateResolved }}
onPress={() => { return handleStateChange(resolveState._id, resolveState.name); }}
onPress={() => {
return handleStateChange(resolveState._id, resolveState.name);
}}
disabled={changingState}
>
{changingState ? (<ActivityIndicator size="small" color="#FFFFFF" />) : (
{changingState ? (
<ActivityIndicator size="small" color="#FFFFFF" />
) : (
<>
<Ionicons name="checkmark-done-outline" size={17} color="#FFFFFF" style={{ marginRight: 6 }} />
<Text className="text-[14px] font-bold" style={{ color: "#FFFFFF" }}>Resolve</Text>
<Ionicons
name="checkmark-done-outline"
size={17}
color="#FFFFFF"
style={{ marginRight: 6 }}
/>
<Text
className="text-[14px] font-bold"
style={{ color: "#FFFFFF" }}
>
Resolve
</Text>
</>
)}
</TouchableOpacity>
@@ -321,7 +390,14 @@ export default function AlertEpisodeDetailScreen({
) : null}
<NotesSection notes={notes} setNoteModalVisible={setNoteModalVisible} />
<AddNoteModal visible={noteModalVisible} onClose={() => { return setNoteModalVisible(false); }} onSubmit={handleAddNote} isSubmitting={submittingNote} />
<AddNoteModal
visible={noteModalVisible}
onClose={() => {
return setNoteModalVisible(false);
}}
onSubmit={handleAddNote}
isSubmitting={submittingNote}
/>
</ScrollView>
);
}

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

@@ -224,8 +224,7 @@ export default function IncidentDetailScreen({
className="text-[13px] font-semibold mb-2"
style={{ color: stateColor }}
>
{incident.incidentNumberWithPrefix ||
`#${incident.incidentNumber}`}
{incident.incidentNumberWithPrefix || `#${incident.incidentNumber}`}
</Text>
<Text

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

@@ -291,17 +291,47 @@ export default function IncidentEpisodeDetailScreen({
<View className="p-4">
{episode.declaredAt ? (
<View className="flex-row mb-3">
<Text className="text-[13px] w-[90px]" style={{ color: theme.colors.textTertiary }}>Declared</Text>
<Text className="text-[13px]" style={{ color: theme.colors.textPrimary }}>{formatDateTime(episode.declaredAt)}</Text>
<Text
className="text-[13px] w-[90px]"
style={{ color: theme.colors.textTertiary }}
>
Declared
</Text>
<Text
className="text-[13px]"
style={{ color: theme.colors.textPrimary }}
>
{formatDateTime(episode.declaredAt)}
</Text>
</View>
) : null}
<View className="flex-row mb-3">
<Text className="text-[13px] w-[90px]" style={{ color: theme.colors.textTertiary }}>Created</Text>
<Text className="text-[13px]" style={{ color: theme.colors.textPrimary }}>{formatDateTime(episode.createdAt)}</Text>
<Text
className="text-[13px] w-[90px]"
style={{ color: theme.colors.textTertiary }}
>
Created
</Text>
<Text
className="text-[13px]"
style={{ color: theme.colors.textPrimary }}
>
{formatDateTime(episode.createdAt)}
</Text>
</View>
<View className="flex-row">
<Text className="text-[13px] w-[90px]" style={{ color: theme.colors.textTertiary }}>Incidents</Text>
<Text className="text-[13px]" style={{ color: theme.colors.textPrimary }}>{episode.incidentCount ?? 0}</Text>
<Text
className="text-[13px] w-[90px]"
style={{ color: theme.colors.textTertiary }}
>
Incidents
</Text>
<Text
className="text-[13px]"
style={{ color: theme.colors.textPrimary }}
>
{episode.incidentCount ?? 0}
</Text>
</View>
</View>
</View>
@@ -315,13 +345,30 @@ export default function IncidentEpisodeDetailScreen({
<TouchableOpacity
className="flex-1 flex-row py-3 rounded-xl items-center justify-center min-h-[48px]"
style={{ backgroundColor: theme.colors.stateAcknowledged }}
onPress={() => { return handleStateChange(acknowledgeState._id, acknowledgeState.name); }}
onPress={() => {
return handleStateChange(
acknowledgeState._id,
acknowledgeState.name,
);
}}
disabled={changingState}
>
{changingState ? (<ActivityIndicator size="small" color="#FFFFFF" />) : (
{changingState ? (
<ActivityIndicator size="small" color="#FFFFFF" />
) : (
<>
<Ionicons name="checkmark-circle-outline" size={17} color="#FFFFFF" style={{ marginRight: 6 }} />
<Text className="text-[14px] font-bold" style={{ color: "#FFFFFF" }}>Acknowledge</Text>
<Ionicons
name="checkmark-circle-outline"
size={17}
color="#FFFFFF"
style={{ marginRight: 6 }}
/>
<Text
className="text-[14px] font-bold"
style={{ color: "#FFFFFF" }}
>
Acknowledge
</Text>
</>
)}
</TouchableOpacity>
@@ -330,13 +377,27 @@ export default function IncidentEpisodeDetailScreen({
<TouchableOpacity
className="flex-1 flex-row py-3 rounded-xl items-center justify-center min-h-[48px]"
style={{ backgroundColor: theme.colors.stateResolved }}
onPress={() => { return handleStateChange(resolveState._id, resolveState.name); }}
onPress={() => {
return handleStateChange(resolveState._id, resolveState.name);
}}
disabled={changingState}
>
{changingState ? (<ActivityIndicator size="small" color="#FFFFFF" />) : (
{changingState ? (
<ActivityIndicator size="small" color="#FFFFFF" />
) : (
<>
<Ionicons name="checkmark-done-outline" size={17} color="#FFFFFF" style={{ marginRight: 6 }} />
<Text className="text-[14px] font-bold" style={{ color: "#FFFFFF" }}>Resolve</Text>
<Ionicons
name="checkmark-done-outline"
size={17}
color="#FFFFFF"
style={{ marginRight: 6 }}
/>
<Text
className="text-[14px] font-bold"
style={{ color: "#FFFFFF" }}
>
Resolve
</Text>
</>
)}
</TouchableOpacity>
@@ -353,7 +414,14 @@ export default function IncidentEpisodeDetailScreen({
) : null}
<NotesSection notes={notes} setNoteModalVisible={setNoteModalVisible} />
<AddNoteModal visible={noteModalVisible} onClose={() => { return setNoteModalVisible(false); }} onSubmit={handleAddNote} isSubmitting={submittingNote} />
<AddNoteModal
visible={noteModalVisible}
onClose={() => {
return setNoteModalVisible(false);
}}
onSubmit={handleAddNote}
isSubmitting={submittingNote}
/>
</ScrollView>
);
}