Skip to content

Commit

Permalink
Merge pull request #18137 from ahmedhamidawan/invocations_panel
Browse files Browse the repository at this point in the history
Add an Invocations Panel for the Invocations activity
  • Loading branch information
dannon authored May 20, 2024
2 parents 036bf47 + dbb91c8 commit 9843034
Show file tree
Hide file tree
Showing 9 changed files with 408 additions and 26 deletions.
8 changes: 7 additions & 1 deletion client/src/components/ActivityBar/ActivityBar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { type Activity, useActivityStore } from "@/stores/activityStore";
import { useEventStore } from "@/stores/eventStore";
import { useUserStore } from "@/stores/userStore";
import InvocationsPanel from "../Panels/InvocationsPanel.vue";
import VisualizationPanel from "../Panels/VisualizationPanel.vue";
import ActivityItem from "./ActivityItem.vue";
import InteractiveItem from "./Items/InteractiveItem.vue";
Expand Down Expand Up @@ -178,7 +179,11 @@ watch(
:to="activity.to"
@click="onToggleSidebar()" />
<ActivityItem
v-else-if="['admin', 'tools', 'visualizations', 'multiview'].includes(activity.id)"
v-else-if="
['admin', 'tools', 'visualizations', 'multiview', 'invocation'].includes(
activity.id
)
"
:id="`activity-${activity.id}`"
:key="activity.id"
:icon="activity.icon"
Expand Down Expand Up @@ -229,6 +234,7 @@ watch(
</div>
<FlexPanel v-if="isSideBarOpen" side="left" :collapsible="false">
<ToolPanel v-if="isActiveSideBar('tools')" />
<InvocationsPanel v-else-if="isActiveSideBar('invocation')" />
<VisualizationPanel v-else-if="isActiveSideBar('visualizations')" />
<MultiviewPanel v-else-if="isActiveSideBar('multiview')" />
<NotificationsPanel v-else-if="isActiveSideBar('notifications')" />
Expand Down
1 change: 1 addition & 0 deletions client/src/components/Common/Heading.vue
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ const element = computed(() => {
props.bold ? 'font-weight-bold' : '',
props.inline ? 'inline' : '',
collapsible ? 'collapsible' : '',
props.truncate ? 'truncate' : '',
]"
@click="$emit('click')">
<b-button v-if="collapsible" variant="link" size="sm">
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/Grid/configs/invocations.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ type SortKeyLiteral = "create_time" | "update_time" | "None" | null | undefined;
/**
* Request and return invocations from server
*/
async function getData(
export async function getData(
offset: number,
limit: number,
search: string,
Expand Down
18 changes: 18 additions & 0 deletions client/src/components/Panels/InvocationsPanel.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<script setup lang="ts">
import { BAlert } from "bootstrap-vue";
import { storeToRefs } from "pinia";
import { useUserStore } from "@/stores/userStore";
import InvocationScrollList from "../Workflow/Invocation/InvocationScrollList.vue";
import ActivityPanel from "./ActivityPanel.vue";
const { currentUser } = storeToRefs(useUserStore());
</script>

<template>
<ActivityPanel title="Workflow Invocations" go-to-all-title="Go to Invocations List" href="/workflows/invocations">
<InvocationScrollList v-if="currentUser && !currentUser?.isAnonymous" in-panel />
<BAlert v-else variant="info" class="mt-3" show>Please log in to view your Workflow Invocations.</BAlert>
</ActivityPanel>
</template>
42 changes: 20 additions & 22 deletions client/src/components/ToolsList/ScrollToTopButton.vue
Original file line number Diff line number Diff line change
@@ -1,33 +1,31 @@
<template>
<b-button
v-b-tooltip.noninteractive.hover
class="back-to-top"
:class="{ show: offset > 100 }"
title="Scroll To Top"
variant="info"
@click="$emit('click')">
<FontAwesomeIcon icon="fa-chevron-up" />
</b-button>
</template>

<script>
<script setup lang="ts">
import { library } from "@fortawesome/fontawesome-svg-core";
import { faChevronUp } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { BButton } from "bootstrap-vue";
library.add(faChevronUp);
export default {
components: { FontAwesomeIcon },
props: {
offset: {
type: Number,
default: 0,
},
},
};
interface Props {
offset: number;
}
const props = withDefaults(defineProps<Props>(), {
offset: 0,
});
</script>

<template>
<BButton
v-b-tooltip.noninteractive.hover
class="back-to-top"
:class="{ show: props.offset > 100 }"
:title="props.offset > 100 ? 'Scroll To Top' : ''"
variant="info"
@click="$emit('click')">
<FontAwesomeIcon icon="fa-chevron-up" />
</BButton>
</template>

<style lang="scss" scoped>
.back-to-top {
bottom: 0.25rem;
Expand Down
Loading

0 comments on commit 9843034

Please sign in to comment.