Skip to content

Commit

Permalink
feat: enhance node management and dependency list integration
Browse files Browse the repository at this point in the history 
- Introduced a computed property `activeNodesSorted` in the `useNode` hook to provide a sorted list of active nodes, improving data handling and UI representation.
- Updated the `useDependencyList` hook to utilize the new `activeNodesSorted` property, streamlining the rendering of node tags in the dependency list.
- Refactored the node filtering and sorting logic to enhance readability and maintainability.

These changes improve the user experience by providing a more efficient way to manage and display active nodes in the dependency list.
  • Loading branch information
Marvin Zhang committed Dec 30, 2024
1 parent 7aaed0f commit 4e73858
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 83 deletions.
13 changes: 13 additions & 0 deletions src/components/core/node/useNode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Store } from 'vuex';
import useForm from '@/components/ui/form/useForm';
import useNodeService from '@/services/node/nodeService';
import { getDefaultFormComponentData } from '@/utils/form';
import { computed } from 'vue';

type Node = CNode;

Expand All @@ -11,13 +12,25 @@ const formComponentData = getDefaultFormComponentData<Node>();
const useNode = (store: Store<RootStoreState>) => {
// store
const ns = 'node';
const { node: state } = store.state;

// form rules
const formRules: FormRules = {};

const activeNodesSorted = computed(() => {
return state.allList
.filter(n => n.active)
.sort((a, b) => {
if (a.is_master) return -1;
if (b.is_master) return 1;
return a.name!.localeCompare(b.name!);
});
});

return {
...useForm<Node>(ns, store, useNodeService(store), formComponentData),
formRules,
activeNodesSorted,
};
};

Expand Down
162 changes: 79 additions & 83 deletions src/views/dependency/list/useDependencyList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,14 @@ import {
ClNavLink,
ClNodeTag,
ClTag,
useNode,
} from '@/components';
import {
getNormalizedDependencies,
getRepoExternalPath,
getRepoName,
} from '@/utils/dependency';
import { TagProps } from '@/components/ui/tag/types';
import type { TagProps } from '@/components/ui/tag/types';

const t = translate;

Expand All @@ -51,6 +52,8 @@ const useDependencyList = () => {
const store = getStore();
const { dependency: state, node: nodeState } = store.state as RootStoreState;

const { activeNodesSorted } = useNode(store);

const navActions = computed<ListActionGroup[]>(() => [
{
action: ACTION_FILTER,
Expand Down Expand Up @@ -388,98 +391,91 @@ const useDependencyList = () => {
icon: ['fa', 'server'],
width: '580',
value: (row: DependencyRepo) => {
return nodeState.allList
.sort((a, b) =>
a.is_master ? -1 : (a.name || '').localeCompare(b.name || '')
)
.filter(n => n.active)
.map(node => {
const dep = row.dependencies?.find(
dep => dep.node_id === node._id
);
if (!dep) return;
return (
<ClNodeTag
node={node}
loading={isLoading(dep)}
hit={isLoading(dep)}
type={getTypeByDep(dep)}
clickable
onClick={() => {
store.commit(`${ns}/setActiveTargetId`, dep._id);
store.commit(`${ns}/showDialog`, 'logs');
}}
>
{{
'extra-items': () => {
let color: string;
switch (dep.status) {
case 'installing':
case 'uninstalling':
color = 'var(--cl-warning-color)';
break;
case 'installed':
case 'uninstalled':
color = 'var(--cl-success-color)';
break;
case 'error':
case 'abnormal':
color = 'var(--cl-danger-color)';
break;
default:
color = 'inherit';
}
return (
<div class="tooltip-wrapper">
<div class="tooltip-title">
<label>{t('views.env.deps.label')}</label>
</div>
return activeNodesSorted.value.map(node => {
const dep = row.dependencies?.find(
dep => dep.node_id === node._id
);
if (!dep) return;
return (
<ClNodeTag
key={node._id}
node={node}
loading={isLoading(dep)}
hit={isLoading(dep)}
type={getTypeByDep(dep)}
clickable
onClick={() => {
store.commit(`${ns}/setActiveTargetId`, dep._id);
store.commit(`${ns}/showDialog`, 'logs');
}}
>
{{
'extra-items': () => {
let color: string;
switch (dep.status) {
case 'installing':
case 'uninstalling':
color = 'var(--cl-warning-color)';
break;
case 'installed':
case 'uninstalled':
color = 'var(--cl-success-color)';
break;
case 'error':
case 'abnormal':
color = 'var(--cl-danger-color)';
break;
default:
color = 'inherit';
}
return (
<div class="tooltip-wrapper">
<div class="tooltip-title">
<label>{t('views.env.deps.label')}</label>
</div>
<div class="tooltip-item">
<label>
{t('views.env.deps.dependency.form.status')}:
</label>
<span
style={{
color,
}}
>
{t(
`views.env.deps.dependency.status.${dep.status}`
)}
</span>
</div>
{dep.error && (
<div class="tooltip-item">
<label>
{t('views.env.deps.dependency.form.status')}:
{t('views.env.deps.dependency.form.error')}:
</label>
<span
style={{
color,
}}
>
{t(
`views.env.deps.dependency.status.${dep.status}`
)}
{dep.error}
</span>
</div>
{dep.error && (
<div class="tooltip-item">
<label>
{t('views.env.deps.dependency.form.error')}:
</label>
<span
style={{
color,
}}
>
{dep.error}
</span>
</div>
)}
{dep.version && (
<div class="tooltip-item">
<label>
{t(
'views.env.deps.dependency.form.version'
)}
:
</label>
<span>{dep.version}</span>
</div>
)}
</div>
);
},
}}
</ClNodeTag>
);
});
)}
{dep.version && (
<div class="tooltip-item">
<label>
{t('views.env.deps.dependency.form.version')}:
</label>
<span>{dep.version}</span>
</div>
)}
</div>
);
},
}}
</ClNodeTag>
);
});
},
},
{
Expand Down

0 comments on commit 4e73858

Please sign in to comment.