Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a58b6f7

Browse files
AdrinlolNikolayS
authored andcommitted
feat(ui) :disable button when refetching data, add loading boolean; improved Logs view; log filters
1 parent 8d97c74 commit a58b6f7

File tree

13 files changed

+332
-58
lines changed

13 files changed

+332
-58
lines changed

‎ui/packages/shared/pages/Clone/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -306,7 +306,7 @@ export const Clone = observer((props: Props) => {
306306
variant="outlined"
307307
color="secondary"
308308
onClick={reloadClone}
309-
disabled={isDisabledControls}
309+
disabled={isDisabledControls||isReloading}
310310
title={'Refresh clone information'}
311311
className={classes.actionButton}
312312
>

‎ui/packages/shared/pages/Instance/Info/Retrieval/RetrievalModal/index.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { useEffect } from 'react'
2+
13
import { Modal } from '@postgres.ai/shared/components/Modal'
24
import { useStores } from '@postgres.ai/shared/pages/Instance/context'
35
import { ModalReloadButton } from '@postgres.ai/shared/pages/Instance/components/ModalReloadButton'
@@ -21,6 +23,10 @@ export const RetrievalModal = ({
2123
const stores = useStores()
2224
const { isReloadingInstanceRetrieval, reloadInstanceRetrieval } = stores.main
2325

26+
useEffect(() => {
27+
reloadInstanceRetrieval()
28+
},[])
29+
2430
return (
2531
<Modal
2632
title="Retrieval activity details"

‎ui/packages/shared/pages/Instance/components/ModalReloadButton/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export const ModalReloadButton = (props: Props) => {
3535
onClick={props.onReload}
3636
className={classes.content}
3737
isLoading={props.isReloading}
38+
isDisabled={props.isReloading}
3839
>
3940
Reload info
4041
</Button>

‎ui/packages/shared/pages/Instance/index.tsx‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -66,14 +66,19 @@ export const Instance = observer((props: Props) => {
6666
const { instanceId, api } = props
6767

6868
const stores = useCreatedStores(props)
69+
const {
70+
instance,
71+
instanceError,
72+
instanceRetrieval,
73+
load,
74+
isReloadingInstance,
75+
} = stores.main
76+
const isConfigurationActive = instanceRetrieval?.mode !== 'physical'
6977

7078
useEffect(() => {
71-
stores.main.load(instanceId)
79+
load(instanceId)
7280
}, [instanceId])
7381

74-
const { instance, instanceError, instanceRetrieval } = stores.main
75-
const isConfigurationActive = instanceRetrieval?.mode !== 'physical'
76-
7782
useEffect(() => {
7883
if (
7984
instance &&
@@ -110,8 +115,10 @@ export const Instance = observer((props: Props) => {
110115
className={classes.title}
111116
rightContent={
112117
<Button
113-
onClick={() => stores.main.load(props.instanceId)}
114-
isDisabled={!instance && !instanceError}
118+
onClick={() => load(props.instanceId)}
119+
isDisabled={
120+
(!instance && !instanceError) || isReloadingInstance
121+
}
115122
className={classes.reloadButton}
116123
>
117124
Reload info
@@ -165,7 +172,7 @@ export const Instance = observer((props: Props) => {
165172
instance?.state.engine.disableConfigModification
166173
}
167174
switchActiveTab={switchTab}
168-
reload={() => stores.main.load(props.instanceId)}
175+
reload={() => load(props.instanceId)}
169176
/>
170177
)}
171178
</TabPanel>

‎ui/packages/shared/pages/Instance/stores/Main.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ export class MainStore {
6767
readonly snapshots: SnapshotsStore
6868

6969
isReloadingClones = false
70+
isReloadingInstance = false
7071
isReloadingInstanceRetrieval = false
7172

7273
private readonly api: Api
@@ -85,8 +86,10 @@ export class MainStore {
8586

8687
load = (instanceId: string) => {
8788
this.instance = null
89+
this.isReloadingInstance = true
8890
this.loadInstance(instanceId)
8991
this.loadInstanceRetrieval(instanceId).then(() => {
92+
this.isReloadingInstance = false
9093
if (this.instanceRetrieval?.mode !== 'physical') {
9194
this.getConfig()
9295
}

‎ui/packages/shared/pages/Instance/styles.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,13 @@
55
*--------------------------------------------------------------------------
66
*/
77

8-
#logs-container {
8+
#logs-container {
99
margin: 20px 0 0 0;
1010
border: 1px solid #b4b4b4;
1111
border-radius: 4px;
1212
overflow: hidden;
1313
padding: 0.5rem 1rem;
14+
1415
& > p {
1516
font-size: small;
1617
font-family: 'Fira Code', monospace;
@@ -30,8 +31,10 @@
3031
background-color: #fff2e5;
3132
color: #000;
3233
font-weight: 500;
34+
font-size: 11px;
3335
padding: 6px 8px;
3436
border-radius: 4px;
3537
transition: all 40050ms ease;
3638
cursor: pointer;
39+
z-index: 1;
3740
}
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export const PlusIcon = () => (
2+
<svg viewBox="0 0 512 512" focusable="false">
3+
<path
4+
fill="currentColor"
5+
d="M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z"
6+
></path>
7+
</svg>
8+
)
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export const LOGS_NEW_DATA_MESSAGE =
2+
'New data arrived below - scroll down to see it 👇🏻'
3+
4+
export const LAPTOP_WIDTH_PX = 982
5+
export const LOGS_TIME_LIMIT = 20
6+
export const LOGS_LINE_LIMIT = 1000
7+
export const LOGS_ENDPOINT = '/instance/logs'

‎ui/packages/shared/pages/Logs/hooks/useWsScroll.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@ export const useWsScroll = (isLoading: boolean) => {
77

88
useEffect(() => {
99
!isLoading && wsSnackbar(isAtBottom, isNewData)
10-
11-
const contentElement = document.getElementById('content-container')
1210
const targetNode = document.getElementById('logs-container')
1311

1412
const clientAtBottom = (element: HTMLElement) =>
@@ -25,21 +23,20 @@ export const useWsScroll = (isLoading: boolean) => {
2523

2624
const handleInsert = (e: Event | any) => {
2725
if (e.srcElement?.tagName !== 'DIV') {
28-
isAtBottom && targetNode?.scrollIntoView(false)
26+
isAtBottom &&
27+
targetNode?.scroll({
28+
top: targetNode.scrollHeight,
29+
})
2930
setIsNewData(true)
3031
}
3132
}
3233

33-
contentElement?.addEventListener('scroll', handleScroll, false)
34-
contentElement?.addEventListener('DOMNodeInserted', handleInsert, false)
34+
targetNode?.addEventListener('scroll', handleScroll, false)
35+
targetNode?.addEventListener('DOMNodeInserted', handleInsert, false)
3536

3637
return () => {
37-
contentElement?.removeEventListener('scroll', handleScroll, false)
38-
contentElement?.removeEventListener(
39-
'DOMNodeInserted',
40-
handleInsert,
41-
false,
42-
)
38+
targetNode?.removeEventListener('scroll', handleScroll, false)
39+
targetNode?.removeEventListener('DOMNodeInserted', handleInsert, false)
4340
}
4441
}, [isAtBottom, isNewData, isLoading])
4542
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /