You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampark.apache.org by be...@apache.org on 2024/09/21 08:18:59 UTC
(incubator-streampark) branch spark-ui created (now dc5b67eaf)
This is an automated email from the ASF dual-hosted git repository.
benjobs pushed a change to branch spark-ui
in repository https://gitbox.apache.org/repos/asf/incubator-streampark.git
at dc5b67eaf [Improve] Applications Name rename to Job Name
This branch includes the following new commits:
new e56a61727 [Improve] spark-app dashboard style improvements
new dc5b67eaf [Improve] Applications Name rename to Job Name
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
(incubator-streampark) 01/02: [Improve] spark-app dashboard style improvements
Posted by be...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
benjobs pushed a commit to branch spark-ui
in repository https://gitbox.apache.org/repos/asf/incubator-streampark.git
commit e56a617271e1291ae1e9b70dccd3d9cb17026085
Author: benjobs <be...@apache.org>
AuthorDate: Sat Sep 21 15:59:00 2024 +0800
[Improve] spark-app dashboard style improvements
---
.../src/locales/lang/en/spark/app.ts | 2 +-
.../src/locales/lang/zh-CN/flink/app.ts | 2 +-
.../src/locales/lang/zh-CN/spark/app.ts | 6 +-
.../views/spark/app/components/AppDashboard.vue | 10 +-
.../views/spark/app/components/StatisticCard.vue | 8 +-
.../src/views/spark/app/index.vue | 326 +++++++++++----------
6 files changed, 176 insertions(+), 178 deletions(-)
diff --git a/streampark-console/streampark-console-webapp/src/locales/lang/en/spark/app.ts b/streampark-console/streampark-console-webapp/src/locales/lang/en/spark/app.ts
index 910169e1c..a3d5a22a6 100644
--- a/streampark-console/streampark-console-webapp/src/locales/lang/en/spark/app.ts
+++ b/streampark-console/streampark-console-webapp/src/locales/lang/en/spark/app.ts
@@ -16,7 +16,7 @@
*/
export default {
dashboard: {
- runningTasks: 'Number of Running Applications',
+ runningTasks: 'Running Jobs',
totalTask: 'Total Tasks',
totalStage: 'Total Stages',
completedTask: 'Total Completed Tasks',
diff --git a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/app.ts b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/app.ts
index 55ace86b8..86be877c7 100644
--- a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/app.ts
+++ b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/app.ts
@@ -222,7 +222,7 @@ export default {
availableTaskSlots: '可用的任务槽数',
taskSlots: '任务槽数',
taskManagers: 'Task Managers',
- runningJobs: '运行的作业',
+ runningJobs: '运行中的作业',
totalTask: '总任务',
runningTask: '运行的任务',
jobManagerMemory: 'JobManager内存',
diff --git a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/spark/app.ts b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/spark/app.ts
index feb904442..501ac24fd 100644
--- a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/spark/app.ts
+++ b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/spark/app.ts
@@ -16,13 +16,13 @@
*/
export default {
dashboard: {
- runningTasks: '运行中的应用数',
+ runningTasks: '运行中的作业',
totalTask: 'Task 总数',
totalStage: 'Stage 总数',
- completedTask: '完成的 Task 总数',
+ completedTask: '已进完成的作业数',
completedStage: '完成的 Stage 总数',
memory: '占用的总内存',
- VCore: '占用的总VCores',
+ VCore: '占用的总 VCores',
},
runState: {
added: 'Added',
diff --git a/streampark-console/streampark-console-webapp/src/views/spark/app/components/AppDashboard.vue b/streampark-console/streampark-console-webapp/src/views/spark/app/components/AppDashboard.vue
index 6c9be6b40..0bec2715e 100644
--- a/streampark-console/streampark-console-webapp/src/views/spark/app/components/AppDashboard.vue
+++ b/streampark-console/streampark-console-webapp/src/views/spark/app/components/AppDashboard.vue
@@ -81,14 +81,8 @@
defineExpose({ handleDashboard });
</script>
<template>
- <Row :gutter="24" class="dashboard">
- <Col
- class="gutter-row mt-10px"
- :md="6"
- :xs="24"
- v-for="(value, key) in dashBigScreenMap"
- :key="key"
- >
+ <Row :gutter="24">
+ <Col class="gutter-row" :md="6" :xs="24" v-for="(value, key) in dashBigScreenMap" :key="key">
<StatisticCard
:statisticProps="value.statistics"
:footerList="value.footer"
diff --git a/streampark-console/streampark-console-webapp/src/views/spark/app/components/StatisticCard.vue b/streampark-console/streampark-console-webapp/src/views/spark/app/components/StatisticCard.vue
index 60fd0a244..63e61d2fd 100644
--- a/streampark-console/streampark-console-webapp/src/views/spark/app/components/StatisticCard.vue
+++ b/streampark-console/streampark-console-webapp/src/views/spark/app/components/StatisticCard.vue
@@ -35,15 +35,15 @@
<Statistic
v-bind="statisticProps"
:value-style="{
- color: '#3f8600',
- fontSize: '45px',
+ color: '#52c41a',
+ fontSize: '36px',
fontWeight: 500,
- textShadow: '1px 1px 0 rgba(0,0,0,0.2)',
+ textShadow: '1px 1px 0 rgba(0,0,0,0.1)',
}"
/>
</Card>
<Divider class="def-margin-bottom" />
- <template v-for="(item, index) in footerList" :key="index">
+ <template v-for="(item, index) in footerList" :key="item.field">
<span> {{ item.title }} </span>
<strong class="pl-10px">{{ item.value }}</strong>
<Divider type="vertical" v-if="index !== footerList.length - 1" />
diff --git a/streampark-console/streampark-console-webapp/src/views/spark/app/index.vue b/streampark-console/streampark-console-webapp/src/views/spark/app/index.vue
index d0dd6cb31..ef6c70b34 100644
--- a/streampark-console/streampark-console-webapp/src/views/spark/app/index.vue
+++ b/streampark-console/streampark-console-webapp/src/views/spark/app/index.vue
@@ -255,175 +255,179 @@
<template>
<PageWrapper content-full-height content-class="flex flex-col">
<AppDashboard ref="appDashboardRef" />
- <BasicTable
- @register="registerTable"
- :columns="getAppColumns"
- @resize-column="onTableColumnResize"
- class="app_list table-searchbar flex-1 pt-20px !px-0 flex flex-col"
- >
- <template #tableTitle>
- <div class="flex justify-between" style="width: 100%">
- <Form name="appTableForm" :model="searchRef" layout="inline" class="flex-1 search-bar">
- <Row :gutter="4" class="w-full">
- <Col :span="5">
- <Form.Item>
- <Input
- :placeholder="t('spark.app.searchName')"
- allow-clear
- v-model:value="searchRef.appName"
- @change="() => handleResetReload()"
- @search="() => handleResetReload()"
- />
- </Form.Item>
- </Col>
- <Col :span="4">
- <Form.Item>
- <Select
- :placeholder="t('spark.app.tags')"
- show-search
- allow-clear
- v-model:value="searchRef.tags"
- @change="() => handleResetReload()"
- :options="(tagsOptions || []).map((t: Recordable) => ({ label: t, value: t }))"
- />
- </Form.Item>
- </Col>
- <Col :span="4">
- <Form.Item>
- <Select
- :placeholder="t('spark.app.jobType')"
- show-search
- allow-clear
- v-model:value="searchRef.jobType"
- @change="() => handleResetReload()"
- :options="[
- { label: 'JAR', value: JobTypeEnum.JAR },
- { label: 'SQL', value: JobTypeEnum.SQL },
- ]"
- />
- </Form.Item>
- </Col>
- <Col :span="4">
- <Form.Item>
- <Select
- :placeholder="t('spark.app.owner')"
- show-search
- allow-clear
- v-model:value="searchRef.userId"
- @change="() => handleResetReload()"
- :options="
- (users || []).map((u: Recordable) => ({
- label: u.nickName || u.username,
- value: u.userId,
- }))
- "
- />
- </Form.Item>
- </Col>
- </Row>
- </Form>
- <div v-auth="'app:create'">
- <Button type="primary" @click="() => router.push({ path: '/spark/app/add' })">
- <PlusOutlined />
- {{ t('common.add') }}
- </Button>
+ <div class="flex-1 bg-white mt-15px">
+ <BasicTable
+ @register="registerTable"
+ :columns="getAppColumns"
+ @resize-column="onTableColumnResize"
+ class="app_list !px-0 table-searchbar flex-1 !px-0"
+ >
+ <template #tableTitle>
+ <div class="flex justify-between" style="width: 100%">
+ <Form name="appTableForm" :model="searchRef" layout="inline" class="flex-1 search-bar">
+ <Row :gutter="4" class="w-full">
+ <Col :span="5">
+ <Form.Item>
+ <Input
+ :placeholder="t('spark.app.searchName')"
+ allow-clear
+ v-model:value="searchRef.appName"
+ @change="() => handleResetReload()"
+ @search="() => handleResetReload()"
+ />
+ </Form.Item>
+ </Col>
+ <Col :span="4">
+ <Form.Item>
+ <Select
+ :placeholder="t('spark.app.tags')"
+ show-search
+ allow-clear
+ v-model:value="searchRef.tags"
+ @change="() => handleResetReload()"
+ :options="
+ (tagsOptions || []).map((t: Recordable) => ({ label: t, value: t }))
+ "
+ />
+ </Form.Item>
+ </Col>
+ <Col :span="4">
+ <Form.Item>
+ <Select
+ :placeholder="t('spark.app.jobType')"
+ show-search
+ allow-clear
+ v-model:value="searchRef.jobType"
+ @change="() => handleResetReload()"
+ :options="[
+ { label: 'JAR', value: JobTypeEnum.JAR },
+ { label: 'SQL', value: JobTypeEnum.SQL },
+ ]"
+ />
+ </Form.Item>
+ </Col>
+ <Col :span="4">
+ <Form.Item>
+ <Select
+ :placeholder="t('spark.app.owner')"
+ show-search
+ allow-clear
+ v-model:value="searchRef.userId"
+ @change="() => handleResetReload()"
+ :options="
+ (users || []).map((u: Recordable) => ({
+ label: u.nickName || u.username,
+ value: u.userId,
+ }))
+ "
+ />
+ </Form.Item>
+ </Col>
+ </Row>
+ </Form>
+ <div v-auth="'app:create'">
+ <Button type="primary" @click="() => router.push({ path: '/spark/app/add' })">
+ <PlusOutlined />
+ {{ t('common.add') }}
+ </Button>
+ </div>
</div>
- </div>
- </template>
- <template #bodyCell="{ column, record }">
- <template v-if="column.dataIndex === 'appName'">
- <span class="app_type app_jar" v-if="record['jobType'] == JobTypeEnum.JAR">
- Spark JAR
- </span>
- <span class="app_type app_sql" v-if="record['jobType'] == JobTypeEnum.SQL">
- Spark SQL
- </span>
- <span class="app_type app_py" v-if="record['jobType'] == JobTypeEnum.PYSPARK">
- PySpark
- </span>
- <span
- class="link"
- :class="{
- 'cursor-pointer': [AppStateEnum.RUNNING].includes(record.state),
- }"
- @click="handleJobView(record)"
- >
- <Popover :title="t('common.detailText')">
- <template #content>
- <div class="flex">
- <span class="pr-6px font-bold">{{ t('flink.app.appName') }}:</span>
- <div class="max-w-300px break-words">{{ record.appName }}</div>
- </div>
- <div class="pt-2px">
- <span class="pr-6px font-bold">{{ t('flink.app.jobType') }}:</span>
- <Tag color="blue">
- <span v-if="record['jobType'] == JobTypeEnum.JAR"> Spark JAR </span>
- <span v-if="record['jobType'] == JobTypeEnum.SQL"> Spark SQL </span>
- <span v-if="record['jobType'] == JobTypeEnum.PYSPARK"> PySpark </span>
- </Tag>
- </div>
- <div class="pt-2px flex">
- <span class="pr-6px font-bold">{{ t('common.description') }}:</span>
- <div class="max-w-300px break-words">{{ record.description }}</div>
- </div>
- </template>
- {{ record.appName }}
- </Popover>
- </span>
-
- <template v-if="record['jobType'] == JobTypeEnum.JAR">
- <Badge
- v-if="record.release === ReleaseStateEnum.NEED_CHECK"
- class="build-badge"
- count="NEW"
- :title="t('flink.app.view.recheck')"
- />
- <Badge
- v-else-if="record.release >= ReleaseStateEnum.RELEASING"
- class="build-badge"
- count="NEW"
- :title="t('flink.app.view.changed')"
- />
- </template>
</template>
- <template v-if="column.dataIndex === 'tags'">
- <Tooltip v-if="record.tags" :title="record.tags">
+ <template #bodyCell="{ column, record }">
+ <template v-if="column.dataIndex === 'appName'">
+ <span class="app_type app_jar" v-if="record['jobType'] == JobTypeEnum.JAR">
+ Spark JAR
+ </span>
+ <span class="app_type app_sql" v-if="record['jobType'] == JobTypeEnum.SQL">
+ Spark SQL
+ </span>
+ <span class="app_type app_py" v-if="record['jobType'] == JobTypeEnum.PYSPARK">
+ PySpark
+ </span>
<span
- v-for="(tag, index) in record.tags.split(',')"
- :key="'tag-'.concat(index.toString())"
- class="pl-4px"
+ class="link"
+ :class="{
+ 'cursor-pointer': [AppStateEnum.RUNNING].includes(record.state),
+ }"
+ @click="handleJobView(record)"
>
- <Tag color="blue">{{ tag }}</Tag>
+ <Popover :title="t('common.detailText')">
+ <template #content>
+ <div class="flex">
+ <span class="pr-6px font-bold">{{ t('flink.app.appName') }}:</span>
+ <div class="max-w-300px break-words">{{ record.appName }}</div>
+ </div>
+ <div class="pt-2px">
+ <span class="pr-6px font-bold">{{ t('flink.app.jobType') }}:</span>
+ <Tag color="blue">
+ <span v-if="record['jobType'] == JobTypeEnum.JAR"> Spark JAR </span>
+ <span v-if="record['jobType'] == JobTypeEnum.SQL"> Spark SQL </span>
+ <span v-if="record['jobType'] == JobTypeEnum.PYSPARK"> PySpark </span>
+ </Tag>
+ </div>
+ <div class="pt-2px flex">
+ <span class="pr-6px font-bold">{{ t('common.description') }}:</span>
+ <div class="max-w-300px break-words">{{ record.description }}</div>
+ </div>
+ </template>
+ {{ record.appName }}
+ </Popover>
</span>
- </Tooltip>
- </template>
- <template v-if="column.dataIndex === 'task'">
- <State option="task" :data="record" />
- </template>
- <template v-if="column.dataIndex === 'state'">
- <State option="state" :data="record" :maxTitle="titleLenRef.maxState" />
+
+ <template v-if="record['jobType'] == JobTypeEnum.JAR">
+ <Badge
+ v-if="record.release === ReleaseStateEnum.NEED_CHECK"
+ class="build-badge"
+ count="NEW"
+ :title="t('flink.app.view.recheck')"
+ />
+ <Badge
+ v-else-if="record.release >= ReleaseStateEnum.RELEASING"
+ class="build-badge"
+ count="NEW"
+ :title="t('flink.app.view.changed')"
+ />
+ </template>
+ </template>
+ <template v-if="column.dataIndex === 'tags'">
+ <Tooltip v-if="record.tags" :title="record.tags">
+ <span
+ v-for="(tag, index) in record.tags.split(',')"
+ :key="'tag-'.concat(index.toString())"
+ class="pl-4px"
+ >
+ <Tag color="blue">{{ tag }}</Tag>
+ </span>
+ </Tooltip>
+ </template>
+ <template v-if="column.dataIndex === 'task'">
+ <State option="task" :data="record" />
+ </template>
+ <template v-if="column.dataIndex === 'state'">
+ <State option="state" :data="record" :maxTitle="titleLenRef.maxState" />
+ </template>
+ <template v-if="column.dataIndex === 'release'">
+ <State
+ option="release"
+ :maxTitle="titleLenRef.maxRelease"
+ :title="releaseTitleMap[record.release] || ''"
+ :data="record"
+ />
+ </template>
+ <template v-if="column.dataIndex === 'operation'">
+ <TableAction v-bind="getTableActions(record, currentTablePage)" />
+ </template>
</template>
- <template v-if="column.dataIndex === 'release'">
- <State
- option="release"
- :maxTitle="titleLenRef.maxRelease"
- :title="releaseTitleMap[record.release] || ''"
- :data="record"
+ <template #insertTable="{ tableContainer }">
+ <AppTableResize
+ :table-container="tableContainer"
+ :resize-min="100"
+ v-if="getDataSource()?.length > 0"
+ v-model:left="tableColumnWidth.appName"
/>
</template>
- <template v-if="column.dataIndex === 'operation'">
- <TableAction v-bind="getTableActions(record, currentTablePage)" />
- </template>
- </template>
- <template #insertTable="{ tableContainer }">
- <AppTableResize
- :table-container="tableContainer"
- :resize-min="100"
- v-if="getDataSource()?.length > 0"
- v-model:left="tableColumnWidth.appName"
- />
- </template>
- </BasicTable>
+ </BasicTable>
+ </div>
<!-- <AppStartModal @register="registerStartModal" @update-option="handleOptionApp" /> -->
<!-- <AppStopModal @register="registerStopModal" @update-option="handleOptionApp" /> -->
<AppBuildDrawer @register="registerBuildDrawer" />
(incubator-streampark) 02/02: [Improve] Applications Name rename to Job Name
Posted by be...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
benjobs pushed a commit to branch spark-ui
in repository https://gitbox.apache.org/repos/asf/incubator-streampark.git
commit dc5b67eaf79d66ce2eb373a5a7c62c89f0bd9861
Author: benjobs <be...@apache.org>
AuthorDate: Sat Sep 21 16:18:43 2024 +0800
[Improve] Applications Name rename to Job Name
---
.../streampark-console-webapp/src/locales/lang/en/spark/app.ts | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/streampark-console/streampark-console-webapp/src/locales/lang/en/spark/app.ts b/streampark-console/streampark-console-webapp/src/locales/lang/en/spark/app.ts
index a3d5a22a6..7a02aa2a2 100644
--- a/streampark-console/streampark-console-webapp/src/locales/lang/en/spark/app.ts
+++ b/streampark-console/streampark-console-webapp/src/locales/lang/en/spark/app.ts
@@ -50,9 +50,9 @@ export default {
pending: 'Pending Rollback',
},
id: 'Applications ID',
- appName: 'Applications Name',
- searchName: 'Applications Name',
- tags: 'Applications Tags',
+ appName: 'Job Name',
+ searchName: 'Job Name',
+ tags: 'Tags',
owner: 'Creator',
sparkVersion: 'Spark Version',
duration: 'Runtime',