From 2f77db0d2c40dc833ed0985057d2f302a2511179 Mon Sep 17 00:00:00 2001
From: Grady Ward <grady.b.ward@gmail.com>
Date: Sat, 20 Jan 2024 13:14:19 -0700
Subject: [PATCH 1/2] Standardizes + Improves Related-Analysis Display

---
 .../analysis/ContextualListView.vue           | 167 ++++++++++++++++++
 frontend/components/analysis/ListView.vue     |  13 +-
 frontend/components/analysis/StatusChip.vue   |  51 ++++++
 frontend/components/portfolio/ListView.vue    |  73 +-------
 .../components/portfolio/group/ListView.vue   |  26 ++-
 frontend/lang/en.json                         |  30 +++-
 6 files changed, 287 insertions(+), 73 deletions(-)
 create mode 100644 frontend/components/analysis/ContextualListView.vue
 create mode 100644 frontend/components/analysis/StatusChip.vue

diff --git a/frontend/components/analysis/ContextualListView.vue b/frontend/components/analysis/ContextualListView.vue
new file mode 100644
index 0000000..50ff7d2
--- /dev/null
+++ b/frontend/components/analysis/ContextualListView.vue
@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { AnalysisType, type Analysis } from '@/openapi/generated/pacta'
+
+const { humanReadableTimeFromStandardString } = useTime()
+const i18n = useI18n()
+const localePath = useLocalePath()
+const { t } = i18n
+const prefix = 'components/analysis/ContextualListView'
+const tt = (s: string) => t(`${prefix}.${s}`)
+
+interface Props {
+  analyses: Analysis[]
+  name: string
+  portfolioId?: string | undefined
+  portfolioGroupId?: string | undefined
+  initiativeId?: string | undefined
+}
+const props = defineProps<Props>()
+
+interface Emits {
+  (e: 'refresh'): void
+}
+const emit = defineEmits<Emits>()
+
+const items = computed(() => props.analyses.map((a) => {
+  let status = tt('Running')
+  let statusBg = 'bg-yellow-200'
+  if (a.completedAt !== undefined) {
+    if (a.failureMessage !== undefined) {
+      status = tt('Failed')
+      statusBg = 'bg-red-400'
+    } else {
+      status = tt('Completed')
+      statusBg = 'bg-green-200'
+    }
+  } else if (new Date().getTime() - new Date(a.createdAt).getTime() > 1000 * 60 * 10) {
+    status = tt('PotentialTimeout')
+    statusBg = 'bg-red-200'
+  }
+  return {
+    ...a,
+    status,
+    statusBg,
+  }
+}))
+const hasAnyAudits = computed(() => items.value.some((a) => a.analysisType === AnalysisType.ANALYSIS_TYPE_AUDIT))
+const hasAnyReports = computed(() => items.value.some((a) => a.analysisType === AnalysisType.ANALYSIS_TYPE_REPORT))
+
+const showPromptToRunAudit = computed(() => {
+  return !hasAnyAudits.value && !hasAnyReports.value
+})
+const showPromptToRunReport = computed(() => {
+  return hasAnyAudits.value && !hasAnyReports.value
+})
+const auditButtonClasses = computed(() => {
+  return !hasAnyAudits.value && !hasAnyReports.value ? '' : 'p-button-outlined'
+})
+const reportButtonClasses = computed(() => {
+  return !hasAnyReports.value && hasAnyAudits.value ? '' : 'p-button-outlined'
+})
+</script>
+
+<template>
+  <div class="flex flex-column gap-2">
+    <PVDataTable
+      :value="items"
+      data-key="id"
+      size="medium"
+      sort-field="createdAt"
+      :sort-order="-1"
+    >
+      <template #empty>
+        <div class="p-3">
+          {{ tt('No Analyses Message') }}
+        </div>
+      </template>
+      <PVColumn
+        field="createdAt"
+        :header="tt('Ran At')"
+      >
+        <template #body="slotProps">
+          {{ humanReadableTimeFromStandardString(slotProps.data.createdAt).value }}
+        </template>
+      </PVColumn>
+      <PVColumn
+        field="status"
+        :header="tt('Status')"
+      >
+        <template #body="slotProps">
+          <AnalysisStatusChip
+            :analysis="slotProps.data"
+          />
+        </template>
+      </PVColumn>
+      <PVColumn
+        field="analysisType"
+        :header="tt('Type')"
+      >
+        <template #body="slotProps">
+          {{ tt(slotProps.data.analysisType) }}
+        </template>
+      </PVColumn>
+      <PVColumn
+        field="name"
+        :header="tt('Name')"
+      />
+      <PVColumn
+        field="Access"
+        :header="tt('Access')"
+      >
+        <template #body="slotProps">
+          <AnalysisAccessButtons
+            class="py-2"
+            :analysis="slotProps.data"
+          />
+        </template>
+      </PVColumn>
+      <PVColumn :header="tt('Details')">
+        <template #body="slotProps">
+          <LinkButton
+            class="p-button-outlined p-button-xs p-button-secondary"
+            icon="pi pi-arrow-right"
+            :to="localePath(`/my-data?tab=a&analyses=${slotProps.data.id}`)"
+          />
+        </template>
+      </PVColumn>
+    </PVDataTable>
+    <PVMessage
+      v-if="showPromptToRunAudit"
+      severity="info"
+      class="m-0"
+      :closable="false"
+    >
+      {{ tt('No Audits Message') }}
+    </PVMessage>
+    <PVMessage
+      v-if="showPromptToRunReport"
+      severity="info"
+      class="m-0"
+      :closable="false"
+    >
+      {{ tt('No Reports Message') }}
+    </PVMessage>
+    <div class="flex gap-2">
+      <AnalysisRunButton
+        :analysis-type="AnalysisType.ANALYSIS_TYPE_AUDIT"
+        :name="props.name"
+        :class="auditButtonClasses"
+        :portfolio-id="props.portfolioId"
+        :portfolio-group-id="props.portfolioGroupId"
+        :initiative-id="props.initiativeId"
+        class="p-button-sm"
+        @started="() => emit('refresh')"
+      />
+      <AnalysisRunButton
+        :analysis-type="AnalysisType.ANALYSIS_TYPE_REPORT"
+        :name="props.name"
+        :class="reportButtonClasses"
+        :portfolio-id="props.portfolioId"
+        :portfolio-group-id="props.portfolioGroupId"
+        :initiative-id="props.initiativeId"
+        class="p-button-sm"
+        @started="() => emit('refresh')"
+      />
+    </div>
+  </div>
+</template>
diff --git a/frontend/components/analysis/ListView.vue b/frontend/components/analysis/ListView.vue
index 227375b..9b18e80 100644
--- a/frontend/components/analysis/ListView.vue
+++ b/frontend/components/analysis/ListView.vue
@@ -71,6 +71,10 @@ const deleteAnalysis = (id: string) => withLoading(
   `${prefix}.deleteAnalysis`,
 )
 const deleteSelected = () => Promise.all([selectedRows.value.map((row) => deleteAnalysis(row.id))]).then(refresh)
+const deleteSpecificAnalysis = async (id: string) => {
+  await deleteAnalysis(id)
+  refresh()
+}
 </script>
 
 <template>
@@ -109,6 +113,13 @@ const deleteSelected = () => Promise.all([selectedRows.value.map((row) => delete
           {{ humanReadableTimeFromStandardString(slotProps.data.currentValue.value.createdAt).value }}
         </template>
       </PVColumn>
+      <PVColumn :header="tt('Status')">
+        <template #body="slotProps">
+          <AnalysisStatusChip
+            :analysis="slotProps.data.currentValue.value"
+          />
+        </template>
+      </PVColumn>
       <PVColumn
         field="currentValue.value.name"
         sortable
@@ -151,7 +162,7 @@ const deleteSelected = () => Promise.all([selectedRows.value.map((row) => delete
               icon="pi pi-trash"
               class="p-button-danger p-button-outlined"
               :label="tt('Delete')"
-              @click="() => deleteAnalysis(slotProps.data.id)"
+              @click="() => deleteSpecificAnalysis(slotProps.data.id)"
             />
             <div v-tooltip.bottom="slotProps.data.saveTooltip">
               <PVButton
diff --git a/frontend/components/analysis/StatusChip.vue b/frontend/components/analysis/StatusChip.vue
new file mode 100644
index 0000000..07fe30a
--- /dev/null
+++ b/frontend/components/analysis/StatusChip.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { type Analysis } from '@/openapi/generated/pacta'
+
+const { t } = useI18n()
+const prefix = 'components/analysis/StatusChip'
+const tt = (s: string) => t(`${prefix}.${s}`)
+
+interface Props {
+  analysis: Analysis
+}
+const props = defineProps<Props>()
+
+const isStale = (a: Analysis): boolean => new Date().getTime() - new Date(a.createdAt).getTime() > 1000 * 60 * 10
+const status = computed(() => {
+  if (props.analysis.completedAt !== undefined) {
+    if (props.analysis.failureMessage !== undefined) {
+      return tt('Failed')
+    } else {
+      return tt('Completed')
+    }
+  }
+  if (isStale(props.analysis)) {
+    return tt('PotentialTimeout')
+  }
+  return tt('Running')
+})
+const bg = computed(() => {
+  if (props.analysis.completedAt !== undefined) {
+    if (props.analysis.failureMessage !== undefined) {
+      return 'bg-red-400'
+    } else {
+      return 'bg-green-200'
+    }
+  }
+  if (isStale(props.analysis)) {
+    return 'bg-red-200'
+  }
+  return 'bg-yellow-200'
+})
+</script>
+
+<template>
+  <div
+    :class="bg"
+    class="p-1 align-self-stretch flex align-items-center justify-content-center border-round-lg"
+  >
+    <span>
+      {{ status }}
+    </span>
+  </div>
+</template>
diff --git a/frontend/components/portfolio/ListView.vue b/frontend/components/portfolio/ListView.vue
index 0a88347..9ddbef9 100644
--- a/frontend/components/portfolio/ListView.vue
+++ b/frontend/components/portfolio/ListView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { portfolioEditor } from '@/lib/editor'
-import { AnalysisType, type Portfolio, type PortfolioGroup, type Initiative, type Analysis } from '@/openapi/generated/pacta'
+import { type Portfolio, type PortfolioGroup, type Initiative, type Analysis } from '@/openapi/generated/pacta'
 import { selectedCountSuffix } from '@/lib/selection'
 
 const {
@@ -211,71 +211,12 @@ const deleteSelected = () => Promise.all([selectedRows.value.map((row) => delete
           <h2 class="mt-5">
             {{ tt('Analysis') }}
           </h2>
-          <PVDataTable
-            :value="slotProps.data.analyses"
-            data-key="id"
-            size="medium"
-            sort-field="createdAt"
-            :sort-order="-1"
-          >
-            <template #empty>
-              <PVMessage severity="info">
-                {{ tt('No Analyses Message') }}
-              </PVMessage>
-            </template>
-            <PVColumn
-              field="createdAt"
-              :header="tt('Created At')"
-            >
-              <template #body="slotProps2">
-                {{ humanReadableTimeFromStandardString(slotProps2.data.createdAt).value }}
-              </template>
-            </PVColumn>
-            <PVColumn
-              field="analysisType"
-              :header="tt('Type')"
-            >
-              <template #body="slotProps2">
-                {{ tt(slotProps2.data.analysisType) }}
-              </template>
-            </PVColumn>
-            <PVColumn
-              field="name"
-              :header="tt('Name')"
-            />
-            <PVColumn
-              field="Access"
-              :header="tt('Access')"
-            >
-              <template #body="slotProps2">
-                <AnalysisAccessButtons
-                  class="py-2"
-                  :analysis="slotProps2.data"
-                />
-              </template>
-            </PVColumn>
-            <PVColumn :header="tt('Details')">
-              <template #body="slotProps2">
-                <LinkButton
-                  class="p-button-outlined p-button-xs p-button-secondary"
-                  icon="pi pi-arrow-right"
-                  :to="localePath(`/my-data?tab=a&analyses=${slotProps2.data.id}`)"
-                />
-              </template>
-            </PVColumn>
-          </PVDataTable>
-          <div class="flex gap-2 pt-2">
-            <AnalysisRunButton
-              :analysis-type="AnalysisType.ANALYSIS_TYPE_AUDIT"
-              :name="slotProps.data.currentValue.value.name"
-              :portfolio-id="slotProps.data.id"
-            />
-            <AnalysisRunButton
-              :analysis-type="AnalysisType.ANALYSIS_TYPE_REPORT"
-              :name="slotProps.data.currentValue.value.name"
-              :portfolio-id="slotProps.data.id"
-            />
-          </div>
+          <AnalysisContextualListView
+            :analyses="slotProps.data.analyses"
+            :name="slotProps.data.currentValue.value.name"
+            :portfolio-id="slotProps.data.id"
+            @refresh="refresh"
+          />
           <h2 class="mt-5">
             {{ tt('Editable Properties') }}
           </h2>
diff --git a/frontend/components/portfolio/group/ListView.vue b/frontend/components/portfolio/group/ListView.vue
index f2db465..a8ebe86 100644
--- a/frontend/components/portfolio/group/ListView.vue
+++ b/frontend/components/portfolio/group/ListView.vue
@@ -36,12 +36,19 @@ const selectedPortfolioGroupIDs = computed({
 
 interface EditorObject extends ReturnType<typeof portfolioGroupEditor> {
   id: string
+  analyses: Analysis[]
 }
 
 const prefix = 'components/portfolio/group/ListView'
 const tt = (s: string) => t(`${prefix}.${s}`)
 
-const editorObjects = computed<EditorObject[]>(() => props.portfolioGroups.map((item) => ({ ...portfolioGroupEditor(item, i18n), id: item.id })))
+const editorObjects = computed<EditorObject[]>(() => props.portfolioGroups.map(
+  (item) => ({
+    ...portfolioGroupEditor(item, i18n),
+    id: item.id,
+    analyses: props.analyses.filter((a) => a.portfolioSnapshot.portfolioGroup?.id === item.id),
+  }),
+))
 
 const expandedRows = useState<EditorObject[]>(`${prefix}.expandedRows`, () => [])
 const selectedRows = computed<EditorObject[]>({
@@ -68,7 +75,11 @@ const saveChanges = (id: string) => {
     () => pactaClient.updatePortfolioGroup(id, eo.changes.value)
       .then(() => pactaClient.findPortfolioGroupById(id))
       .then((portfolio) => {
-        editorObjects.value[index] = { ...portfolioGroupEditor(portfolio, i18n), id }
+        editorObjects.value[index] = {
+          ...portfolioGroupEditor(portfolio, i18n),
+          id,
+          analyses: props.analyses.filter((a) => a.portfolioSnapshot.portfolioGroup?.id === id),
+        }
       }),
     `${prefix}.saveChanges`,
   )
@@ -147,13 +158,22 @@ const editorObjectToIds = (editorObject: EditorObject): string[] => {
       >
         <div class="surface-100 p-3">
           <h2 class="mt-0">
-            Metadata
+            {{ tt('Metadata') }}
           </h2>
           <StandardDebug
             always
             :value="slotProps.data.currentValue.value"
             label="Raw Data"
           />
+          <h2 class="mt-5">
+            {{ tt('Analysis') }}
+          </h2>
+          <AnalysisContextualListView
+            :analyses="slotProps.data.analyses"
+            :name="slotProps.data.currentValue.value.name"
+            :portfolio-group-id="slotProps.data.id"
+            @refresh="() => emit('refresh')"
+          />
           <h2 class="mt-5">
             Editable Properties
           </h2>
diff --git a/frontend/lang/en.json b/frontend/lang/en.json
index 47aebc6..9feec45 100644
--- a/frontend/lang/en.json
+++ b/frontend/lang/en.json
@@ -26,6 +26,28 @@
     "Save Changes": "Save Changes",
     "Refresh": "Refresh"
   },
+  "components/analysis/ContextualListView": { 
+    "Ran At": "Ran At",
+    "Run Audit": "Run Audit",
+    "Run Report": "Run Report",
+    "AnalysisTypeREPORT": "Report",
+    "AnalysisTypeAUDIT": "Audit",
+    "Type": "Type",
+    "Access": "Access",
+    "Analysis": "Analysis",
+    "No Analyses Message": "No analysis of this data has been started.",
+    "Details": "Details",
+    "Name": "Name",
+    "Status": "Status",
+    "No Audits Message": "It is recommened to run an audit to check the quality of your data and its format.",
+    "No Reports Message": "If everything looks good in the audit results, try running a report!"
+  },
+  "components/analysis/StatusChip": {
+    "Running": "Running",
+    "Completed": "Completed",
+    "Failed": "Failed",
+    "PotentialTimeout": "Potential Timeout - hasn't completed despite running for a long time",
+  },
   "components/analysis/ListView": {
     "Created At": "Created At",
     "Details": "Details",
@@ -35,7 +57,8 @@
     "Editable Properties": "Editable Properties",
     "Save Changes": "Save Changes",
     "Refresh": "Refresh",
-    "View": "View"
+    "View": "View",
+    "Status": "Status"
   },
   "components/initiative/Toolbar": {
     "Edit": "Edit",
@@ -167,8 +190,7 @@
     "AnalysisTypeAUDIT": "Audit",
     "Type": "Type",
     "Access": "Access",
-    "Analysis": "Analysis",
-    "No Analyses Message": "It looks like you haven't run any analyses yet - the next step to using the PACTA tool is running an analysis on your portfolio. Click the button below to run an audit or a report.",
+    "Analysis": "Analysis"
   },
   "components/analysis/AccessButtons": {
     "View": "View",
@@ -182,6 +204,8 @@
   },
   "components/portfolio/group/ListView": {
     "Created At": "Created At",
+    "Analysis": "Analysis",
+    "Metadata": "Metadata",
     "Name": "Name",
     "Number of Members": "Number of Members",
     "Save Changes": "Save Changes",

From 93b964e6501852b61fed826c96caa64b309f6a95 Mon Sep 17 00:00:00 2001
From: Grady Ward <grady.b.ward@gmail.com>
Date: Sat, 20 Jan 2024 18:19:59 -0700
Subject: [PATCH 2/2] Addresses Review Comments

---
 .../analysis/ContextualListView.vue           | 28 ++-----------------
 1 file changed, 3 insertions(+), 25 deletions(-)

diff --git a/frontend/components/analysis/ContextualListView.vue b/frontend/components/analysis/ContextualListView.vue
index 50ff7d2..37351c0 100644
--- a/frontend/components/analysis/ContextualListView.vue
+++ b/frontend/components/analysis/ContextualListView.vue
@@ -22,29 +22,8 @@ interface Emits {
 }
 const emit = defineEmits<Emits>()
 
-const items = computed(() => props.analyses.map((a) => {
-  let status = tt('Running')
-  let statusBg = 'bg-yellow-200'
-  if (a.completedAt !== undefined) {
-    if (a.failureMessage !== undefined) {
-      status = tt('Failed')
-      statusBg = 'bg-red-400'
-    } else {
-      status = tt('Completed')
-      statusBg = 'bg-green-200'
-    }
-  } else if (new Date().getTime() - new Date(a.createdAt).getTime() > 1000 * 60 * 10) {
-    status = tt('PotentialTimeout')
-    statusBg = 'bg-red-200'
-  }
-  return {
-    ...a,
-    status,
-    statusBg,
-  }
-}))
-const hasAnyAudits = computed(() => items.value.some((a) => a.analysisType === AnalysisType.ANALYSIS_TYPE_AUDIT))
-const hasAnyReports = computed(() => items.value.some((a) => a.analysisType === AnalysisType.ANALYSIS_TYPE_REPORT))
+const hasAnyAudits = computed(() => props.analyses.some((a) => a.analysisType === AnalysisType.ANALYSIS_TYPE_AUDIT))
+const hasAnyReports = computed(() => props.analyses.some((a) => a.analysisType === AnalysisType.ANALYSIS_TYPE_REPORT))
 
 const showPromptToRunAudit = computed(() => {
   return !hasAnyAudits.value && !hasAnyReports.value
@@ -63,7 +42,7 @@ const reportButtonClasses = computed(() => {
 <template>
   <div class="flex flex-column gap-2">
     <PVDataTable
-      :value="items"
+      :value="props.analyses"
       data-key="id"
       size="medium"
       sort-field="createdAt"
@@ -83,7 +62,6 @@ const reportButtonClasses = computed(() => {
         </template>
       </PVColumn>
       <PVColumn
-        field="status"
         :header="tt('Status')"
       >
         <template #body="slotProps">