feat(resource-group-events): add events and announcements

public/api/resource-groups/1/announcements.json

@@ -0,0 +1,9 @@
+{
+  "announcements": [
+    {
+      "type": "outage",
+      "description": "Bridges-2 compute, storage, and virtual machines will be unavailable on September 1, 2024 from 8:00 a.m. to 5:00 p.m. EDT for scheduled filesystem maintenance.",
+      "announcementUri": "https://www.psc.edu/resources/bridges-2/"
+    }
+  ]
+}

public/api/resource-groups/1/events.json

@@ -0,0 +1,12 @@
+{
+  "events": [
+    {
+      "title": "Bridges-2 Webinar: Scaling Up Ecological Monitoring with AI: How Supercomputing Is Unlocking the Value of Autonomous Acoustic Sensing",
+      "startDateTime": "2024-08-23T13:00:00-04:00",
+      "endDateTime": "2024-08-23T14:00:00-04:00",
+      "eventUri": "https://www.psc.edu/events/bridges-2-webinar-series/scaling-up-ecological-monitoring-with-ai/",
+      "speaker": "Sam Lapp, University of Pittsburgh",
+      "description": "Automated acoustic recording devices monitor wildlife at an unprecedented scale. Using hundreds of sensors, bioacoustic monitoring transforms our understanding of birds, bats, and frogs, aiding biodiversity management."
+    }
+  ]
+}

src/alert.css

@@ -0,0 +1,12 @@
+.alert {
+  align-items: center;
+  background-color: var(--yellow-200);
+  border-radius: 10px;
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 20px;
+  padding: 20px;
+}
+.alert i {
+  margin-right: 20px;
+}

src/alert.jsx

@@ -0,0 +1,10 @@
+import Icon from "./icon";
+
+export default function Alert({ children, icon = "megaphone-fill" }) {
+  return (
+    <div class="alert">
+      {icon ? <Icon name={icon} /> : null}
+      <div class="alert-body">{children}</div>
+    </div>
+  );
+}

src/resource-catalog.jsx

@@ -1,5 +1,6 @@
 import { ErrorBoundary, lazy, LocationProvider, Router } from "preact-iso";
 import accordionStyle from "./accordion.css?inline";
+import alertStyle from "./alert.css?inline";
 import baseStyle from "./base.css?inline";
 import componentsStyle from "./components.css?inline";
 import contentStyle from "./content.css?inline";
@@ -11,6 +12,7 @@ import gridStyle from "./grid.css?inline";
 import carouselStyle from "./carousel.css?inline";
 import resourceFiltersStyle from "./resource-filters.css?inline";
 import resourceGroupStyle from "./resource-group.css?inline";
+import resourceGroupEventStyle from "./resource-group-event.css?inline";
 import searchStyle from "./search.css?inline";
 import tagsStyle from "./tags.css?inline";
 import tippyStyle from "tippy.js/dist/tippy.css?inline";
@@ -49,6 +51,7 @@ export function ResourceCatalog({
       <style>{contentStyle}</style>
       <style>{componentsStyle}</style>
       <style>{accordionStyle}</style>
+      <style>{alertStyle}</style>
       <style>{iconStyle}</style>
       <style>{infoTipStyle}</style>
       <style>{glideCoreStyle}</style>
@@ -57,6 +60,7 @@ export function ResourceCatalog({
       <style>{carouselStyle}</style>
       <style>{resourceFiltersStyle}</style>
       <style>{resourceGroupStyle}</style>
+      <style>{resourceGroupEventStyle}</style>
       <style>{searchStyle}</style>
       <style>{tagsStyle}</style>
       <style>{tippyStyle}</style>

src/resource-group-detail.jsx

@@ -1,4 +1,5 @@
 import ResourceGroupDescription from "./resource-group-description";
+import ResourceGroupEvents from "./resource-group-events";
 import ResourceGroupQueueMetrics from "./resource-group-queue-metrics";
 import ResourceGroupResources from "./resource-group-resources";
 import ResourceGroupSoftware from "./resource-group-software";
@@ -14,6 +15,10 @@ export default function ResourceGroupDetail({ baseUri, resourceGroupId }) {
         baseUri={baseUri}
         resourceGroupId={resourceGroupId}
       />
+      <ResourceGroupEvents
+        baseUri={baseUri}
+        resourceGroupId={resourceGroupId}
+      />
       <ResourceGroupSoftware
         baseUri={baseUri}
         resourceGroupId={resourceGroupId}

src/resource-group-event.css

@@ -0,0 +1,49 @@
+.event-icon,
+.event-icon:active,
+.event-icon:focus,
+.event-icon:hover {
+  align-items: center;
+  background-color: var(--teal-700);
+  color: white;
+  display: none;
+  flex: 0 0 auto;
+  flex-direction: column;
+  font-weight: 800;
+  justify-content: center;
+  height: calc((var(--width) - 140px) / 8);
+  text-decoration: none;
+  width: calc((var(--width) - 140px) / 8);
+}
+.event-icon span {
+  display: block;
+}
+.event-icon span:nth-child(2) {
+  font-size: 2rem;
+}
+.event-metadata {
+  margin-bottom: 1rem;
+}
+.event-metadata i:not(:first-child) {
+  margin-left: 1rem;
+}
+@media (min-width: 768px) {
+  .event {
+    display: flex;
+    flex-direction: row;
+  }
+  .event-icon,
+  .event-icon:active,
+  .event-icon:focus,
+  .event-icon:hover {
+    display: flex;
+    margin-right: 20px;
+  }
+  .event h3 {
+    margin-top: 0;
+  }
+}
+@media (min-width: 900px) {
+  .event-icon span:nth-child(2) {
+    font-size: 3rem;
+  }
+}

src/resource-group-event.jsx

@@ -0,0 +1,62 @@
+import Icon from "./icon";
+
+export default function ResourceGroupEvent({
+  title,
+  startDateTime,
+  endDateTime,
+  eventUri,
+  speaker,
+  description,
+}) {
+  const headingContent = eventUri ? <a href={eventUri}>{title}</a> : title;
+  const metadata = [];
+  let icon = null;
+
+  if (startDateTime) {
+    const start = new Date(startDateTime);
+    const end = new Date(endDateTime || startDateTime);
+    const [startDate, endDate] = [start, end].map((date) =>
+      date.toLocaleString("en-US", { dateStyle: "long" })
+    );
+    const [startTime, endTime] = [start, end].map((date) =>
+      date.toLocaleString("en-US", { timeStyle: "short" })
+    );
+    const tz = start
+      .toLocaleTimeString("en-US", { timeZoneName: "short" })
+      .split(" ")[2];
+    const parts = [`${startDate},`, startTime];
+    if (endTime != startTime || endDate != startDate) {
+      parts.push("-");
+      if (endDate != startDate) parts.push(`${endDate},`);
+      parts.push(endTime);
+    }
+    parts.push(`(${tz})`);
+    metadata.push(<Icon name="calendar" />, parts.join(" "));
+
+    const iconContent = start
+      .toLocaleString("en-US", { dateStyle: "medium" })
+      .split(",")[0]
+      .split(" ")
+      .map((part) => <span>{part}</span>);
+    icon = eventUri ? (
+      <a href={eventUri} class="event-icon">
+        {iconContent}
+      </a>
+    ) : (
+      <div class="event-icon">{iconContent}</div>
+    );
+  }
+
+  if (speaker) metadata.push(<Icon name="people-fill" />, speaker);
+
+  return (
+    <div class="event">
+      {icon}
+      <div class="event-details">
+        <h3>{headingContent}</h3>
+        {metadata.length ? <div class="event-metadata">{metadata}</div> : null}
+        {description ? <p>{description}</p> : null}
+      </div>
+    </div>
+  );
+}

src/resource-group-events.jsx

@@ -0,0 +1,37 @@
+import { useJSON } from "./utils";
+
+import Alert from "./alert";
+import Icon from "./icon";
+import ResourceGroupEvent from "./resource-group-event";
+
+export default function ResourceGroupEvents({ baseUri, resourceGroupId }) {
+  const announcementData = useJSON(
+    `${baseUri}/api/resource-groups/${resourceGroupId}/announcements.json`,
+    null
+  );
+  const eventData = useJSON(
+    `${baseUri}/api/resource-groups/${resourceGroupId}/events.json`,
+    null
+  );
+  if (!announcementData && !eventData) return;
+  return (
+    <>
+      <h2>
+        <Icon name="calendar3" />
+        Announcements and Events
+      </h2>
+      {announcementData &&
+        announcementData.announcements.map(
+          ({ description, announcementUri }) => (
+            <Alert>
+              {description}{" "}
+              {announcementUri ? (
+                <a href={announcementUri}>Learn more.</a>
+              ) : null}
+            </Alert>
+          )
+        )}
+      {eventData && eventData.events.map((event) => ResourceGroupEvent(event))}
+    </>
+  );
+}