Fix DataSourceSelector and add history download (#66)

Author: vegito22

llmstack/base/flags.py

@@ -55,6 +55,9 @@ def get_flags(self):
             'CAN_ADD_TWILIO_INTERGRATION': [
                 Condition('can_add_twilio_integration', True),
             ],
+            'CAN_EXPORT_HISTORY' : [
+                Condition('can_export_history', False),
+            ]
         }
 
         return flags
@@ -209,4 +212,8 @@ def has_exceeded_app_create_quota(value, request=None, **kwargs):
 
 @conditions.register('can_add_twilio_integration')
 def can_add_twilio_integration(value, request=None, **kwargs):
-    return True
+    return True
+
+@conditions.register('can_export_history')
+def can_export_history(value, request=None, **kwargs):
+    return False

llmstack/client/src/components/apps/AppRunHistoryTimeline.jsx

@@ -33,6 +33,7 @@ import { ReactComponent as DiscordIcon } from "../../assets/images/icons/discord
 import { ReactComponent as SlackIcon } from "../../assets/images/icons/slack.svg";
 import "ace-builds/src-noconflict/mode-sh";
 import "ace-builds/src-noconflict/theme-chrome";
+import { profileFlagsState } from "../../data/atoms";
 
 const browserAndOSFromUACache = {};
 
@@ -300,6 +301,7 @@ const FilterBar = ({ apps, sessions, users, onFilter }) => {
 };
 
 export function AppRunHistoryTimeline(props) {
+  const profileFlags = useRecoilValue(profileFlagsState);
   const { filter, filteredColumns, showFilterBar } = props;
   const apps = useRecoilValue(appsState);
   const [rows, setRows] = useState([]);
@@ -452,6 +454,42 @@ export function AppRunHistoryTimeline(props) {
 
   return (
     <Grid container spacing={1}>
+      <Box sx={{ display: "flex", width: "100%", justifyContent: "end" }}>
+        <Button
+          disabled={profileFlags?.CAN_EXPORT_HISTORY !== true}
+          onClick={() => {
+            axios()
+              .post(
+                `/api/history/download`,
+                {
+                  ...filters,
+                },
+                {
+                  responseType: "blob",
+                },
+              )
+              .then((response) => {
+                const url = window.URL.createObjectURL(
+                  new Blob([response.data]),
+                );
+                const link = document.createElement("a");
+                const pageNumber = filters.page || 1;
+                link.href = url;
+                link.setAttribute(
+                  "download",
+                  `history-${moment().format(
+                    "YYYY-MM-DD HH:MM",
+                  )}-${pageNumber}.csv`,
+                );
+                document.body.appendChild(link);
+                link.click();
+              });
+          }}
+        >
+          Download CSV
+        </Button>
+      </Box>
+
       <TableContainer sx={{ padding: "10px 20px" }}>
         {showFilterBar && (
           <Box>

llmstack/client/src/components/datasource/DataSourceSelector.jsx

@@ -3,11 +3,8 @@ import { useRecoilValue } from "recoil";
 import { dataSourcesState, orgDataSourcesState } from "../../data/atoms";
 import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
 import { AddDataSourceModal } from "./AddDataSourceModal";
-import { Chip } from "@mui/material";
+import { Autocomplete, TextField } from "@mui/material";
 import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
-import MenuItem from "@mui/material/MenuItem";
-import Input from "@mui/material/Input";
 
 export function DataSourceSelector(props) {
   const dataSources = useRecoilValue(dataSourcesState);
@@ -24,43 +21,42 @@ export function DataSourceSelector(props) {
 
   return (
     <FormControl fullWidth>
-      <Select
-        sx={{ border: "1px solid #ddd", borderRadius: 1 }}
-        labelId="multiple-chip-label"
-        id="multiple-chip"
+      <Autocomplete
         multiple
+        id="datasource-selector"
+        options={[
+          ...uniqueDataSources,
+        ]}
+        getOptionLabel={(option) => {
+          const dataSource = uniqueDataSources.find(
+            (uniqueDataSource) => uniqueDataSource.uuid === option)
+
+          return dataSource ? dataSource.name : option.name ? option.name : option;
+        }}
+        isOptionEqualToValue={(option, value) => {
+          return option.uuid === value.uuid || option.uuid === value;
+        }}
         value={
           props.value
             ? typeof props.value === "string"
               ? [props.value]
               : props.value
             : []
         }
-        onChange={(event) => props.onChange(event.target.value)}
-        input={<Input id="select-multiple-chip" />}
-        renderValue={(selected) => (
-          <div>
-            {(typeof selected === "string" ? [selected] : selected).map(
-              (value) => (
-                <Chip
-                  key={value}
-                  label={
-                    uniqueDataSources.find((ds) => ds.uuid === value)?.name ||
-                    value
-                  }
-                  style={{ margin: 2, borderRadius: 5 }}
-                />
-              ),
-            )}
-          </div>
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            variant="standard"
+            label="Data Sources"
+            placeholder="Data Sources"
+          />
         )}
-      >
-        {uniqueDataSources.map((dataSource) => (
-          <MenuItem key={dataSource.uuid} value={dataSource.uuid}>
-            {dataSource.name}
-          </MenuItem>
-        ))}
-      </Select>
+        onChange={(event, value) => {
+          props.onChange(
+            value.map((dataSource) => dataSource?.uuid || dataSource),
+          );
+        }}
+      />
       <button
         onClick={() => setShowAddDataSourceModal(true)}
         style={{ backgroundColor: "#6287ac", color: "#fed766" }}

llmstack/processors/apis.py

@@ -1,9 +1,12 @@
 import asyncio
+from datetime import datetime
 import json
 import logging
 import uuid
 from collections import namedtuple
 from django.conf import settings
+from django.core.paginator import Paginator, EmptyPage
+from flags.state import flag_enabled
 
 from django.contrib.auth import authenticate
 from django.contrib.auth import login
@@ -389,6 +392,52 @@ def list(self, request):
             )
 
         return DRFResponse(response.data)
+    
+    def get_csv(self, queryset):
+        yield ','.join([
+            'Request UUID', 'App UUID', 'Session Key', 'Request User Email', 'Request IP', 'Request Location', 'Request User Agent', 'Request Content Type', 'Request Body', 'Response Body', 'Created At',
+        ]) + '\n'
+        for entry in queryset:
+            logger.info(entry)
+            yield ','.join([
+                entry.request_uuid, entry.app_uuid, entry.session_key if entry.session_key else '', entry.request_user_email, entry.request_ip, entry.request_location, entry.request_user_agent, entry.request_content_type, json.dumps(entry.request_body), json.dumps(entry.response_body), entry.created_at.strftime('%Y-%m-%d %H:%M:%S'),
+            ]) + '\n'
+        
+    def download(self, request):
+        if not flag_enabled('CAN_EXPORT_HISTORY', request=request):
+            return HttpResponseForbidden('You do not have permission to download history')
+        
+        app_uuid = request.data.get('app_uuid', None)
+        session_key = request.data.get('session_key', None)
+        request_user_email = request.data.get('request_user_email', None)
+        endpoint_uuid = request.data.get('endpoint_uuid', None)
+        page_number = request.data.get('page', 1)
+        
+        filters = {
+            'owner': request.user,
+        }
+        if app_uuid and app_uuid != 'null':
+            filters['app_uuid'] = app_uuid
+        if session_key and session_key != 'null':
+            filters['session_key'] = session_key
+        if request_user_email and request_user_email != 'null':
+            filters['request_user_email'] = request_user_email
+        if endpoint_uuid and endpoint_uuid != 'null':
+            filters['endpoint_uuid'] = endpoint_uuid
+        
+        queryset = RunEntry.objects.all().filter(**filters).order_by('-created_at')
+        paginator = Paginator(queryset, self.paginate_by)
+        try:
+            page = paginator.page(page_number)
+        except EmptyPage:
+            page = paginator.page(paginator.num_pages)
+        
+        response = StreamingHttpResponse(
+            streaming_content=self.get_csv(page), content_type='text/csv',
+        )
+        time_now = datetime.now().strftime('%Y-%m-%d')
+        response['Content-Disposition'] = f'attachment; filename="promptly_{time_now}_{page_number}.csv"'
+        return response
 
     def list_sessions(self, request):
         app_uuid = request.GET.get('app_uuid', None)

llmstack/processors/providers/twilio/create_message.py

@@ -92,4 +92,4 @@ def on_error(self, error: Any) -> None:
         return super().on_error(error)
 
     def get_bookkeeping_data(self) -> BookKeepingData:
-        return BookKeepingData(input=self._input, timestamp=time.time(), run_data={'twilio': {'requestor' : self._input._request.From}})
+        return BookKeepingData(input=self._input, timestamp=time.time(), run_data={'twilio': {'requestor' : self._input.to}})

llmstack/processors/urls.py

@@ -41,6 +41,9 @@
 
     # History
     path('api/history', apis.HistoryViewSet.as_view({'get': 'list'})),
+    
+    path('api/history/download', apis.HistoryViewSet.as_view({'post': 'download'})),
+    
     path(
         'api/history/sessions',
         apis.HistoryViewSet.as_view({'get': 'list_sessions'}),