Skip to content

Commit

Permalink
Simplify
Browse files Browse the repository at this point in the history
  • Loading branch information
@joeclayallday
joeclayallday committed Dec 12, 2024
1 parent a364a76 commit 69d40d8
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 128 deletions.
112 changes: 20 additions & 92 deletions src/ui/pages/diagnostics-create.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,107 +86,35 @@ export const DiagnosticsCreatePage = () => {
/>
</FormGroup>
<h1 className="text-lg text-gray-500 pt-2 mb-4">Issue Description</h1>
<FormGroup
label="Time Range"
htmlFor="Time Range"
feedbackVariant="info"
className="mb-4"
>
<Select
onSelect={selectOption}
value={selectedOption}
options={options}
/>
<FormGroupFeedback>
How long has this issue been occuring?
</FormGroupFeedback>
</FormGroup>
{/* <FormGroup
label="Custom Start Time"
htmlFor="Custom Start Time"
feedbackVariant="info"
className="mb-4"
>
<div className="flex items-center gap-2">
<div className="flex items-center gap-4">
<FormGroup
label="Symptoms"
htmlFor="Symptoms"
feedbackVariant="info"
className="flex-1"
>
<Select
onSelect={selectOption}
value={selectedOption}
options={options}
/>
<Input
className="h-[37px] w-[45px] pr-0"
name="app-handle"
type="text"
onChange={(e) => setFormInput(e.currentTarget.value)}
autoComplete="name"
data-testid="input-name"
id="input-name"
placeholder="HH"
/>
<Input
className="h-[37px] w-[48px] pr-0"
name="app-handle"
type="text"
onChange={(e) => setFormInput(e.currentTarget.value)}
autoComplete="name"
data-testid="input-name"
id="input-name"
placeholder="MM"
/>
<p>UTC</p>
</div>
</FormGroup>
<FormGroup
label="Custom End Time"
htmlFor="Custom End Time"
feedbackVariant="info"
className="mb-4"
>
<div className="flex items-center gap-2">
</FormGroup>
<FormGroup
label="Time Range"
htmlFor="Time Range"
feedbackVariant="info"
className="flex-1"
>
<Select
onSelect={selectOption}
value={selectedOption}
options={options}
/>
<Input
className="h-[37px] w-[45px] pr-0"
name="app-handle"
type="text"
onChange={(e) => setFormInput(e.currentTarget.value)}
autoComplete="name"
data-testid="input-name"
id="input-name"
placeholder="HH"
/>
<Input
className="h-[37px] w-[48px] pr-0"
name="app-handle"
type="text"
onChange={(e) => setFormInput(e.currentTarget.value)}
autoComplete="name"
data-testid="input-name"
id="input-name"
placeholder="MM"
/>
<p>UTC</p>
</div>
</FormGroup>*/}
<FormGroup label="Symptoms" htmlFor="Symptoms" feedbackVariant="info">
<Select
onSelect={selectOption}
value={selectedOption}
options={options}
/>
<FormGroupFeedback>
A short description of issues (e.g., "my application is suddenly
returning a lot of 500 errors")
</FormGroupFeedback>
<TextArea
className={`${tokens.type.textarea} mt-2`}
defaultValue="Why is the app API error rate over 50%"
/>
<div className="mt-4">
<hr />
</FormGroup>
</div>
<div className="mt-4">
<hr />
<div className="flex justify-between items-end gap-2">
<div className="flex items-center gap-2 mt-4">
<ButtonLink
to={diagnosticsDetailUrl()}
Expand All @@ -202,7 +130,7 @@ export const DiagnosticsCreatePage = () => {
</Button>
</div>
</div>
</FormGroup>
</div>
</form>
</Box>
</AppSidebarLayout>
Expand Down
106 changes: 72 additions & 34 deletions src/ui/pages/diagnostics-detail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,31 +9,47 @@ import {
Button,
ButtonDestroy,
ButtonIcon,
ButtonLink,
DetailHeader,
DetailInfoGrid,
DetailInfoItem,
FormGroup,
FormGroupFeedback,
Group,
IconAI,
IconExternalLink,
IconThumbsUp,
Input,
Radio,
RadioGroup,
Select,
TextArea,
TitleBar,
Tooltip,
tokens,
} from "../shared";

const selectOption = (option: SelectOption) => {
setChoice(option.value);
};
const options: SelectOption[] = Array(8)
.fill(0)
.map((_, idx) => ({
label: "Select",
value: "Select",
}));
const selectedOption = [].find(
(option: SelectOption) => option.value === choice,
);

export const DiagnosticsDetailPage = () => {
return (
<AppSidebarLayout>
<Breadcrumbs
crumbs={[
{
name: "Diagnostics",
to: diagnosticsUrl(),
name: "app-ui",
to: "/apps/85039/services",
},
{
name: "Why is the app API error rate over 50%",
Expand All @@ -52,40 +68,62 @@ export const DiagnosticsDetailPage = () => {
/>
<h1 className="text-lg text-gray-500">Diagnostics Details</h1>
</Group>
<ButtonDestroy
size="sm"
className="semibold"
variant="delete"
requireConfirm
>
Delete
</ButtonDestroy>
</div>

<DetailInfoGrid columns={2}>
<DetailInfoItem title="App">
<Link to="/apps/85039/services" className="flex">
app-ui
</Link>
</DetailInfoItem>
<DetailInfoItem title="Created Date">
2024-11-16 02:34:18 UTC
</DetailInfoItem>
<DetailInfoItem title="Environment">
<Link to="/environments/10673/apps" className="flex">
dashboard
</Link>
</DetailInfoItem>
<DetailInfoItem title="Start Time">
2024-11-16 01:11:00 UTC
</DetailInfoItem>
<DetailInfoItem title="Symptoms">
Why is the app API error rate over 50%
</DetailInfoItem>
<DetailInfoItem title="End Time">
2024-11-16 02:11:00 UTC
</DetailInfoItem>
</DetailInfoGrid>
<form>
<div className="flex items-center gap-4">
<FormGroup
label="Symptoms"
htmlFor="Symptoms"
feedbackVariant="info"
className="flex-1"
>
<Select
onSelect={selectOption}
value={selectedOption}
options={options}
/>
</FormGroup>
<FormGroup
label="Time Range"
htmlFor="Time Range"
feedbackVariant="info"
className="flex-1"
>
<Select
onSelect={selectOption}
value={selectedOption}
options={options}
/>
</FormGroup>
</div>
<div className="mt-4">
<hr />
<div className="flex justify-between items-end gap-2">
<div className="flex items-center gap-2 mt-4">
<ButtonLink
to={diagnosticsDetailUrl()}
className="w-[200px] flex font-semibold"
>
Generate Diagnostics
</ButtonLink>
<Button
className="w-fit ml-2 flex font-semibold"
variant="white"
>
Cancel
</Button>
</div>
<ButtonDestroy
className="semibold"
variant="delete"
requireConfirm
>
Delete
</ButtonDestroy>
</div>
</div>
</form>
</DetailHeader>

<div className="flex flex-col gap-4">
Expand Down
4 changes: 2 additions & 2 deletions src/ui/shared/app/services-detail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {
appServicePathMetricsUrl,
appServiceScalePathUrl,
appServiceUrl,
diagnosticsCreateUrl,
diagnosticsDetailUrl,
} from "@app/routes";
import type { DeployService, DeployServiceRow, DeployStack } from "@app/types";
import { type PaginateProps, usePaginate } from "@app/ui/hooks";
Expand Down Expand Up @@ -367,7 +367,7 @@ export function AppServicesByApp({

return (
<Group>
<ButtonLink className="w-fit" to={diagnosticsCreateUrl()}>
<ButtonLink className="w-fit" to={diagnosticsDetailUrl()}>
<IconPlusCircle variant="sm" className="mr-2" /> Diagnose Issues
</ButtonLink>
<Group size="sm">
Expand Down

0 comments on commit 69d40d8

Please sign in to comment.