Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | 3x 2x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <template>
<section class="page">
<GnPageHeader title="Actions" kicker="Scripts">
<template #actions>
<GnBadge variant="primary">{{ scriptsStore.totalActions }} scripts</GnBadge>
</template>
</GnPageHeader>
<AppLoadingState v-if="scriptsStore.isLoadingActions" text="Loading actions" />
<AppErrorState
v-else-if="scriptsStore.errorActions"
title="Actions loading failed"
:message="scriptsStore.errorActions.message"
:retry="scriptsStore.loadActions"
/>
<AppEmptyState
v-else-if="scriptsStore.actions.length === 0"
title="No action scripts"
message="No action scripts registered."
/>
<div v-else class="area-grid">
<GnCard
v-for="script in scriptsStore.actions"
:key="script.alias"
:title="script.name"
>
<template #default>
<div v-html="script.icon" class="script-icon" />
<p v-if="script.description">{{ script.description }}</p>
<p>
<GnBadge :variant="script.state === 'enabled' ? 'success' : 'secondary'"
>{{ script.state }}</GnBadge>
<code>{{ script.alias }}</code>
</p>
<small>{{ script.author }}</small>
</template>
<template #footer>
<GnButton
variant="primary"
icon="ph-play"
:loading="scriptsStore.isRunning(script.alias)"
:disabled="script.state !== 'enabled'"
@click="run(script.alias)"
>
Run
</GnButton>
</template>
</GnCard>
</div>
<GnAlert v-if="resultAlert" :variant="resultAlert.variant" class="result-alert">
<strong>{{ resultAlert.title }}</strong>
<p v-if="resultAlert.message">{{ resultAlert.message }}</p>
</GnAlert>
</section>
</template>
<script setup>
import { ref, onMounted, computed } from "vue";
import { useScriptsStore } from "../../../stores/scripts";
import {
GnPageHeader,
GnBadge,
GnCard,
GnButton,
GnAlert,
} from "gnexus-ui-kit/vue";
import AppEmptyState from "../../../components/feedback/AppEmptyState.vue";
import AppErrorState from "../../../components/feedback/AppErrorState.vue";
import AppLoadingState from "../../../components/feedback/AppLoadingState.vue";
const scriptsStore = useScriptsStore();
const resultAlert = ref(null);
const resultAlertComputed = computed(() => {
const r = scriptsStore.lastRunResult;
if (!r) return null;
if (r.ok) {
return {
variant: "success",
title: `Ran ${r.alias}`,
message: r.execTime ? `Exec time: ${r.execTime}` : undefined,
};
}
return {
variant: "danger",
title: `Failed ${r.alias}`,
message: r.error?.message || "Unknown error",
};
});
async function run(alias) {
resultAlert.value = null;
const result = await scriptsStore.runScript(alias);
resultAlert.value = resultAlertComputed.value;
}
onMounted(() => {
scriptsStore.loadActions();
});
</script>
<style scoped>
.script-icon {
font-size: 32px;
margin-bottom: 12px;
}
.result-alert {
margin-top: 24px;
}
</style>
|