Integrating into app overview panel.

4 years ago · d5c98d2bad
8 changed files with 38 additions and 56 deletions
--- a/packages/builder/src/components/deploy/DeployNavigation.svelte
+++ b/packages/builder/src/components/deploy/DeployNavigation.svelte
@ -52,7 +52,7 @@
      reviewPendingDeployments(deployments, newDeployments)
      return newDeployments
    } catch (err) {
-      notifications.error("Error fetching deployment history")
+      notifications.error("Error fetching deployment overview")
    }
  }

--- a/packages/builder/src/components/deploy/DeploymentHistory.svelte
+++ b/packages/builder/src/components/deploy/DeploymentHistory.svelte
@ -55,7 +55,7 @@
      deployments = newDeployments
    } catch (err) {
      clearInterval(poll)
-      notifications.error("Error fetching deployment history")
+      notifications.error("Error fetching deployment overview")
    }
  }

--- a/packages/builder/src/components/portal/overview/HistoryDetailsPanel.svelte
+++ b/packages/builder/src/components/portal/overview/HistoryDetailsPanel.svelte
@ -1,7 +1,7 @@
 <script>
  import { Body, Layout, Icon, ActionButton, Heading } from "@budibase/bbui"
  import { capitalise } from "helpers"
-  import StatusRenderer from "components/portal/history/StatusRenderer.svelte"
+  import StatusRenderer from "components/portal/overview/StatusRenderer.svelte"
  import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
  import FlowItemHeader from "components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte"

--- a/packages/builder/src/components/portal/overview/HistoryTab.svelte
+++ b/packages/builder/src/components/portal/overview/HistoryTab.svelte
@ -1,19 +1,13 @@
 <script>
-  import {
-    Layout,
-    Page,
-    Heading,
-    Body,
-    Table,
-    Select,
-    Input,
-  } from "@budibase/bbui"
+  import { Layout, Table, Select } from "@budibase/bbui"
  import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
-  import StatusRenderer from "components/portal/history/StatusRenderer.svelte"
-  import HistoryDetailsPanel from "components/portal/history/HistoryDetailsPanel.svelte"
+  import StatusRenderer from "./StatusRenderer.svelte"
+  import HistoryDetailsPanel from "./HistoryDetailsPanel.svelte"
  import { automationStore } from "builderStore"
  import { onMount } from "svelte"

+  export let appId
+
  let showPanel = false
  let selectedHistory = null
  let runHistory = []
@ -101,39 +95,30 @@
 </script>

 <div class="root" class:panelOpen={showPanel}>
-  <Page wide>
-    <Layout noPadding gap="S">
-      <Heading size="L">Run History</Heading>
-      <Body>View all the automations your published apps have performed</Body>
-      <div class="search">
-        <div class="select"><Select placeholder="All apps" label="Apps" /></div>
-        <div class="select">
-          <Select placeholder="All automations" label="Automation" />
-        </div>
-        <div class="select">
-          <Select placeholder="Past 30 days" label="Date range" />
-        </div>
-        <div class="select">
-          <Select placeholder="All status" label="Status" />
-        </div>
-        <div class="separator" />
-        <div class="searchInput">
-          <Input placeholder="Search" />
-        </div>
+  <Layout paddingX="XL" gap="S" alignContent="start">
+    <div class="search">
+      <div class="select">
+        <Select placeholder="All automations" label="Automation" />
+      </div>
+      <div class="select">
+        <Select placeholder="Past 30 days" label="Date range" />
      </div>
-      {#if runHistory}
-        <Table
-          on:click={viewDetails}
-          schema={runHistorySchema}
-          allowSelectRows={false}
-          allowEditColumns={false}
-          allowEditRows={false}
-          data={runHistory}
-          {customRenderers}
-        />
-      {/if}
-    </Layout>
-  </Page>
+      <div class="select">
+        <Select placeholder="All status" label="Status" />
+      </div>
+    </div>
+    {#if runHistory}
+      <Table
+        on:click={viewDetails}
+        schema={runHistorySchema}
+        allowSelectRows={false}
+        allowEditColumns={false}
+        allowEditRows={false}
+        data={runHistory}
+        {customRenderers}
+      />
+    {/if}
+  </Layout>
  <div class="panel" class:panelShow={showPanel}>
    <HistoryDetailsPanel
      bind:history={selectedHistory}
@ -178,7 +163,7 @@
    display: none;
    right: 0;
    height: 100%;
-    width: 99%;
+    width: 100%;
  }

  .panelShow {
--- a/packages/builder/src/components/portal/overview/StatusRenderer.svelte
+++ b/packages/builder/src/components/portal/overview/StatusRenderer.svelte
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@ -36,10 +36,6 @@
        title: "Apps",
        href: "/builder/portal/apps",
      },
-      {
-        title: "Run History",
-        href: "/builder/portal/history",
-      },
    ]
    if (admin) {
      menu = menu.concat([
--- a/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte
@ -20,6 +20,7 @@
  import { AppStatus } from "constants"
  import AppLockModal from "components/common/AppLockModal.svelte"
  import EditableIcon from "components/common/EditableIcon.svelte"
+  import HistoryTab from "components/portal/overview/HistoryTab.svelte"
  import { checkIncomingDeploymentStatus } from "components/deploy/utils"
  import { onDestroy, onMount } from "svelte"

@ -97,7 +98,7 @@
      reviewPendingDeployments(deployments, newDeployments)
      return newDeployments
    } catch (err) {
-      notifications.error("Error fetching deployment history")
+      notifications.error("Error fetching deployment overview")
    }
  }

@ -209,10 +210,10 @@
            navigateTab={handleTabChange}
          />
        </Tab>
+        <Tab title="Automation History">
+          <HistoryTab appId={selectedApp?._id} />
+        </Tab>
        {#if false}
-          <Tab title="Automation History">
-            <div class="container">Automation History contents</div>
-          </Tab>
          <Tab title="Backups">
            <div class="container">Backups contents</div>
          </Tab>
--- a/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte
@ -135,7 +135,7 @@
        action={() => {
          navigateTab("Automation History")
        }}
-        dataCy={"automation-history"}
+        dataCy={"automation-overview"}
      >
        <div class="automation-content">
          <div class="automation-metrics">