apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Explore: Rename RichHistoryCard for clarity and consistency (#78358)

Browse Source 
Rename for clarity and consistency
pull/78407/head
Haris Rozajac 2 years ago committed by GitHub
parent 3e5dfa2d02
commit 499915ff9a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 64 additions and 61 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 38
      public/app/features/explore/RichHistory/RichHistoryCard.test.tsx
  2. 83
      public/app/features/explore/RichHistory/RichHistoryCard.tsx
  3. 2
      public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
  4. 2
      public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx

38
public/app/features/explore/RichHistory/RichHistoryCard.test.tsx
Unescape View File

@ -106,7 +106,7 @@ interface MockQuery extends DataQuery {
const setup = (propOverrides?: Partial<Props<MockQuery>>) => {
const props: Props<MockQuery> = {
query: {
queryHistoryItem: {
id: '1',
createdAt: 1,
datasourceUid: 'loki',
@ -170,7 +170,7 @@ describe('RichHistoryCard', () => {
it('should render "Data source does not exist anymore" if removed data source', async () => {
setup({
query: {
queryHistoryItem: {
id: '2',
createdAt: 1,
datasourceUid: 'non-existent DS',
@ -191,7 +191,7 @@ describe('RichHistoryCard', () => {
describe('copy queries to clipboard', () => {
it('should copy query model to clipboard when copying a query from a non existent datasource', async () => {
setup({
query: {
queryHistoryItem: {
id: '2',
createdAt: 1,
datasourceUid: 'non-existent DS',
@ -210,7 +210,7 @@ describe('RichHistoryCard', () => {
it('should copy query model to clipboard when copying a query from a datasource that does not implement getQueryDisplayText', async () => {
setup({
query: {
queryHistoryItem: {
id: '2',
createdAt: 1,
datasourceUid: 'loki',
@ -229,7 +229,7 @@ describe('RichHistoryCard', () => {
it('should copy query text to clipboard when copying a query from a datasource that implements getQueryDisplayText', async () => {
setup({
query: {
queryHistoryItem: {
id: '2',
createdAt: 1,
datasourceUid: 'prometheus',
@ -248,7 +248,7 @@ describe('RichHistoryCard', () => {
it('should use each datasource getQueryDisplayText when copying queries', async () => {
setup({
query: {
queryHistoryItem: {
id: '2',
createdAt: 1,
datasourceUid: 'mixed',
@ -280,7 +280,7 @@ describe('RichHistoryCard', () => {
setup({
setQueries,
changeDatasource,
query: {
queryHistoryItem: {
id: '2',
createdAt: 1,
datasourceUid: 'mixed',
@ -305,7 +305,7 @@ describe('RichHistoryCard', () => {
setup({
setQueries,
changeDatasource,
query: {
queryHistoryItem: {
id: '2',
createdAt: 1,
datasourceUid: 'nonexistent-ds',
@ -330,7 +330,7 @@ describe('RichHistoryCard', () => {
setup({
setQueries,
changeDatasource,
query: {
queryHistoryItem: {
id: '2',
createdAt: 1,
datasourceUid: 'loki',
@ -358,7 +358,7 @@ describe('RichHistoryCard', () => {
setup({
setQueries,
changeDatasource,
query: {
queryHistoryItem: {
id: '2',
createdAt: 1,
datasourceUid: 'mixed',
@ -381,13 +381,13 @@ describe('RichHistoryCard', () => {
describe('commenting', () => {
it('should render comment, if comment present', async () => {
setup({ query: starredQueryWithComment });
setup({ queryHistoryItem: starredQueryWithComment });
const queryComment = await screen.findByLabelText('Query comment');
expect(queryComment).toBeInTheDocument();
expect(queryComment).toHaveTextContent('test comment');
});
it('should have title "Edit comment" at comment icon, if comment present', async () => {
setup({ query: starredQueryWithComment });
setup({ queryHistoryItem: starredQueryWithComment });
const editComment = await screen.findByLabelText('Edit comment');
const addComment = screen.queryByTitle('Add comment');
expect(editComment).toBeInTheDocument();
@ -401,14 +401,14 @@ describe('RichHistoryCard', () => {
expect(editComment).not.toBeInTheDocument();
});
it('should open update comment form when edit comment button clicked', async () => {
setup({ query: starredQueryWithComment });
setup({ queryHistoryItem: starredQueryWithComment });
const editComment = await screen.findByLabelText('Edit comment');
await userEvent.click(editComment);
const updateCommentForm = await screen.findByLabelText('Update comment form');
expect(updateCommentForm).toBeInTheDocument();
});
it('should close update comment form when escape key pressed', async () => {
setup({ query: starredQueryWithComment });
setup({ queryHistoryItem: starredQueryWithComment });
const editComment = await screen.findByLabelText('Edit comment');
await userEvent.click(editComment);
const updateCommentForm = await screen.findByLabelText('Update comment form');
@ -420,7 +420,7 @@ describe('RichHistoryCard', () => {
expect(findCommentForm).not.toBeInTheDocument();
});
it('should close update comment form when enter and shift keys pressed', async () => {
setup({ query: starredQueryWithComment });
setup({ queryHistoryItem: starredQueryWithComment });
const editComment = await screen.findByLabelText('Edit comment');
await userEvent.click(editComment);
const updateCommentForm = await screen.findByLabelText('Update comment form');
@ -433,7 +433,7 @@ describe('RichHistoryCard', () => {
expect(findCommentForm).not.toBeInTheDocument();
});
it('should close update comment form when enter and ctrl keys pressed', async () => {
setup({ query: starredQueryWithComment });
setup({ queryHistoryItem: starredQueryWithComment });
const editComment = await screen.findByLabelText('Edit comment');
await userEvent.click(editComment);
const updateCommentForm = await screen.findByLabelText('Update comment form');
@ -446,7 +446,7 @@ describe('RichHistoryCard', () => {
expect(findCommentForm).not.toBeInTheDocument();
});
it('should not close update comment form when enter key pressed', async () => {
setup({ query: starredQueryWithComment });
setup({ queryHistoryItem: starredQueryWithComment });
const editComment = await screen.findByLabelText('Edit comment');
await userEvent.click(editComment);
const updateCommentForm = await screen.findByLabelText('Update comment form');
@ -469,7 +469,7 @@ describe('RichHistoryCard', () => {
expect(starRichHistoryMock).toBeCalledWith(starredQueryWithComment.id, true);
});
it('should have title "Unstar query", if not starred', async () => {
setup({ query: starredQueryWithComment });
setup({ queryHistoryItem: starredQueryWithComment });
const unstarButton = await screen.findByLabelText('Unstar query');
expect(unstarButton).toBeInTheDocument();
await userEvent.click(unstarButton);
@ -486,7 +486,7 @@ describe('RichHistoryCard', () => {
expect(deleteRichHistoryMock).toBeCalledWith(starredQueryWithComment.id);
});
it('should display modal before deleting if starred', async () => {
setup({ query: starredQueryWithComment });
setup({ queryHistoryItem: starredQueryWithComment });
const deleteButton = await screen.findByLabelText('Delete query');
await userEvent.click(deleteButton);
expect(deleteRichHistoryMock).not.toBeCalled();

83
public/app/features/explore/RichHistory/RichHistoryCard.tsx
Unescape View File

@ -41,7 +41,7 @@ const mapDispatchToProps = {
const connector = connect(mapStateToProps, mapDispatchToProps);
interface OwnProps<T extends DataQuery = DataQuery> {
query: RichHistoryQuery<T>;
queryHistoryItem: RichHistoryQuery<T>;
}
export type Props<T extends DataQuery = DataQuery> = ConnectedProps<typeof connector> & OwnProps<T>;
@ -142,7 +142,7 @@ const getStyles = (theme: GrafanaTheme2) => {
export function RichHistoryCard(props: Props) {
const {
query,
queryHistoryItem,
commentHistoryItem,
starHistoryItem,
deleteHistoryItem,
@ -151,25 +151,26 @@ export function RichHistoryCard(props: Props) {
datasourceInstance,
setQueries,
} = props;
const [activeUpdateComment, setActiveUpdateComment] = useState(false);
const [comment, setComment] = useState<string | undefined>(query.comment);
const { value, loading } = useAsync(async () => {
let dsInstance: DataSourceApi | undefined;
const [comment, setComment] = useState<string | undefined>(queryHistoryItem.comment);
const { value: historyCardData, loading } = useAsync(async () => {
let datasourceInstance: DataSourceApi | undefined;
try {
dsInstance = await getDataSourceSrv().get(query.datasourceUid);
datasourceInstance = await getDataSourceSrv().get(queryHistoryItem.datasourceUid);
} catch (e) {}
return {
dsInstance,
datasourceInstance,
queries: await Promise.all(
query.queries.map(async (query) => {
queryHistoryItem.queries.map(async (query) => {
let datasource;
if (dsInstance?.meta.mixed) {
if (datasourceInstance?.meta.mixed) {
try {
datasource = await getDataSourceSrv().get(query.datasource);
} catch (e) {}
} else {
datasource = dsInstance;
datasource = datasourceInstance;
}
return {
@ -179,15 +180,15 @@ export function RichHistoryCard(props: Props) {
})
),
};
}, [query.datasourceUid, query.queries]);
}, [queryHistoryItem.datasourceUid, queryHistoryItem.queries]);
const styles = useStyles2(getStyles);
const onRunQuery = async () => {
const queriesToRun = query.queries;
const differentDataSource = query.datasourceUid !== datasourceInstance?.uid;
const queriesToRun = queryHistoryItem.queries;
const differentDataSource = queryHistoryItem.datasourceUid !== datasourceInstance?.uid;
if (differentDataSource) {
await changeDatasource(exploreId, query.datasourceUid);
await changeDatasource(exploreId, queryHistoryItem.datasourceUid);
}
setQueries(exploreId, queriesToRun);
@ -198,19 +199,19 @@ export function RichHistoryCard(props: Props) {
};
const onCopyQuery = async () => {
const datasources = [...query.queries.map((q) => q.datasource?.type || 'unknown')];
const datasources = [...queryHistoryItem.queries.map((query) => query.datasource?.type || 'unknown')];
reportInteraction('grafana_explore_query_history_copy_query', {
datasources,
mixed: Boolean(value?.dsInstance?.meta.mixed),
mixed: Boolean(historyCardData?.datasourceInstance?.meta.mixed),
});
if (loading || !value) {
if (loading || !historyCardData) {
return;
}
const queriesText = value.queries
.map((q) => {
return createQueryText(q.query, q.datasource);
const queriesText = historyCardData.queries
.map((query) => {
return createQueryText(query.query, query.datasource);
})
.join('\n');
@ -223,7 +224,7 @@ export function RichHistoryCard(props: Props) {
};
const onCreateShortLink = async () => {
const link = createUrlFromRichHistory(query);
const link = createUrlFromRichHistory(queryHistoryItem);
await createAndCopyShortLink(link);
};
@ -239,7 +240,7 @@ export function RichHistoryCard(props: Props) {
};
// For starred queries, we want confirmation. For non-starred, we don't.
if (query.starred) {
if (queryHistoryItem.starred) {
getAppEvents().publish(
new ShowConfirmModalEvent({
title: t('explore.rich-history-card.delete-query-confirmation-title', 'Delete'),
@ -249,26 +250,26 @@ export function RichHistoryCard(props: Props) {
),
yesText: t('explore.rich-history-card.confirm-delete', 'Delete'),
icon: 'trash-alt',
onConfirm: () => performDelete(query.id),
onConfirm: () => performDelete(queryHistoryItem.id),
})
);
} else {
performDelete(query.id);
performDelete(queryHistoryItem.id);
}
};
const onStarrQuery = () => {
starHistoryItem(query.id, !query.starred);
starHistoryItem(queryHistoryItem.id, !queryHistoryItem.starred);
reportInteraction('grafana_explore_query_history_starred', {
queryHistoryEnabled: config.queryHistoryEnabled,
newValue: !query.starred,
newValue: !queryHistoryItem.starred,
});
};
const toggleActiveUpdateComment = () => setActiveUpdateComment(!activeUpdateComment);
const onUpdateComment = () => {
commentHistoryItem(query.id, comment);
commentHistoryItem(queryHistoryItem.id, comment);
setActiveUpdateComment(false);
reportInteraction('grafana_explore_query_history_commented', {
queryHistoryEnabled: config.queryHistoryEnabled,
@ -277,7 +278,7 @@ export function RichHistoryCard(props: Props) {
const onCancelUpdateComment = () => {
setActiveUpdateComment(false);
setComment(query.comment);
setComment(queryHistoryItem.comment);
};
const onKeyDown = (keyEvent: React.KeyboardEvent) => {
@ -327,7 +328,7 @@ export function RichHistoryCard(props: Props) {
name="comment-alt"
onClick={toggleActiveUpdateComment}
tooltip={
query.comment?.length > 0
queryHistoryItem.comment?.length > 0
? t('explore.rich-history-card.edit-comment-tooltip', 'Edit comment')
: t('explore.rich-history-card.add-comment-tooltip', 'Add comment')
}
@ -337,7 +338,7 @@ export function RichHistoryCard(props: Props) {
onClick={onCopyQuery}
tooltip={t('explore.rich-history-card.copy-query-tooltip', 'Copy query to clipboard')}
/>
{value?.dsInstance && (
{historyCardData?.datasourceInstance && (
<IconButton
name="share-alt"
onClick={onCreateShortLink}
@ -355,11 +356,11 @@ export function RichHistoryCard(props: Props) {
onClick={onDeleteQuery}
/>
<IconButton
name={query.starred ? 'favorite' : 'star'}
iconType={query.starred ? 'mono' : 'default'}
name={queryHistoryItem.starred ? 'favorite' : 'star'}
iconType={queryHistoryItem.starred ? 'mono' : 'default'}
onClick={onStarrQuery}
tooltip={
query.starred
queryHistoryItem.starred
? t('explore.rich-history-card.unstar-query-tooltip', 'Unstar query')
: t('explore.rich-history-card.star-query-tooltip', 'Star query')
}
@ -370,21 +371,21 @@ export function RichHistoryCard(props: Props) {
return (
<div className={styles.queryCard}>
<div className={styles.cardRow}>
<DatasourceInfo dsApi={value?.dsInstance} size="sm" />
<DatasourceInfo dsApi={historyCardData?.datasourceInstance} size="sm" />
{queryActionButtons}
</div>
<div className={cx(styles.cardRow)}>
<div className={styles.queryContainer}>
{value?.queries.map((q, i) => {
return <Query query={q} key={`${q}-${i}`} showDsInfo={value?.dsInstance?.meta.mixed} />;
{historyCardData?.queries.map((q, i) => {
return <Query query={q} key={`${q}-${i}`} showDsInfo={historyCardData?.datasourceInstance?.meta.mixed} />;
})}
{!activeUpdateComment && query.comment && (
{!activeUpdateComment && queryHistoryItem.comment && (
<div
aria-label={t('explore.rich-history-card.query-comment-label', 'Query comment')}
className={styles.comment}
>
{query.comment}
{queryHistoryItem.comment}
</div>
)}
{activeUpdateComment && updateComment}
@ -394,9 +395,11 @@ export function RichHistoryCard(props: Props) {
<Button
variant="secondary"
onClick={onRunQuery}
disabled={!value?.dsInstance || value.queries.some((query) => !query.datasource)}
disabled={
!historyCardData?.datasourceInstance || historyCardData.queries.some((query) => !query.datasource)
}
>
{datasourceInstance?.uid === query.datasourceUid ? (
{datasourceInstance?.uid === queryHistoryItem.datasourceUid ? (
<Trans i18nKey="explore.rich-history-card.run-query-button">Run query</Trans>
) : (
<Trans i18nKey="explore.rich-history-card.switch-datasource-button">

2
public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
Unescape View File

@ -262,7 +262,7 @@ export function RichHistoryQueriesTab(props: RichHistoryQueriesTabProps) {
</span>
</div>
{mappedQueriesToHeadings[heading].map((q) => {
return <RichHistoryCard query={q} key={q.id} exploreId={exploreId} />;
return <RichHistoryCard queryHistoryItem={q} key={q.id} exploreId={exploreId} />;
})}
</div>
);

2
public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
Unescape View File

@ -166,7 +166,7 @@ export function RichHistoryStarredTab(props: RichHistoryStarredTabProps) {
)}
{!loading &&
queries.map((q) => {
return <RichHistoryCard query={q} key={q.id} exploreId={exploreId} />;
return <RichHistoryCard queryHistoryItem={q} key={q.id} exploreId={exploreId} />;
})}
{queries.length && queries.length !== totalQueries ? (
<div>

Write Preview
Loading…
Cancel
Save