Skip to content

Commit

Permalink
chore: Dataset specific MetadataBar (#23429)
Browse files Browse the repository at this point in the history
Co-authored-by: Michael S. Molina <[email protected]>
  • Loading branch information
kgabryje and michael-s-molina authored Mar 24, 2023
1 parent be2eb31 commit 8c374f3
Show file tree
Hide file tree
Showing 7 changed files with 396 additions and 87 deletions.
5 changes: 3 additions & 2 deletions superset-frontend/.storybook/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,16 @@ module.exports = {
builder: 'webpack5',
},
stories: [
'../src/@(components|common|filters|explore|views|dashboard)/**/*.stories.@(tsx|jsx)',
'../src/@(components|common|filters|explore|views|dashboard)/**/*.*.@(mdx)',
'../src/@(components|common|filters|explore|views|dashboard|features)/**/*.stories.@(tsx|jsx)',
'../src/@(components|common|filters|explore|views|dashboard|features)/**/*.*.@(mdx)',
],
addons: [
'@storybook/addon-essentials',
'@storybook/addon-links',
'storybook-addon-jsx',
'@storybook/addon-knobs',
'storybook-addon-paddings',
'storybook-addon-mock',
],
staticDirs: ['../src/assets/images'],
webpackFinal: config => ({
Expand Down
89 changes: 89 additions & 0 deletions superset-frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions superset-frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -332,6 +332,7 @@
"source-map-support": "^0.5.16",
"speed-measure-webpack-plugin": "^1.5.0",
"storybook-addon-jsx": "^7.3.14",
"storybook-addon-mock": "^3.2.0",
"storybook-addon-paddings": "^4.3.0",
"style-loader": "^3.2.1",
"thread-loader": "^3.0.4",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,23 +17,23 @@
* under the License.
*/
import React, {
useState,
ReactElement,
useCallback,
useEffect,
useMemo,
useCallback,
useRef,
ReactElement,
useState,
} from 'react';
import { useSelector } from 'react-redux';
import {
BinaryQueryObjectFilterClause,
css,
ensureIsArray,
GenericDataType,
JsonObject,
QueryFormData,
t,
useTheme,
QueryFormData,
JsonObject,
GenericDataType,
} from '@superset-ui/core';
import { useResizeDetector } from 'react-resize-detector';
import Loading from 'src/components/Loading';
Expand All @@ -43,16 +43,12 @@ import TimeCell from 'src/components/Table/cell-renderers/TimeCell';
import { EmptyStateMedium } from 'src/components/EmptyState';
import { getDatasourceSamples } from 'src/components/Chart/chartAction';
import Table, { ColumnsType, TableSize } from 'src/components/Table';
import MetadataBar, {
ContentType,
MetadataType,
} from 'src/components/MetadataBar';
import Alert from 'src/components/Alert';
import { useApiV1Resource } from 'src/hooks/apiResources';
import HeaderWithRadioGroup from 'src/components/Table/header-renderers/HeaderWithRadioGroup';
import { ResourceStatus } from 'src/hooks/apiResources/apiResources';
import { useDatasetMetadataBar } from 'src/features/datasets/metadataBar/useDatasetMetadataBar';
import TableControls from './DrillDetailTableControls';
import { getDrillPayload } from './utils';
import { Dataset, ResultsPage } from './types';
import { ResultsPage } from './types';

const PAGE_SIZE = 50;

Expand Down Expand Up @@ -106,6 +102,8 @@ export default function DrillDetailPane({
[formData.datasource],
);

const { metadataBar, status: metadataBarStatus } =
useDatasetMetadataBar(datasourceId);
// Get page of results
const resultsPage = useMemo(() => {
const nextResultsPage = resultsPages.get(pageIndex);
Expand Down Expand Up @@ -261,11 +259,9 @@ export default function DrillDetailPane({
resultsPages,
]);

// Get datasource metadata
const response = useApiV1Resource<Dataset>(`/api/v1/dataset/${datasourceId}`);

const bootstrapping =
(!responseError && !resultsPages.size) || response.status === 'loading';
(!responseError && !resultsPages.size) ||
metadataBarStatus === ResourceStatus.LOADING;

let tableContent = null;
if (responseError) {
Expand Down Expand Up @@ -308,76 +304,9 @@ export default function DrillDetailPane({
);
}

const metadata = useMemo(() => {
const { status, result } = response;
const items: ContentType[] = [];
if (result) {
const {
changed_on_humanized,
created_on_humanized,
description,
table_name,
changed_by,
created_by,
owners,
} = result;
const notAvailable = t('Not available');
const createdBy =
`${created_by?.first_name ?? ''} ${
created_by?.last_name ?? ''
}`.trim() || notAvailable;
const modifiedBy = changed_by
? `${changed_by.first_name} ${changed_by.last_name}`
: notAvailable;
const formattedOwners =
owners.length > 0
? owners.map(owner => `${owner.first_name} ${owner.last_name}`)
: [notAvailable];
items.push({
type: MetadataType.TABLE,
title: table_name,
});
items.push({
type: MetadataType.LAST_MODIFIED,
value: changed_on_humanized,
modifiedBy,
});
items.push({
type: MetadataType.OWNER,
createdBy,
owners: formattedOwners,
createdOn: created_on_humanized,
});
if (description) {
items.push({
type: MetadataType.DESCRIPTION,
value: description,
});
}
}
return (
<div
css={css`
display: flex;
margin-bottom: ${theme.gridUnit * 4}px;
`}
>
{status === 'complete' && (
<MetadataBar items={items} tooltipPlacement="bottom" />
)}
{status === 'error' && (
<Alert
type="error"
message={t('There was an error loading the dataset metadata')}
/>
)}
</div>
);
}, [response, theme.gridUnit]);

return (
<>
{!bootstrapping && metadata}
{!bootstrapping && metadataBar}
{!bootstrapping && (
<TableControls
filters={filters}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
/**
* 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 { useResizeDetector } from 'react-resize-detector';
import { css, SupersetClient } from '@superset-ui/core';
import { useDatasetMetadataBar } from './useDatasetMetadataBar';

export default {
title: 'Design System/Components/MetadataBar/Examples',
parameters: {
mockData: [
{
url: '/api/v1/dataset/1',
method: 'GET',
status: 200,
response: {
result: {
changed_on: '2023-01-26T12:06:58.733316',
changed_on_humanized: 'a month ago',
changed_by: { first_name: 'Han', last_name: 'Solo' },
created_by: { first_name: 'Luke', last_name: 'Skywalker' },
created_on: '2023-01-26T12:06:54.965034',
created_on_humanized: 'a month ago',
table_name: `This is dataset's name`,
owners: [
{ first_name: 'John', last_name: 'Doe' },
{ first_name: 'Luke', last_name: 'Skywalker' },
],
description: 'This is a dataset description',
},
},
},
],
},
};

export const DatasetSpecific = () => {
SupersetClient.reset();
SupersetClient.configure({ csrfToken: '1234' }).init();
const { metadataBar } = useDatasetMetadataBar(1);
const { width, height, ref } = useResizeDetector();
// eslint-disable-next-line no-param-reassign
return (
<div
ref={ref}
css={css`
margin-top: 70px;
margin-left: 80px;
overflow: auto;
min-width: ${168}px;
max-width: ${740}px;
resize: horizontal;
`}
>
{metadataBar}
<span
css={css`
position: absolute;
top: 150px;
left: 115px;
`}
>{`${width}x${height}`}</span>
</div>
);
};

DatasetSpecific.story = {
parameters: {
knobs: {
disable: true,
},
},
};
Loading

0 comments on commit 8c374f3

Please sign in to comment.