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 <[email protected]> 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" />
