feat: add incidents and maintenance section for admins (#3220)

Closes #3219. Details: * Add a new "Incidents and Maintenance" section in the admin page * Revamp how the status banner and status summary work in Renku
SwissDataScienceCenter · Jul 24, 2024 · 02ceffc · 02ceffc
1 parent e6ba253
commit 02ceffc
Show file tree

Hide file tree

Showing 23 changed files with 1,732 additions and 137 deletions.
diff --git a/client/package.json b/client/package.json
@@ -22,10 +22,11 @@
     "storybook-wait-server": "wait-on http://127.0.0.1:6006",
     "storybook-test": "test-storybook",
     "storybook-compile-and-test": "concurrently -k -s first -n 'BUILD,TEST' -c 'magenta,blue' 'npm run storybook-build && npm run storybook-start-server' 'npm run storybook-wait-server && npm run storybook-test'",
-    "generate-api": "npm run generate-api:dataServicesUser && npm run generate-api:namespaceV2 && npm run generate-api:projectV2 && npm run generate-api:searchV2",
+    "generate-api": "npm run generate-api:dataServicesUser && npm run generate-api:namespaceV2 && npm run generate-api:projectV2 && generate-api:platform && npm run generate-api:searchV2",
     "generate-api:dataServicesUser": "rtk-query-codegen-openapi src/features/user/dataServicesUser.api/dataServicesUser.api-config.ts",
     "generate-api:namespaceV2": "rtk-query-codegen-openapi src/features/projectsV2/api/namespace.api-config.ts",
     "generate-api:projectV2": "rtk-query-codegen-openapi src/features/projectsV2/api/projectV2.api-config.ts",
+    "generate-api:platform": "rtk-query-codegen-openapi src/features/platform/api/platform.api-config.ts",
     "generate-api:searchV2": "rtk-query-codegen-openapi src/features/searchV2/api/searchV2.api-config.ts"
   },
   "type": "module",

diff --git a/client/src/components/navbar/AnonymousNavBar.tsx b/client/src/components/navbar/AnonymousNavBar.tsx
@@ -16,21 +16,23 @@
  * limitations under the License.
  */
 
+import cx from "classnames";
 import { useCallback, useState } from "react";
 import { List, Search } from "react-bootstrap-icons";
 import { Link } from "react-router-dom";
 import { Collapse, Nav, NavItem, Navbar, NavbarToggler } from "reactstrap";
+
+import StatusBanner from "../../features/platform/components/StatusBanner";
 import { NavBarWarnings } from "../../landing/NavBarWarnings";
+import type { AppParams } from "../../utils/context/appParams.types";
 import { Url } from "../../utils/helpers/url";
-import cx from "classnames";
 import { RenkuNavLink } from "../RenkuNavLink";
 import {
   RenkuToolbarHelpMenu,
   RenkuToolbarItemUser,
   RenkuToolbarNotifications,
 } from "./NavBarItems";
 import { RENKU_LOGO } from "./navbar.constans";
-import type { AppParams } from "../../utils/context/appParams.types";
 
 interface AnonymousNavBarProps {
   model: unknown;
@@ -112,6 +114,7 @@ export default function AnonymousNavBar({
           </Collapse>
         </Navbar>
       </header>
+      <StatusBanner params={params} />
       <NavBarWarnings model={model} uiShortSha={uiShortSha} />
     </>
   );

diff --git a/client/src/components/navbar/LoggedInNavBar.tsx b/client/src/components/navbar/LoggedInNavBar.tsx
@@ -19,10 +19,11 @@
 import cx from "classnames";
 import { useCallback, useState } from "react";
 import { List, Search } from "react-bootstrap-icons";
-import { Link, useLocation } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { Collapse, Nav, NavItem, Navbar, NavbarToggler } from "reactstrap";
+import StatusBanner from "../../features/platform/components/StatusBanner";
 import { NavBarWarnings } from "../../landing/NavBarWarnings";
-import { StatuspageBanner } from "../../statuspage";
+import { AppParams } from "../../utils/context/appParams.types";
 import { Url } from "../../utils/helpers/url";
 import { RenkuNavLink } from "../RenkuNavLink";
 import {
@@ -37,17 +38,15 @@ import { RENKU_LOGO } from "./navbar.constans";
 interface LoggedInNavBarProps {
   model: unknown;
   notifications: unknown;
-  params: unknown;
+  params: AppParams;
 }
 
 export default function LoggedInNavBar({
   model,
   notifications,
   params,
 }: LoggedInNavBarProps) {
-  const location = useLocation();
-
-  const uiShortSha = (params as { UI_SHORT_SHA: string }).UI_SHORT_SHA;
+  const uiShortSha = params.UI_SHORT_SHA;
 
   const [isOpen, setIsOpen] = useState(false);
 
@@ -127,11 +126,7 @@ export default function LoggedInNavBar({
           </Collapse>
         </Navbar>
       </header>
-      <StatuspageBanner
-        siteStatusUrl={Url.get(Url.pages.help.status)}
-        model={model}
-        location={location}
-      />
+      <StatusBanner params={params} />
       <NavBarWarnings model={model} uiShortSha={uiShortSha} />
     </>
   );

diff --git a/client/src/features/admin/AdminPage.tsx b/client/src/features/admin/AdminPage.tsx
@@ -53,6 +53,7 @@ import AddResourceClassButton from "./AddResourceClassButton";
 import AddResourcePoolButton from "./AddResourcePoolButton";
 import AddUserToResourcePoolButton from "./AddUserToResourcePoolButton";
 import DeleteResourceClassButton from "./DeleteResourceClassButton";
+import IncidentsAndMaintenanceSection from "./IncidentsAndMaintenanceSection";
 import SessionEnvironmentsSection from "./SessionEnvironmentsSection";
 import UpdateResourceClassButton from "./UpdateResourceClassButton";
 import UpdateResourcePoolQuotaButton from "./UpdateResourcePoolQuotaButton";
@@ -66,6 +67,7 @@ export default function AdminPage() {
   return (
     <>
       <h1 className={cx("fs-2", "mb-3")}>Admin Panel</h1>
+      <IncidentsAndMaintenanceSection />
       <ComputeResourcesSection />
       <SessionEnvironmentsSection />
     </>