Merge pull request #1270 from solliancenet/sc-add-expiration-date-ui-…

…to-agents Add expiration date UI to agents
solliancenet · Jul 25, 2024 · 7240659 · 7240659
2 parents b0ae46e + 58b8477
commit 7240659
Show file tree

Hide file tree

Showing 9 changed files with 81 additions and 13 deletions.
diff --git a/src/ui/ManagementPortal/js/types.ts b/src/ui/ManagementPortal/js/types.ts
@@ -5,6 +5,7 @@ interface ResourceBase {
 	display_name: string;
 	description: string;
 	cost_center: string;
+	expiration_date: string;
 };
 
 export type ResourceProviderGetResult<T> = {

diff --git a/src/ui/ManagementPortal/pages/agents/create.vue b/src/ui/ManagementPortal/pages/agents/create.vue
@@ -490,6 +490,7 @@
 				<template #edit>
 					<div class="step-container__header">Gatekeeper</div>
 
+					<!-- Gatekeeper toggle -->
 					<div class="d-flex align-center mt-2">
 						<span class="step-option__header">Enabled:</span>
 						<span>
@@ -503,6 +504,7 @@
 						</span>
 					</div>
 
+					<!-- Content safety -->
 					<div class="mt-2">
 						<span class="step-option__header">Content Safety:</span>
 						<MultiSelect
@@ -515,6 +517,7 @@
 						/>
 					</div>
 
+					<!-- Data protection -->
 					<div class="mt-2">
 						<span class="step-option__header">Data Protection:</span>
 						<!-- <span>Microsoft Presidio</span> -->
@@ -543,13 +546,25 @@
 				/>
 			</div>
 
+			<!-- Cost center -->
 			<div class="step-header span-2">Would you like to assign this agent to a cost center?</div>
 			<div class="span-2">
 				<InputText
 					v-model="cost_center"
 					placeholder="Enter cost center name"
 					type="text"
-					class="w-50"
+				/>
+			</div>
+
+			<!-- Expiration -->
+			<div class="step-header span-2">Would you like to set an expiration on this agent?</div>
+			<div class="span-2">
+				<Calendar
+					v-model="expirationDate"
+					show-icon
+					show-button-bar
+					placeholder="Enter expiration date"
+					type="text"
 				/>
 			</div>
 
@@ -671,6 +686,7 @@ const getDefaultFormValues = () => {
 		agentType: 'knowledge-management' as CreateAgentRequest['type'],
 
 		cost_center: '',
+		expirationDate: null as string|null,
 
 		editDataSource: false as boolean,
 		selectedDataSource: null as null | AgentDataSource,
@@ -865,7 +881,7 @@ export default {
 			this.dataSources = agentDataSourcesResult.map(result => result.resource);
 			
 			this.loadingStatusText = 'Retrieving external orchestration services...';
-            const externalOrchestrationServicesResult = await api.getExternalOrchestrationServices();
+			const externalOrchestrationServicesResult = await api.getExternalOrchestrationServices();
 			this.externalOrchestratorOptions = externalOrchestrationServicesResult.map(result => result.resource);
 
 			// Update the orchestratorOptions with the externalOrchestratorOptions.
@@ -926,6 +942,7 @@ export default {
 			this.object_id = agent.object_id || this.object_id;
 			this.inline_context = agent.inline_context || this.inline_context;
 			this.cost_center = agent.cost_center || this.cost_center;
+			this.expirationDate = agent.expiration_date ? new Date(agent.expiration_date) : this.expirationDate;
 
 			this.orchestration_settings.orchestrator =
 				agent.orchestration_settings?.orchestrator || this.orchestration_settings.orchestrator;
@@ -1172,6 +1189,7 @@ export default {
 					object_id: this.object_id,
 					inline_context: this.inline_context,
 					cost_center: this.cost_center,
+					expiration_date: this.expirationDate?.toISOString(),
 
 					vectorization: {
 						dedicated_pipeline: this.dedicated_pipeline,

diff --git a/src/ui/ManagementPortal/pages/agents/private.vue b/src/ui/ManagementPortal/pages/agents/private.vue
@@ -47,6 +47,24 @@
 					}"
 				></Column>
 
+				<!-- Expiration -->
+				<Column
+					field="resource.expiration_date"
+					header="Expiration Date"
+					sortable
+					style="min-width: 200px"
+					:pt="{
+						headerCell: {
+							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
+						},
+						sortIcon: { style: { color: 'var(--primary-text)' } },
+					}"
+				>
+					<template #body="{ data }">
+						<span>{{ $filters.formatDate(data.resource.expiration_date) }}</span>
+					</template>
+				</Column>
+
 				<!-- Edit -->
 				<Column
 					header="Edit"

diff --git a/src/ui/ManagementPortal/pages/agents/public.vue b/src/ui/ManagementPortal/pages/agents/public.vue
@@ -47,6 +47,24 @@
 					}"
 				></Column>
 
+				<!-- Expiration -->
+				<Column
+					field="resource.expiration_date"
+					header="Expiration Date"
+					sortable
+					style="min-width: 200px"
+					:pt="{
+						headerCell: {
+							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
+						},
+						sortIcon: { style: { color: 'var(--primary-text)' } },
+					}"
+				>
+					<template #body="{ data }">
+						<span>{{ $filters.formatDate(data.resource.expiration_date) }}</span>
+					</template>
+				</Column>
+
 				<!-- Edit -->
 				<Column
 					header="Edit"

diff --git a/src/ui/ManagementPortal/pages/data-sources/create.vue b/src/ui/ManagementPortal/pages/data-sources/create.vue
@@ -281,7 +281,6 @@
 					v-model="dataSource.cost_center"
 					placeholder="Enter cost center name"
 					type="text"
-					class="w-50"
 				/>
 			</div>
 

diff --git a/src/ui/ManagementPortal/plugins/filters.ts b/src/ui/ManagementPortal/plugins/filters.ts
@@ -31,6 +31,17 @@ const filters = {
 		event.target.value = sanitizedValue;
 		return sanitizedValue;
 	},
+
+	/**
+	 * Formats a date string
+	 *
+	 * @param dateString - The date string to parse.
+	 * @returns A formatted date string or "Never", ex: Thu Aug 15 2024 00:00:00 GMT-0700 (Pacific Daylight Time)
+	 */
+	formatDate(dateString: string) {
+		if (!dateString) return 'Never';
+		return new Date(dateString).toString();
+	},
 };
 
 export default defineNuxtPlugin((nuxtApp) => {

diff --git a/src/ui/ManagementPortal/plugins/primevue.ts b/src/ui/ManagementPortal/plugins/primevue.ts
@@ -1,5 +1,6 @@
 import PrimeVue from 'primevue/config';
 import Button from 'primevue/button';
+import Calendar from 'primevue/calendar';
 import InputText from 'primevue/inputtext';
 import Textarea from 'primevue/textarea';
 import Dialog from 'primevue/dialog';
@@ -23,6 +24,7 @@ import { defineNuxtPlugin } from '#app';
 export default defineNuxtPlugin((nuxtApp) => {
 	nuxtApp.vueApp.use(PrimeVue, { ripple: true });
 	nuxtApp.vueApp.component('Button', Button);
+	nuxtApp.vueApp.component('Calendar', Calendar);
 	nuxtApp.vueApp.component('InputText', InputText);
 	nuxtApp.vueApp.component('Textarea', Textarea);
 	nuxtApp.vueApp.component('Dialog', Dialog);

diff --git a/src/ui/ManagementPortal/server/api/config.ts b/src/ui/ManagementPortal/server/api/config.ts
@@ -15,6 +15,7 @@ const allowedKeys = [
 	'FoundationaLLM:Management:Entra:Scopes',
 	'FoundationaLLM:Management:Entra:CallbackPath',
 
+	'FoundationaLLM:Branding:FavIconUrl',
 	'FoundationaLLM:Branding:LogoUrl',
 	'FoundationaLLM:Branding:LogoText',
 	'FoundationaLLM:Branding:BackgroundColor',

diff --git a/src/ui/ManagementPortal/stores/appConfigStore.ts b/src/ui/ManagementPortal/stores/appConfigStore.ts
@@ -49,14 +49,14 @@ export const useAppConfigStore = defineStore('appConfig', {
 	actions: {
 		async getConfigVariables() {
 			const getConfigValueSafe = async (key: string, defaultValue: any = null) => {
-                try {
-                    return await api.getConfigValue(key);
-                } catch (error) {
-                    console.error(`Failed to get config value for key ${key}:`, error);
-                    return defaultValue;
-                }
-            };
-			
+				try {
+					return await api.getConfigValue(key);
+				} catch (error) {
+					console.error(`Failed to get config value for key ${key}:`, error);
+					return defaultValue;
+				}
+			};
+
 			const [
 				apiUrl,
 				authorizationApiUrl,
@@ -69,7 +69,6 @@ export const useAppConfigStore = defineStore('appConfig', {
 				semanticKernelApiUrl,
 				vectorizationApiUrl,
 				vectorizationWorkerApiUrl,
-				instanceId,
 				favIconUrl,
 				logoUrl,
 				logoText,
@@ -85,6 +84,7 @@ export const useAppConfigStore = defineStore('appConfig', {
 				secondaryButtonBg,
 				secondaryButtonText,
 				footerText,
+				instanceId,
 				authClientId,
 				authInstance,
 				authTenantId,
@@ -118,7 +118,7 @@ export const useAppConfigStore = defineStore('appConfig', {
 				getConfigValueSafe('FoundationaLLM:Branding:SecondaryButtonBackgroundColor', '#70829a'),
 				getConfigValueSafe('FoundationaLLM:Branding:SecondaryButtonTextColor', '#fff'),
 				getConfigValueSafe('FoundationaLLM:Branding:FooterText'),
-				api.getConfigValueSafe('FoundationaLLM:Instance:Id','00000000-0000-0000-0000-000000000000'),
+				getConfigValueSafe('FoundationaLLM:Instance:Id','00000000-0000-0000-0000-000000000000'),
 
 				api.getConfigValue('FoundationaLLM:Management:Entra:ClientId'),
 				api.getConfigValue('FoundationaLLM:Management:Entra:Instance'),