[Feat][UI] Set up UI setting component in profile page #11226

lynn-illumio · 2022-08-01T04:05:50Z

Purpose of the pull request

To set up a UI setting component under the profile page as a start point. Pending adding option selector to each setting, such as timer interval option.
Pending data set up in state and POST request to the backend.
This PR related: #11079

Brief change log

Add a util function to define static user settings in use-setting.ts
Add this util function to profile/index.tsx to render an additional sub-page

Verify this pull request

This pull request is code cleanup without any test coverage.

No Unit testing or end-to-end testing is added
It's just a starter PR, and pending work on the data state update / API request part

Screenshot:

Design

Need some drop-down menu user selection, eg., a drop-down menu with a timer option (1s, 2s, 10s, etc) that allow user to select the auto fresh interval.

…profile

…imer to setInterval in refreshLogs function

… setting

lynn-illumio · 2022-09-23T06:11:11Z

Hi @songjianet @EricGao888 . New commits were added to address these features/improvements:

Added UI setting page where user can configure auto refresh time; available in both English and Chinese;

2) Improved the ```getLogs``` function. Previously, we made an async call to get logs too often to confuse users that the log loading took a long time. Now it's been improved;
3) Auto refresh the log when the log result is loading, the user can configure the time interval (10s, 20s, 1 min, etc) on the UI setting page.

…profile

…imer to setInterval in refreshLogs function

… setting

songjianet · 2022-09-23T14:35:47Z

This function has not been perfected, and the 310 has been closed, so I changed this to 320.

songjianet · 2022-09-23T14:36:56Z

…phinscheduler into Lynn/11079-setting-page

devosend

LGTM

Amy0104 · 2022-09-27T02:17:19Z

dolphinscheduler-ui/src/store/logTimer/types.ts

+ * limitations under the License.
+ */
+
+type logTimer = number


It seems to be no need to define the logTimer type here.

Amy0104 · 2022-09-27T02:20:04Z

dolphinscheduler-ui/src/views/projects/task/instance/batch-task.tsx

+              variables.skipLineNum = 0
+              variables.logLoadingRef = true
+              getLogs(row, logTimer)
+            }, logTimer * 1000)


It's better to clear the timer before turning it on.

Can you elaborate on this comment?
I tried clearing the timer by clearTimeout(timeoutID) but it might not be what we want.

If the getLogs function is called multiple times, multiple timers will be running.

That's a great point! Addressed in 7782c5d

Amy0104 · 2022-09-27T02:22:28Z

dolphinscheduler-ui/src/views/projects/task/instance/stream-task.tsx

+              variables.skipLineNum = 0
+              variables.logLoadingRef = true
+              getLogs(row, logTimer)
+            }, logTimer * 1000)


Same as above.

Amy0104 · 2022-09-27T02:23:49Z

dolphinscheduler-ui/src/views/projects/workflow/components/dag/index.tsx

+              nodeVariables.limit += 1000
+              nodeVariables.skipLineNum += 1000
+              getLogs(logTimer)
+            }, logTimer * 1000)


Same as above.

Addressed in fcfe28f.

Amy0104 · 2022-09-27T02:24:57Z

dolphinscheduler-ui/src/views/ui-setting/index.tsx

+const handleUpdateValue = (logTimer: logTimer) => {
+    const logTimerStore = useLogTimerStore()
+    logTimerStore.setLogTimer(logTimer)
+    cookies.set('logTimer', String(logTimer), { path: '/' })


Why set the logTimer into the cookies? Does the backend side need it?

Hi. We might not need this. I will remove it.

We might not need this. Removed in 145bfd4.

…phinscheduler into Lynn/11079-setting-page Merge new dev

Amy0104 · 2022-10-02T12:31:05Z

dolphinscheduler-ui/.env.development

@@ -15,4 +15,4 @@

 NODE_ENV=development

-VITE_APP_DEV_WEB_URL='http://127.0.0.1:12345'
+VITE_APP_DEV_WEB_URL='http://8.142.34.29:12345'


It's better to set to the default ip.

Addressed in 7782c5d.

codecov-commenter · 2022-10-08T05:44:17Z

Codecov Report

Merging #11226 (b9040e7) into dev (25ded1e) will decrease coverage by 0.59%.
The diff coverage is n/a.

@@             Coverage Diff              @@
##                dev   #11226      +/-   ##
============================================
- Coverage     40.30%   39.71%   -0.60%     
+ Complexity     4854     4192     -662     
============================================
  Files           943     1016      +73     
  Lines         37055    38049     +994     
  Branches       4073     4363     +290     
============================================
+ Hits          14935    15110     +175     
- Misses        20612    21193     +581     
- Partials       1508     1746     +238

Impacted Files	Coverage Δ
...olphinscheduler/plugin/task/dvc/DvcParameters.java	`0.00% <0.00%> (-100.00%)`	⬇️
...heduler/plugin/task/jupyter/JupyterParameters.java	`0.00% <0.00%> (-80.00%)`	⬇️
...ler/server/worker/metrics/WorkerServerMetrics.java	`0.00% <0.00%> (-72.92%)`	⬇️
...e/dolphinscheduler/dao/entity/ProcessInstance.java	`0.00% <0.00%> (-65.57%)`	⬇️
...lphinscheduler/dao/entity/ProcessTaskRelation.java	`0.00% <0.00%> (-62.50%)`	⬇️
...ache/dolphinscheduler/dao/entity/K8sNamespace.java	`18.18% <0.00%> (-57.23%)`	⬇️
...scheduler/plugin/task/mlflow/MlflowParameters.java	`18.18% <0.00%> (-56.05%)`	⬇️
...a/org/apache/dolphinscheduler/dao/entity/User.java	`18.18% <0.00%> (-55.96%)`	⬇️
...apache/dolphinscheduler/dao/entity/DataSource.java	`18.18% <0.00%> (-54.99%)`	⬇️
...olphinscheduler/plugin/task/emr/EmrParameters.java	`0.00% <0.00%> (-50.00%)`	⬇️
... and 522 more

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

sonarcloud · 2022-10-08T07:21:09Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
5 Code Smells

No Coverage information
0.0% Duplication

devosend

LGTM

Let's deal with it like this for the time being, we won't be able to release 3.2.0 in the short term, and we will be optimizing it at that time.

songjianet

LGTM

* Set up UI setting component in profile page * Add UI setting page to the route, remove UI setting section from the profile * Add log auto refresh timer store * Add logTimer to pinia store and cookies * Read logTimer from pinia store, and delay getLogs by passing the logTimer to setInterval in refreshLogs function * Add log timer to getLogs * Fine tune view log, add auto refresh based on time interval set in UI setting * Add useI18n to ui setting * Set up UI setting component in profile page * Add UI setting page to the route, remove UI setting section from the profile * Add log auto refresh timer store * Add logTimer to pinia store and cookies * Read logTimer from pinia store, and delay getLogs by passing the logTimer to setInterval in refreshLogs function * Add log timer to getLogs * Fine tune view log, add auto refresh based on time interval set in UI setting * Add useI18n to ui setting * [Feat][UI] Add UI setting page in the project. * [Feat][UI] Add UI setting page in the project. * Remove logTimer in cookies * Clear timer id, set VITE_APP_DEV_WEB_URL back to default * Clear time id in dag * [Feat][UI] Add license header. * [Feat][UI] Remove console. * [Fix][UI] Fix log timer types. Co-authored-by: songjianet <[email protected]>

Set up UI setting component in profile page

5194c1c

lynn-illumio requested review from songjianet and Amy0104 as code owners August 1, 2022 04:05

github-actions bot added the UI ui and front end related label Aug 1, 2022

songjianet assigned lynn-illumio Aug 1, 2022

songjianet added this to the 3.1.0-alpha milestone Aug 1, 2022

songjianet linked an issue Aug 1, 2022 that may be closed by this pull request

[Feature][UI] Provide users with a button to enable auto-refresh #10723

Closed

3 tasks

songjianet added feature new feature don't merge labels Aug 1, 2022

songjianet changed the title ~~Set up UI setting component in profile page~~ [Feat][UI] Set up UI setting component in profile page Aug 1, 2022

lynn-illumio added 4 commits August 6, 2022 17:14

Add UI setting page to the route, remove UI setting section from the …

8b2e871

…profile

Add log auto refresh timer store

a1fd80e

Add logTimer to pinia store and cookies

247ce18

Read logTimer from pinia store, and delay getLogs by passing the logT…

0d49fe4

…imer to setInterval in refreshLogs function

EricGao888 added the first time contributor First-time contributor label Aug 22, 2022

EricGao888 mentioned this pull request Aug 22, 2022

[Improvement][UI] Create a setting page for general UI configuration #11079

Closed

3 tasks

lynn-illumio added 3 commits September 22, 2022 22:15

Add log timer to getLogs

8ee4d52

Fine tune view log, add auto refresh based on time interval set in UI…

2762442

… setting

Add useI18n to ui setting

c23805b

songjianet modified the milestones: 3.1.0, 3.2.0 Sep 23, 2022

lynn-illumio added 8 commits September 23, 2022 21:56

Set up UI setting component in profile page

bf33e7b

Add UI setting page to the route, remove UI setting section from the …

d946012

…profile

Add log auto refresh timer store

de7f9d8

Add logTimer to pinia store and cookies

6114a07

Read logTimer from pinia store, and delay getLogs by passing the logT…

622a240

…imer to setInterval in refreshLogs function

Add log timer to getLogs

1fbce5c

Fine tune view log, add auto refresh based on time interval set in UI…

d6da465

… setting

Add useI18n to ui setting

49c93ab

songjianet force-pushed the Lynn/11079-setting-page branch from c23805b to 49c93ab Compare September 23, 2022 14:32

[Feat][UI] Add UI setting page in the project.

8d95d6e

lynn-illumio and others added 2 commits September 23, 2022 19:53

Merge branch 'Lynn/11079-setting-page' of github.com:lynn-illumio/dol…

49f58da

…phinscheduler into Lynn/11079-setting-page

[Feat][UI] Add UI setting page in the project.

b352a73

devosend previously approved these changes Sep 27, 2022

View reviewed changes

Amy0104 previously requested changes Sep 27, 2022

View reviewed changes

lynn-illumio added 2 commits September 30, 2022 19:23

Remove logTimer in cookies

145bfd4

Merge branch 'Lynn/11079-setting-page' of github.com:lynn-illumio/dol…

a0ad4f2

…phinscheduler into Lynn/11079-setting-page Merge new dev

lynn-illumio dismissed devosend’s stale review via a0ad4f2 October 1, 2022 02:23

Amy0104 reviewed Oct 2, 2022

View reviewed changes

lynn-illumio and others added 3 commits October 2, 2022 21:17

Clear timer id, set VITE_APP_DEV_WEB_URL back to default

7782c5d

Clear time id in dag

fcfe28f

[Feat][UI] Add license header.

0ad6e1b

songjianet added 2 commits October 8, 2022 14:07

[Feat][UI] Remove console.

b9040e7

[Fix][UI] Fix log timer types.

56717ec

devosend approved these changes Oct 8, 2022

View reviewed changes

songjianet approved these changes Oct 8, 2022

View reviewed changes

songjianet merged commit 234f2e8 into apache:dev Oct 8, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feat][UI] Set up UI setting component in profile page #11226

[Feat][UI] Set up UI setting component in profile page #11226

lynn-illumio commented Aug 1, 2022 •

edited

Loading

lynn-illumio commented Sep 23, 2022 •

edited

Loading

songjianet commented Sep 23, 2022

songjianet commented Sep 23, 2022

devosend left a comment

Amy0104 Sep 27, 2022

Amy0104 Sep 27, 2022

lynn-illumio Oct 1, 2022

Amy0104 Oct 2, 2022

lynn-illumio Oct 3, 2022 •

edited

Loading

Amy0104 Sep 27, 2022

Amy0104 Sep 27, 2022

lynn-illumio Oct 3, 2022

Amy0104 Sep 27, 2022

lynn-illumio Oct 1, 2022

lynn-illumio Oct 1, 2022

Amy0104 Oct 2, 2022

lynn-illumio Oct 3, 2022

codecov-commenter commented Oct 8, 2022 •

edited

Loading

sonarcloud bot commented Oct 8, 2022

devosend left a comment

songjianet left a comment

[Feat][UI] Set up UI setting component in profile page #11226

[Feat][UI] Set up UI setting component in profile page #11226

Conversation

lynn-illumio commented Aug 1, 2022 • edited Loading

Purpose of the pull request

Brief change log

Verify this pull request

Screenshot:

Design

lynn-illumio commented Sep 23, 2022 • edited Loading

songjianet commented Sep 23, 2022

songjianet commented Sep 23, 2022

devosend left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lynn-illumio Oct 3, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov-commenter commented Oct 8, 2022 • edited Loading

Codecov Report

sonarcloud bot commented Oct 8, 2022

devosend left a comment

Choose a reason for hiding this comment

songjianet left a comment

Choose a reason for hiding this comment

lynn-illumio commented Aug 1, 2022 •

edited

Loading

lynn-illumio commented Sep 23, 2022 •

edited

Loading

lynn-illumio Oct 3, 2022 •

edited

Loading

codecov-commenter commented Oct 8, 2022 •

edited

Loading