Dataset details view

airflow/www/static/js/api/index.ts

@@ -34,6 +34,8 @@ import useConfirmMarkTask from './useConfirmMarkTask';
 import useGridData from './useGridData';
 import useMappedInstances from './useMappedInstances';
 import useDatasets from './useDatasets';
+import useDataset from './useDataset';
+import useDatasetEvents from './useDatasetEvents';
 
 axios.interceptors.response.use(
   (res: AxiosResponse) => (res.data ? camelcaseKeys(res.data, { deep: true }) : res),
@@ -56,4 +58,6 @@ export {
   useGridData,
   useMappedInstances,
   useDatasets,
+  useDataset,
+  useDatasetEvents,
 };

airflow/www/static/js/api/useDataset.ts

@@ -0,0 +1,38 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import axios, { AxiosResponse } from 'axios';
+import { useQuery } from 'react-query';
+
+import { getMetaValue } from 'src/utils';
+import type { API } from 'src/types';
+
+interface Props {
+  datasetId: string;
+}
+
+export default function useDataset({ datasetId }: Props) {
+  return useQuery(
+    ['dataset', datasetId],
+    () => {
+      const datasetUrl = `${getMetaValue('datasets_api') || '/api/v1/datasets'}/${datasetId}`;
+      return axios.get<AxiosResponse, API.Dataset>(datasetUrl);
+    },
+  );
+}

airflow/www/static/js/api/useDatasetEvents.ts

@@ -0,0 +1,73 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import axios, { AxiosResponse } from 'axios';
+import { useQuery } from 'react-query';
+
+import { getMetaValue } from 'src/utils';
+import type { API } from 'src/types';
+
+interface DatasetEventsData {
+  datasetEvents: API.DatasetEvent[];
+  totalEntries: number;
+}
+
+interface Props {
+  datasetId?: string;
+  dagId?: string;
+  taskId?: string;
+  runId?: string;
+  mapIndex?: number;
+  limit?: number;
+  offset?: number;
+  order?: string;
+}
+
+export default function useDatasetEvents({
+  datasetId, dagId, runId, taskId, mapIndex, limit, offset, order,
+}: Props) {
+  const query = useQuery(
+    ['datasets-events', datasetId, dagId, runId, taskId, mapIndex, limit, offset, order],
+    () => {
+      const datasetsUrl = getMetaValue('dataset_events_api') || '/api/v1/datasets/events';
+
+      const params = new URLSearchParams();
+
+      if (limit) params.set('limit', limit.toString());
+      if (offset) params.set('offset', offset.toString());
+      if (order) params.set('order_by', order);
+      if (datasetId) params.set('dataset_id', datasetId);
+      if (dagId) params.set('source_dag_id', dagId);
+      if (runId) params.set('source_run_id', runId);
+      if (taskId) params.set('source_task_id', taskId);
+      if (mapIndex) params.set('source_map_index', mapIndex.toString());
+
+      return axios.get<AxiosResponse, DatasetEventsData>(datasetsUrl, {
+        params,
+      });
+    },
+    {
+      keepPreviousData: true,
+    },
+  );
+  return {
+    ...query,
+    data: query.data ?? { datasetEvents: [], totalEntries: 0 },
+  };
+}

airflow/www/static/js/api/useDatasets.ts

@@ -35,7 +35,7 @@ interface Props {
 }
 
 export default function useDatasets({ limit, offset, order }: Props) {
-  const query = useQuery<DatasetsData>(
+  const query = useQuery(
     ['datasets', limit, offset, order],
     () => {
       const datasetsUrl = getMetaValue('datasets_api') || '/api/v1/datasets';

airflow/www/static/js/components/Table.test.tsx

@@ -19,15 +19,16 @@
 
 /* global describe, test, expect */
 
-import React from 'react';
+import React, { useState } from 'react';
 import '@testing-library/jest-dom';
 import { render, fireEvent, within } from '@testing-library/react';
 import { sortBy } from 'lodash';
+import type { SortingRule } from 'react-table';
 
 import Table from './Table';
 import { ChakraWrapper } from '../utils/testUtils';
 
-const data = [
+const data: Record<string, any>[] = [
   { firstName: 'Lamont', lastName: 'Grimes', country: 'United States' },
   { firstName: 'Alysa', lastName: 'Armstrong', country: 'Spain' },
   { firstName: 'Petra', lastName: 'Blick', country: 'France' },
@@ -93,9 +94,28 @@ describe('Test Table', () => {
     expect(getByText('No Data found.')).toBeInTheDocument();
   });
 
-  test('With pagination', async () => {
+  // Simulated pagination that would be done serverside
+  const PaginatedTable = () => {
+    const pageSize = 2;
+    const [offset, setOffset] = useState(0);
+    const filteredData = data.slice(offset, offset + pageSize);
+    return (
+      <Table
+        data={filteredData}
+        columns={columns}
+        pageSize={pageSize}
+        manualPagination={{
+          totalEntries: data.length,
+          offset,
+          setOffset,
+        }}
+      />
+    );
+  };
+
+  test('With manual pagination', async () => {
     const { getAllByRole, queryByText, getByTitle } = render(
-      <Table data={data} columns={columns} pageSize={2} />,
+      <PaginatedTable />,
       { wrapper: ChakraWrapper },
     );
 
@@ -152,10 +172,33 @@ describe('Test Table', () => {
     expect(next).toBeDisabled();
   });
 
-  test('With sorting', async () => {
-    const { getAllByRole } = render(<Table data={data} columns={columns} />, {
-      wrapper: ChakraWrapper,
-    });
+  // Simulate manual sorting that would be done serverside
+  const SortedTable = () => {
+    const [sortByVar, setSortBy] = useState<SortingRule<object>[]>([]);
+    const sort = sortByVar[0];
+    let sortedData = data;
+    if (sort) {
+      sortedData = sort.desc
+        ? sortBy(data, [(o) => o[sort.id]]).reverse()
+        : sortBy(data, [(o) => o[sort.id]]);
+    }
+    return (
+      <Table
+        data={sortedData}
+        columns={columns}
+        manualSort={{
+          sortBy: sortByVar,
+          setSortBy,
+        }}
+      />
+    );
+  };
+
+  test('With manual sorting', async () => {
+    const { getAllByRole } = render(
+      <SortedTable />,
+      { wrapper: ChakraWrapper },
+    );
 
     // Default order matches original data order //
     const firstNameHeader = getAllByRole('columnheader')[0];

airflow/www/static/js/components/Table.tsx

@@ -46,6 +46,7 @@ import {
   Column,
   Hooks,
   SortingRule,
+  Row,
 } from 'react-table';
 import {
   MdKeyboardArrowLeft, MdKeyboardArrowRight,
@@ -83,19 +84,26 @@ interface TableProps {
     offset: number;
     setOffset: (offset: number) => void;
   },
+  manualSort?: {
+    sortBy: SortingRule<object>[];
+    setSortBy: (sortBy: SortingRule<object>[]) => void;
+    initialSortBy?: SortingRule<object>[];
+  },
   pageSize?: number;
-  setSortBy?: (sortBy: SortingRule<number>[]) => void;
   isLoading?: boolean;
   selectRows?: (selectedRows: number[]) => void;
+  onRowClicked?: (row: Row<object>, e: any) => void;
 }
+
 const Table = ({
   data,
   columns,
   manualPagination,
+  manualSort,
   pageSize = 25,
-  setSortBy,
   isLoading = false,
   selectRows,
+  onRowClicked,
 }: TableProps) => {
   const { totalEntries, offset, setOffset } = manualPagination || {};
   const oddColor = useColorModeValue('gray.50', 'gray.900');
@@ -143,10 +151,12 @@ const Table = ({
       data,
       pageCount,
       manualPagination: !!manualPagination,
-      manualSortBy: !!setSortBy,
+      manualSortBy: !!manualSort,
+      disableMultiSort: !!manualSort, // API only supporting ordering by a single column
       initialState: {
         pageIndex: offset ? offset / pageSize : 0,
         pageSize,
+        sortBy: manualSort?.initialSortBy || [],
       },
     },
     useSortBy,
@@ -164,9 +174,12 @@ const Table = ({
     if (setOffset) setOffset((pageIndex - 1 || 0) * pageSize);
   };
 
+  // When the sortBy state changes we need to manually call setSortBy
   useEffect(() => {
-    if (setSortBy) setSortBy(sortBy);
-  }, [sortBy, setSortBy]);
+    if (manualSort) {
+      manualSort.setSortBy(sortBy);
+    }
+  }, [sortBy, manualSort]);
 
   useEffect(() => {
     if (selectRows) {
@@ -212,7 +225,8 @@ const Table = ({
               <Tr
                 {...row.getRowProps()}
                 _odd={{ backgroundColor: oddColor }}
-                _hover={{ backgroundColor: hoverColor }}
+                _hover={onRowClicked && { backgroundColor: hoverColor, cursor: 'pointer' }}
+                onClick={onRowClicked ? (e: any) => onRowClicked(row, e) : undefined}
               >
                 {row.cells.map((cell) => (
                   <Td

airflow/www/static/js/dag/details/taskInstance/MappedInstances.tsx

@@ -160,7 +160,10 @@ const MappedInstances = ({
           totalEntries,
         }}
         pageSize={limit}
-        setSortBy={setSortBy}
+        manualSort={{
+          setSortBy,
+          sortBy,
+        }}
         isLoading={isLoading}
         selectRows={canEdit ? selectRows : undefined}
       />