feat(ui) - env changes

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx

@@ -8,7 +8,6 @@ import Period, { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from '
 import stl from './CustomMetricWidgetPreview.css';
 import { getChartFormatter } from 'Types/dashboard/helper'; 
 import { remove } from 'Duck/customMetrics';
-import { confirm } from 'UI/Confirmation';
 import DateRange from 'Shared/DateRange';
 import { edit } from 'Duck/customMetrics';
 
@@ -27,23 +26,21 @@ const customParams = rangeName => {
 
 interface Props {
   metric: any;
-  // loading?: boolean;
   data?: any;
   showSync?: boolean;
-  compare?: boolean;
-  // period?: any;
+  // compare?: boolean;
   onClickEdit?: (e) => void;
   remove: (id) => void;
   edit: (metric) => void;
 }
 function CustomMetricWidget(props: Props) {
-  const { metric, showSync, compare } = props;
+  const { metric, showSync } = props;
   const [loading, setLoading] = useState(false)
   const [data, setData] = useState<any>({ chart: [{}] })
   const [seriesMap, setSeriesMap] = useState<any>([]);
   const [period, setPeriod] = useState(Period({ rangeName: metric.rangeName, startDate: metric.startDate, endDate: metric.endDate }));
 
-  const colors = compare ? Styles.compareColors : Styles.colors;
+  const colors = Styles.customMetricColors;
   const params = customParams(period.rangeName)
   const gradientDef = Styles.gradientDef();
   const metricParams = { ...params, metricId: metric.metricId, viewType: 'lineChart' }
@@ -67,7 +64,6 @@ function CustomMetricWidget(props: Props) {
             }, []);
 
           setSeriesMap(namesMap);
-          
           setData(getChartFormatter(period)(data));
         }
       }).finally(() => setLoading(false));
@@ -105,14 +101,14 @@ function CustomMetricWidget(props: Props) {
                   data={ data }
                   margin={Styles.chartMargins}
                   syncId={ showSync ? "domainsErrors_4xx" : undefined }
-                  // onClick={clickHandler}
                 >
-                  <defs>
+                  {/* <defs>
                     <linearGradient id="colorCount" x1="0" y1="0" x2="0" y2="1">
-                      <stop offset="5%" stopColor={colors[4]} stopOpacity={ 0.9 } />
-                      <stop offset="95%" stopColor={colors[4]} stopOpacity={ 0.2 } />
+                      <stop offset="5%" stopColor={colors[1]} stopOpacity={ 1} />
+                      <stop offset="95%" stopColor={colors[2]} stopOpacity={ 1 } />
+                      <stop offset="95%" stopColor={colors[3]} stopOpacity={ 1 } />
                     </linearGradient>
-                  </defs>
+                  </defs> */}
                   <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
                   <XAxis
                     {...Styles.xaxis}
@@ -138,8 +134,8 @@ function CustomMetricWidget(props: Props) {
                       stroke={colors[index]}
                       fillOpacity={ 1 }
                       strokeWidth={ 2 }
-                      strokeOpacity={ 0.8 }
-                      fill="url(#colorCount)"
+                      strokeOpacity={ 1 }
+                      // fill="url(#colorCount)"
                       dot={false}
                     />
                   ))}
@@ -153,6 +149,4 @@ function CustomMetricWidget(props: Props) {
   );
 }
 
-export default connect(state => ({
-  // period: state.getIn(['dashboard', 'period']),
-}), { remove, edit })(CustomMetricWidget);
+export default connect(null, { remove, edit })(CustomMetricWidget);

frontend/app/components/Dashboard/Widgets/common/Styles.js

@@ -4,6 +4,7 @@ const colors = ['#3EAAAF', '#5FBABF', '#7BCBCF', '#96DCDF', '#ADDCDF'];
 const colorsx = ['#256669', '#38999e', '#3eaaaf', '#51b3b7', '#78c4c7', '#9fd5d7', '#c5e6e7'].reverse();
 const compareColors = ['#394EFF', '#4D5FFF', '#808DFF', '#B3BBFF', '#E5E8FF'];
 const compareColorsx = ["#222F99", "#2E3ECC", "#394EFF", "#6171FF", "#8895FF", "#B0B8FF", "#D7DCFF"].reverse();
+const customMetricColors = ['#3EAAAF', '#3EAAAF', '#394EFF'];
 
 const countView = count => {
   const isMoreThanK = count >= 1000;
@@ -11,6 +12,7 @@ const countView = count => {
 }
 
 export default {
+  customMetricColors,
   colors,
   colorsx,
   compareColors,

frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx

@@ -10,7 +10,7 @@ import cn from 'classnames';
 
 interface Props {
   metric: any;
-  editMetric: (metric) => void;
+  editMetric: (metric, shouldFetch?) => void;
   save: (metric) => Promise<void>;
   loading: boolean;
   addSeries: (series?) => void;
@@ -30,7 +30,7 @@ function CustomMetricForm(props: Props) {
     props.removeSeries(index);
   }
 
-  const write = ({ target: { value, name } }) => props.editMetric({ ...metric, [ name ]: value })
+  const write = ({ target: { value, name } }) => props.editMetric({ ...metric, [ name ]: value }, false);
 
   const changeConditionTab = (e, { name, value }) => {
     props.editMetric({[ 'type' ]: value });

frontend/env.js

@@ -5,13 +5,13 @@ require('dotenv').config()
 
 const oss = {
 	name: 'oss',
-	PRODUCTION: false,
+	PRODUCTION: true,
 	SENTRY_ENABLED: false,
 	SENTRY_URL: "",
 	CAPTCHA_ENABLED: process.env.CAPTCHA_ENABLED === 'true',
 	CAPTCHA_SITE_KEY: process.env.CAPTCHA_SITE_KEY,
 	ORIGIN: () => 'window.location.origin',
-	API_EDP: "https://foss.openreplay.com/api",
+	API_EDP: () => 'window.location.origin + "/api"',
 	ASSETS_HOST: () => 'window.location.origin + "/assets"',
 	VERSION: '1.5.0',
 	SOURCEMAP: true,