-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: info and summary tabs for external objects (#493)
- Loading branch information
1 parent
f823378
commit 88d9041
Showing
16 changed files
with
273 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"common.created": "Created", | ||
"common.type": "Type" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import {i18n, Lang} from '../../../utils/i18n'; | ||
|
||
import en from './en.json'; | ||
import ru from './ru.json'; | ||
|
||
const COMPONENT = 'ydb-components-info-viewer'; | ||
|
||
i18n.registerKeyset(Lang.En, COMPONENT, en); | ||
i18n.registerKeyset(Lang.Ru, COMPONENT, ru); | ||
|
||
export default i18n.keyset(COMPONENT); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"common.created": "Создано", | ||
"common.type": "Тип" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 5 additions & 0 deletions
5
src/containers/Tenant/Info/ExternalDataSource/ExternalDataSource.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
.ydb-external-data-source-info { | ||
&__location { | ||
max-width: var(--tenant-object-info-max-value-width); | ||
} | ||
} |
81 changes: 81 additions & 0 deletions
81
src/containers/Tenant/Info/ExternalDataSource/ExternalDataSource.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,81 @@ | ||
import block from 'bem-cn-lite'; | ||
|
||
import type {TEvDescribeSchemeResult} from '../../../../types/api/schema'; | ||
import {useTypedSelector} from '../../../../utils/hooks'; | ||
|
||
import {InfoViewer, InfoViewerItem} from '../../../../components/InfoViewer'; | ||
import {formatCommonItem} from '../../../../components/InfoViewer/formatters'; | ||
import EntityStatus from '../../../../components/EntityStatus/EntityStatus'; | ||
import {ResponseError} from '../../../../components/Errors/ResponseError'; | ||
|
||
import {getEntityName} from '../../utils'; | ||
|
||
import i18n from '../i18n'; | ||
import './ExternalDataSource.scss'; | ||
|
||
const b = block('ydb-external-data-source-info'); | ||
|
||
const prepareExternalDataSourceSummary = (data: TEvDescribeSchemeResult): InfoViewerItem[] => { | ||
return [ | ||
{ | ||
label: i18n('external-objects.source-type'), | ||
value: data.PathDescription?.ExternalDataSourceDescription?.SourceType, | ||
}, | ||
formatCommonItem('CreateStep', data.PathDescription?.Self?.CreateStep), | ||
]; | ||
}; | ||
|
||
const prepareExternalDataSourceInfo = (data: TEvDescribeSchemeResult): InfoViewerItem[] => { | ||
const {Location, Auth} = data.PathDescription?.ExternalDataSourceDescription || {}; | ||
|
||
return [ | ||
...prepareExternalDataSourceSummary(data), | ||
{ | ||
label: i18n('external-objects.location'), | ||
value: ( | ||
<EntityStatus | ||
name={Location} | ||
showStatus={false} | ||
hasClipboardButton | ||
clipboardButtonAlwaysVisible | ||
className={b('location')} | ||
/> | ||
), | ||
}, | ||
{ | ||
label: i18n('external-objects.auth-method'), | ||
value: Auth?.ServiceAccount | ||
? i18n('external-objects.auth-method.service-account') | ||
: i18n('external-objects.auth-method.none'), | ||
}, | ||
]; | ||
}; | ||
|
||
interface ExternalDataSourceProps { | ||
data?: TEvDescribeSchemeResult; | ||
prepareData: (data: TEvDescribeSchemeResult) => InfoViewerItem[]; | ||
} | ||
|
||
const ExternalDataSource = ({data, prepareData}: ExternalDataSourceProps) => { | ||
const entityName = getEntityName(data?.PathDescription); | ||
|
||
const {error: schemaError} = useTypedSelector((state) => state.schema); | ||
|
||
if (schemaError) { | ||
return <ResponseError error={schemaError} />; | ||
} | ||
|
||
if (!data) { | ||
return <div className="error">No {entityName} data</div>; | ||
} | ||
|
||
return <InfoViewer title={entityName} info={prepareData(data)} />; | ||
}; | ||
|
||
export const ExternalDataSourceInfo = ({data}: {data?: TEvDescribeSchemeResult}) => { | ||
return <ExternalDataSource data={data} prepareData={prepareExternalDataSourceInfo} />; | ||
}; | ||
|
||
export const ExternalDataSourceSummary = ({data}: {data?: TEvDescribeSchemeResult}) => { | ||
return <ExternalDataSource data={data} prepareData={prepareExternalDataSourceSummary} />; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
.ydb-external-table-info { | ||
&__location { | ||
max-width: var(--tenant-object-info-max-value-width); | ||
} | ||
} |
103 changes: 103 additions & 0 deletions
103
src/containers/Tenant/Info/ExternalTable/ExternalTable.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,103 @@ | ||
import {useLocation} from 'react-router'; | ||
import block from 'bem-cn-lite'; | ||
|
||
import type {TEvDescribeSchemeResult} from '../../../../types/api/schema'; | ||
import {useTypedSelector} from '../../../../utils/hooks'; | ||
import {createHref, parseQuery} from '../../../../routes'; | ||
import {formatCommonItem} from '../../../../components/InfoViewer/formatters'; | ||
import {InfoViewer, InfoViewerItem} from '../../../../components/InfoViewer'; | ||
import {ExternalLinkWithIcon} from '../../../../components/ExternalLinkWithIcon/ExternalLinkWithIcon'; | ||
import EntityStatus from '../../../../components/EntityStatus/EntityStatus'; | ||
import {ResponseError} from '../../../../components/Errors/ResponseError'; | ||
|
||
import {getEntityName} from '../../utils'; | ||
|
||
import i18n from '../i18n'; | ||
import './ExternalTable.scss'; | ||
|
||
const b = block('ydb-external-table-info'); | ||
|
||
const prepareExternalTableSummary = ( | ||
data: TEvDescribeSchemeResult, | ||
pathToDataSource: string, | ||
): InfoViewerItem[] => { | ||
const {CreateStep} = data.PathDescription?.Self || {}; | ||
const {SourceType, DataSourcePath} = data.PathDescription?.ExternalTableDescription || {}; | ||
|
||
const dataSourceName = DataSourcePath?.split('/').pop(); | ||
|
||
return [ | ||
{label: i18n('external-objects.source-type'), value: SourceType}, | ||
formatCommonItem('CreateStep', CreateStep), | ||
{ | ||
label: i18n('external-objects.data-source'), | ||
value: DataSourcePath && ( | ||
<span title={DataSourcePath}> | ||
<ExternalLinkWithIcon title={dataSourceName || ''} url={pathToDataSource} /> | ||
</span> | ||
), | ||
}, | ||
]; | ||
}; | ||
|
||
const prepareExternalTableInfo = ( | ||
data: TEvDescribeSchemeResult, | ||
pathToDataSource: string, | ||
): InfoViewerItem[] => { | ||
const location = data.PathDescription?.ExternalTableDescription?.Location; | ||
|
||
return [ | ||
...prepareExternalTableSummary(data, pathToDataSource), | ||
{ | ||
label: i18n('external-objects.location'), | ||
value: ( | ||
<EntityStatus | ||
name={location} | ||
showStatus={false} | ||
hasClipboardButton | ||
clipboardButtonAlwaysVisible | ||
className={b('location')} | ||
/> | ||
), | ||
}, | ||
]; | ||
}; | ||
|
||
interface ExternalTableProps { | ||
data?: TEvDescribeSchemeResult; | ||
prepareData: (data: TEvDescribeSchemeResult, pathToDataSource: string) => InfoViewerItem[]; | ||
} | ||
|
||
const ExternalTable = ({data, prepareData}: ExternalTableProps) => { | ||
const location = useLocation(); | ||
const query = parseQuery(location); | ||
|
||
// embedded version could be located in some folder (e.g. host/some_folder/app_router_path) | ||
// window.location has the full pathname, while location from router ignores path to project | ||
const pathToDataSource = createHref(window.location.pathname, undefined, { | ||
...query, | ||
schema: data?.PathDescription?.ExternalTableDescription?.DataSourcePath, | ||
}); | ||
|
||
const entityName = getEntityName(data?.PathDescription); | ||
|
||
const {error: schemaError} = useTypedSelector((state) => state.schema); | ||
|
||
if (schemaError) { | ||
return <ResponseError error={schemaError} />; | ||
} | ||
|
||
if (!data) { | ||
return <div className="error">No {entityName} data</div>; | ||
} | ||
|
||
return <InfoViewer title={entityName} info={prepareData(data, pathToDataSource)} />; | ||
}; | ||
|
||
export const ExternalTableInfo = ({data}: {data?: TEvDescribeSchemeResult}) => { | ||
return <ExternalTable data={data} prepareData={prepareExternalTableInfo} />; | ||
}; | ||
|
||
export const ExternalTableSummary = ({data}: {data?: TEvDescribeSchemeResult}) => { | ||
return <ExternalTable data={data} prepareData={prepareExternalTableSummary} />; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
{ | ||
"external-objects.source-type": "Source Type", | ||
"external-objects.data-source": "Data Source", | ||
"external-objects.location": "Location", | ||
"external-objects.auth-method": "Auth Method", | ||
"external-objects.auth-method.none": "None", | ||
"external-objects.auth-method.service-account": "Service Account" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import {i18n, Lang} from '../../../../utils/i18n'; | ||
|
||
import en from './en.json'; | ||
import ru from './ru.json'; | ||
|
||
const COMPONENT = 'ydb-tenant-objects-info'; | ||
|
||
i18n.registerKeyset(Lang.En, COMPONENT, en); | ||
i18n.registerKeyset(Lang.Ru, COMPONENT, ru); | ||
|
||
export default i18n.keyset(COMPONENT); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
{ | ||
"external-objects.source-type": "Тип источника", | ||
"external-objects.data-source": "Источник", | ||
"external-objects.location": "Расположение", | ||
"external-objects.auth-method": "Авторизация", | ||
"external-objects.auth-method.none": "Нет", | ||
"external-objects.auth-method.service-account": "Сервисный аккаунт" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
:root { | ||
--tenant-object-info-max-value-width: 300px; | ||
} |