Browse Source
* [Feature][UI Next] Add statistics. * [Feature][UI Next] Add license head.3.0.0/version-upgrade
songjianet
3 years ago
committed by
GitHub
9 changed files with 3558 additions and 2 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,27 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
|
||||||
|
.connections { |
||||||
|
font-size: 100px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
min-height: 160px; |
||||||
|
color: dodgerblue; |
||||||
|
} |
||||||
|
|
||||||
|
|
@ -0,0 +1,101 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
|
||||||
|
import { defineComponent, ref } from 'vue' |
||||||
|
import { NGrid, NGi, NNumberAnimation } from 'naive-ui' |
||||||
|
import { useStatistics } from './use-statistics' |
||||||
|
import { useI18n } from 'vue-i18n' |
||||||
|
import Card from '@/components/card' |
||||||
|
import styles from './index.module.scss' |
||||||
|
import type { TaskQueueRes } from '@/service/modules/projects-analysis/types' |
||||||
|
|
||||||
|
const statistics = defineComponent({ |
||||||
|
name: 'statistics', |
||||||
|
setup() { |
||||||
|
const { t } = useI18n() |
||||||
|
const { getStatistics } = useStatistics() |
||||||
|
const statisticsRef = ref(getStatistics()) |
||||||
|
|
||||||
|
return { t, statisticsRef } |
||||||
|
}, |
||||||
|
render() { |
||||||
|
const { t, statisticsRef } = this |
||||||
|
|
||||||
|
return ( |
||||||
|
<NGrid x-gap='12' y-gap='8' cols='2 xl:4' responsive='screen'> |
||||||
|
<NGi> |
||||||
|
<Card |
||||||
|
title={t( |
||||||
|
'monitor.statistics.command_number_of_waiting_for_running' |
||||||
|
)} |
||||||
|
> |
||||||
|
<div class={styles.connections}> |
||||||
|
{statisticsRef.command.length > 0 && ( |
||||||
|
<NNumberAnimation |
||||||
|
from={0} |
||||||
|
to={statisticsRef.command |
||||||
|
.map((item) => item.normalCount) |
||||||
|
.reduce((prev, next) => prev + next)} |
||||||
|
/> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</Card> |
||||||
|
</NGi> |
||||||
|
<NGi> |
||||||
|
<Card title={t('monitor.statistics.failure_command_number')}> |
||||||
|
<div class={styles.connections}> |
||||||
|
{statisticsRef.command.length > 0 && ( |
||||||
|
<NNumberAnimation |
||||||
|
from={0} |
||||||
|
to={statisticsRef.command |
||||||
|
.map((item) => item.errorCount) |
||||||
|
.reduce((prev, next) => prev + next)} |
||||||
|
/> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</Card> |
||||||
|
</NGi> |
||||||
|
<NGi> |
||||||
|
<Card title={t('monitor.statistics.tasks_number_of_waiting_running')}> |
||||||
|
<div class={styles.connections}> |
||||||
|
{Object.keys(statisticsRef.task).length > 0 && ( |
||||||
|
<NNumberAnimation |
||||||
|
from={0} |
||||||
|
to={(statisticsRef.task as TaskQueueRes).taskQueue} |
||||||
|
/> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</Card> |
||||||
|
</NGi> |
||||||
|
<NGi> |
||||||
|
<Card title={t('monitor.statistics.task_number_of_ready_to_kill')}> |
||||||
|
<div class={styles.connections}> |
||||||
|
{Object.keys(statisticsRef.task).length > 0 && ( |
||||||
|
<NNumberAnimation |
||||||
|
from={0} |
||||||
|
to={(statisticsRef.task as TaskQueueRes).taskKill} |
||||||
|
/> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</Card> |
||||||
|
</NGi> |
||||||
|
</NGrid> |
||||||
|
) |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
export default statistics |
@ -0,0 +1,47 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
|
||||||
|
import { |
||||||
|
countQueueState, |
||||||
|
countCommandState, |
||||||
|
} from '@/service/modules/projects-analysis' |
||||||
|
import { useAsyncState } from '@vueuse/core' |
||||||
|
import type { Ref } from 'vue' |
||||||
|
import type { |
||||||
|
TaskQueueRes, |
||||||
|
CommandStateRes, |
||||||
|
} from '@/service/modules/projects-analysis/types' |
||||||
|
|
||||||
|
export function useStatistics() { |
||||||
|
const getTask = () => { |
||||||
|
const { state } = useAsyncState(countQueueState(), {}) |
||||||
|
return state |
||||||
|
} |
||||||
|
|
||||||
|
const getCommand = () => { |
||||||
|
const { state } = useAsyncState(countCommandState(), []) |
||||||
|
return state |
||||||
|
} |
||||||
|
|
||||||
|
const getStatistics = () => { |
||||||
|
const task: Ref<TaskQueueRes | {}> = getTask() |
||||||
|
const command: Ref<Array<CommandStateRes>> = getCommand() |
||||||
|
return { task, command } |
||||||
|
} |
||||||
|
|
||||||
|
return { getStatistics } |
||||||
|
} |
Loading…
Reference in new issue