-
Notifications
You must be signed in to change notification settings - Fork 8.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Watcher history page: port to react #33047
Merged
pcsanwald
merged 26 commits into
elastic:watcher-port
from
pcsanwald:watch-history-port
Apr 12, 2019
Merged
Changes from 22 commits
Commits
Show all changes
26 commits
Select commit
Hold shift + click to select a range
06d36ec
get react component rendering inside of existing angular watcher page
7a62543
populate status table with basic data
3b7e87f
add watch history component, populate table with data
af4fdc1
format dates and statuses (statii?) better
4821892
fix checkstyle
8c6d422
set up basic flyout panel
a7a0bca
get data appearing on flyout page
80cd29f
get action statii appearing on flyout
df074e2
get execution detail to appear on flyout
d71afb9
get deactivate basic functionality working
6cd819a
get delete button working
b21928b
add time picker to UI
b466ee0
remove outdated todos, fix bug in flyout detail
2f1e2fa
refactor state mgmt into its own component
6863ed2
fix layout of tables
a5f6de1
add watch layout
c7a8cc9
merge from base branch, address conflicts
2f7ceb8
add sentence casing, remove unnecessary import
2b23125
address code review comments
1f5ff2c
Merge branch 'watcher-port' into watch-history-port
4e0bab2
disambiguate i18n keys for messages
9d65367
correct linting errors
a147593
add more specific type
7e6c10a
add update of activation status based on status
073db16
address code review comments
5bb3500
i18n disambiguation
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
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
24 changes: 24 additions & 0 deletions
24
...gins/watcher/public/sections/watch_detail/components/watch_detail/watch_action_status.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,24 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License; | ||
* you may not use this file except in compliance with the Elastic License. | ||
*/ | ||
|
||
import { InjectedIntl, injectI18n } from '@kbn/i18n/react'; | ||
import React from 'react'; | ||
import { EuiIcon } from '@elastic/eui'; | ||
import { WATCH_STATES } from '../../../../../common/constants/watch_states'; | ||
|
||
const WatchActionStatusUi = ({ intl, watchState }: { intl: InjectedIntl; watchState: string }) => { | ||
const stateToIcon: { [key: string]: JSX.Element } = { | ||
[WATCH_STATES.OK]: <EuiIcon type="check" color="green" />, | ||
[WATCH_STATES.DISABLED]: <EuiIcon type="minusInCircle" color="grey" />, | ||
[WATCH_STATES.FIRING]: <EuiIcon type="play" color="primary" />, | ||
[WATCH_STATES.ERROR]: <EuiIcon type="crossInACircleFilled" color="red" />, | ||
[WATCH_STATES.CONFIG_ERROR]: <EuiIcon type="crossInACircleFilled" color="red" />, | ||
}; | ||
|
||
return <div>{stateToIcon[watchState]}</div>; | ||
}; | ||
|
||
export const WatchActionStatus = injectI18n(WatchActionStatusUi); |
102 changes: 102 additions & 0 deletions
102
...s/watcher/public/sections/watch_detail/components/watch_detail/watch_detail_component.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,102 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License; | ||
* you may not use this file except in compliance with the Elastic License. | ||
*/ | ||
|
||
import { | ||
EuiFlexGroup, | ||
EuiFlexItem, | ||
EuiInMemoryTable, | ||
EuiSpacer, | ||
EuiText, | ||
EuiTitle, | ||
} from '@elastic/eui'; | ||
import { i18n } from '@kbn/i18n'; | ||
import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react'; | ||
import React, { Fragment, useEffect, useState } from 'react'; | ||
import { fetchWatchDetail } from '../../../../lib/api'; | ||
import { WatchActionStatus } from './watch_action_status'; | ||
|
||
const WatchDetailUi = ({ intl, watchId }: { intl: InjectedIntl; watchId: string }) => { | ||
const [isWatchesLoading, setIsWatchesLoading] = useState<boolean>(true); | ||
const [actions, setWatchActions] = useState([]); | ||
|
||
const pagination = { | ||
initialPageSize: 10, | ||
pageSizeOptions: [10, 50, 100], | ||
}; | ||
|
||
const columns = [ | ||
{ | ||
field: 'id', | ||
name: i18n.translate('xpack.watcher.sections.watchDetail.watchTable.actionHeader', { | ||
defaultMessage: 'Action', | ||
}), | ||
sortable: true, | ||
truncateText: true, | ||
render: (action: string) => { | ||
return <EuiText>{action}</EuiText>; | ||
}, | ||
}, | ||
{ | ||
field: 'state', | ||
name: i18n.translate('xpack.watcher.sections.watchDetail.watchTable.stateHeader', { | ||
defaultMessage: 'State', | ||
}), | ||
sortable: true, | ||
truncateText: true, | ||
render: (state: string) => { | ||
return ( | ||
<EuiFlexGroup gutterSize="xs" alignItems="center"> | ||
<EuiFlexItem grow={false}> | ||
<WatchActionStatus watchState={state} /> | ||
</EuiFlexItem> | ||
<EuiFlexItem grow={false} className="watchState__message"> | ||
<EuiText>{state}</EuiText> | ||
</EuiFlexItem> | ||
</EuiFlexGroup> | ||
); | ||
}, | ||
}, | ||
]; | ||
const loadWatchActions = async () => { | ||
const loadedWatchActions = await fetchWatchDetail(watchId); | ||
setWatchActions(loadedWatchActions.watchStatus.actionStatuses); | ||
setIsWatchesLoading(false); | ||
}; | ||
useEffect(() => { | ||
loadWatchActions(); | ||
// only run the first time the component loads | ||
}, []); | ||
|
||
return ( | ||
<Fragment> | ||
<EuiTitle size="m"> | ||
<h1> | ||
<FormattedMessage | ||
id="xpack.watcher.sections.watchDetail.header" | ||
defaultMessage="Current status" | ||
/> | ||
</h1> | ||
</EuiTitle> | ||
<EuiSpacer size="s" /> | ||
<EuiInMemoryTable | ||
items={actions} | ||
itemId="id" | ||
columns={columns} | ||
pagination={pagination} | ||
sorting={true} | ||
loading={isWatchesLoading} | ||
message={ | ||
<FormattedMessage | ||
id="xpack.watcher.sections.watchDetail.watchTable.noWatchesMessage" | ||
defaultMessage="No current status" | ||
/> | ||
} | ||
/> | ||
</Fragment> | ||
); | ||
}; | ||
|
||
export const WatchDetail = injectI18n(WatchDetailUi); |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@pcsanwald I think this is something that I'd like to reuse for the advanced watcher pages too. Maybe we should move it under
/watcher/public/components
?Generally speaking, I'm not sure how we want to approach the file structure. However, right now, it seems we have some common components in there already (e.g.,
form_errors.tsx
,delete_watches_modal.tsx
) FYI @bmcconaghyThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yeah seems like a good candidate for moving up to the common components dir.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should we do this after merge, or should I go ahead and do in this PR? I'm fine either way
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
another PR is fine I think