You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by yj...@apache.org on 2020/10/29 05:44:54 UTC
[incubator-superset] 11/33: clean up code
This is an automated email from the ASF dual-hosted git repository.
yjc pushed a commit to branch home-screen-mvp
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
commit 08470384645a4929cce1074364ad15bcd1485e29
Author: Phillip Kelley-Dotson <pk...@yahoo.com>
AuthorDate: Wed Oct 7 09:40:05 2020 -0700
clean up code
---
.../src/views/CRUD/chart/ChartCard.tsx | 10 +----
.../src/views/CRUD/chart/ChartList.tsx | 35 +++++------------
superset-frontend/src/views/CRUD/hooks.ts | 45 ++++++++++++++++++++++
superset-frontend/src/views/CRUD/types.ts | 4 +-
.../src/views/CRUD/welcome/ActivityTable.tsx | 44 +++++++++++----------
.../src/views/CRUD/welcome/ChartTable.tsx | 43 ++++++++++-----------
.../src/views/CRUD/welcome/DashboardTable.tsx | 15 +-------
.../src/views/CRUD/welcome/SavedQueries.tsx | 40 ++++++++++---------
8 files changed, 126 insertions(+), 110 deletions(-)
diff --git a/superset-frontend/src/views/CRUD/chart/ChartCard.tsx b/superset-frontend/src/views/CRUD/chart/ChartCard.tsx
index a8a123c..1046f3a 100644
--- a/superset-frontend/src/views/CRUD/chart/ChartCard.tsx
+++ b/superset-frontend/src/views/CRUD/chart/ChartCard.tsx
@@ -60,15 +60,6 @@ export default function ChartCard({
addDangerToast,
);
- function openChartEditModal(chart: Chart) {
- setSliceCurrentlyEditing({
- slice_id: chart.id,
- slice_name: chart.slice_name,
- description: chart.description,
- cache_timeout: chart.cache_timeout,
- });
- }
-
function handleChartDelete({ id, slice_name: sliceName }: Chart) {
SupersetClient.delete({
endpoint: `/api/v1/chart/${id}`,
@@ -121,6 +112,7 @@ export default function ChartCard({
)}
</Menu>
);
+ console.log('favorite status', favoriteStatusRef)
return (
<ListViewCard
loading={loading}
diff --git a/superset-frontend/src/views/CRUD/chart/ChartList.tsx b/superset-frontend/src/views/CRUD/chart/ChartList.tsx
index d326db7..ec0722e 100644
--- a/superset-frontend/src/views/CRUD/chart/ChartList.tsx
+++ b/superset-frontend/src/views/CRUD/chart/ChartList.tsx
@@ -22,7 +22,11 @@ import rison from 'rison';
import { uniqBy } from 'lodash';
import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
import { createFetchRelated, createErrorHandler } from 'src/views/CRUD/utils';
-import { useListViewResource, useFavoriteStatus } from 'src/views/CRUD/hooks';
+import {
+ useListViewResource,
+ useFavoriteStatus,
+ useChartEditModal,
+} from 'src/views/CRUD/hooks';
import ConfirmStatusChange from 'src/components/ConfirmStatusChange';
import SubMenu, { SubMenuProps } from 'src/components/Menu/SubMenu';
import Icon from 'src/components/Icon';
@@ -102,37 +106,18 @@ function ChartList(props: ChartListProps) {
FAVESTAR_BASE_URL,
props.addDangerToast,
);
- const [
+ const {
sliceCurrentlyEditing,
- setSliceCurrentlyEditing,
- ] = useState<Slice | null>(null);
+ handleChartUpdated,
+ openChartEditModal,
+ closeChartEditModal,
+ } = useChartEditModal(setCharts, charts);
const canCreate = hasPerm('can_add');
const canEdit = hasPerm('can_edit');
const canDelete = hasPerm('can_delete');
const initialSort = [{ id: 'changed_on_delta_humanized', desc: true }];
- function openChartEditModal(chart: Chart) {
- setSliceCurrentlyEditing({
- slice_id: chart.id,
- slice_name: chart.slice_name,
- description: chart.description,
- cache_timeout: chart.cache_timeout,
- });
- }
-
- function closeChartEditModal() {
- setSliceCurrentlyEditing(null);
- }
-
- function handleChartUpdated(edits: Chart) {
- // update the chart in our state with the edited info
- const newCharts = charts.map(chart =>
- chart.id === edits.id ? { ...chart, ...edits } : chart,
- );
- setCharts(newCharts);
- }
-
function handleChartDelete({ id, slice_name: sliceName }: Chart) {
SupersetClient.delete({
endpoint: `/api/v1/chart/${id}`,
diff --git a/superset-frontend/src/views/CRUD/hooks.ts b/superset-frontend/src/views/CRUD/hooks.ts
index 9c2386f..80de0a7 100644
--- a/superset-frontend/src/views/CRUD/hooks.ts
+++ b/superset-frontend/src/views/CRUD/hooks.ts
@@ -21,7 +21,9 @@ import { useState, useEffect, useCallback, useRef } from 'react';
import { SupersetClient, t } from '@superset-ui/core';
import { createErrorHandler } from 'src/views/CRUD/utils';
+import { Slice } from 'src/explore/components/PropertiesModal';
import { FetchDataConfig } from 'src/components/ListView';
+import Chart from 'src/types/Chart';
import { FavoriteStatus } from './types';
interface ListViewResourceState<D extends object = any> {
@@ -33,6 +35,11 @@ interface ListViewResourceState<D extends object = any> {
bulkSelectEnabled: boolean;
}
+interface EditChartModal {
+ setCharts: () => void;
+ charts: Array<any>;
+}
+
export function useListViewResource<D extends object = any>(
resource: string,
resourceLabel: string, // resourceLabel for translations
@@ -352,3 +359,41 @@ export function useFavoriteStatus(
return [favoriteStatusRef, fetchFaveStar, saveFaveStar] as const;
}
+
+export const useChartEditModal = (
+ setCharts: (charts: Array<Chart>) => void,
+ charts: Array<Chart>,
+) => {
+ const [
+ sliceCurrentlyEditing,
+ setSliceCurrentlyEditing,
+ ] = useState<Slice | null>(null);
+
+ function openChartEditModal(chart: Chart) {
+ setSliceCurrentlyEditing({
+ slice_id: chart.id,
+ slice_name: chart.slice_name,
+ description: chart.description,
+ cache_timeout: chart.cache_timeout,
+ });
+ }
+
+ function closeChartEditModal() {
+ setSliceCurrentlyEditing(null);
+ }
+
+ function handleChartUpdated(edits: Chart) {
+ // update the chart in our state with the edited info
+ const newCharts = charts.map((chart: Chart) =>
+ chart.id === edits.id ? { ...chart, ...edits } : chart,
+ );
+ setCharts(newCharts);
+ }
+
+ return {
+ sliceCurrentlyEditing,
+ handleChartUpdated,
+ openChartEditModal,
+ closeChartEditModal,
+ };
+};
diff --git a/superset-frontend/src/views/CRUD/types.ts b/superset-frontend/src/views/CRUD/types.ts
index 7f5fce5..afd1956 100644
--- a/superset-frontend/src/views/CRUD/types.ts
+++ b/superset-frontend/src/views/CRUD/types.ts
@@ -31,7 +31,7 @@ export interface DashboardTableProps {
user?: User;
}
-interface Dashboard {
+export interface Dashboard {
changed_by_name: string;
changed_by_url: string;
changed_on_delta_humanized: string;
@@ -43,7 +43,7 @@ interface Dashboard {
url: string;
thumbnail_url: string;
owners: Owner[];
- loading: boolean;
+ loading?: boolean;
}
export interface DashboardCardProps {
diff --git a/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx b/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx
index b4c941c..de237b4 100644
--- a/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx
@@ -40,34 +40,35 @@ interface ActivityProps {
activityFilter: string;
}
-const filters = {
- // Chart and dashbaord uses same filters
- // for edited and created
- edited: [
- {
- col: 'changed_by',
- opr: 'rel_o_m',
- value: 1,
- },
- ],
- created: [
- {
- col: 'owners',
- opr: 'rel_m_m',
- value: 1,
- },
- ],
-};
-
export default function ActivityTable({ user, activityFilter }: ActivityProps) {
const [active, setActiveState] = useState([]);
const [loading, setLoading] = useState(false);
- const recent = `/superset/recent_activity/${user.userId}/?limit=10`;
+ const recent = `/superset/recent_activity/${user.userId}/?limit=5`;
+ const filters = {
+ // Chart and dashbaord uses same filters
+ // for edited and created
+ edited: [
+ {
+ col: 'changed_by',
+ opr: 'rel_o_m',
+ value: `${user.userId}`,
+ },
+ ],
+ created: [
+ {
+ col: 'created_by',
+ opr: 'rel_o_m',
+ value: `${user.userId}`,
+ },
+ ],
+ };
+
const setData = (endpoint: string) => {
setLoading(true);
SupersetClient.get({ endpoint })
.then(({ json }) => {
setLoading(false);
+ // @ts-ignore
setActiveState(json);
})
.catch(() => {
@@ -79,13 +80,14 @@ export default function ActivityTable({ user, activityFilter }: ActivityProps) {
};
const setBatchData = (q: string) => {
+ // @ts-ignore
createBatchMethod(q).then((res: Array<object>) => setActiveState(res));
};
const getIconName = (name: string | undefined) => {
if (name === 'explore_json') return 'sql';
if (name === 'dashboard') return 'nav-dashboard';
- if (name === 'log') return 'nav-charts';
+ if (name === 'log' || name === 'explore') return 'nav-charts';
return '';
};
diff --git a/superset-frontend/src/views/CRUD/welcome/ChartTable.tsx b/superset-frontend/src/views/CRUD/welcome/ChartTable.tsx
index e1223cb..d0ccaee 100644
--- a/superset-frontend/src/views/CRUD/welcome/ChartTable.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/ChartTable.tsx
@@ -18,8 +18,9 @@
*/
import React, { useEffect } from 'react';
import { t } from '@superset-ui/core';
-import { useListViewResource, useFavoriteStatus } from 'src/views/CRUD/hooks';
+import { useListViewResource, useChartEditModal } from 'src/views/CRUD/hooks';
import withToasts from 'src/messageToasts/enhancers/withToasts';
+import PropertiesModal from 'src/explore/components/PropertiesModal';
import { User } from 'src/types/bootstrapTypes';
import Owner from 'src/types/Owner';
import ChartCard from 'src/views/CRUD/chart/ChartCard';
@@ -35,27 +36,6 @@ interface ChartTableProps {
user?: User;
}
-interface Dashboard {
- changed_by_name: string;
- changed_by_url: string;
- changed_on_delta_humanized: string;
- changed_by: string;
- dashboard_title: string;
- slice_name: string;
- id: number;
- published: boolean;
- url: string;
- thumbnail_url: string;
- owners: Owner[];
- loading: boolean;
-}
-
-interface ChartTableState {
- charts: Dashboard[];
- chart_count: number;
- loading: boolean;
-}
-
function ChartTable({
chartFilter,
user,
@@ -64,10 +44,19 @@ function ChartTable({
}: ChartTableProps) {
const {
state: { loading, resourceCollection: charts, bulkSelectEnabled },
+ setResourceCollection: setCharts,
hasPerm,
refreshData,
fetchData,
} = useListViewResource<Chart>('chart', t('chart'), addDangerToast);
+
+ const {
+ sliceCurrentlyEditing,
+ openChartEditModal,
+ handleChartUpdated,
+ closeChartEditModal,
+ } = useChartEditModal(setCharts, charts);
+
const getFilters = () => {
const filters = [];
@@ -112,9 +101,19 @@ function ChartTable({
return (
<>
+ {sliceCurrentlyEditing && (
+ <PropertiesModal
+ onHide={closeChartEditModal}
+ onSave={handleChartUpdated}
+ show
+ slice={sliceCurrentlyEditing}
+ />
+ )}
+
{charts.map((e, i) => (
<ChartCard
key={`${i}`}
+ openChartEditModal={openChartEditModal}
loading={loading}
chart={e}
hasPerm={hasPerm}
diff --git a/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx b/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx
index 0167006..c47b2dd 100644
--- a/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx
@@ -20,20 +20,12 @@ import React, { useEffect } from 'react';
import { t } from '@superset-ui/core';
import { useListViewResource, useFavoriteStatus } from 'src/views/CRUD/hooks';
import withToasts from 'src/messageToasts/enhancers/withToasts';
-import { User } from 'src/types/bootstrapTypes';
import Owner from 'src/types/Owner';
-import DashboardCard from '../dashboard/DashboardCard';
+import { DashboardTableProps } from 'src/views/CRUD/types';
+import DashboardCard from 'src/views/CRUD/dashboard/DashboardCard';
const PAGE_SIZE = 3;
-interface DashboardTableProps {
- addDangerToast: (message: string) => void;
- addSuccessToast: (message: string) => void;
- search: string;
- dashboardFilter?: string;
- user?: User;
-}
-
interface Dashboard {
changed_by_name: string;
changed_by_url: string;
@@ -72,9 +64,6 @@ function DashboardTable({
addDangerToast,
);
- console.log('dashboards', dashboards);
- console.log('dashboardFilter', dashboardFilter);
-
const getFilters = () => {
const filters = [];
diff --git a/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx b/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx
index 73c7547..d30db0b 100644
--- a/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx
@@ -87,24 +87,28 @@ const SavedQueries = ({ user, queryFilter }) => {
return (
<>
- {queries.map(q => (
- <ListViewCard
- imgFallbackURL={null}
- imgURL={null}
- title={q.database.database_name}
- rows={q.rows}
- loading={loading}
- description={t('Last run ', q.end_time)}
- showImg={false}
- actions={
- <ListViewCard.Actions>
- <Dropdown overlay={menu}>
- <Icon name="more-horiz" />
- </Dropdown>
- </ListViewCard.Actions>
- }
- />
- ))}
+ {queries ? (
+ queries.map(q => (
+ <ListViewCard
+ imgFallbackURL={null}
+ imgURL={null}
+ title={q.database.database_name}
+ rows={q.rows}
+ loading={loading}
+ description={t('Last run ', q.end_time)}
+ showImg={false}
+ actions={
+ <ListViewCard.Actions>
+ <Dropdown overlay={menu}>
+ <Icon name="more-horiz" />
+ </Dropdown>
+ </ListViewCard.Actions>
+ }
+ />
+ ))
+ ) : (
+ <span>You have no Saved Queries!</span>
+ )}
</>
);
};