Skip to content

Commit

Permalink
refactor(section): use section component in resource group children
Browse files Browse the repository at this point in the history
  • Loading branch information
yomatters committed Aug 20, 2024
1 parent c1a32b4 commit af0cefa
Show file tree
Hide file tree
Showing 5 changed files with 58 additions and 44 deletions.
10 changes: 3 additions & 7 deletions src/resource-group-events.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { useJSON } from "./utils";

import Alert from "./alert";
import Icon from "./icon";
import ResourceGroupEvent from "./resource-group-event";
import Section from "./section";

export default function ResourceGroupEvents({ baseUri, resourceGroupId }) {
const announcementData = useJSON(
Expand All @@ -15,11 +15,7 @@ export default function ResourceGroupEvents({ baseUri, resourceGroupId }) {
);
if (!announcementData && !eventData) return;
return (
<>
<h2>
<Icon name="calendar3" />
Announcements and Events
</h2>
<Section title="Announcements and Events" icon="calendar3">
{announcementData &&
announcementData.announcements.map(
({ description, announcementUri }) => (
Expand All @@ -32,6 +28,6 @@ export default function ResourceGroupEvents({ baseUri, resourceGroupId }) {
)
)}
{eventData && eventData.events.map((event) => ResourceGroupEvent(event))}
</>
</Section>
);
}
32 changes: 15 additions & 17 deletions src/resource-group-queue-metrics.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import { useState } from "preact/hooks";
import { useJSON } from "./utils";

import Grid from "./grid";
import Icon from "./icon";
import InfoTip from "./info-tip";
import Section from "./section";

const formatTime = (value) => {
const hours = Math.floor(value);
Expand Down Expand Up @@ -65,23 +65,21 @@ export default function ResourceGroupQueueMetrics({
},
];

const headerComponents = [
<select value={days} onChange={(e) => setDays(parseInt(e.target.value))}>
<option value="30">Last 30 days</option>
<option value="90">Last 90 days</option>
<option value="365">Last year</option>
</select>,
];

return (
<>
<div class="flex-header">
<h2>
<Icon name="clock" />
Queue Metrics
</h2>
<select
value={days}
onChange={(e) => setDays(parseInt(e.target.value))}
>
<option value="30">Last 30 days</option>
<option value="90">Last 90 days</option>
<option value="365">Last year</option>
</select>
</div>
<Section
title="Queue Metrics"
icon="clock"
headerComponents={headerComponents}
>
<Grid columns={columns} rows={data.queueMetrics} />
</>
</Section>
);
}
10 changes: 3 additions & 7 deletions src/resource-group-resources.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { defaultIcons } from "./icons";
import { useJSON } from "./utils";

import Accordion from "./accordion";
import Icon from "./icon";
import ResourceDetail from "./resource-detail";
import Section from "./section";

const linkResourceData = ({ resources, resourceTypes }) => {
const resourceTypesMap = {};
Expand Down Expand Up @@ -35,17 +35,13 @@ export default function ResourceGroupResources({ baseUri, resourceGroupId }) {
return types.resourceTypes.map(({ name, resources }) => {
if (resources.length)
return (
<>
<h2>
<Icon name={defaultIcons[name] || "stars"} />
{name}
</h2>
<Section title={name} icon={defaultIcons[name] || "stars"}>
{resources.map((resource) => (
<Accordion title={resource.name}>
<ResourceDetail {...resource} />
</Accordion>
))}
</>
</Section>
);
});
}
27 changes: 14 additions & 13 deletions src/resource-group-software.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import Fuse from "fuse.js";

import Grid from "./grid";
import Highlight from "./highlight";
import Icon from "./icon";
import Search from "./search";
import Section from "./section";

export default function ResourceGroupSoftware({ baseUri, resourceGroupId }) {
const data = useJSON(
Expand Down Expand Up @@ -47,19 +47,20 @@ export default function ResourceGroupSoftware({ baseUri, resourceGroupId }) {
? fuse.search(searchText).map((result) => result.item)
: data.software;

const headerComponents = [
<Search
placeholder="Search software packages..."
setSearchText={setSearchText}
/>,
];

return (
<>
<div class="flex-header">
<h2>
<Icon name="terminal" />
Software
</h2>
<Search
placeholder="Search software packages..."
setSearchText={setSearchText}
/>
</div>
<Section
title="Software"
icon="terminal"
headerComponents={headerComponents}
>
<Grid columns={columns} rows={rows} scrollResetOnUpdate={true} />
</>
</Section>
);
}
23 changes: 23 additions & 0 deletions src/section.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import Icon from "./icon";

export default function Section({
children,
headerComponents = null,
icon = null,
sectionId = null,
title,
}) {
const id = sectionId || title.toLowerCase().replace(/[^0-9a-z]+/g, "-");
return (
<>
<div class="flex-header">
<h2 id={id}>
{icon ? <Icon name={icon} /> : null}
{title}
</h2>
{headerComponents}
</div>
{children}
</>
);
}

0 comments on commit af0cefa

Please sign in to comment.