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 624f23edfb78b540e00449a6303bf6319d68003b Author: Phillip Kelley-Dotson <[email protected]> AuthorDate: Fri Sep 18 07:38:10 2020 -0700 first steps --- .../src/views/CRUD/welcome/DashboardTable.tsx | 114 +++++++++++++++++++-- .../src/views/CRUD/welcome/SavedQueries.tsx | 60 +++++++++++ .../src/views/CRUD/welcome/Welcome.tsx | 29 +++++- 3 files changed, 187 insertions(+), 16 deletions(-) diff --git a/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx b/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx index b3990f4..f0560e4 100644 --- a/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx +++ b/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx @@ -21,9 +21,18 @@ import { t, SupersetClient } from '@superset-ui/core'; import { debounce } from 'lodash'; import ListView, { FetchDataConfig } from 'src/components/ListView'; import withToasts from 'src/messageToasts/enhancers/withToasts'; +import ListViewCard from 'src/components/ListViewCard'; import { Dashboard } from 'src/types/bootstrapTypes'; +import { Dropdown, Menu } from 'src/common/components'; +import Icon from 'src/components/Icon'; +import Label from 'src/components/Label'; +import ConfirmStatusChange from 'src/components/ConfirmStatusChange'; -const PAGE_SIZE = 25; +const PAGE_SIZE = 3; + +//const canEdit = hasPerm('can_edit'); +//const canDelete = hasPerm('can_delete'); +//const canExport = hasPerm('can_mulexport'); interface DashboardTableProps { addDangerToast: (message: string) => void; @@ -101,6 +110,16 @@ class DashboardTable extends React.PureComponent< }; } + componentDidMount() { + console.log('component did mount!!!'); + this.fetchDataDebounced({ + pageSize: PAGE_SIZE, + pageIndex: 0, + sortBy: this.initialSort, + filters: [], + }); + } + componentDidUpdate(prevProps: DashboardTableProps) { if (prevProps.search !== this.props.search) { this.fetchDataDebounced({ @@ -132,19 +151,91 @@ class DashboardTable extends React.PureComponent< : [], ); + /*const { dashboardFilter, user} = this.props; + const filters = []; + + if (dashboardFilter === "Mine") { + filters.push[{ + { + col: "owners.id", // API does not allow filter by owner id + opr: "eq", + value: user.id + } + }]; + } else { + filter.push[{ + { + col: "favorite", // API currently can't filter by favorite + opr: "eq", + value: true + } + }]; + }*/ + + /*const menu = ( + <Menu> + {canDelete && ( + <Menu.Item> + <ConfirmStatusChange + title={t('Please Confirm')} + description={ + <> + {t('Are you sure you want to delete')}{' '} + </> + } + onConfirm={() => handleDashboardDelete(dashboard)} + > + {confirmDelete => ( + <div + role="button" + tabIndex={0} + className="action-button" + onClick={confirmDelete} + > + <ListViewCard.MenuIcon name="trash" /> Delete + </div> + )} + </ConfirmStatusChange> + </Menu.Item> + )} + {canExport && ( + <Menu.Item + role="button" + tabIndex={0} + onClick={() => handleBulkDashboardExport([dashboard])} + > + <ListViewCard.MenuIcon name="share" /> Export + </Menu.Item> + )} + {canEdit && ( + <Menu.Item + role="button" + tabIndex={0} + onClick={() => openDashboardEditModal(dashboard)} + > + <ListViewCard.MenuIcon name="pencil" /> Edit + </Menu.Item> + )} + </Menu> + ); */ + + console.log('sortBy', sortBy); const queryParams = JSON.stringify({ order_column: sortBy[0].id, order_direction: sortBy[0].desc ? 'desc' : 'asc', page: pageIndex, page_size: pageSize, + //filters, ...(filterExps.length ? { filters: filterExps } : {}), }); - + console.log('hello!!!'); return SupersetClient.get({ endpoint: `/api/v1/dashboard/?q=${queryParams}`, }) .then(({ json }) => { + console.log('json', json); this.setState({ dashboards: json.result, dashboard_count: json.count }); + console.log('this.state', this.state); }) .catch(response => { if (response.status === 401) { @@ -168,15 +259,16 @@ class DashboardTable extends React.PureComponent< render() { return ( - <ListView - columns={this.columns} - data={this.state.dashboards} - count={this.state.dashboard_count} - pageSize={PAGE_SIZE} - fetchData={this.fetchData} - loading={this.state.loading} - initialSort={this.initialSort} - /> + <div> + {this.state.dashboards.map(e => ( + <ListViewCard + title={e.dashboard_title} + loading={this.state.loading} + titleRight={<Label>{e.published ? 'published' : 'draft'}</Label>} + description={t('Last modified %s', e.changed_on_delta_humanized)} + /> + ))} + </div> ); } } diff --git a/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx b/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx new file mode 100644 index 0000000..62e9e0e --- /dev/null +++ b/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx @@ -0,0 +1,60 @@ +/** + * 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 React from 'react'; +import { t, SupersetClient } from '@superset-ui/core'; +import { debounce } from 'lodash'; +import withToasts from 'src/messageToasts/enhancers/withToasts'; +import ListViewCard from 'src/components/ListViewCard'; + +class SavedQueries extends React.PureComponent { + constructor(props: Readonly<{}>) { + super(props); + this.state = { + queries: [], + }; + } + componentDidMount(){ + this.fetchData(); + } + fetchData = () => { + try { + const { json } = SupersetClient.get({ + endpoint: `/api/v1/query/`, + }); + this.setState({ queries: json.result }); + } catch (e) { + return console.log(e); + } + }; + render() { + return ( + <div> + {this.state.queries.map(q => ( + <ListViewCard + title={q.database_name} + loading={false} + description={t('Last run ', q.end_time)} + /> + ))} + </div> + ) + } +} + +export default SavedQueries; \ No newline at end of file diff --git a/superset-frontend/src/views/CRUD/welcome/Welcome.tsx b/superset-frontend/src/views/CRUD/welcome/Welcome.tsx index 15d4928..5e311dd 100644 --- a/superset-frontend/src/views/CRUD/welcome/Welcome.tsx +++ b/superset-frontend/src/views/CRUD/welcome/Welcome.tsx @@ -31,6 +31,7 @@ import { useQueryParam, StringParam, QueryParamConfig } from 'use-query-params'; import { User } from 'src/types/bootstrapTypes'; import RecentActivity from 'src/profile/components/RecentActivity'; import Favorites from 'src/profile/components/Favorites'; +import SavedQueries from './SavedQueries'; import DashboardTable from './DashboardTable'; const { Panel } = Collapse; @@ -68,7 +69,7 @@ export default function Welcome({ user }: WelcomeProps) { StringParam, 'all', ); - + const [dashboardFilter, setDashboardFilter] = useState('Favorite'); const [searchQuery, setSearchQuery] = useSyncQueryState( 'search', StringParam, @@ -91,8 +92,9 @@ export default function Welcome({ user }: WelcomeProps) { <Collapse defaultActiveKey={['1']}> <Panel header={t('Recents')} key="1"> <SubMenu - activeChild="Datasets" - name={''} + activeChild="Viewed" + name="" + // eslint-disable-next-line react/no-children-prop children={[ { name: 'Viewed', @@ -115,6 +117,23 @@ export default function Welcome({ user }: WelcomeProps) { </Panel> <Panel header={t('Dashboards')} key="2"> + <SubMenu + activeChild={dashboardFilter} + name="" + // eslint-disable-next-line react/no-children-prop + children={[ + { + name: 'Favorite', + label: t('Favorite'), + onClick: () => setDashboardFilter('Favorite'), + }, + { + name: 'Mine', + label: t('Mine'), + onClick: () => setDashboardFilter('Mine'), + }, + ]} + /> <FormControl type="text" bsSize="sm" @@ -123,11 +142,11 @@ export default function Welcome({ user }: WelcomeProps) { // @ts-ignore React bootstrap types aren't quite right here onChange={e => setSearchQuery(e.currentTarget.value)} /> - <DashboardTable search={searchQuery} /> + <DashboardTable search={searchQuery} filter={dashboardFilter} /> </Panel> <Panel header={t('Saved Queries')} key="3" > - Stuff here! + <SavedQueries /> </Panel> <Panel header={t('Charts')} key="4" > Stuff here!
