feat: add export feature using v2 endpoint for instance reports

.changeset/reports-side-panel.md

@@ -0,0 +1,5 @@
+---
+"landscape-ui": minor
+---
+
+Redesign the instances reports side panel on a single V2 `computers/report` endpoint, with deep-linked counts and a working CSV download. Gated behind the `instance-reports` feature flag (on by default).

.changeset/ripe-planets-boil.md

@@ -0,0 +1,5 @@
+---
+"landscape-ui": minor
+---
+
+Add tsv export feature using v2 endpoint for instance reports

.env.local.example

@@ -3,7 +3,6 @@ VITE_API_URL_OLD=
 VITE_API_URL_DEB_ARCHIVE=
 VITE_ROOT_PATH=
 VITE_SELF_HOSTED_ENV=
-VITE_REPORT_VIEW_ENABLED=
 VITE_DETAILED_UPGRADES_VIEW_ENABLED=
 VITE_MSW_ENABLED=
 VITE_MSW_ENDPOINTS_TO_INTERCEPT=

.env.production

@@ -2,7 +2,6 @@ VITE_API_URL=/api/v2/
 VITE_API_URL_OLD=/api/
 VITE_API_URL_DEB_ARCHIVE=/debarchive/v1beta1/
 VITE_ROOT_PATH=/new_dashboard/
-VITE_REPORT_VIEW_ENABLED=false
 VITE_DETAILED_UPGRADES_VIEW_ENABLED=false
 VITE_MSW_ENABLED=false
 VITE_MSW_ENDPOINTS_TO_INTERCEPT=

.gitignore

@@ -15,7 +15,7 @@ dist-ssr
 .venv
 .vite-node
 coverage
-reports
+/reports
 src/**/*.module.scss.d.ts
 
 # Cache

src/constants.ts

@@ -16,8 +16,6 @@ export const NOT_AVAILABLE = "N/A";
 export const APP_VERSION = import.meta.env.VITE_APP_VERSION;
 export const APP_COMMIT = import.meta.env.VITE_APP_COMMIT;
 export const FEEDBACK_LINK = "https://bugs.launchpad.net/landscape";
-export const REPORT_VIEW_ENABLED =
-  import.meta.env.VITE_REPORT_VIEW_ENABLED === "true";
 export const CONTACT_SUPPORT_TEAM_MESSAGE =
   "Something went wrong. Please try again or contact our support team.";
 export const DETAILED_UPGRADES_VIEW_ENABLED =

src/features/account-creation/api/useCreateStandaloneAccount.ts

@@ -15,7 +15,7 @@ export const useCreateStandaloneAccount = () => {
   const axiosInstance = axios.create({ baseURL: API_URL });
 
   const { isPending, mutateAsync } = useMutation<
-    AxiosResponse<unknown>,
+    AxiosResponse<void>,
     AxiosError<ApiError>,
     CreateStandaloneAccountParams
   >({

src/features/activities/api/index.ts

@@ -4,3 +4,4 @@ export { default as useCancelActivities } from "./useCancelActivities";
 export { default as useGetActivityTypes } from "./useGetActivityTypes";
 export { default as useGetSingleActivity } from "./useGetSingleActivity";
 export { default as useRedoActivities } from "./useRedoActivities";
+export { useExportActivitiesTsv } from "./useExportActivitiesTsv";

src/features/activities/api/useExportActivitiesTsv.ts

@@ -0,0 +1,36 @@
+import useFetch from "@/hooks/useFetch";
+import type { ApiError } from "@/types/api/ApiError";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError, AxiosResponse } from "axios";
+import type { ActivitiesExportJob } from "../types/ActivitiesExportJob";
+
+interface CreateActivitiesExportJobParams {
+  readonly name: string;
+  readonly query: string;
+  readonly selected_field_ids: string[];
+  readonly retain_until: string;
+}
+
+export const useExportActivitiesTsv = () => {
+  const authFetch = useFetch();
+  const queryClient = useQueryClient();
+
+  const { isPending, mutateAsync } = useMutation<
+    AxiosResponse<ActivitiesExportJob>,
+    AxiosError<ApiError>,
+    CreateActivitiesExportJobParams
+  >({
+    mutationFn: async (params) =>
+      authFetch.post<ActivitiesExportJob>("activities/exports", params),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ["all-export-jobs"],
+      });
+    },
+  });
+
+  return {
+    exportActivitiesTsv: mutateAsync,
+    isExportActivitiesTsvLoading: isPending,
+  };
+};

src/features/activities/components/Activities/Activities.module.scss

@@ -1,3 +1,24 @@
+@import "vanilla-framework/scss/settings_spacing";
+@import "vanilla-framework/scss/settings_colors";
+
 .description {
   width: 40%;
 }
+
+.subhead {
+  background: $colors--theme--background-alt;
+  border-bottom: 1px solid $colors--theme--border-low-contrast;
+  display: flex;
+  gap: $sph--large;
+  padding: $spv--small 0 $spv--small 2.5rem;
+
+  > .buttons {
+    display: flex;
+    gap: $sph--large;
+
+    > :not(:last-child) {
+      border-right: 1px solid $colors--theme--border-low-contrast;
+      padding-right: $sph--large !important;
+    }
+  }
+}

src/features/activities/components/Activities/Activities.tsx

@@ -27,6 +27,9 @@ interface ActivitiesProps {
   readonly selectedActivities: ActivityCommon[];
   readonly setSelectedActivities: (activities: ActivityCommon[]) => void;
   readonly instanceId?: number;
+  readonly isAllSelected?: boolean;
+  readonly onSelectAll?: () => void;
+  readonly onClearSelection?: () => void;
 }
 
 const Activities: FC<ActivitiesProps> = ({
@@ -36,6 +39,9 @@ const Activities: FC<ActivitiesProps> = ({
   isGettingActivities,
   selectedActivities,
   setSelectedActivities,
+  isAllSelected = false,
+  onSelectAll,
+  onClearSelection,
 }) => {
   const handleActivityDetailsOpen = useOpenActivityDetailsPanel();
 
@@ -44,15 +50,33 @@ const Activities: FC<ActivitiesProps> = ({
   useOpenActivityDetails(handleActivityDetailsOpen);
 
   const handleClearSelection = useCallback(() => {
-    setSelectedActivities([]);
-  }, [setSelectedActivities]);
+    if (onClearSelection) {
+      onClearSelection();
+    } else {
+      setSelectedActivities([]);
+    }
+  }, [setSelectedActivities, onClearSelection]);
 
   const toggleAll = useCallback(() => {
-    setSelectedActivities(selectedActivities.length !== 0 ? [] : activities);
-  }, [activities, selectedActivities, setSelectedActivities]);
+    if (isAllSelected || selectedActivities.length !== 0) {
+      handleClearSelection();
+    } else {
+      setSelectedActivities(activities);
+    }
+  }, [
+    activities,
+    isAllSelected,
+    selectedActivities,
+    setSelectedActivities,
+    handleClearSelection,
+  ]);
 
   const handleToggleActivity = useCallback(
     (activity: ActivityCommon) => {
+      if (isAllSelected) {
+        handleClearSelection();
+        return;
+      }
       setSelectedActivities(
         selectedActivities.includes(activity)
           ? selectedActivities.filter(
@@ -61,7 +85,12 @@ const Activities: FC<ActivitiesProps> = ({
           : [...selectedActivities, activity],
       );
     },
-    [selectedActivities, setSelectedActivities],
+    [
+      isAllSelected,
+      selectedActivities,
+      setSelectedActivities,
+      handleClearSelection,
+    ],
   );
 
   const columns = useMemo<Column<ActivityCommon>[]>(
@@ -77,10 +106,12 @@ const Activities: FC<ActivitiesProps> = ({
                 inline
                 onChange={toggleAll}
                 checked={
-                  activities.length > 0 &&
-                  selectedActivities.length === activities.length
+                  isAllSelected ||
+                  (activities.length > 0 &&
+                    selectedActivities.length === activities.length)
                 }
                 indeterminate={
+                  !isAllSelected &&
                   selectedActivities.length > 0 &&
                   selectedActivities.length < activities.length
                 }
@@ -97,7 +128,9 @@ const Activities: FC<ActivitiesProps> = ({
                 }
                 inline
                 labelClassName="u-no-margin--bottom u-no-padding--top"
-                checked={selectedActivities.includes(row.original)}
+                checked={
+                  isAllSelected || selectedActivities.includes(row.original)
+                }
                 onChange={() => {
                   handleToggleActivity(row.original);
                 }}
@@ -167,6 +200,7 @@ const Activities: FC<ActivitiesProps> = ({
       ].filter((col) => !instanceId || col.accessor !== "computer_id"),
     [
       activities,
+      isAllSelected,
       selectedActivities,
       toggleAll,
       handleToggleActivity,
@@ -176,11 +210,53 @@ const Activities: FC<ActivitiesProps> = ({
     ],
   );
 
+  const showSubhead =
+    onSelectAll &&
+    (isAllSelected || selectedActivities.length > 0) &&
+    activityCount !== undefined &&
+    activityCount > activities.length;
+
+  const subhead = showSubhead ? (
+    <tr>
+      <td colSpan={columns.length} className="u-no-padding">
+        <div className={classes.subhead}>
+          <span>
+            {isAllSelected
+              ? `All ${activityCount} activities selected`
+              : `${selectedActivities.length} of ${activityCount} activities selected`}
+          </span>
+          <div className={classes.buttons}>
+            {!isAllSelected && onSelectAll && (
+              <Button
+                className="u-no-padding u-no-margin"
+                appearance="link"
+                onClick={onSelectAll}
+              >
+                Select all {activityCount} activities
+              </Button>
+            )}
+            {onClearSelection && (
+              <Button
+                className="u-no-padding u-no-margin"
+                appearance="link"
+                onClick={onClearSelection}
+              >
+                Clear selection
+              </Button>
+            )}
+          </div>
+        </div>
+      </td>
+    </tr>
+  ) : undefined;
+
   return (
     <>
       <ActivitiesHeader
         resetSelectedIds={handleClearSelection}
         selected={selectedActivities}
+        activityCount={activityCount}
+        isAllSelected={isAllSelected}
       />
       {isGettingActivities ? (
         <LoadingState />
@@ -190,6 +266,7 @@ const Activities: FC<ActivitiesProps> = ({
           columns={columns}
           data={activities}
           minWidth={1150}
+          subhead={subhead}
         />
       )}
       <TablePagination

src/features/activities/components/ActivitiesActions/ActivitiesActions.tsx

@@ -1,29 +1,79 @@
-import type { FC } from "react";
+import LoadingState from "@/components/layout/LoadingState";
 import useDebug from "@/hooks/useDebug";
 import useNotify from "@/hooks/useNotify";
+import usePageParams from "@/hooks/usePageParams";
+import useSidePanel from "@/hooks/useSidePanel";
+import { Button, ConfirmationButton } from "@canonical/react-components";
+import { lazy, Suspense, type FC } from "react";
 import type { ActivityCommon } from "../../types";
 import { pluralize } from "@/utils/_helpers";
-import { ConfirmationButton } from "@canonical/react-components";
+import { getExportTitle } from "./helpers";
 import {
   useApproveActivities,
   useCancelActivities,
   useRedoActivities,
 } from "../../api";
 
+const ActivitiesExportForm = lazy(
+  async () => import("../ActivitiesExportForm"),
+);
+
 interface ActivitiesActionsProps {
   readonly selected: ActivityCommon[];
+  readonly activityCount?: number;
+  readonly isAllSelected?: boolean;
+  readonly exportBaseQuery?: string;
 }
 
-const ActivitiesActions: FC<ActivitiesActionsProps> = ({ selected }) => {
+const ActivitiesActions: FC<ActivitiesActionsProps> = ({
+  selected,
+  activityCount,
+  isAllSelected = false,
+  exportBaseQuery = "",
+}) => {
   const { notify } = useNotify();
   const debug = useDebug();
+  const { setSidePanelContent } = useSidePanel();
+  const { query, search, status, fromDate, toDate, type } = usePageParams();
   const { approveActivities, isApprovingActivities } = useApproveActivities();
   const { cancelActivities, isCancelingActivities } = useCancelActivities();
   const { redoActivities, isRedoingActivities } = useRedoActivities();
 
   const selectedIds = selected.map((activity) => activity.id);
+
+  const exportQuery = [
+    exportBaseQuery,
+    search,
+    query,
+    status ? `status:${status}` : "",
+    fromDate ? `created-after:${fromDate}` : "",
+    toDate ? `created-before:${toDate}` : "",
+    type ? `type:${type}` : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
   const title = pluralize(selected.length, ["activity", "activities"], "exact");
 
+  const handleExport = () => {
+    setSidePanelContent(
+      getExportTitle({
+        isAllSelected,
+        selectedCount: selected.length,
+        activityCount,
+      }),
+      <Suspense fallback={<LoadingState />}>
+        <ActivitiesExportForm
+          exportParams={{ query: exportQuery }}
+          selectedActivityIds={
+            !isAllSelected && selected.length > 0 ? selectedIds : undefined
+          }
+        />
+      </Suspense>,
+      "medium",
+    );
+  };
+
   const handleApproveActivities = async () => {
     try {
       await approveActivities({ query: `id:${selectedIds.join(" OR id:")}` });
@@ -66,6 +116,14 @@ const ActivitiesActions: FC<ActivitiesActionsProps> = ({ selected }) => {
   return (
     <div key="buttons" className="p-segmented-control">
       <div className="p-segmented-control__list">
+        <Button
+          className="p-segmented-control__button"
+          type="button"
+          disabled={!isAllSelected && selected.length === 0}
+          onClick={handleExport}
+        >
+          <span>Export selection as TSV</span>
+        </Button>
         <ConfirmationButton
           className="p-segmented-control__button"
           type="button"