Reorganize table owners & table tags state (#30)

* Un-nest owners and tags state: Move from state.tableMetadata.tableData to state.tableMetadata

* Create a nested reducer for owners

* Rename ducks/tags -> ducks/allTags to reduce confusion with table tags

* Create a nested reducer for table tags

* Some code cleanup

* Added table data defaults + utilMethods

frontend/amundsen_application/static/js/components/BrowsePage/index.tsx

@@ -7,7 +7,7 @@ import AppConfig from '../../../config/config';
 import LoadingSpinner from '../common/LoadingSpinner';
 import TagInfo from "../Tags/TagInfo";
 import { Tag } from "../Tags/types";
-import { GetAllTagsRequest } from "../../ducks/tags/reducer";
+import { GetAllTagsRequest } from "../../ducks/allTags/reducer";
 
 export interface StateFromProps {
   allTags: Tag[];

frontend/amundsen_application/static/js/components/TableDetail/index.tsx

@@ -23,7 +23,7 @@ import Avatar from 'react-avatar';
 import { OverlayTrigger, Popover } from 'react-bootstrap';
 import { RouteComponentProps } from 'react-router';
 
-import { PreviewQueryParams, TableMetadata } from './types';
+import { PreviewQueryParams, TableMetadata, TableOwners } from './types';
 
 // TODO: Use css-modules instead of 'import'
 import './styles.scss';
@@ -32,6 +32,7 @@ export interface StateFromProps {
   isLoading: boolean;
   statusCode?: number;
   tableData: TableMetadata;
+  tableOwners: TableOwners;
 }
 
 export interface DispatchFromProps {
@@ -45,6 +46,7 @@ interface TableDetailState {
   isLoading: boolean;
   statusCode: number;
   tableData: TableMetadata;
+  tableOwners: TableOwners;
 }
 
 class TableDetail extends React.Component<TableDetailProps & RouteComponentProps<any>, TableDetailState> {
@@ -57,12 +59,27 @@ class TableDetail extends React.Component<TableDetailProps & RouteComponentProps
     getPreviewData: () => undefined,
     isLoading: true,
     statusCode: null,
-    tableData: {} as TableMetadata,
+    tableData: {
+      columns: [],
+      is_editable: false,
+      schema: '',
+      table_name: '',
+      table_description: '',
+      table_writer: { application_url: '', description: '', id: '', name: '' },
+      partition: { is_partitioned: false },
+      table_readers: [],
+      source: { source: '', source_type: '' },
+      watermarks: [],
+    },
+    tableOwners: {
+      isLoading: true,
+      owners: [],
+    },
   };
 
   static getDerivedStateFromProps(nextProps, prevState) {
-    const { isLoading, statusCode, tableData} = nextProps;
-    return { isLoading, statusCode, tableData };
+    const { isLoading, statusCode, tableData, tableOwners } = nextProps;
+    return { isLoading, statusCode, tableData, tableOwners };
   }
 
   constructor(props) {
@@ -79,6 +96,7 @@ class TableDetail extends React.Component<TableDetailProps & RouteComponentProps
       isLoading: props.isLoading,
       statusCode: props.statusCode,
       tableData: props.tableData,
+      tableOwners: props.tableOwners,
     }
   }
 
@@ -173,14 +191,17 @@ class TableDetail extends React.Component<TableDetailProps & RouteComponentProps
     return AppConfig.tableProfile.exploreUrlGenerator(this.database, this.cluster, this.schema, this.tableName);
   };
 
-  createEntityCardSections(data) {
+  createEntityCardSections = () => {
+    const data = this.state.tableData;
+    const tableOwners = this.state.tableOwners;
+
     const entityCardSections = [];
 
     // "Owned By" section
     const listItemRenderer = (props) => {
       return React.createElement(AvatarLabel, {label: props.label});
     };
-    const listItemProps = data.owners.map((entry) => {
+    const listItemProps = tableOwners.owners.map((entry) => {
       return { label: entry.display_name };
     });
     const listItemPropTypes = [{name:'email', property: 'label', type: 'text'}];
@@ -307,7 +328,7 @@ class TableDetail extends React.Component<TableDetailProps & RouteComponentProps
                   />
               </div>
               <div className="col-xs-12 col-md-5 float-md-right col-lg-4">
-                <EntityCard sections={ this.createEntityCardSections(data) }/>
+                <EntityCard sections={ this.createEntityCardSections() }/>
               </div>
               <div className="detail-list-header col-xs-12 col-md-7 col-lg-8">
                 <label>Columns</label>

frontend/amundsen_application/static/js/components/TableDetail/types.ts

@@ -26,7 +26,12 @@ interface TableColumnStats {
 
 interface TableReader {
   read_count: number;
-  reader: User[];
+  reader: User;
+}
+
+interface TableSource {
+  source: string | null;
+  source_type: string;
 }
 
 interface TableWriter {
@@ -36,8 +41,9 @@ interface TableWriter {
   name: string;
 }
 
-interface User {
+export interface User {
   display_name: string;
+  profile_url: string;
 }
 
 export interface PreviewQueryParams {
@@ -59,17 +65,21 @@ export interface TableColumn {
   stats: TableColumnStats[];
 }
 
+export interface TableOwners {
+  isLoading: boolean;
+  owners: User[];
+}
+
 export interface TableMetadata {
   columns: TableColumn[];
   is_editable: boolean;
   schema: string;
   table_name: string;
   table_description: string;
   table_writer: TableWriter;
-  owners: User[];
   partition: PartitionData;
   table_readers: TableReader[];
-  tags: Tag[];
+  source: TableSource;
   watermarks: Watermark[];
 }
 

frontend/amundsen_application/static/js/components/Tags/TagInput/index.tsx

@@ -6,8 +6,8 @@ import Select, { components } from 'react-select';
 import CreatableSelect from 'react-select/lib/Creatable';
 import makeAnimated from 'react-select/lib/animated';
 
-import { GetAllTagsRequest } from '../../../ducks/tags/reducer';
-import { UpdateTagsRequest } from '../../../ducks/tableMetadata/reducer';
+import { GetAllTagsRequest } from '../../../ducks/allTags/reducer';
+import { UpdateTagsRequest } from '../../../ducks/tableMetadata/tags/reducer';
 
 import TagInfo from "../TagInfo";
 import { Tag, UpdateTagMethod, UpdateTagData } from '../types';

frontend/amundsen_application/static/js/containers/BrowsePage/index.tsx

@@ -1,15 +1,15 @@
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
-import { getAllTags } from '../../ducks/tags/reducer';
+import { getAllTags } from '../../ducks/allTags/reducer';
 
 import BrowsePage, { DispatchFromProps, StateFromProps } from '../../components/BrowsePage';
 import { GlobalState } from "../../ducks/rootReducer";
 
 export const mapStateToProps = (state: GlobalState) => {
   return {
-    allTags: state.tags.allTags,
-    isLoading: state.tags.isLoading,
+    allTags: state.allTags.allTags,
+    isLoading: state.allTags.isLoading,
   };
 };
 

frontend/amundsen_application/static/js/containers/TableDetail/TableOwnerEditableList/index.tsx

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
-import { updateTableOwner, UpdateMethod } from '../../../ducks/tableMetadata/reducer';
+import { updateTableOwner, UpdateMethod } from '../../../ducks/tableMetadata/owners/reducer';
 
 import EditableList, { ComponentProps, DispatchFromProps } from '../../../components/common/EditableList';
 

frontend/amundsen_application/static/js/containers/TableDetail/index.tsx

@@ -11,6 +11,7 @@ export const mapStateToProps = (state: GlobalState) => {
     isLoading: state.tableMetadata.isLoading,
     statusCode: state.tableMetadata.statusCode,
     tableData: state.tableMetadata.tableData,
+    tableOwners: state.tableMetadata.tableOwners,
   };
 };
 

frontend/amundsen_application/static/js/containers/TagInput/index.tsx

@@ -2,16 +2,16 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { GlobalState } from "../../ducks/rootReducer";
-import { getAllTags } from '../../ducks/tags/reducer';
-import { updateTags } from '../../ducks/tableMetadata/reducer';
+import { getAllTags } from '../../ducks/allTags/reducer';
+import { updateTags } from '../../ducks/tableMetadata/tags/reducer';
 
 import TagInput, { ComponentProps, DispatchFromProps, StateFromProps} from '../../components/Tags/TagInput';
 
 export const mapStateToProps = (state: GlobalState) => {
   return {
-    allTags: state.tags.allTags,
-    isLoading: state.tags.isLoading || state.tableMetadata.isLoadingTags,
-    tags: state.tableMetadata.tableData.tags,
+    allTags: state.allTags.allTags,
+    isLoading: state.allTags.isLoading || state.tableMetadata.tableTags.isLoading,
+    tags: state.tableMetadata.tableTags.tags,
   };
 };
 

frontend/amundsen_application/static/js/ducks/allTags/api/v0.ts

@@ -0,0 +1,12 @@
+import axios from 'axios';
+
+import { sortTagsAlphabetical } from '../../utilMethods';
+
+export function metadataAllTags() {
+  return axios.get('/api/metadata/v0/tags').then((response) => {
+    return response.data.tags.sort(sortTagsAlphabetical);
+  })
+  .catch((error) => {
+    return error.response.data.tags.sort(sortTagsAlphabetical);
+  });
+}

frontend/amundsen_application/static/js/ducks/tags/reducer.ts → frontend/amundsen_application/static/js/ducks/allTags/reducer.ts

@@ -2,9 +2,9 @@ import { Tag } from '../../components/Tags/types';
 
 /* getAllTags */
 export enum GetAllTags {
-  ACTION = 'amundsen/tags/GET_ALL_TAGS',
-  SUCCESS = 'amundsen/tags/GET_ALL_TAGS_SUCCESS',
-  FAILURE = 'amundsen/tags/GET_ALL_TAGS_FAILURE',
+  ACTION = 'amundsen/allTags/GET_ALL_TAGS',
+  SUCCESS = 'amundsen/allTags/GET_ALL_TAGS_SUCCESS',
+  FAILURE = 'amundsen/allTags/GET_ALL_TAGS_FAILURE',
 }
 
 export interface GetAllTagsRequest {

frontend/amundsen_application/static/js/ducks/tags/sagas.ts → frontend/amundsen_application/static/js/ducks/allTags/sagas.ts

@@ -7,7 +7,7 @@ import {
 
 import {
   metadataAllTags,
-} from '../api/metadata/v0';
+} from './api/v0';
 
 export function* getAllTagsWorker(): SagaIterator {
   try {

frontend/amundsen_application/static/js/ducks/popularTables/api/v0.ts

@@ -0,0 +1,10 @@
+import axios from 'axios';
+
+export function metadataPopularTables() {
+  return axios.get('/api/metadata/v0/popular_tables').then((response) => {
+    return response.data.results;
+  })
+  .catch((error) => {
+    return error.response.data.results;
+  });
+}

frontend/amundsen_application/static/js/ducks/popularTables/sagas.ts

@@ -8,7 +8,7 @@ import {
 
 import {
   metadataPopularTables,
-} from '../api/metadata/v0';
+} from './api/v0';
 
 
 export function* getPopularTablesWorker(): SagaIterator {

frontend/amundsen_application/static/js/ducks/rootReducer.ts

@@ -5,7 +5,7 @@ import feedback, { FeedbackReducerState } from './feedback/reducer';
 import popularTables, { PopularTablesReducerState } from './popularTables/reducer';
 import search, { SearchReducerState } from './search/reducer';
 import tableMetadata, { TableMetadataReducerState } from './tableMetadata/reducer';
-import tags, { TagReducerState } from './tags/reducer';
+import allTags, { TagReducerState } from './allTags/reducer';
 import user, { UserReducerState } from './user/reducer';
 
 export interface GlobalState {
@@ -14,7 +14,7 @@ export interface GlobalState {
   popularTables: PopularTablesReducerState;
   search: SearchReducerState;
   tableMetadata: TableMetadataReducerState;
-  tags: TagReducerState;
+  allTags: TagReducerState;
   user: UserReducerState;
 }
 
@@ -24,6 +24,6 @@ export default combineReducers<GlobalState>({
   popularTables,
   search,
   tableMetadata,
-  tags,
+  allTags,
   user,
 });

frontend/amundsen_application/static/js/ducks/rootSaga.ts

@@ -11,6 +11,8 @@ import { getPopularTablesWatcher } from './popularTables/sagas';
 import { executeSearchWatcher } from './search/sagas';
 
 // TableDetail
+import { updateTableOwnerWatcher } from './tableMetadata/owners/sagas';
+import { updateTableTagsWatcher } from './tableMetadata/tags/sagas';
 import {
   getTableDataWatcher,
   getColumnDescriptionWatcher,
@@ -19,12 +21,10 @@ import {
   getTableDescriptionWatcher,
   updateColumnDescriptionWatcher,
   updateTableDescriptionWatcher,
-  updateTableOwnerWatcher,
-  updateTagsWatcher,
 } from './tableMetadata/sagas';
 
 // Tags
-import { getAllTagsWatcher } from './tags/sagas';
+import { getAllTagsWatcher } from './allTags/sagas';
 
 // User
 import { getCurrentUserWatcher } from "./user/sagas";
@@ -40,7 +40,6 @@ export default function* rootSaga() {
     getPopularTablesWatcher(),
     // Tags
     getAllTagsWatcher(),
-    updateTagsWatcher(),
     // TableDetail
     getTableDataWatcher(),
     getColumnDescriptionWatcher(),
@@ -50,6 +49,7 @@ export default function* rootSaga() {
     updateColumnDescriptionWatcher(),
     updateTableDescriptionWatcher(),
     updateTableOwnerWatcher(),
+    updateTableTagsWatcher(),
     // User
     getCurrentUserWatcher(),
   ]);

frontend/amundsen_application/static/js/ducks/tableMetadata/api/helpers.ts

@@ -0,0 +1,32 @@
+/** TODO: We will introduce better typing for function parameters return types */
+
+import { filterFromObj, sortTagsAlphabetical } from '../../utilMethods';
+
+/**
+ * Generates the query string parameters needed for requests that act on a particular table resource.
+ */
+export function getTableParams(tableDataObject) {
+  const { cluster, database, schema, table_name } = tableDataObject;
+  return `db=${database}&cluster=${cluster}&schema=${schema}&table=${table_name}`;
+}
+
+/**
+ * Parses the response for table metadata to create a TableMetadata object
+ */
+export function getTableDataFromResponseData(responseData) {
+  return filterFromObj(responseData, ['owners', 'tags']);
+}
+
+/**
+ * Parses the response for table metadata to return the array of table owners
+ */
+export function getTableOwnersFromResponseData(responseData) {
+  return responseData.owners;
+}
+
+/**
+ * Parses the response for table metadata to return an array of sorted table tags
+ */
+export function getTableTagsFromResponseData(responseData) {
+  return responseData.tags.sort(sortTagsAlphabetical);
+}