mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2025-10-31 10:39:30 +00:00
Added icon for external link (#507)
* Added icon for external link * added externallink to need help options
This commit is contained in:
Sachin Chaurasiya
GitHub
parent
3c390ce825
commit
bdcbcc08c8
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1792" fill="#5523E0"><path d="M1408 928v320q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h704q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-320q0-14 9-23t23-9h64q14 0 23 9t9 23zm384-864v512q0 26-19 45t-45 19-45-19l-176-176-652 652q-10 10-23 10t-23-10l-114-114q-10-10-10-23t10-23l652-652-176-176q-19-19-19-45t19-45 45-19h512q26 0 45 19t19 45z"/></svg>
|
||||
|
After Width: | Height: | Size: 520 B |
@ -106,7 +106,7 @@ const Appbar: React.FC = (): JSX.Element => {
|
||||
),
|
||||
},
|
||||
{
|
||||
name: `Slack Channel`,
|
||||
name: `Slack`,
|
||||
to: 'https://openmetadata.slack.com/join/shared_invite/zt-udl8ris3-Egq~YtJU_yJgJTtROo00dQ#/shared-invite/email',
|
||||
disabled: false,
|
||||
isOpenNewTab: true,
|
||||
@ -252,8 +252,8 @@ const Appbar: React.FC = (): JSX.Element => {
|
||||
<IconDefaultUserProfile
|
||||
className=""
|
||||
style={{
|
||||
height: '24px',
|
||||
width: '24px',
|
||||
height: '22px',
|
||||
width: '22px',
|
||||
borderRadius: '50%',
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import SVGIcons from '../../utils/SvgUtils';
|
||||
import { DropDownListItem, DropDownListProp } from './types';
|
||||
|
||||
const AnchorDropDownList = ({ dropDownList, setIsOpen }: DropDownListProp) => {
|
||||
@ -54,9 +55,37 @@ const AnchorDropDownList = ({ dropDownList, setIsOpen }: DropDownListProp) => {
|
||||
setIsOpen && setIsOpen(false);
|
||||
}}>
|
||||
{item.icon ? (
|
||||
<button className="tw-text-grey-body">{item.name}</button>
|
||||
<button className="tw-text-grey-body">
|
||||
{item.isOpenNewTab ? (
|
||||
<span className="tw-flex">
|
||||
<span className="tw-mr-1">{item.name}</span>
|
||||
<SVGIcons
|
||||
alt="external-link"
|
||||
className="tw-align-middle"
|
||||
icon="external-link"
|
||||
width="12px"
|
||||
/>
|
||||
</span>
|
||||
) : (
|
||||
item.name
|
||||
)}{' '}
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
{item.isOpenNewTab ? (
|
||||
<span className="tw-flex">
|
||||
<span className="tw-mr-1">{item.name}</span>
|
||||
<SVGIcons
|
||||
alt="external-link"
|
||||
className="tw-align-middle"
|
||||
icon="external-link"
|
||||
width="12px"
|
||||
/>
|
||||
</span>
|
||||
) : (
|
||||
item.name
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { AxiosPromise, AxiosResponse } from 'axios';
|
||||
import classNames from 'classnames';
|
||||
import { compare } from 'fast-json-patch';
|
||||
import { isNil } from 'lodash';
|
||||
import { ColumnTags, TableDetail, User } from 'Models';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Link, useParams } from 'react-router-dom';
|
||||
@ -42,7 +41,6 @@ import {
|
||||
getOwnerFromId,
|
||||
getTagsWithoutTier,
|
||||
getTierFromTableTags,
|
||||
getUsagePercentile,
|
||||
} from '../../utils/TableUtils';
|
||||
import { getTagCategories, getTaglist } from '../../utils/TagsUtils';
|
||||
type ChartType = {
|
||||
@ -70,8 +68,8 @@ const MyDashBoardPage = () => {
|
||||
const [activeTab, setActiveTab] = useState<number>(1);
|
||||
const [isEdit, setIsEdit] = useState<boolean>(false);
|
||||
const [charts, setCharts] = useState<ChartType[]>([]);
|
||||
const [usage, setUsage] = useState('');
|
||||
const [weeklyUsageCount, setWeeklyUsageCount] = useState('');
|
||||
// const [usage, setUsage] = useState('');
|
||||
// const [weeklyUsageCount, setWeeklyUsageCount] = useState('');
|
||||
const [slashedDashboardName, setSlashedDashboardName] = useState<
|
||||
TitleBreadcrumbProps['titleLinks']
|
||||
>([]);
|
||||
@ -119,8 +117,8 @@ const MyDashBoardPage = () => {
|
||||
const extraInfo = [
|
||||
{ key: 'Owner', value: owner?.name || '' },
|
||||
{ key: 'Tier', value: tier ? tier.split('.')[1] : '' },
|
||||
{ key: 'Usage', value: usage },
|
||||
{ key: 'Queries', value: `${weeklyUsageCount} past week` },
|
||||
// { key: 'Usage', value: usage },
|
||||
// { key: 'Queries', value: `${weeklyUsageCount} past week` },
|
||||
];
|
||||
const fetchTags = () => {
|
||||
getTagCategories().then((res) => {
|
||||
@ -180,7 +178,7 @@ const MyDashBoardPage = () => {
|
||||
owner,
|
||||
displayName,
|
||||
charts,
|
||||
usageSummary,
|
||||
// usageSummary,
|
||||
} = res.data;
|
||||
setDashboardDetails(res.data);
|
||||
setDashboardId(id);
|
||||
@ -221,17 +219,17 @@ const MyDashBoardPage = () => {
|
||||
}
|
||||
);
|
||||
fetchCharts(charts).then((charts) => setCharts(charts));
|
||||
if (!isNil(usageSummary?.weeklyStats.percentileRank)) {
|
||||
const percentile = getUsagePercentile(
|
||||
usageSummary.weeklyStats.percentileRank
|
||||
);
|
||||
setUsage(percentile);
|
||||
} else {
|
||||
setUsage('--');
|
||||
}
|
||||
setWeeklyUsageCount(
|
||||
usageSummary?.weeklyStats.count.toLocaleString() || '--'
|
||||
);
|
||||
// if (!isNil(usageSummary?.weeklyStats.percentileRank)) {
|
||||
// const percentile = getUsagePercentile(
|
||||
// usageSummary.weeklyStats.percentileRank
|
||||
// );
|
||||
// setUsage(percentile);
|
||||
// } else {
|
||||
// setUsage('--');
|
||||
// }
|
||||
// setWeeklyUsageCount(
|
||||
// usageSummary?.weeklyStats.count.toLocaleString() || '--'
|
||||
// );
|
||||
|
||||
setLoading(false);
|
||||
});
|
||||
@ -480,7 +478,17 @@ const MyDashBoardPage = () => {
|
||||
<Link
|
||||
target="_blank"
|
||||
to={{ pathname: chart.chartUrl }}>
|
||||
<span className="tw-flex">
|
||||
<span className="tw-mr-1">
|
||||
{chart.displayName}
|
||||
</span>
|
||||
<SVGIcons
|
||||
alt="external-link"
|
||||
className="tw-align-middle"
|
||||
icon="external-link"
|
||||
width="12px"
|
||||
/>
|
||||
</span>
|
||||
</Link>
|
||||
</td>
|
||||
<td className="tableBody-cell">
|
||||
|
||||
@ -235,7 +235,17 @@ const ServicePage: FunctionComponent = () => {
|
||||
href={serviceDetails.schemaRegistry}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank">
|
||||
<>
|
||||
<span className="tw-mr-1">
|
||||
{serviceDetails.schemaRegistry}
|
||||
</span>
|
||||
<SVGIcons
|
||||
alt="external-link"
|
||||
className="tw-align-middle"
|
||||
icon="external-link"
|
||||
width="12px"
|
||||
/>
|
||||
</>
|
||||
</a>
|
||||
) : (
|
||||
'--'
|
||||
@ -270,7 +280,17 @@ const ServicePage: FunctionComponent = () => {
|
||||
href={serviceDetails.dashboardUrl}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank">
|
||||
<>
|
||||
<span className="tw-mr-1">
|
||||
{serviceDetails.dashboardUrl}
|
||||
</span>
|
||||
<SVGIcons
|
||||
alt="external-link"
|
||||
className="tw-align-middle"
|
||||
icon="external-link"
|
||||
width="12px"
|
||||
/>
|
||||
</>
|
||||
</a>
|
||||
) : (
|
||||
'--'
|
||||
@ -296,7 +316,17 @@ const ServicePage: FunctionComponent = () => {
|
||||
href={serviceDetails.dashboardUrl}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank">
|
||||
<>
|
||||
<span className="tw-mr-1">
|
||||
{serviceDetails.dashboardUrl}
|
||||
</span>
|
||||
<SVGIcons
|
||||
alt="external-link"
|
||||
className="tw-align-middle"
|
||||
icon="external-link"
|
||||
width="12px"
|
||||
/>
|
||||
</>
|
||||
</a>
|
||||
) : (
|
||||
'--'
|
||||
|
||||
@ -12,6 +12,7 @@ import IconDashboard from '../assets/svg/dashboard.svg';
|
||||
import IconAsstest from '../assets/svg/data-assets.svg';
|
||||
import IconDoc from '../assets/svg/doc.svg';
|
||||
import IconError from '../assets/svg/error.svg';
|
||||
import IconExternalLink from '../assets/svg/external-link.svg';
|
||||
import IconCheckCircle from '../assets/svg/ic-check-circle.svg';
|
||||
import IconDelete from '../assets/svg/ic-delete.svg';
|
||||
import IconDownArrow from '../assets/svg/ic-down-arrow.svg';
|
||||
@ -132,6 +133,7 @@ export const Icons = {
|
||||
DASHBOARD_GREY: 'dashboard-grey',
|
||||
CONFIG: 'icon-config',
|
||||
SLACK: 'slack',
|
||||
EXTERNAL_LINK: 'external-link',
|
||||
};
|
||||
|
||||
const SVGIcons: FunctionComponent<Props> = ({
|
||||
@ -393,6 +395,10 @@ const SVGIcons: FunctionComponent<Props> = ({
|
||||
case Icons.SLACK:
|
||||
IconComponent = IconSlack;
|
||||
|
||||
break;
|
||||
case Icons.EXTERNAL_LINK:
|
||||
IconComponent = IconExternalLink;
|
||||
|
||||
break;
|
||||
|
||||
default:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user